medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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:
James Read 2022-11-11 12:13:47 +04:00 committed by GitHub
parent eca3145b1a
commit 244404afbc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 106 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
internal/config/config.go
View File

@ -66,6 +66,7 @@ type Config struct {
Actions []Action `mapstructure:"actions"`
Entities []Entity `mapstructure:"entities"`
CheckForUpdates bool
PageTitle string
ShowFooter bool
ShowNavigation bool
ShowNewVersions bool
@ -79,6 +80,7 @@ type Config struct {
func DefaultConfig() *Config {
config := Config{}
config.UseSingleHTTPFrontend = true
config.PageTitle = "OliveTin"
config.ShowFooter = true
config.ShowNavigation = true
config.ShowNewVersions = true

3
internal/httpservers/webuiServer.go
View File

@ -19,6 +19,8 @@ type webUISettings struct {
ShowNewVersions bool
AvailableVersion string
CurrentVersion string
PageTitle string
}
func findWebuiDir() string {
@ -52,6 +54,7 @@ func generateWebUISettings(w http.ResponseWriter, r *http.Request) {
ShowNewVersions: cfg.ShowNewVersions,
AvailableVersion: updatecheck.AvailableVersion,
CurrentVersion: updatecheck.CurrentVersion,
PageTitle: cfg.PageTitle,
})
_, err := w.Write([]byte(jsonRet))

17
webui/index.html
View File

@ -16,6 +16,23 @@
<body>
<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">&#9776;</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">
<button id = "showActions">Actions</button>
<button id = "showLogs">Logs</button>

6
webui/main.js
View File

@ -64,6 +64,12 @@ function processWebuiSettingsJson (settings) {
document.querySelector('#section-switcher').hidden = !settings.ShowNavigation
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 () {

79
webui/style.css
View File

@ -20,11 +20,79 @@ fieldset#root-group {
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 {
background-color: white;
border-collapse: collapse;
width: 100%;
box-shadow: 0 0 10px 0 #444;
box-shadow: 0 0 5px 0 #444;
}
th,
@ -257,6 +325,15 @@ label {
padding-right: 1em;
}
#perma-widget {
position: absolute;
z-index: 2;
}
#perma-widget label {
display: inline;
}
input {
padding: 0.6em;
}