Sidebar (#88)
* feature: allow configurable title * feature: sidebar prototype * Spelling fix - Thanks @jonny7read Spelling fix - Thanks @jonny7read Co-authored-by: Jonny Read <jonny7read@gmail.com> * feature: sidebar support * bugfix: pagetitle * fmt: hide sidebar under feature toggle * fmt: Codestyle in style.css and main.js Co-authored-by: Matthew Strasiotto <39424834+matthewstrasiotto@users.noreply.github.com> Co-authored-by: Jonny Read <jonny7read@gmail.com>
This commit is contained in:
parent
eca3145b1a
commit
244404afbc
|
|
@ -66,6 +66,7 @@ type Config struct {
|
||||||
Actions []Action `mapstructure:"actions"`
|
Actions []Action `mapstructure:"actions"`
|
||||||
Entities []Entity `mapstructure:"entities"`
|
Entities []Entity `mapstructure:"entities"`
|
||||||
CheckForUpdates bool
|
CheckForUpdates bool
|
||||||
|
PageTitle string
|
||||||
ShowFooter bool
|
ShowFooter bool
|
||||||
ShowNavigation bool
|
ShowNavigation bool
|
||||||
ShowNewVersions bool
|
ShowNewVersions bool
|
||||||
|
|
@ -79,6 +80,7 @@ type Config struct {
|
||||||
func DefaultConfig() *Config {
|
func DefaultConfig() *Config {
|
||||||
config := Config{}
|
config := Config{}
|
||||||
config.UseSingleHTTPFrontend = true
|
config.UseSingleHTTPFrontend = true
|
||||||
|
config.PageTitle = "OliveTin"
|
||||||
config.ShowFooter = true
|
config.ShowFooter = true
|
||||||
config.ShowNavigation = true
|
config.ShowNavigation = true
|
||||||
config.ShowNewVersions = true
|
config.ShowNewVersions = true
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,8 @@ type webUISettings struct {
|
||||||
ShowNewVersions bool
|
ShowNewVersions bool
|
||||||
AvailableVersion string
|
AvailableVersion string
|
||||||
CurrentVersion string
|
CurrentVersion string
|
||||||
|
PageTitle string
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func findWebuiDir() string {
|
func findWebuiDir() string {
|
||||||
|
|
@ -52,6 +54,7 @@ func generateWebUISettings(w http.ResponseWriter, r *http.Request) {
|
||||||
ShowNewVersions: cfg.ShowNewVersions,
|
ShowNewVersions: cfg.ShowNewVersions,
|
||||||
AvailableVersion: updatecheck.AvailableVersion,
|
AvailableVersion: updatecheck.AvailableVersion,
|
||||||
CurrentVersion: updatecheck.CurrentVersion,
|
CurrentVersion: updatecheck.CurrentVersion,
|
||||||
|
PageTitle: cfg.PageTitle,
|
||||||
})
|
})
|
||||||
|
|
||||||
_, err := w.Write([]byte(jsonRet))
|
_, err := w.Write([]byte(jsonRet))
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,23 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<main title = "main content">
|
<main title = "main content">
|
||||||
|
<div id = "perma-widget" hidden>
|
||||||
|
<div id = "sidebar-toggle-wrapper">
|
||||||
|
<label for = "sidebar-toggler" id = "sidebar-toggler-button" title = "Toggle sidebar" tabindex = "0">☰</label>
|
||||||
|
</div>
|
||||||
|
<h1 id = "page-title">OliveTin</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div id = "content-sidebar">
|
||||||
|
<input type = "checkbox" id = "sidebar-toggler" hidden checked />
|
||||||
|
<aside>
|
||||||
|
<ul>
|
||||||
|
<li>Foo</li>
|
||||||
|
<li>Bar</li>
|
||||||
|
</ul>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
<fieldset id = "section-switcher" title = "Sections">
|
<fieldset id = "section-switcher" title = "Sections">
|
||||||
<button id = "showActions">Actions</button>
|
<button id = "showActions">Actions</button>
|
||||||
<button id = "showLogs">Logs</button>
|
<button id = "showLogs">Logs</button>
|
||||||
|
|
|
||||||
|
|
@ -64,6 +64,12 @@ function processWebuiSettingsJson (settings) {
|
||||||
|
|
||||||
document.querySelector('#section-switcher').hidden = !settings.ShowNavigation
|
document.querySelector('#section-switcher').hidden = !settings.ShowNavigation
|
||||||
document.querySelector('footer[title="footer"]').hidden = !settings.ShowFooter
|
document.querySelector('footer[title="footer"]').hidden = !settings.ShowFooter
|
||||||
|
|
||||||
|
if (settings.PageTitle) {
|
||||||
|
document.title = settings.PageTitle
|
||||||
|
const titleElem = document.querySelector('#page-title')
|
||||||
|
if (titleElem) titleElem.innerText = settings.PageTitle
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function main () {
|
function main () {
|
||||||
|
|
|
||||||
|
|
@ -20,11 +20,79 @@ fieldset#root-group {
|
||||||
border: 0;
|
border: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle-wrapper {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
display: inline;
|
||||||
|
padding-left: 1em;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
label#sidebar-toggler-button {
|
||||||
|
top: 1em;
|
||||||
|
left: 0.5em;
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: white;
|
||||||
|
text-align: center;
|
||||||
|
display: inline-grid;
|
||||||
|
place-items: center;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: 0 0 5px 0 #444;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
label#sidebar-toggler-button:hover,
|
||||||
|
label#sidebar-toggler-button:focus {
|
||||||
|
color: black;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside {
|
||||||
|
position: absolute;
|
||||||
|
width: 180px;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
padding-top: 4em;
|
||||||
|
transition: 0.5s ease;
|
||||||
|
background-color: white;
|
||||||
|
border: 0 0 10px 0;
|
||||||
|
box-shadow: 0 0 10px 0 #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked ~ aside {
|
||||||
|
left: -250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside ul {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside ul li {
|
||||||
|
list-style: none;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 1em;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
border-bottom: 1px inset black;
|
||||||
|
}
|
||||||
|
|
||||||
|
aside ul li:hover {
|
||||||
|
color: black;
|
||||||
|
background-color: #efefef;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-shadow: 0 0 10px 0 #444;
|
box-shadow: 0 0 5px 0 #444;
|
||||||
}
|
}
|
||||||
|
|
||||||
th,
|
th,
|
||||||
|
|
@ -257,6 +325,15 @@ label {
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#perma-widget {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#perma-widget label {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
padding: 0.6em;
|
padding: 0.6em;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue