thepra
/
Seenginx
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fixed mobile-desktop menu

This commit is contained in:
Eugene ;) 2020-04-13 18:17:59 +02:00
parent 87754c8e06
commit adcd20c09e
12 changed files with 79 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Seenginx/Pages/_Host.cshtml
View File

@ -43,6 +43,5 @@
<script src="_framework/blazor.server.js"></script>
<script src="js/modal.js" asp-append-version="true"></script>
<script src="js/ui.js" asp-append-version="true"></script>
</body>
</html>

3
Seenginx/SCSS/main.scss
View File

@ -1,4 +1,5 @@
@import "mixins.scss";
@import "base.scss";
@import "utility.scss";
@import "side-menu.scss";
@import "side-menu.scss";
@import "override-framework.scss";

25
Seenginx/SCSS/override-framework.scss Normal file
View File

@ -0,0 +1,25 @@
@font-face {
font-family: 'Ubuntu';
src: url(/fonts/ubuntu-light-webfont.woff2) format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Ubuntu-Mono';
src: url(/fonts/ubuntumono-regular-webfont.woff2) format('woff2');
/*font-weight: 300;*/
font-style: normal;
}
html{
font-family: Ubuntu, sans-serif;
}
.pure-menu-heading{
text-transform: none;
font-family: Ubuntu-Mono,'Noto Mono'
}
.pure-menu-link {
font-family: Ubuntu-Mono,'Noto Mono'
}

32
Seenginx/SCSS/side-menu.scss
View File

@ -5,8 +5,8 @@ body {
:root {
--leftPanel: 150px;
--negativeLeftPanel: -150px;
--mobileLeftPanel: 150px;
--mobileNegativeLeftPanel: -150px;
--mobileLeftPanel: 50px;
--mobileNegativeLeftPanel: -50px;
}
.pure-img-responsive {
@ -37,6 +37,11 @@ This is the parent `<div>` that contains the menu and the content area.
&.active {
@include MediaQuery(phone) {
position: relative;
left: var(--leftPanel);
}
& .menu-link {
left: var(--leftPanel);
}
@ -121,7 +126,7 @@ small screens.
left: 0; /* "#menu width" */
background: #000;
background: rgba(0,0,0,0.7);
font-size: 16px; /* change this value to increase/decrease button size */
font-size: 14px; /* change this value to increase/decrease button size */
z-index: 10;
width: min-content;
height: auto;
@ -140,14 +145,8 @@ small screens.
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em;
}
@media (min-width: 37.6em) {
#layout {
padding-left: var(--leftPanel); /* left col width "#menu" */
left: 0;
@ -167,16 +166,3 @@ Hides the menu at `48em`, but modify this based on your app's needs.
left: var(--leftPanel);
}
}
@media (max-width: 48em) {
/* Only apply this when the window is small. Otherwise, the following
case results in extra padding on the left:
* Make the window small.
* Tap the menu to trigger the active state.
* Make the window large again.
*/
#layout.active {
position: relative;
left: var(--leftPanel);
}
}

5
Seenginx/SCSS/utility.scss
View File

@ -7,3 +7,8 @@
}
}
}
.petiteCaps {
font-variant: petite-caps
}

8
Seenginx/Shared/NavMenu.razor
View File

@ -8,27 +8,27 @@
<div class="pure-menu">
<NavLink class="pure-menu-heading" href="/" Match="NavLinkMatch.All">
<span class="oi" data-glyph="bolt"></span>
<span class="isHiddenMobile">Seenginx</span>
<span class="petiteCaps">Seenginx</span>
</NavLink>
<ul class="pure-menu-list">
<li class="pure-menu-item @ActiveNav.GetValueOrDefault("nginx")">
<NavLink href="/nginx" class="pure-menu-link" @onclick="@(e => SelectMenuItem("nginx"))">
<span class="oi" data-glyph="code"></span>
<span class="isHiddenMobile">NGINX</span>
<span class="petiteCaps">NginX</span>
</NavLink>
</li>
<li class="pure-menu-item @ActiveNav.GetValueOrDefault("systemd")">
<NavLink href="/systemd" class="pure-menu-link" @onclick="@(e => SelectMenuItem("systemd"))">
<span class="oi" data-glyph="cog"></span>
<span class="isHiddenMobile">SystemD</span>
<span class="petiteCaps">SystemD</span>
</NavLink>
</li>
<li class="pure-menu-item @ActiveNav.GetValueOrDefault("dmesg")">
<NavLink href="/dmesg" class="pure-menu-link" @onclick="@(e => SelectMenuItem("dmesg"))">
<span class="oi" data-glyph="dashboard"></span>
<span class="isHiddenMobile">Dmesg</span>
<span class="petiteCaps">Dmesg</span>
</NavLink>
</li>
</ul>

