B: break up navigation.
This commit is contained in:
parent
a9d1d62df7
commit
791a00c695
|
|
@ -1,6 +1,8 @@
|
|||
package templates
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
|
||||
"git.preston-baxter.com/Preston_PLB/capstone/frontend-service/db/models"
|
||||
)
|
||||
|
||||
|
|
@ -37,78 +39,8 @@ templ DashboardNav(user *models.User) {
|
|||
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
||||
href="javascript:void(0)"
|
||||
>
|
||||
Tailwind Starter Kit
|
||||
{ user.Email }
|
||||
</a>
|
||||
<ul class="md:hidden items-center flex flex-wrap list-none">
|
||||
<li class="inline-block relative">
|
||||
<a
|
||||
class="text-blueGray-500 block py-1 px-3"
|
||||
href="#pablo"
|
||||
onclick="openDropdown(event,'notification-dropdown')"
|
||||
><i class="fas fa-bell"></i></a>
|
||||
<div
|
||||
class="hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
|
||||
style="min-width: 12rem;"
|
||||
id="notification-dropdown"
|
||||
>
|
||||
<a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Action</a><a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Another action</a><a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Something else here</a>
|
||||
<div class="h-0 my-2 border border-solid border-blueGray-100"></div>
|
||||
<a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Seprated link</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="inline-block relative">
|
||||
<a
|
||||
class="text-blueGray-500 block"
|
||||
href="#pablo"
|
||||
onclick="openDropdown(event,'user-responsive-dropdown')"
|
||||
>
|
||||
<div class="items-center flex">
|
||||
<span
|
||||
class="w-12 h-12 text-sm text-white bg-blueGray-200 inline-flex items-center justify-center rounded-full"
|
||||
>
|
||||
<img
|
||||
alt="..."
|
||||
class="w-full rounded-full align-middle border-none shadow-lg"
|
||||
src="./assets/img/team-1-800x800.jpg"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
<div
|
||||
class="hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
|
||||
style="min-width: 12rem;"
|
||||
id="user-responsive-dropdown"
|
||||
>
|
||||
<a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Action</a><a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Another action</a><a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Something else here</a>
|
||||
<div class="h-0 my-2 border border-solid border-blueGray-100"></div>
|
||||
<a
|
||||
href="#pablo"
|
||||
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700"
|
||||
>Seprated link</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div
|
||||
class="md:flex md:flex-col md:items-stretch md:opacity-100 md:relative md:mt-4 md:shadow-none shadow absolute top-0 left-0 right-0 z-40 overflow-y-auto overflow-x-hidden h-auto items-center flex-1 rounded hidden"
|
||||
id="example-collapse-sidebar"
|
||||
|
|
@ -122,7 +54,7 @@ templ DashboardNav(user *models.User) {
|
|||
class="md:block text-left md:pb-2 text-blueGray-600 mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
|
||||
href="javascript:void(0)"
|
||||
>
|
||||
Tailwind Starter Kit
|
||||
{ user.Email }
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-6/12 flex justify-end">
|
||||
|
|
@ -146,134 +78,39 @@ templ DashboardNav(user *models.User) {
|
|||
</div>
|
||||
</form>
|
||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none">
|
||||
<li class="items-center">
|
||||
<a
|
||||
class="text-pink-500 hover:text-pink-600 text-xs uppercase py-3 font-bold block"
|
||||
href="#/dashboard"
|
||||
>
|
||||
<i class="fas fa-tv opacity-75 mr-2 text-sm"></i>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="items-center">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="#/landing"
|
||||
>
|
||||
<i class="fas fa-newspaper text-blueGray-400 mr-2 text-sm"></i>
|
||||
Landing Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="items-center">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="#/profile"
|
||||
>
|
||||
<i class="fas fa-user-circle text-blueGray-400 mr-2 text-sm"></i>
|
||||
Profile Page
|
||||
</a>
|
||||
</li>
|
||||
<li class="items-center">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
|
||||
href="#/login"
|
||||
>
|
||||
<i class="fas fa-fingerprint text-blueGray-400 mr-2 text-sm"></i>
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
<li class="items-center">
|
||||
<a
|
||||
class="text-blueGray-300 text-xs uppercase py-3 font-bold block"
|
||||
href="#pablo"
|
||||
>
|
||||
<i
|
||||
class="fas fa-clipboard-list text-blueGray-300 mr-2 text-sm"
|
||||
></i>
|
||||
Register (soon)
|
||||
</a>
|
||||
</li>
|
||||
<li class="items-center">
|
||||
<a
|
||||
class="text-blueGray-300 text-xs uppercase py-3 font-bold block"
|
||||
href="#pablo"
|
||||
>
|
||||
<i class="fas fa-tools text-blueGray-300 mr-2 text-sm"></i>
|
||||
Settings (soon)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr class="my-4 md:min-w-full"/>
|
||||
<h6
|
||||
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
|
||||
>
|
||||
Documentation
|
||||
</h6>
|
||||
<ul
|
||||
class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4"
|
||||
>
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
href="#/documentation/styles"
|
||||
>
|
||||
<i
|
||||
class="fas fa-paint-brush mr-2 text-blueGray-400 text-base"
|
||||
></i>
|
||||
Styles
|
||||
</a>
|
||||
</li>
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
href="#/documentation/alerts"
|
||||
>
|
||||
<i class="fab fa-css3-alt mr-2 text-blueGray-400 text-base"></i>
|
||||
CSS Components
|
||||
</a>
|
||||
</li>
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
href="#/documentation/vue/alerts"
|
||||
>
|
||||
<i class="fab fa-vuejs mr-2 text-blueGray-400 text-base"></i>
|
||||
VueJS
|
||||
</a>
|
||||
</li>
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
href="#/documentation/react/alerts"
|
||||
>
|
||||
<i class="fab fa-react mr-2 text-blueGray-400 text-base"></i>
|
||||
React
|
||||
</a>
|
||||
</li>
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
href="#/documentation/angular/alerts"
|
||||
>
|
||||
<i class="fab fa-angular mr-2 text-blueGray-400 text-base"></i>
|
||||
Angular
|
||||
</a>
|
||||
</li>
|
||||
<li class="inline-flex">
|
||||
<a
|
||||
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
|
||||
href="#/documentation/javascript/alerts"
|
||||
>
|
||||
<i class="fab fa-js-square mr-2 text-blueGray-400 text-base"></i>
|
||||
Javascript
|
||||
</a>
|
||||
</li>
|
||||
@DashboardNavItem("fa-tv", "Dashboard", "#", true)
|
||||
@DashboardNavItem("fa-newspaper", "Home Page", "/", true)
|
||||
@DashboardNavItem("fa-user-circle", "Profile (SOON)", "#", false)
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
|
||||
templ DashboardNavItem(icon, name, link string, enabled bool) {
|
||||
<li class="items-center">
|
||||
<a
|
||||
if enabled {
|
||||
class="text-pink-500 hover:text-pink-600 text-xs uppercase py-3 font-bold block"
|
||||
href={ templ.URL(link) }
|
||||
} else {
|
||||
class="text-blueGray-300 text-xs uppercase py-3 font-bold block"
|
||||
href="#"
|
||||
}
|
||||
href="{ link }"
|
||||
>
|
||||
<i
|
||||
if enabled {
|
||||
class={ fmt.Sprintf("fas %s opacity-75 mr-2 text-sm", icon) }
|
||||
} else {
|
||||
class={ fmt.Sprintf("fas %s text-blueGray-300 mr-2 text-sm", icon) }
|
||||
}
|
||||
></i>
|
||||
{ name }
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
|
||||
//Break this up
|
||||
|
||||
templ DashboardContentNav(user *models.User) {
|
||||
|
|
@ -460,8 +297,6 @@ templ DashboardContent(user *models.User) {
|
|||
}
|
||||
|
||||
templ DashboardScript() {
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" charset="utf-8"></script>
|
||||
<script src="https://unpkg.com/@popperjs/core@2.9.1/dist/umd/popper.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript">
|
||||
function toggleNavbar(collapseID) {
|
||||
document.getElementById(collapseID).classList.toggle("hidden");
|
||||
|
|
@ -482,211 +317,5 @@ templ DashboardScript() {
|
|||
document.getElementById(dropdownID).classList.toggle("hidden");
|
||||
document.getElementById(dropdownID).classList.toggle("block");
|
||||
}
|
||||
|
||||
|
||||
(function() {
|
||||
/* Add current date to the footer */
|
||||
document.getElementById("javascript-date").innerHTML = new Date().getFullYear();
|
||||
/* Chart initialisations */
|
||||
/* Line Chart */
|
||||
var config = {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: new Date().getFullYear(),
|
||||
backgroundColor: "#4c51bf",
|
||||
borderColor: "#4c51bf",
|
||||
data: [65, 78, 66, 44, 56, 67, 75],
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: new Date().getFullYear() - 1,
|
||||
fill: false,
|
||||
backgroundColor: "#ed64a6",
|
||||
borderColor: "#ed64a6",
|
||||
data: [40, 68, 86, 74, 56, 60, 87]
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
title: {
|
||||
display: false,
|
||||
text: "Sales Charts",
|
||||
fontColor: "white"
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "white"
|
||||
},
|
||||
align: "end",
|
||||
position: "bottom"
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false
|
||||
},
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontColor: "rgba(255,255,255,.7)"
|
||||
},
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Month",
|
||||
fontColor: "white"
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
borderDash: [2],
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineColor: "rgba(0, 0, 0, 0)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2]
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
fontColor: "rgba(255,255,255,.7)"
|
||||
},
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Value",
|
||||
fontColor: "white"
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [3],
|
||||
borderDashOffset: [3],
|
||||
drawBorder: false,
|
||||
color: "rgba(255, 255, 255, 0.15)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
var ctx = document.getElementById("line-chart").getContext("2d");
|
||||
window.myLine = new Chart(ctx, config);
|
||||
|
||||
/* Bar Chart */
|
||||
config = {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July"
|
||||
],
|
||||
datasets: [
|
||||
{
|
||||
label: new Date().getFullYear(),
|
||||
backgroundColor: "#ed64a6",
|
||||
borderColor: "#ed64a6",
|
||||
data: [30, 78, 56, 34, 100, 45, 13],
|
||||
fill: false,
|
||||
barThickness: 8
|
||||
},
|
||||
{
|
||||
label: new Date().getFullYear() - 1,
|
||||
fill: false,
|
||||
backgroundColor: "#4c51bf",
|
||||
borderColor: "#4c51bf",
|
||||
data: [27, 68, 86, 74, 10, 4, 87],
|
||||
barThickness: 8
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
title: {
|
||||
display: false,
|
||||
text: "Orders Chart"
|
||||
},
|
||||
tooltips: {
|
||||
mode: "index",
|
||||
intersect: false
|
||||
},
|
||||
hover: {
|
||||
mode: "nearest",
|
||||
intersect: true
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: "rgba(0,0,0,.4)"
|
||||
},
|
||||
align: "end",
|
||||
position: "bottom"
|
||||
},
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: "Month"
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [2],
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0.3)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2]
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
scaleLabel: {
|
||||
display: false,
|
||||
labelString: "Value"
|
||||
},
|
||||
gridLines: {
|
||||
borderDash: [2],
|
||||
drawBorder: false,
|
||||
borderDashOffset: [2],
|
||||
color: "rgba(33, 37, 41, 0.2)",
|
||||
zeroLineColor: "rgba(33, 37, 41, 0.15)",
|
||||
zeroLineBorderDash: [2],
|
||||
zeroLineBorderDashOffset: [2]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
ctx = document.getElementById("bar-chart").getContext("2d");
|
||||
window.myBar = new Chart(ctx, config);
|
||||
})();
|
||||
</script>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ templ Head(msg string) {
|
|||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="theme-color" content="#000000"/>
|
||||
<meta name="view-transition" content="same-origin"/>
|
||||
<link rel="shortcut icon" href="./assets/img/favicon.ico"/>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
|
|
|
|||
Loading…
Reference in New Issue