panel: Make menu collapsible
This commit makes the top menu collapsible on all pages.
This commit is contained in:
Tom Wiesing
parent
f2480cb9a4
commit
058875bcd9
28 changed files with 325 additions and 179 deletions
|
|
@ -18,6 +18,7 @@ type MenuItem struct {
|
||||||
Title string
|
Title string
|
||||||
Path template.URL
|
Path template.URL
|
||||||
Active bool // Active, only used for tabs and crumbs
|
Active bool // Active, only used for tabs and crumbs
|
||||||
|
Sticky bool // Sticky, and do not collapse when collapsing the menu (ignored for tabs and crumbs)
|
||||||
|
|
||||||
Priority MenuPriority
|
Priority MenuPriority
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -31,8 +31,10 @@ type Routes struct {
|
||||||
// Internal implies MatchAllDomains.
|
// Internal implies MatchAllDomains.
|
||||||
Internal bool
|
Internal bool
|
||||||
|
|
||||||
// MenuTitle and MenuPriority return the priority and title of this menu item
|
// MenuTitle, MenuSticky and MenuPriority return the priority, sticky and title of this menu item
|
||||||
|
// see MenuItem for details
|
||||||
MenuTitle string
|
MenuTitle string
|
||||||
|
MenuSticky bool
|
||||||
MenuPriority MenuPriority
|
MenuPriority MenuPriority
|
||||||
|
|
||||||
// Exact indicates that only the exact prefix, as opposed to any sub-paths, are matched.
|
// Exact indicates that only the exact prefix, as opposed to any sub-paths, are matched.
|
||||||
|
|
|
||||||
|
|
@ -12,30 +12,30 @@ const Public = "/⛰/"
|
||||||
|
|
||||||
// AssetsDefault contains assets for the 'Default' entrypoint.
|
// AssetsDefault contains assets for the 'Default' entrypoint.
|
||||||
var AssetsDefault = Assets{
|
var AssetsDefault = Assets{
|
||||||
Scripts: `<script type="module" src="/⛰/Default.46ce540b.js"></script><script src="/⛰/Default.69ba5e86.js" nomodule defer></script><script type="module" src="/⛰/Default.68829c56.js"></script><script src="/⛰/Default.5dd67eb3.js" nomodule defer></script>`,
|
Scripts: `<script type="module" src="/⛰/Default.3fbac1ee.js"></script><script src="/⛰/Default.566ff7d3.js" nomodule defer></script><script type="module" src="/⛰/Default.68829c56.js"></script><script src="/⛰/Default.5dd67eb3.js" nomodule defer></script>`,
|
||||||
Styles: `<link rel="stylesheet" href="/⛰/Default.75b6a6d8.css"><link rel="stylesheet" href="/⛰/Default.749670b3.css">`,
|
Styles: `<link rel="stylesheet" href="/⛰/Default.37843a0d.css"><link rel="stylesheet" href="/⛰/Default.749670b3.css">`,
|
||||||
}
|
}
|
||||||
|
|
||||||
// AssetsUser contains assets for the 'User' entrypoint.
|
// AssetsUser contains assets for the 'User' entrypoint.
|
||||||
var AssetsUser = Assets{
|
var AssetsUser = Assets{
|
||||||
Scripts: `<script type="module" src="/⛰/Default.46ce540b.js"></script><script src="/⛰/Default.69ba5e86.js" nomodule defer></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script src="/⛰/User.d3b2edc7.js" nomodule defer></script>`,
|
Scripts: `<script type="module" src="/⛰/Default.3fbac1ee.js"></script><script src="/⛰/Default.566ff7d3.js" nomodule defer></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script src="/⛰/User.d3b2edc7.js" nomodule defer></script>`,
|
||||||
Styles: `<link rel="stylesheet" href="/⛰/Default.75b6a6d8.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css">`,
|
Styles: `<link rel="stylesheet" href="/⛰/Default.37843a0d.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css">`,
|
||||||
}
|
}
|
||||||
|
|
||||||
// AssetsAdmin contains assets for the 'Admin' entrypoint.
|
// AssetsAdmin contains assets for the 'Admin' entrypoint.
|
||||||
var AssetsAdmin = Assets{
|
var AssetsAdmin = Assets{
|
||||||
Scripts: `<script nomodule defer src="/⛰/User.d3b2edc7.js"></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script type="module" src="/⛰/Default.46ce540b.js"></script><script src="/⛰/Default.69ba5e86.js" nomodule defer></script><script type="module" src="/⛰/Admin.2a36863a.js"></script><script src="/⛰/Admin.f197eb04.js" nomodule defer></script>`,
|
Scripts: `<script nomodule defer src="/⛰/User.d3b2edc7.js"></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script type="module" src="/⛰/Default.3fbac1ee.js"></script><script src="/⛰/Default.566ff7d3.js" nomodule defer></script><script type="module" src="/⛰/Admin.2a36863a.js"></script><script src="/⛰/Admin.f197eb04.js" nomodule defer></script>`,
|
||||||
Styles: `<link rel="stylesheet" href="/⛰/Default.75b6a6d8.css"><link rel="stylesheet" href="/⛰/User.1664d889.css"><link rel="stylesheet" href="/⛰/Admin.9235a6f6.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/Admin.d1020143.css">`,
|
Styles: `<link rel="stylesheet" href="/⛰/Default.37843a0d.css"><link rel="stylesheet" href="/⛰/User.1664d889.css"><link rel="stylesheet" href="/⛰/Admin.9235a6f6.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/Admin.d1020143.css">`,
|
||||||
}
|
}
|
||||||
|
|
||||||
// AssetsAdminProvision contains assets for the 'AdminProvision' entrypoint.
|
// AssetsAdminProvision contains assets for the 'AdminProvision' entrypoint.
|
||||||
var AssetsAdminProvision = Assets{
|
var AssetsAdminProvision = Assets{
|
||||||
Scripts: `<script nomodule defer src="/⛰/User.d3b2edc7.js"></script><script nomodule defer src="/⛰/Admin.f197eb04.js"></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script type="module" src="/⛰/Admin.2a36863a.js"></script><script type="module" src="/⛰/Default.46ce540b.js"></script><script src="/⛰/Default.69ba5e86.js" nomodule defer></script><script type="module" src="/⛰/AdminProvision.994883f5.js"></script><script src="/⛰/AdminProvision.5f2c7fe4.js" nomodule defer></script>`,
|
Scripts: `<script nomodule defer src="/⛰/User.d3b2edc7.js"></script><script nomodule defer src="/⛰/Admin.f197eb04.js"></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script type="module" src="/⛰/Admin.2a36863a.js"></script><script type="module" src="/⛰/Default.3fbac1ee.js"></script><script src="/⛰/Default.566ff7d3.js" nomodule defer></script><script type="module" src="/⛰/AdminProvision.994883f5.js"></script><script src="/⛰/AdminProvision.5f2c7fe4.js" nomodule defer></script>`,
|
||||||
Styles: `<link rel="stylesheet" href="/⛰/Default.75b6a6d8.css"><link rel="stylesheet" href="/⛰/Admin.d1020143.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css"><link rel="stylesheet" href="/⛰/Admin.9235a6f6.css"><link rel="stylesheet" href="/⛰/AdminProvision.8569d237.css">`,
|
Styles: `<link rel="stylesheet" href="/⛰/Default.37843a0d.css"><link rel="stylesheet" href="/⛰/Admin.d1020143.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css"><link rel="stylesheet" href="/⛰/Admin.9235a6f6.css"><link rel="stylesheet" href="/⛰/AdminProvision.8569d237.css">`,
|
||||||
}
|
}
|
||||||
|
|
||||||
// AssetsAdminRebuild contains assets for the 'AdminRebuild' entrypoint.
|
// AssetsAdminRebuild contains assets for the 'AdminRebuild' entrypoint.
|
||||||
var AssetsAdminRebuild = Assets{
|
var AssetsAdminRebuild = Assets{
|
||||||
Scripts: `<script nomodule defer src="/⛰/User.d3b2edc7.js"></script><script nomodule defer src="/⛰/Admin.f197eb04.js"></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script type="module" src="/⛰/Admin.2a36863a.js"></script><script type="module" src="/⛰/Default.46ce540b.js"></script><script src="/⛰/Default.69ba5e86.js" nomodule defer></script><script type="module" src="/⛰/AdminRebuild.5b253105.js"></script><script src="/⛰/AdminRebuild.bd32e5c4.js" nomodule defer></script>`,
|
Scripts: `<script nomodule defer src="/⛰/User.d3b2edc7.js"></script><script nomodule defer src="/⛰/Admin.f197eb04.js"></script><script type="module" src="/⛰/User.67ac1e81.js"></script><script type="module" src="/⛰/Admin.2a36863a.js"></script><script type="module" src="/⛰/Default.3fbac1ee.js"></script><script src="/⛰/Default.566ff7d3.js" nomodule defer></script><script type="module" src="/⛰/AdminRebuild.5b253105.js"></script><script src="/⛰/AdminRebuild.bd32e5c4.js" nomodule defer></script>`,
|
||||||
Styles: `<link rel="stylesheet" href="/⛰/Default.75b6a6d8.css"><link rel="stylesheet" href="/⛰/Admin.d1020143.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css"><link rel="stylesheet" href="/⛰/Admin.9235a6f6.css"><link rel="stylesheet" href="/⛰/AdminRebuild.e554824e.css">`,
|
Styles: `<link rel="stylesheet" href="/⛰/Default.37843a0d.css"><link rel="stylesheet" href="/⛰/Admin.d1020143.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css"><link rel="stylesheet" href="/⛰/Admin.9235a6f6.css"><link rel="stylesheet" href="/⛰/AdminRebuild.e554824e.css">`,
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
1
internal/dis/component/server/assets/dist/Default.37843a0d.css.map
vendored
Normal file
1
internal/dis/component/server/assets/dist/Default.37843a0d.css.map
vendored
Normal file
File diff suppressed because one or more lines are too long
2
internal/dis/component/server/assets/dist/Default.3fbac1ee.js
vendored
Normal file
2
internal/dis/component/server/assets/dist/Default.3fbac1ee.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
const e="onorientationchange"in window?"orientationchange":"resize";document.querySelectorAll(".pure-toggle-menu").forEach(t=>{let n=t.querySelector(".toggle");if(!n){console.warn("'.pure-toggle-menu' without '.toggle'");return}let o=()=>{t.classList.toggle("closed"),n.classList.toggle("x")};n.addEventListener("click",e=>{e.preventDefault(),o()}),window.addEventListener(e,()=>{t.classList.contains("closed")||o()})});
|
||||||
|
//# sourceMappingURL=Default.3fbac1ee.js.map
|
||||||
1
internal/dis/component/server/assets/dist/Default.3fbac1ee.js.map
vendored
Normal file
1
internal/dis/component/server/assets/dist/Default.3fbac1ee.js.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"mappings":"AEEA,MAAM,EAAuB,wBAAyB,OAAU,oBAAsB,SAEtF,SAAS,gBAAA,CAAiB,qBAAqB,OAAA,CAAQ,AAAC,IACpD,IAAM,EAAS,EAAK,aAAA,CAAc,WAClC,GAAI,CAAC,EAAQ,CACT,QAAQ,IAAA,CAAK,yCACb,MACJ,CAEA,IAAM,EAAa,KACf,EAAK,SAAA,CAAU,MAAA,CAAO,UACtB,EAAO,SAAA,CAAU,MAAA,CAAO,IAC5B,EAEA,EAAO,gBAAA,CAAiB,QAAS,AAAC,IAC9B,EAAE,cAAF,GACA,GACJ,GAEA,OAAO,gBAAA,CAAiB,EAAqB,KACrC,EAAK,SAAA,CAAU,QAAA,CAAS,WAC5B,GACJ,EACJ","sources":["<anon>","src/base/index.ts","src/lib/pure-toggle-menu/index.ts"],"sourcesContent":["\n\n\nconst $c9fa5a8be4dbc78e$var$WINDOW_CHANGE_EVENT = \"onorientationchange\" in window ? \"orientationchange\" : \"resize\";\ndocument.querySelectorAll(\".pure-toggle-menu\").forEach((menu)=>{\n const toggle = menu.querySelector(\".toggle\");\n if (!toggle) {\n console.warn(\"'.pure-toggle-menu' without '.toggle'\");\n return;\n }\n const toggleMenu = ()=>{\n menu.classList.toggle(\"closed\");\n toggle.classList.toggle(\"x\");\n };\n toggle.addEventListener(\"click\", (e)=>{\n e.preventDefault();\n toggleMenu();\n });\n window.addEventListener($c9fa5a8be4dbc78e$var$WINDOW_CHANGE_EVENT, ()=>{\n if (menu.classList.contains(\"closed\")) return;\n toggleMenu();\n });\n});\n\n\n\n\n\n//# sourceMappingURL=Default.3fbac1ee.js.map\n","import 'purecss/build/pure.css'\nimport 'purecss/build/grids-responsive.css'\n\nimport '~/src/lib/pure-toggle-menu'\nimport './index.css'","import './index.css';\n\nconst WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';\n\ndocument.querySelectorAll('.pure-toggle-menu').forEach((menu) => {\n const toggle = menu.querySelector('.toggle');\n if (!toggle) {\n console.warn(\"'.pure-toggle-menu' without '.toggle'\");\n return;\n }\n\n const toggleMenu = () => {\n menu.classList.toggle('closed');\n toggle.classList.toggle('x');\n };\n\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n toggleMenu();\n });\n\n window.addEventListener(WINDOW_CHANGE_EVENT, () => {\n if (menu.classList.contains('closed')) return;\n toggleMenu();\n });\n});"],"names":["$c9fa5a8be4dbc78e$var$WINDOW_CHANGE_EVENT","window","document","querySelectorAll","forEach","menu","toggle","querySelector","console","warn","toggleMenu","classList","addEventListener","e","preventDefault","contains"],"version":3,"file":"Default.3fbac1ee.js.map","sourceRoot":"../"}
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
|
|
||||||
//# sourceMappingURL=Default.46ce540b.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"mappings":"","sources":["src/base/index.ts"],"sourcesContent":["import 'purecss/build/pure.css'\nimport 'purecss/build/grids-responsive.css'\n\nimport './index.css'\n"],"names":[],"version":3,"file":"Default.46ce540b.js.map","sourceRoot":"../"}
|
|
||||||
2
internal/dis/component/server/assets/dist/Default.566ff7d3.js
vendored
Normal file
2
internal/dis/component/server/assets/dist/Default.566ff7d3.js
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
!function(){let e="onorientationchange"in window?"orientationchange":"resize";document.querySelectorAll(".pure-toggle-menu").forEach(t=>{let n=t.querySelector(".toggle");if(!n){console.warn("'.pure-toggle-menu' without '.toggle'");return}let o=()=>{t.classList.toggle("closed"),n.classList.toggle("x")};n.addEventListener("click",e=>{e.preventDefault(),o()}),window.addEventListener(e,()=>{t.classList.contains("closed")||o()})})}();
|
||||||
|
//# sourceMappingURL=Default.566ff7d3.js.map
|
||||||
1
internal/dis/component/server/assets/dist/Default.566ff7d3.js.map
vendored
Normal file
1
internal/dis/component/server/assets/dist/Default.566ff7d3.js.map
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
{"mappings":"C,A,WEEA,IAAM,EAAuB,wBAAyB,OAAU,oBAAsB,SAEtF,SAAS,gBAAA,CAAiB,qBAAqB,OAAA,CAAQ,AAAC,IACpD,IAAM,EAAS,EAAK,aAAA,CAAc,WAClC,GAAI,CAAC,EAAQ,CACT,QAAQ,IAAA,CAAK,yCACb,MACJ,CAEA,IAAM,EAAa,KACf,EAAK,SAAA,CAAU,MAAA,CAAO,UACtB,EAAO,SAAA,CAAU,MAAA,CAAO,IAC5B,EAEA,EAAO,gBAAA,CAAiB,QAAS,AAAC,IAC9B,EAAE,cAAF,GACA,GACJ,GAEA,OAAO,gBAAA,CAAiB,EAAqB,KACrC,EAAK,SAAA,CAAU,QAAA,CAAS,WAC5B,GACJ,EACJ,E","sources":["<anon>","src/base/index.ts","src/lib/pure-toggle-menu/index.ts"],"sourcesContent":["(function () {\n\n\n\nconst $20c5c1843a87be9e$var$WINDOW_CHANGE_EVENT = \"onorientationchange\" in window ? \"orientationchange\" : \"resize\";\ndocument.querySelectorAll(\".pure-toggle-menu\").forEach((menu)=>{\n const toggle = menu.querySelector(\".toggle\");\n if (!toggle) {\n console.warn(\"'.pure-toggle-menu' without '.toggle'\");\n return;\n }\n const toggleMenu = ()=>{\n menu.classList.toggle(\"closed\");\n toggle.classList.toggle(\"x\");\n };\n toggle.addEventListener(\"click\", (e)=>{\n e.preventDefault();\n toggleMenu();\n });\n window.addEventListener($20c5c1843a87be9e$var$WINDOW_CHANGE_EVENT, ()=>{\n if (menu.classList.contains(\"closed\")) return;\n toggleMenu();\n });\n});\n\n\n\n\n})();\n//# sourceMappingURL=Default.566ff7d3.js.map\n","import 'purecss/build/pure.css'\nimport 'purecss/build/grids-responsive.css'\n\nimport '~/src/lib/pure-toggle-menu'\nimport './index.css'","import './index.css';\n\nconst WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';\n\ndocument.querySelectorAll('.pure-toggle-menu').forEach((menu) => {\n const toggle = menu.querySelector('.toggle');\n if (!toggle) {\n console.warn(\"'.pure-toggle-menu' without '.toggle'\");\n return;\n }\n\n const toggleMenu = () => {\n menu.classList.toggle('closed');\n toggle.classList.toggle('x');\n };\n\n toggle.addEventListener('click', (e) => {\n e.preventDefault();\n toggleMenu();\n });\n\n window.addEventListener(WINDOW_CHANGE_EVENT, () => {\n if (menu.classList.contains('closed')) return;\n toggleMenu();\n });\n});"],"names":["$20c5c1843a87be9e$var$WINDOW_CHANGE_EVENT","window","document","querySelectorAll","forEach","menu","toggle","querySelector","console","warn","toggleMenu","classList","addEventListener","e","preventDefault","contains"],"version":3,"file":"Default.566ff7d3.js.map","sourceRoot":"../"}
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
|
|
||||||
//# sourceMappingURL=Default.69ba5e86.js.map
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
{"mappings":"","sources":["src/base/index.ts"],"sourcesContent":["import 'purecss/build/pure.css'\nimport 'purecss/build/grids-responsive.css'\n\nimport './index.css'\n"],"names":[],"version":3,"file":"Default.69ba5e86.js.map","sourceRoot":"../"}
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,147 +1,7 @@
|
||||||
body {
|
@import url("./parts/pure-buttons.css");
|
||||||
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
@import url("./parts/pure-forms.css");
|
||||||
}
|
@import url("./parts/pure-hide.css");
|
||||||
|
@import url("./parts/menu.css");
|
||||||
header,
|
@import url("./parts/table.css");
|
||||||
main,
|
@import url("./parts/theme.css");
|
||||||
footer {
|
@import url("./parts/utils.css");
|
||||||
margin: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.tabs-menu {
|
|
||||||
float: left;
|
|
||||||
min-width: 10em;
|
|
||||||
margin: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.top-menu, nav.breadcrumbs {
|
|
||||||
padding-top: 1em;
|
|
||||||
padding-bottom: 1em;
|
|
||||||
border-bottom: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.pure-menu :has(img.logo) {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-right: 0;
|
|
||||||
}
|
|
||||||
nav.pure-menu img.logo {
|
|
||||||
height: 2.5em;
|
|
||||||
width: 2.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.breadcrumbs {
|
|
||||||
padding-left: 1em;
|
|
||||||
font-size: small;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav.breadcrumbs a:not(:last-child)::after {
|
|
||||||
cursor: default;
|
|
||||||
content: " > ";
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
nav.breadcrumbs a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: blue !important;
|
|
||||||
}
|
|
||||||
nav.breadcrumbs a.active {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
font-size: small;
|
|
||||||
border-top: 1px solid black;
|
|
||||||
padding-top: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer a {
|
|
||||||
color: blue !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
time {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.padding {
|
|
||||||
padding: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow table {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow table td,
|
|
||||||
.overflow table th {
|
|
||||||
padding: .5em .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.spacer {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow table td:not(:last-child),
|
|
||||||
.overflow table th:not(:last-child) {
|
|
||||||
width: 1px;
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflow table td:last-child,
|
|
||||||
.overflow table th:last-child {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hspace {
|
|
||||||
display: block;
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
.pure-form-group {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-action {
|
|
||||||
background-color: rgb(66, 184, 221) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-success {
|
|
||||||
background-color: rgb(28, 184, 65) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-danger {
|
|
||||||
background: rgb(202, 60, 60) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-warning {
|
|
||||||
background: rgb(223, 117, 20) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-xsmall {
|
|
||||||
font-size: 70%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-small {
|
|
||||||
font-size: 85%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-large {
|
|
||||||
font-size: 110%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-button-xlarge {
|
|
||||||
font-size: 125%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-select {
|
|
||||||
min-width: 24ch; /* to match <input type="text"> */
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
background-color: pink;
|
|
||||||
border: 1px solid red;
|
|
||||||
padding: 2px;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
|
|
@ -1,4 +1,5 @@
|
||||||
import 'purecss/build/pure.css'
|
import 'purecss/build/pure.css'
|
||||||
import 'purecss/build/grids-responsive.css'
|
import 'purecss/build/grids-responsive.css'
|
||||||
|
|
||||||
import './index.css'
|
import '~/src/lib/pure-toggle-menu'
|
||||||
|
import './index.css'
|
||||||
43
internal/dis/component/server/assets/src/base/parts/menu.css
Normal file
43
internal/dis/component/server/assets/src/base/parts/menu.css
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
/* menu, tabs & breadcrumbs */
|
||||||
|
|
||||||
|
nav.tabs-menu {
|
||||||
|
float: left;
|
||||||
|
min-width: 10em;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.top-menu, nav.breadcrumbs {
|
||||||
|
padding-top: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-menu-heading :has(img.logo) {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
.pure-menu-heading img.logo {
|
||||||
|
height: 2.5em;
|
||||||
|
width: 2.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.breadcrumbs {
|
||||||
|
padding-left: 1em;
|
||||||
|
font-size: small;
|
||||||
|
|
||||||
|
border-bottom: 1px solid black;
|
||||||
|
border-top: 1px solid black;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav.breadcrumbs a:not(:last-child)::after {
|
||||||
|
cursor: default;
|
||||||
|
content: " > ";
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
nav.breadcrumbs a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: blue !important;
|
||||||
|
}
|
||||||
|
nav.breadcrumbs a.active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
/** additional button sizes */
|
||||||
|
.pure-button-xsmall {
|
||||||
|
font-size: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button-small {
|
||||||
|
font-size: 85%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button-large {
|
||||||
|
font-size: 110%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button-xlarge {
|
||||||
|
font-size: 125%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** additional buttons colors */
|
||||||
|
|
||||||
|
.pure-button-action {
|
||||||
|
background-color: rgb(66, 184, 221) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button-success {
|
||||||
|
background-color: rgb(28, 184, 65) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button-danger {
|
||||||
|
background: rgb(202, 60, 60) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-button-warning {
|
||||||
|
background: rgb(223, 117, 20) !important;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
.pure-form-group {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-select {
|
||||||
|
min-width: 24ch; /* to match <input type="text"> */
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 47.999em) {
|
||||||
|
.u-md-show {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-md-hide {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 48em) {
|
||||||
|
.u-md-show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.u-md-hide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
.overflow table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow table td,
|
||||||
|
.overflow table th {
|
||||||
|
padding: .5em .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.overflow table td:not(:last-child),
|
||||||
|
.overflow table th:not(:last-child) {
|
||||||
|
width: 1px;
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow table td:last-child,
|
||||||
|
.overflow table th:last-child {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
/** generic theme-style customization */
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||||
|
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
header,
|
||||||
|
main,
|
||||||
|
footer {
|
||||||
|
margin: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
font-size: small;
|
||||||
|
border-top: 1px solid black;
|
||||||
|
padding-top: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: blue !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
time {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.padding {
|
||||||
|
padding: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
div.spacer {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hspace {
|
||||||
|
display: block;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-message {
|
||||||
|
background-color: pink;
|
||||||
|
border: 1px solid red;
|
||||||
|
padding: 2px;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
/** hide contents of the menu */
|
||||||
|
.pure-toggle-menu.closed .pure-toggle-hide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** toggle button itself */
|
||||||
|
.pure-toggle-menu .toggle {
|
||||||
|
width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
|
||||||
|
position: relative;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
/** matching the margin of the parent */
|
||||||
|
top: 1em;
|
||||||
|
right: .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-toggle-menu .toggle .bar {
|
||||||
|
background-color: #582e2e;
|
||||||
|
display: block;
|
||||||
|
width: 20px;
|
||||||
|
height: 2px;
|
||||||
|
border-radius: 100px;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 18px;
|
||||||
|
right: 7px;
|
||||||
|
|
||||||
|
-webkit-transition: all 0.5s;
|
||||||
|
-moz-transition: all 0.5s;
|
||||||
|
-ms-transition: all 0.5s;
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-toggle-menu .toggle .bar:first-child {
|
||||||
|
-webkit-transform: translateY(-6px);
|
||||||
|
-moz-transform: translateY(-6px);
|
||||||
|
-ms-transform: translateY(-6px);
|
||||||
|
transform: translateY(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-toggle-menu .toggle.x .bar {
|
||||||
|
-webkit-transform: rotate(45deg);
|
||||||
|
-moz-transform: rotate(45deg);
|
||||||
|
-ms-transform: rotate(45deg);
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-toggle-menu .toggle.x .bar:first-child {
|
||||||
|
-webkit-transform: rotate(-45deg);
|
||||||
|
-moz-transform: rotate(-45deg);
|
||||||
|
-ms-transform: rotate(-45deg);
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
const WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange' : 'resize';
|
||||||
|
|
||||||
|
document.querySelectorAll('.pure-toggle-menu').forEach((menu) => {
|
||||||
|
const toggle = menu.querySelector('.toggle');
|
||||||
|
if (!toggle) {
|
||||||
|
console.warn("'.pure-toggle-menu' without '.toggle'");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleMenu = () => {
|
||||||
|
menu.classList.toggle('closed');
|
||||||
|
toggle.classList.toggle('x');
|
||||||
|
};
|
||||||
|
|
||||||
|
toggle.addEventListener('click', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
toggleMenu();
|
||||||
|
});
|
||||||
|
|
||||||
|
window.addEventListener(WINDOW_CHANGE_EVENT, () => {
|
||||||
|
if (menu.classList.contains('closed')) return;
|
||||||
|
toggleMenu();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -31,6 +31,7 @@ func (home *Home) Routes() component.Routes {
|
||||||
CSRF: false,
|
CSRF: false,
|
||||||
|
|
||||||
MenuTitle: home.Config.Home.Title,
|
MenuTitle: home.Config.Home.Title,
|
||||||
|
MenuSticky: true,
|
||||||
MenuPriority: component.MenuHome,
|
MenuPriority: component.MenuHome,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -40,6 +40,7 @@ func (tpl *Templating) Menu(r *http.Request) []component.MenuItem {
|
||||||
items = append(items, component.MenuItem{
|
items = append(items, component.MenuItem{
|
||||||
Title: routes.MenuTitle,
|
Title: routes.MenuTitle,
|
||||||
Priority: routes.MenuPriority,
|
Priority: routes.MenuPriority,
|
||||||
|
Sticky: routes.MenuSticky,
|
||||||
Path: template.URL(routes.Prefix),
|
Path: template.URL(routes.Prefix),
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,19 +10,39 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<nav class="top-menu pure-menu pure-menu-horizontal">
|
<nav class="top-menu pure-toggle-menu closed">
|
||||||
<span class="pure-menu-heading" role="banner">
|
<div class="pure-u-1 pure-menu pure-menu-horizontal">
|
||||||
<img src="/logo.svg" class="logo" alt="WissKI Distillery Logo">
|
<span class="pure-menu-heading custom-brand" role="banner">
|
||||||
</span>
|
<img src="/logo.svg" class="logo" alt="WissKI Distillery Logo">
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- large screen and sticky menu -->
|
||||||
|
<ul class="pure-menu-list" role="menubar">
|
||||||
|
{{ range $item := .Runtime.Menu }}
|
||||||
|
<li class="pure-menu-item{{ if $item.Active }} pure-menu-selected{{ end }}{{ if not $item.Sticky }} u-md-show{{ end }}" role="menuitem">
|
||||||
|
<a href="{{ $item.Path }}" class="pure-menu-link">{{ $item.Title }}</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="#" class="u-md-hide toggle"><s class="bar"></s><s class="bar"></s></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul class="pure-menu-list" role="menubar">
|
<!-- small non-sticky menu -->
|
||||||
{{ range .Runtime.Menu }}
|
<div class="pure-menu u-md-hide pure-toggle-hide">
|
||||||
<li class="pure-menu-item{{ if .Active }} pure-menu-selected{{ end }}" role="menuitem">
|
<ul class="pure-menu-list">
|
||||||
<a href="{{ .Path }}" class="pure-menu-link">{{ .Title }}</a>
|
{{ range $item := .Runtime.Menu }}
|
||||||
</li>
|
{{ if not $item.Sticky }}
|
||||||
{{ end }}
|
<li class="pure-menu-item{{ if $item.Active }} pure-menu-selected{{ end }}" role="menuitem">
|
||||||
</ul>
|
<a href="{{ $item.Path }}" class="pure-menu-link">{{ .Title }}</a>
|
||||||
|
</li>
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
<nav class="breadcrumbs" role="navigation" aria-label="Breadcrumbs">
|
<nav class="breadcrumbs" role="navigation" aria-label="Breadcrumbs">
|
||||||
{{ range .Runtime.Flags.Crumbs }}
|
{{ range .Runtime.Flags.Crumbs }}
|
||||||
<a class="{{ if .Active }}active{{ end }}" href="{{ .Path }}">{{ .Title }}</a>
|
<a class="{{ if .Active }}active{{ end }}" href="{{ .Path }}">{{ .Title }}</a>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue