From 8000270a6483bf557feb4421e7e680de4303379b Mon Sep 17 00:00:00 2001 From: Evert Date: Thu, 4 Jan 2018 16:09:48 +0200 Subject: [PATCH] Attempt to make a better mobile navigation --- src/script/main.js | 5 --- src/style/main.styl | 91 +++++++++++++++++++++++++-------------------- views/layout.pug | 38 ++++++------------- 3 files changed, 62 insertions(+), 72 deletions(-) diff --git a/src/script/main.js b/src/script/main.js index 5bafa62..5cf8937 100644 --- a/src/script/main.js +++ b/src/script/main.js @@ -165,11 +165,6 @@ $(document).ready(function () { }, 1000, 'swing') }) - $('#mobile').click(function (e) { - e.preventDefault() - $('.flexview').toggleClass('extended') - }) - $('body').click(function (e) { if (!$(e.target).is('#mobile') && !$(e.target).is('#mobile i') && $('.flexview').hasClass('extended')) { $('.flexview').removeClass('extended') diff --git a/src/style/main.styl b/src/style/main.styl index f3d1438..d8867f9 100644 --- a/src/style/main.styl +++ b/src/style/main.styl @@ -45,10 +45,13 @@ a display: none !important .navigator + position: relative padding: 0 50px transition: background-color 0.1s linear background-color: rgb(0, 219, 247) z-index: 5 + height: 68px + &.fix top: 0 left: 0 @@ -57,6 +60,7 @@ a background-color: rgba(0, 219, 247, 0.67) #navlogo + float: left &.hidden display: none @@ -83,6 +87,19 @@ a transition: background-color 0.1s linear &:hover background-color: rgba(255, 255, 255, 0.25) + + .showButton + margin: 0 + padding: 20px + display: none + float: right + font-size: 150% + position: relative + cursor: pointer + color: green + + .menu:hover > .list + max-height: 500px section font-family: "Open Sans" @@ -146,41 +163,9 @@ section width: 60% font-size: 120% -//.cssextend:hover > .flexview -// display: block -// left: 40% - .g-recaptcha margin-top: 10px -ul.flexview - position: fixed - right: 0 - left: 100% - width: auto - top: 68px - bottom: 0 - background-color: rgba(53, 53, 53, 0.8) - z-index: 1 - overflow: hidden - transition: all 0.1s linear - - .division - border-top: 1px solid #a7a7a7 - - li - display: block - min-width: 100px - a - display: block - padding: 5px 20px - color: #fff - font-weight: normal - text-transform: none - &.extended - display: block - left: 40% - code white-space: pre @@ -222,7 +207,7 @@ button, .button, input[type="submit"] box-shadow: 5px 5px 15px #868686 border: 1px solid #ddd margin-bottom: 10% - h1:first-child, h2:first-child, h3:first-child + h1:first-child, h3:first-child margin-top: 0 .left, .right display: inline-block @@ -316,7 +301,7 @@ button, .button, input[type="submit"] border: 1px solid #ddd border-radius: 5px text-decoration: none - display: inline-block + display: block cursor: pointer i color: #fff @@ -397,11 +382,14 @@ span.divider .info margin-left: 130px .name - font-size: 150% + font-size: 120% font-weight: bold + text-overflow: ellipsis + overflow: hidden .description font-size: 80% font-style: italic + word-wrap: break-word .url display: block text-overflow: ellipsis @@ -602,14 +590,37 @@ noscript @media all and (max-width: 800px) .navigator padding: 0 10px + .showButton + display: inline-block !important + + .menu + .list + display: block + position: absolute + top: 68px + left: 0 + right: 0 + background-color: rgba(0, 188, 212, 0.72) + transition: max-height 0.1s linear + max-height: 0 + overflow: hidden + + ul, li, li a + display: block + + li a + padding: 6px 20px + color: #ffffff + text-transform: none + + .floating + float: none !important + border-top: 2px solid #00a1b5 + #navlogo display: inline-block !important .banner display: none - .fullview - display: none !important - .mobview - display: inline-block !important .logo font-size: 10vw .document @@ -635,7 +646,7 @@ noscript float: initial !important display: block !important border: 0 !important - width: fit-content !important + width: 300px !important margin: auto .dialog width: 100vw !important diff --git a/views/layout.pug b/views/layout.pug index d8f32fa..74f5e02 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -63,39 +63,23 @@ html block nav .anchor nav.navigator - ul - li.hidden#navlogo - a(href="/") - .logo.small - .part1 Icy - .part2 Network - li.fullview - a.scroll(href="/#home") Home - li.fullview - a.scroll(href="/#news") News - li.fullview - a(href="https://forum.icynet.eu/") Forum - ul.fullview.floating - if user - li#user - a(href="/user/manage") #{user.display_name} - li - a(href="/logout") Log out - else - li - a(href="/login") Log in - ul.mobview.floating - li.cssextend - a#mobile(href="#") - i.fa.fa-fw.fa-bars - ul.flexview + li.hidden#navlogo + a(href="/") + .logo.small + .part1 Icy + .part2 Network + .menu + .showButton(for="show-menu") + i.fa.fa-fw.fa-bars + .list + ul li a.scroll(href="/#home") Home li a.scroll(href="/#news") News li a(href="https://forum.icynet.eu/") Forum - .division + ul.floating if user li#user a(href="/user/manage") #{user.display_name}