We use cookies to ensure you get the best experience on our website
Home Explore Help
Sign In
mirror
/
golang-fave
mirror of https://github.com/vladimirok5959/golang-fave.git
2
0
Fork 0
Files Wiki
Browse Source

Bootstrap tmpl example

Vova Tkach 6 years ago
parent
81e49d95e7
commit
63621d27ff
5 changed files with 66 additions and 21 deletions
Split View Show Diff Stats
  1. 6 2
      frontend.go
  2. 8 0
      hosts/localhost/template/footer.html
  3. 23 1
      hosts/localhost/template/header.html
  4. 29 18
      hosts/localhost/template/index.html
  5. 0 0
      hosts/localhost/template/sidebar.html

+ 6 - 2
frontend.go
View File 

@@ -9,6 +9,7 @@ import (
 
 type TmplMenuItem struct {
 
 	Name string
 
 	Link string
 
+	Active bool
 
 }
 
 
 type TmplData struct {
 
@@ -29,6 +30,7 @@ func handleFrontEnd(e *wrapper.Wrapper) bool {
 
 	tmpl, err := template.ParseFiles(
 
 		e.DirVhostHome+"/template"+"/index.html",
 
 		e.DirVhostHome+"/template"+"/header.html",
 
+		e.DirVhostHome+"/template"+"/sidebar.html",
 
 		e.DirVhostHome+"/template"+"/footer.html",
 
 	)
 
 	if err != nil {
 
@@ -48,8 +50,10 @@ func handleFrontEnd(e *wrapper.Wrapper) bool {
 
 		MetaDescription: "Meta Description",
 
 
 		MenuItems: []TmplMenuItem{
 
-			{Name: "Menu Item 1", Link: "/#1"},
 
-			{Name: "Menu Item 2", Link: "/#2"},
 
+			{Name: "Home", Link: "/", Active: true},
 
+			{Name: "Item 1", Link: "/#1", Active: false},
 
+			{Name: "Item 2", Link: "/#2", Active: false},
 
+			{Name: "Item 3", Link: "/#3", Active: false},
 
 		},
 
 		SomeHtml: template.HTML("<div class=\"some-class\">DIV</div>"),
 
 	})

+ 8 - 0
hosts/localhost/template/footer.html
View File 

@@ -1,3 +1,11 @@
 
+			<div class="container pt-3 pb-3">
 
+				<hr>
 
+			</div>
 
+			<footer class="container">
 
+				<p class="float-right"><a href="#">Back to top</a></p>
 
+				<p>&copy; 2017-2018 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
 
+			</footer>
 
+		</main>
 
 		<!-- Optional JavaScript -->
 
 		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
 
 		<script src="{{$.PathSysJsJquery}}"></script>

+ 23 - 1
hosts/localhost/template/header.html
View File 

@@ -16,4 +16,26 @@
 
 
 		<link rel="shortcut icon" href="{{$.PathSysIcoFav}}" type="image/x-icon" />
 
 	</head>
 
-	<body>
 
+	<body class="pt-5">
 
+		<header>
 
+			<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
 
+				<a class="navbar-brand" href="/">{{$.MetaTitle}}</a>
 
+				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
 
+					<span class="navbar-toggler-icon"></span>
 
+				</button>
 
+				<div class="collapse navbar-collapse" id="navbarCollapse">
 
+					<ul class="navbar-nav mr-auto">
 
+						{{range $.MenuItems}}
 
+							<li class="nav-item{{if .Active}} active{{end}}">
 
+								<a class="nav-link" href="{{.Link}}">{{.Name}}</a>
 
+							</li>
 
+						{{end}}
 
+					</ul>
 
+					<form class="form-inline mt-2 mt-md-0">
 
+						<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
 
+						<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
 
+					</form>
 
+				</div>
 
+			</nav>
 
+		</header>
 
+		<main role="main" class="pt-2">

+ 29 - 18
hosts/localhost/template/index.html
View File 

@@ -1,22 +1,33 @@
 
 {{template "header.html" .}}
 
-<div class="container">
 
-	<h1>Hello, world!</h1>
 
-	<h2>{{$.MetaTitle}}</h2>
 
-	<div>
 
-		Index template<br />
 
-		{{$.PathSysIcoFav}}
 
-	</div>
 
-	<div>
 
-		<ul>
 
-			{{range $.MenuItems}}
 
-				<li>
 
-					<a href="{{.Link}}">{{.Name}} - {{$.MetaTitle}}</a>
 
-				</li>
 
-			{{end}}
 
-		</ul>
 
-	</div>
 
-	<div class="html-test">
 
-		{{$.SomeHtml}}
 
+<div class="container circles pt-4">
 
+	<div class="card-deck text-center">
 
+		<div class="card mb-4 box-shadow">
 
+			<div class="card-body">
 
+				<img class="rounded-circle mb-3" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="80%">
 
+				<h2>Heading</h2>
 
+				<p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
 
+				<p><a class="btn btn-secondary" href="#" role="button">View details</a></p>
 
+			</div>
 
+		</div>
 
+		<div class="card mb-4 box-shadow">
 
+			<div class="card-body">
 
+				<img class="rounded-circle mb-3" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="80%">
 
+				<h2>Heading</h2>
 
+				<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
 
+				<p><a class="btn btn-secondary" href="#" role="button">View details</a></p>
 
+			</div>
 
+		</div>
 
+		<div class="card mb-4 box-shadow">
 
+			<div class="card-body">
 
+				<img class="rounded-circle mb-3" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Generic placeholder image" width="80%">
 
+				<h2>Heading</h2>
 
+				<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
 
+				<p><a class="btn btn-secondary" href="#" role="button">View details</a></p>
 
+			</div>
 
+		</div>
 
 	</div>
 
 </div>
 
+<div class="container some-text pt-3">
 
+	Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
 
+</div>
 
 {{template "footer.html" .}}

+ 0 - 0
hosts/localhost/template/sidebar.html
View File