rnsrk/wisski-cloud-distillery
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

panel: Make menu collapsible

Browse source 
This commit makes the top menu collapsible on all pages.
This commit is contained in:
Tom Wiesing 2023-12-01 23:31:44 +01:00
parent f2480cb9a4
commit 058875bcd9
No known key found for this signature in database
28 changed files with 325 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

20
internal/dis/component/server/assets/assets_dist.go
View file

@ -12,30 +12,30 @@ const Public = "/⛰/"
// AssetsDefault contains assets for the 'Default' entrypoint.
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>`,
Styles: `<link rel="stylesheet" href="/⛰/Default.75b6a6d8.css"><link rel="stylesheet" href="/⛰/Default.749670b3.css">`,
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.37843a0d.css"><link rel="stylesheet" href="/⛰/Default.749670b3.css">`,
}
// AssetsUser contains assets for the 'User' entrypoint.
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>`,
Styles: `<link rel="stylesheet" href="/⛰/Default.75b6a6d8.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css">`,
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.37843a0d.css"><link rel="stylesheet" href="/⛰/User.72760bc7.css"><link rel="stylesheet" href="/⛰/User.1664d889.css">`,
}
// AssetsAdmin contains assets for the 'Admin' entrypoint.
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>`,
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">`,
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.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.
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>`,
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">`,
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.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.
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>`,
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">`,
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.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">`,
}

4
internal/dis/component/server/assets/dist/Default.75b6a6d8.css → internal/dis/component/server/assets/dist/Default.37843a0d.css vendored
View file

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
View 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
View 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
View 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":"../"}

2
internal/dis/component/server/assets/dist/Default.46ce540b.js vendored
View file

@ -1,2 +0,0 @@
//# sourceMappingURL=Default.46ce540b.js.map

1
internal/dis/component/server/assets/dist/Default.46ce540b.js.map vendored
View file

@ -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
View 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
View 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":"../"}

2
internal/dis/component/server/assets/dist/Default.69ba5e86.js vendored
View file

@ -1,2 +0,0 @@
//# sourceMappingURL=Default.69ba5e86.js.map

1
internal/dis/component/server/assets/dist/Default.69ba5e86.js.map vendored
View file

@ -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":"../"}

1
internal/dis/component/server/assets/dist/Default.75b6a6d8.css.map vendored
View file

File diff suppressed because one or more lines are too long

154
internal/dis/component/server/assets/src/base/index.css
View file

@ -1,147 +1,7 @@
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
header,
main,
footer {
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;
}
@import url("./parts/pure-buttons.css");
@import url("./parts/pure-forms.css");
@import url("./parts/pure-hide.css");
@import url("./parts/menu.css");
@import url("./parts/table.css");
@import url("./parts/theme.css");
@import url("./parts/utils.css");

3
internal/dis/component/server/assets/src/base/index.ts
View file

@ -1,4 +1,5 @@
import 'purecss/build/pure.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
View 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;
}

34
internal/dis/component/server/assets/src/base/parts/pure-buttons.css Normal file
View file

@ -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;
}

7
internal/dis/component/server/assets/src/base/parts/pure-forms.css Normal file
View file

@ -0,0 +1,7 @@
.pure-form-group {
display: inline;
}
.pure-select {
min-width: 24ch; /* to match <input type="text"> */
}

21
internal/dis/component/server/assets/src/base/parts/pure-hide.css Normal file
View file

@ -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;
}
}

21
internal/dis/component/server/assets/src/base/parts/table.css Normal file
View file

@ -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;
}

30
internal/dis/component/server/assets/src/base/parts/theme.css Normal file
View file

@ -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;
}

23
internal/dis/component/server/assets/src/base/parts/utils.css Normal file
View file

@ -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;
}

55
internal/dis/component/server/assets/src/lib/pure-toggle-menu/index.css Normal file
View file

@ -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);
}

26
internal/dis/component/server/assets/src/lib/pure-toggle-menu/index.ts Normal file
View file

@ -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();
});
});

1
internal/dis/component/server/home/home.go
View file

@ -31,6 +31,7 @@ func (home *Home) Routes() component.Routes {
CSRF: false,
MenuTitle: home.Config.Home.Title,
MenuSticky: true,
MenuPriority: component.MenuHome,
}
}

1
internal/dis/component/server/templating/menu.go
View file

@ -40,6 +40,7 @@ func (tpl *Templating) Menu(r *http.Request) []component.MenuItem {
items = append(items, component.MenuItem{
Title: routes.MenuTitle,
Priority: routes.MenuPriority,
Sticky: routes.MenuSticky,
Path: template.URL(routes.Prefix),
})
}

42
internal/dis/component/server/templating/src/base.html
View file

@ -10,19 +10,39 @@
</head>
<body>
<nav class="top-menu pure-menu pure-menu-horizontal">
<span class="pure-menu-heading" role="banner">
<img src="/logo.svg" class="logo" alt="WissKI Distillery Logo">
</span>
<nav class="top-menu pure-toggle-menu closed">
<div class="pure-u-1 pure-menu pure-menu-horizontal">
<span class="pure-menu-heading custom-brand" role="banner">
<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">
{{ range .Runtime.Menu }}
<li class="pure-menu-item{{ if .Active }} pure-menu-selected{{ end }}" role="menuitem">
<a href="{{ .Path }}" class="pure-menu-link">{{ .Title }}</a>
</li>
{{ end }}
</ul>
<!-- small non-sticky menu -->
<div class="pure-menu u-md-hide pure-toggle-hide">
<ul class="pure-menu-list">
{{ range $item := .Runtime.Menu }}
{{ if not $item.Sticky }}
<li class="pure-menu-item{{ if $item.Active }} pure-menu-selected{{ end }}" role="menuitem">
<a href="{{ $item.Path }}" class="pure-menu-link">{{ .Title }}</a>
</li>
{{ end }}
{{ end }}
</ul>
</div>
</nav>
<nav class="breadcrumbs" role="navigation" aria-label="Breadcrumbs">
{{ range .Runtime.Flags.Crumbs }}
<a class="{{ if .Active }}active{{ end }}" href="{{ .Path }}">{{ .Title }}</a>