Browse Source

Front-end better breadcrambs

Vova Tkach 5 years ago
parent
commit
ec03a05718

+ 44 - 0
assets/template/header_html_file.go

@@ -109,6 +109,50 @@ var VarHeaderHtmlFile = []byte(`<!doctype html>
 						</h1>
 					</div>
 				</div>
+				<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-cats">
+					<div class="container">
+						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+							<span class="navbar-toggler-icon"></span>
+						</button>
+						<div class="collapse navbar-collapse" id="navbarSupportedContent">
+							<ul class="navbar-nav mr-auto">
+							{{range $.Data.Shop.Categories 1}}
+								<li class="nav-item dropdown">
+									<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{.Name}}</a>
+									<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+										<a class="dropdown-item" href="{{.Permalink}}">All products</a>
+										<div class="dropdown-divider"></div>
+										<a class="dropdown-item" href="#">Sub category 1</a>
+										<a class="dropdown-item" href="#">Sub category 2</a>
+									</div>
+								</li>
+							{{end}}
+							</ul>
+						</div>
+					</div>
+				</nav>
+				{{if or (eq $.Data.Module "shop") (eq $.Data.Module "shop-category") (eq $.Data.Module "shop-product")}}
+					<div class="container clear-top pt-4">
+						<nav aria-label="breadcrumb">
+							<ol class="breadcrumb mb-0">
+								{{if eq $.Data.Module "shop"}}
+									<li class="breadcrumb-item">Shop</li>
+								{{else}}
+									<li class="breadcrumb-item"><a href="/shop/">Shop</a></li>
+								{{end}}
+								{{if eq $.Data.Module "shop-category"}}
+									<li class="breadcrumb-item">{{$.Data.Shop.Category.Name}}</li>
+								{{end}}
+								{{if eq $.Data.Module "shop-product"}}
+									{{if $.Data.Shop.Product.Category.Id}}
+										<li class="breadcrumb-item"><a href="{{$.Data.Shop.Product.Category.Permalink}}">{{$.Data.Shop.Product.Category.Name}}</a></li>
+									{{end}}
+									<li class="breadcrumb-item active">{{$.Data.Shop.Product.Name}}</li>
+								{{end}}
+							</ol>
+						</nav>
+					</div>
+				{{end}}
 				<div class="container clear-top">
 					<div class="row pt-4">
 						{{if or (eq $.Data.Module "shop") (eq $.Data.Module "shop-category")}}

+ 0 - 7
assets/template/shop_category_html_file.go

@@ -1,13 +1,6 @@
 package template
 
 var VarShopCategoryHtmlFile = []byte(`{{template "header.html" .}}
-<div class="card mb-4">
-	<div class="post">
-		<div class="card-body">
-			<b>Category:</b> {{$.Data.Shop.Category.Name}}
-		</div>
-	</div>
-</div>
 <div class="mb-4">
 	{{if $.Data.Shop.HaveProducts}}
 		<div class="grid-products">

+ 0 - 9
assets/template/shop_product_html_file.go

@@ -1,15 +1,6 @@
 package template
 
 var VarShopProductHtmlFile = []byte(`{{template "header.html" .}}
-<nav aria-label="breadcrumb">
-	<ol class="breadcrumb">
-		<li class="breadcrumb-item"><a href="/shop/">Shop</a></li>
-		{{if $.Data.Shop.Product.Category.Id}}
-			<li class="breadcrumb-item"><a href="{{$.Data.Shop.Product.Category.Permalink}}">{{$.Data.Shop.Product.Category.Name}}</a></li>
-		{{end}}
-		<li class="breadcrumb-item active"><a href="{{$.Data.Shop.Product.Permalink}}">{{$.Data.Shop.Product.Name}}</a></li>
-	</ol>
-</nav>
 <div class="card mb-4">
 	<div class="card-body product-full">
 		<h2 class="card-title">{{$.Data.Shop.Product.Name}}</h2>

+ 4 - 0
assets/template/styles_css_file.go

@@ -1243,4 +1243,8 @@ footer {
 		border: 1px solid #dee2e6;
 		padding: .75rem;
 	}
+}
+
+.fixed-top-bar .navbar.navbar-cats {
+	position: static;
 }`)

+ 44 - 0
hosts/localhost/template/header.html

@@ -107,6 +107,50 @@
 						</h1>
 					</div>
 				</div>
+				<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-cats">
+					<div class="container">
+						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+							<span class="navbar-toggler-icon"></span>
+						</button>
+						<div class="collapse navbar-collapse" id="navbarSupportedContent">
+							<ul class="navbar-nav mr-auto">
+							{{range $.Data.Shop.Categories 1}}
+								<li class="nav-item dropdown">
+									<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{.Name}}</a>
+									<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+										<a class="dropdown-item" href="{{.Permalink}}">All products</a>
+										<div class="dropdown-divider"></div>
+										<a class="dropdown-item" href="#">Sub category 1</a>
+										<a class="dropdown-item" href="#">Sub category 2</a>
+									</div>
+								</li>
+							{{end}}
+							</ul>
+						</div>
+					</div>
+				</nav>
+				{{if or (eq $.Data.Module "shop") (eq $.Data.Module "shop-category") (eq $.Data.Module "shop-product")}}
+					<div class="container clear-top pt-4">
+						<nav aria-label="breadcrumb">
+							<ol class="breadcrumb mb-0">
+								{{if eq $.Data.Module "shop"}}
+									<li class="breadcrumb-item">Shop</li>
+								{{else}}
+									<li class="breadcrumb-item"><a href="/shop/">Shop</a></li>
+								{{end}}
+								{{if eq $.Data.Module "shop-category"}}
+									<li class="breadcrumb-item">{{$.Data.Shop.Category.Name}}</li>
+								{{end}}
+								{{if eq $.Data.Module "shop-product"}}
+									{{if $.Data.Shop.Product.Category.Id}}
+										<li class="breadcrumb-item"><a href="{{$.Data.Shop.Product.Category.Permalink}}">{{$.Data.Shop.Product.Category.Name}}</a></li>
+									{{end}}
+									<li class="breadcrumb-item active">{{$.Data.Shop.Product.Name}}</li>
+								{{end}}
+							</ol>
+						</nav>
+					</div>
+				{{end}}
 				<div class="container clear-top">
 					<div class="row pt-4">
 						{{if or (eq $.Data.Module "shop") (eq $.Data.Module "shop-category")}}

+ 0 - 7
hosts/localhost/template/shop-category.html

@@ -1,11 +1,4 @@
 {{template "header.html" .}}
-<div class="card mb-4">
-	<div class="post">
-		<div class="card-body">
-			<b>Category:</b> {{$.Data.Shop.Category.Name}}
-		</div>
-	</div>
-</div>
 <div class="mb-4">
 	{{if $.Data.Shop.HaveProducts}}
 		<div class="grid-products">

+ 0 - 9
hosts/localhost/template/shop-product.html

@@ -1,13 +1,4 @@
 {{template "header.html" .}}
-<nav aria-label="breadcrumb">
-	<ol class="breadcrumb">
-		<li class="breadcrumb-item"><a href="/shop/">Shop</a></li>
-		{{if $.Data.Shop.Product.Category.Id}}
-			<li class="breadcrumb-item"><a href="{{$.Data.Shop.Product.Category.Permalink}}">{{$.Data.Shop.Product.Category.Name}}</a></li>
-		{{end}}
-		<li class="breadcrumb-item active"><a href="{{$.Data.Shop.Product.Permalink}}">{{$.Data.Shop.Product.Name}}</a></li>
-	</ol>
-</nav>
 <div class="card mb-4">
 	<div class="card-body product-full">
 		<h2 class="card-title">{{$.Data.Shop.Product.Name}}</h2>

+ 4 - 0
hosts/localhost/template/styles.css

@@ -1242,3 +1242,7 @@ footer {
 		padding: .75rem;
 	}
 }
+
+.fixed-top-bar .navbar.navbar-cats {
+	position: static;
+}