2
Seenginx/Shared/NavMenu.razor.cs
View File

@ -13,7 +13,7 @@ namespace Seenginx.Shared
[Parameter]
public string MenuActiveClass { get; set; }
[ParameterAttribute]
[Parameter]
public EventCallback<string> MenuActiveClassChanged { get; set; }
protected async override Task OnInitializedAsync()

50
Seenginx/wwwroot/css/main.css
View File

@ -33,14 +33,17 @@ body {
.isHiddenMobile {
display: none; } }
.petiteCaps {
font-variant: petite-caps; }
body {
color: #777; }
:root {
--leftPanel: 150px;
--negativeLeftPanel: -150px;
--mobileLeftPanel: 150px;
--mobileNegativeLeftPanel: -150px; }
--mobileLeftPanel: 50px;
--mobileNegativeLeftPanel: -50px; }
.pure-img-responsive {
max-width: 100%;
@ -65,6 +68,10 @@ This is the parent `<div>` that contains the menu and the content area.
position: relative;
left: 0;
padding-left: 0; }
@media only screen and (max-width: 37.5em) {
#layout.active {
position: relative;
left: var(--leftPanel); } }
#layout.active .menu-link {
left: var(--leftPanel); }
#layout.active #menu {
@ -130,7 +137,7 @@ small screens.
/* "#menu width" */
background: #000;
background: rgba(0, 0, 0, 0.7);
font-size: 16px;
font-size: 14px;
/* change this value to increase/decrease button size */
z-index: 10;
width: min-content;
@ -143,11 +150,7 @@ small screens.
/*
Hides the menu at `48em`, but modify this based on your app's needs.
*/
@media (min-width: 48em) {
.header,
.content {
padding-left: 2em;
padding-right: 2em; }
@media (min-width: 37.6em) {
#layout {
padding-left: var(--leftPanel);
/* left col width "#menu" */
@ -161,13 +164,24 @@ Hides the menu at `48em`, but modify this based on your app's needs.
#layout.active .menu-link {
left: var(--leftPanel); } }
@media (max-width: 48em) {
/* Only apply this when the window is small. Otherwise, the following
case results in extra padding on the left:
* Make the window small.
* Tap the menu to trigger the active state.
* Make the window large again.
*/
#layout.active {
position: relative;
left: var(--leftPanel); } }
@font-face {
font-family: 'Ubuntu';
src: url(/fonts/ubuntu-light-webfont.woff2) format("woff2");
font-weight: 300;
font-style: normal; }
@font-face {
font-family: 'Ubuntu-Mono';
src: url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");
/*font-weight: 300;*/
font-style: normal; }
html {
font-family: Ubuntu, sans-serif; }
.pure-menu-heading {
text-transform: none;
font-family: Ubuntu-Mono,'Noto Mono'; }
.pure-menu-link {
font-family: Ubuntu-Mono,'Noto Mono'; }

2
Seenginx/wwwroot/css/main.min.css vendored
View File

