Commit e735f26b authored by Nicolas Pernoud's avatar Nicolas Pernoud
Browse files

fix: improved navbar style

parent 9c0c2f19
Pipeline #7527 passed with stages
in 2 minutes and 47 seconds
......@@ -7,8 +7,7 @@
@charset "utf-8";
// Brand colors
$deep-blue: #304ffe;
$nice-red: #c2185b;
$deep-blue: #3f51b5;
$grey: #78909c;
$light-grey: #b0bec5;
$very-light-grey: #eceff1;
......@@ -24,9 +23,9 @@ $body-background-color: $very-light-grey;
$card-content-padding: 2rem;
$navbar-item-img-max-height: 2.5rem;
$navbar-background-color: $light-grey;
$navbar-item-hover-color: $nice-red;
$navbar-item-hover-color: $deep-blue;
$navbar-item-hover-background-color: $dark;
$navbar-item-active-color: $nice-red;
$navbar-item-active-color: $deep-blue;
$navbar-item-active-background-color: $very-light-grey;
$progress-border-radius: 0px;
$progress-indeterminate-duration: 1s;
......@@ -113,6 +112,12 @@ img {
height: 3.5rem;
}
@media screen and (min-width: 1024px) {
.navbar-item {
border-radius: $radius-small $radius-small 0 0;
}
}
.navbar-item img {
margin-right: 10px;
}
......@@ -121,14 +126,6 @@ img {
margin-right: 5px;
}
.navbar-item.is-active {
border-style: none solid none solid;
border-width: 1px;
@media screen and (min-width: 1024px) {
border-radius: $radius-small $radius-small 0 0;
}
}
// To ensure color event if element is focused
a.navbar-item.is-active {
background-color: $very-light-grey;
......@@ -195,7 +192,7 @@ a.navbar-item.is-active {
}
.modal-card-head .delete:hover {
background-color: $nice-red;
background-color: $deep-blue;
transform: scale(1.1);
}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -44,31 +44,27 @@ export function mount(mountpoint) {
export async function CreateMenu() {
user = await Auth.GetUser();
menu.innerHTML = `
<div class="navbar-start">
${
user === undefined
? ``
: /* HTML */ `
<a id="navbar-apps" class="navbar-item" href="#apps"><i class="navbar-menu-icon fas fa-home"></i>Apps</a>
<a id="navbar-davs" class="navbar-item" href="#davs"><i class="navbar-menu-icon fas fa-folder-open"></i>Files</a>
${user.isAdmin
? /* HTML */ `
<a id="navbar-users" class="navbar-item" href="#users"><i class="navbar-menu-icon fas fa-users"></i>Users</a>
<a id="navbar-sysinfo" class="navbar-item" href="#sysinfo"><i class="navbar-menu-icon fas fa-stethoscope"></i>System information</a>
`
: ""}
menu.innerHTML = /* HTML */ `
<div class="navbar-start">
${user === undefined
? ``
: /* HTML */ `
<a id="navbar-apps" class="navbar-item" href="#apps"><i class="navbar-menu-icon fas fa-home"></i>Apps</a>
<a id="navbar-davs" class="navbar-item" href="#davs"><i class="navbar-menu-icon fas fa-folder-open"></i>Files</a>
${user.isAdmin
? /* HTML */ `
<a id="navbar-users" class="navbar-item" href="#users"><i class="navbar-menu-icon fas fa-users"></i>Users</a>
<a id="navbar-sysinfo" class="navbar-item" href="#sysinfo"><i class="navbar-menu-icon fas fa-stethoscope"></i>System information</a>
`
}
</div>
<div class="navbar-end">
${
user === undefined
? /* HTML */ ` <a class="navbar-item" href="#login"><i class="navbar-menu-icon fas fa-sign-in-alt"></i>Log in</a> `
: /* HTML */ ` <a class="navbar-item" href="/Logout"><i class="navbar-menu-icon fas fa-sign-out-alt"></i>Log out</a> `
}
</div>
`;
: ""}
`}
</div>
<div class="navbar-end">
${user === undefined
? /* HTML */ ` <a class="navbar-item" href="#login"><i class="navbar-menu-icon fas fa-sign-in-alt"></i>Log in</a> `
: /* HTML */ ` <a class="navbar-item" href="/Logout"><i class="navbar-menu-icon fas fa-sign-out-alt"></i>Log out</a> `}
</div>
`;
SetActiveItem();
}
......
......@@ -32,7 +32,7 @@
<div class="navbar-brand">
<div class="navbar-item">
<a class="button is-primary is-rounded is-outlined" href="https://www.github.com/nicolaspernoud/Vestibule" target="_blank" rel="noopener noreferrer">
<span>4.3.50</span>
<span>4.3.51</span>
<span class="icon">
<svg
class="svg-inline--fa fa-github fa-w-16"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment