Switch to Bulma.

This commit is contained in:
mikestefanello 2021-12-03 08:49:07 -05:00
parent 3c2c698269
commit 869fa82f14
6 changed files with 41 additions and 39 deletions

View file

@ -12,6 +12,7 @@ func (a *About) Get(c echo.Context) error {
p := NewPage(c) p := NewPage(c)
p.Layout = "main" p.Layout = "main"
p.Name = "about" p.Name = "about"
p.Title = "About"
p.Data = "This is the about page" p.Data = "This is the about page"
return a.RenderPage(c, p) return a.RenderPage(c, p)

View file

@ -14,6 +14,7 @@ func (a *Contact) Get(c echo.Context) error {
p := NewPage(c) p := NewPage(c)
p.Layout = "main" p.Layout = "main"
p.Name = "contact" p.Name = "contact"
p.Title = "Contact us"
p.Data = "This is the contact page" p.Data = "This is the contact page"
return a.RenderPage(c, p) return a.RenderPage(c, p)
} }

View file

@ -50,7 +50,7 @@ func File(filepath string) string {
func Link(url, text, currentPath string, classes ...string) template.HTML { func Link(url, text, currentPath string, classes ...string) template.HTML {
if currentPath == url { if currentPath == url {
classes = append(classes, "active") classes = append(classes, "is-active")
} }
html := fmt.Sprintf(`<a class="%s" href="%s">%s</a>`, strings.Join(classes, " "), url, text) html := fmt.Sprintf(`<a class="%s" href="%s">%s</a>`, strings.Join(classes, " "), url, text)

View file

@ -14,5 +14,7 @@
{{end}} {{end}}
{{define "message"}} {{define "message"}}
<div class="alert alert-{{.Type}}">{{.Text}}</div> <article class="message is-{{.Type}}">
<div class="message-body">{{.Text}}</div>
</article>
{{end}} {{end}}

View file

@ -5,45 +5,33 @@
<title>{{ .AppName }}{{ if .Title }} | {{ .Title }}{{ end }}</title> <title>{{ .AppName }}{{ if .Title }} | {{ .Title }}{{ end }}</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootswatch/4.5.2/sandstone/bootstrap.min.css" media="screen" id="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head> </head>
<body> <body>
<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary"> <nav class="navbar is-dark">
<div class="container"> <div class="container">
<div href="#" class="navbar-brand">{{ .AppName }}</div> <div class="navbar-brand">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <a href="{{call .Reverse "home"}}" class="navbar-item">{{.AppName}}</a>
<span class="navbar-toggler-icon"></span> </div>
</button> <div id="navbarMenu" class="navbar-menu">
<div class="collapse navbar-collapse" id="navbarResponsive"> <div class="navbar-end">
<ul class="navbar-nav"> {{link (call .Reverse "home") "Home" .Path "navbar-item"}}
<li class="nav-item"> {{link (call .Reverse "about") "About" .Path "navbar-item"}}
{{link (call .Reverse "home") "Home" .Path "nav-link"}} {{link (call .Reverse "contact") "Contact" .Path "navbar-item"}}
</li> </div>
<li class="nav-item"> </div>
{{link (call .Reverse "about") "About" .Path "nav-link"}}
</li>
<li class="nav-item">
{{link (call .Reverse "contact") "Contact" .Path "nav-link"}}
</li>
</ul>
</div> </div>
</div> </nav>
</div>
<div class="container" style="margin-top:80px"> <section class="section">
<div class="row"> <div class="container">
<div class="col-12"> {{- if .Title}}
{{ if .Title }} <h1 class="title">{{.Title}}</h1>
<h2>{{ .Title }}</h2> {{- end}}
{{ end }}
{{ template "messages" . }} {{template "messages" .}}
{{ template "content" . }} {{template "content" .}}
</div> </div>
</div> </section>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body> </body>
</html> </html>

View file

@ -1,8 +1,18 @@
{{define "content"}} {{define "content"}}
<form method="POST"> <form method="POST">
<label for="message">Message</label> <div class="field">
<textarea id="message"></textarea> <label class="label">Message</label>
<input type="submit" value="Send"/> <div class="control">
<textarea class="textarea" placeholder="Textarea"></textarea>
</div>
</div>
<div class="field is-grouped">
<div class="control">
<button class="button is-link">Submit</button>
</div>
</div>
{{template "csrf" .}} {{template "csrf" .}}
</form> </form>
{{end}} {{end}}