@ -1 +1 @@
body{box-sizing:border-box;}*,::before,::after{box-sizing:inherit;}#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}body{color:#777;}:root{--leftPanel:150px;--negativeLeftPanel:-150px;--mobileLeftPanel:150px;--mobileNegativeLeftPanel:-150px;}.pure-img-responsive{max-width:100%;height:auto;}#layout,#menu,.menu-link{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}#layout{position:relative;left:0;padding-left:0;}#layout.active .menu-link{left:var(--leftPanel);}#layout.active #menu{left:var(--leftPanel);width:var(--leftPanel);}#menu{margin-left:var(--negativeLeftPanel);width:var(--leftPanel);position:fixed;top:0;left:0;bottom:0;z-index:1000;background:#191818;overflow-y:auto;-webkit-overflow-scrolling:touch;}#menu a{color:#999;border:none;padding:.6em 0 .6em .6em;}#menu .pure-menu,#menu .pure-menu ul{border:none;background:transparent;}#menu .pure-menu ul,#menu .pure-menu .menu-item-divided{border-top:1px solid #333;}#menu .pure-menu li a:hover,#menu .pure-menu li a:focus{background:#333;}#menu .pure-menu-selected,#menu .pure-menu-heading{background:#1f8dd6;}#menu .pure-menu-selected a{color:#fff;}#menu .pure-menu-heading{font-size:110%;color:#fff;margin:0;}.menu-link{position:fixed;display:block;top:0;left:0;background:#000;background:rgba(0,0,0,.7);font-size:16px;z-index:10;width:min-content;height:auto;padding:14px;}.menu-link:hover,.menu-link:focus{background:#000;}@media(min-width:48em){.header,.content{padding-left:2em;padding-right:2em;}#layout{padding-left:var(--leftPanel);left:0;}#menu{left:var(--leftPanel);}.menu-link{position:fixed;left:var(--leftPanel);display:none;}#layout.active .menu-link{left:var(--leftPanel);}}@media(max-width:48em){#layout.active{position:relative;left:var(--leftPanel);}}
body{box-sizing:border-box;}*,::before,::after{box-sizing:inherit;}#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}body{color:#777;}:root{--leftPanel:150px;--negativeLeftPanel:-150px;--mobileLeftPanel:50px;--mobileNegativeLeftPanel:-50px;}.pure-img-responsive{max-width:100%;height:auto;}#layout,#menu,.menu-link{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}#layout{position:relative;left:0;padding-left:0;}@media only screen and (max-width:37.5em){#layout.active{position:relative;left:var(--leftPanel);}}#layout.active .menu-link{left:var(--leftPanel);}#layout.active #menu{left:var(--leftPanel);width:var(--leftPanel);}#menu{margin-left:var(--negativeLeftPanel);width:var(--leftPanel);position:fixed;top:0;left:0;bottom:0;z-index:1000;background:#191818;overflow-y:auto;-webkit-overflow-scrolling:touch;}#menu a{color:#999;border:none;padding:.6em 0 .6em .6em;}#menu .pure-menu,#menu .pure-menu ul{border:none;background:transparent;}#menu .pure-menu ul,#menu .pure-menu .menu-item-divided{border-top:1px solid #333;}#menu .pure-menu li a:hover,#menu .pure-menu li a:focus{background:#333;}#menu .pure-menu-selected,#menu .pure-menu-heading{background:#1f8dd6;}#menu .pure-menu-selected a{color:#fff;}#menu .pure-menu-heading{font-size:110%;color:#fff;margin:0;}.menu-link{position:fixed;display:block;top:0;left:0;background:#000;background:rgba(0,0,0,.7);font-size:14px;z-index:10;width:min-content;height:auto;padding:14px;}.menu-link:hover,.menu-link:focus{background:#000;}@media(min-width:37.6em){#layout{padding-left:var(--leftPanel);left:0;}#menu{left:var(--leftPanel);}.menu-link{position:fixed;left:var(--leftPanel);display:none;}#layout.active .menu-link{left:var(--leftPanel);}}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.pure-menu-link{font-family:Ubuntu-Mono,'Noto Mono';}

BIN
Seenginx/wwwroot/fonts/ubuntu-light-webfont.woff2 Normal file
View File

Binary file not shown.

BIN
Seenginx/wwwroot/fonts/ubuntumono-regular-webfont.woff2 Normal file
View File

Binary file not shown.

46
Seenginx/wwwroot/js/ui.js
View File

@ -1,46 +0,0 @@
(function (window, document) {
var layout = document.getElementById('layout'),
menu = document.getElementById('menu'),
menuLink = document.getElementById('menuLink'),
content = document.getElementById('main');
function toggleClass(element, className) {
var classes = element.className.split(/\s+/),
length = classes.length,
i = 0;
for(; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
}
}
// The className is not found
if (length === classes.length) {
classes.push(className);
}
element.className = classes.join(' ');
}
function toggleAll(e) {
var active = 'active';
e.preventDefault();
toggleClass(layout, active);
toggleClass(menu, active);
toggleClass(menuLink, active);
}
menuLink.onclick = function (e) {
toggleAll(e);
};
content.onclick = function(e) {
if (menu.className.indexOf('active') !== -1) {
toggleAll(e);
}
};
}(this, this.document));