B: break up navigation.
This commit is contained in:
parent
a9d1d62df7
commit
791a00c695
|
|
@ -1,6 +1,8 @@
|
||||||
package templates
|
package templates
|
||||||
|
|
||||||
import (
|
import (
|
||||||
|
"fmt"
|
||||||
|
|
||||||
"git.preston-baxter.com/Preston_PLB/capstone/frontend-service/db/models"
|
"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"
|
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)"
|
href="javascript:void(0)"
|
||||||
>
|
>
|
||||||
Tailwind Starter Kit
|
{ user.Email }
|
||||||
</a>
|
</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
|
<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"
|
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"
|
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"
|
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)"
|
href="javascript:void(0)"
|
||||||
>
|
>
|
||||||
Tailwind Starter Kit
|
{ user.Email }
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-6/12 flex justify-end">
|
<div class="w-6/12 flex justify-end">
|
||||||
|
|
@ -146,134 +78,39 @@ templ DashboardNav(user *models.User) {
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<ul class="md:flex-col md:min-w-full flex flex-col list-none">
|
<ul class="md:flex-col md:min-w-full flex flex-col list-none">
|
||||||
<li class="items-center">
|
@DashboardNavItem("fa-tv", "Dashboard", "#", true)
|
||||||
<a
|
@DashboardNavItem("fa-newspaper", "Home Page", "/", true)
|
||||||
class="text-pink-500 hover:text-pink-600 text-xs uppercase py-3 font-bold block"
|
@DashboardNavItem("fa-user-circle", "Profile (SOON)", "#", false)
|
||||||
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>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</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
|
//Break this up
|
||||||
|
|
||||||
templ DashboardContentNav(user *models.User) {
|
templ DashboardContentNav(user *models.User) {
|
||||||
|
|
@ -460,8 +297,6 @@ templ DashboardContent(user *models.User) {
|
||||||
}
|
}
|
||||||
|
|
||||||
templ DashboardScript() {
|
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">
|
<script type="text/javascript">
|
||||||
function toggleNavbar(collapseID) {
|
function toggleNavbar(collapseID) {
|
||||||
document.getElementById(collapseID).classList.toggle("hidden");
|
document.getElementById(collapseID).classList.toggle("hidden");
|
||||||
|
|
@ -482,211 +317,5 @@ templ DashboardScript() {
|
||||||
document.getElementById(dropdownID).classList.toggle("hidden");
|
document.getElementById(dropdownID).classList.toggle("hidden");
|
||||||
document.getElementById(dropdownID).classList.toggle("block");
|
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>
|
</script>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ templ Head(msg string) {
|
||||||
<meta charset="utf-8"/>
|
<meta charset="utf-8"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||||
<meta name="theme-color" content="#000000"/>
|
<meta name="theme-color" content="#000000"/>
|
||||||
|
<meta name="view-transition" content="same-origin"/>
|
||||||
<link rel="shortcut icon" href="./assets/img/favicon.ico"/>
|
<link rel="shortcut icon" href="./assets/img/favicon.ico"/>
|
||||||
<link
|
<link
|
||||||
rel="apple-touch-icon"
|
rel="apple-touch-icon"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue