Attempt to make a better mobile navigation

This commit is contained in:
Evert Prants 2018-01-04 16:09:48 +02:00
parent 0f8205a75d
commit 8000270a64
Signed by: evert
GPG Key ID: 1688DA83D222D0B5
3 changed files with 62 additions and 72 deletions

View File

@ -165,11 +165,6 @@ $(document).ready(function () {
}, 1000, 'swing') }, 1000, 'swing')
}) })
$('#mobile').click(function (e) {
e.preventDefault()
$('.flexview').toggleClass('extended')
})
$('body').click(function (e) { $('body').click(function (e) {
if (!$(e.target).is('#mobile') && !$(e.target).is('#mobile i') && $('.flexview').hasClass('extended')) { if (!$(e.target).is('#mobile') && !$(e.target).is('#mobile i') && $('.flexview').hasClass('extended')) {
$('.flexview').removeClass('extended') $('.flexview').removeClass('extended')

View File

@ -45,10 +45,13 @@ a
display: none !important display: none !important
.navigator .navigator
position: relative
padding: 0 50px padding: 0 50px
transition: background-color 0.1s linear transition: background-color 0.1s linear
background-color: rgb(0, 219, 247) background-color: rgb(0, 219, 247)
z-index: 5 z-index: 5
height: 68px
&.fix &.fix
top: 0 top: 0
left: 0 left: 0
@ -57,6 +60,7 @@ a
background-color: rgba(0, 219, 247, 0.67) background-color: rgba(0, 219, 247, 0.67)
#navlogo #navlogo
float: left
&.hidden &.hidden
display: none display: none
@ -83,6 +87,19 @@ a
transition: background-color 0.1s linear transition: background-color 0.1s linear
&:hover &:hover
background-color: rgba(255, 255, 255, 0.25) 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 section
font-family: "Open Sans" font-family: "Open Sans"
@ -146,41 +163,9 @@ section
width: 60% width: 60%
font-size: 120% font-size: 120%
//.cssextend:hover > .flexview
// display: block
// left: 40%
.g-recaptcha .g-recaptcha
margin-top: 10px 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 code
white-space: pre white-space: pre
@ -222,7 +207,7 @@ button, .button, input[type="submit"]
box-shadow: 5px 5px 15px #868686 box-shadow: 5px 5px 15px #868686
border: 1px solid #ddd border: 1px solid #ddd
margin-bottom: 10% margin-bottom: 10%
h1:first-child, h2:first-child, h3:first-child h1:first-child, h3:first-child
margin-top: 0 margin-top: 0
.left, .right .left, .right
display: inline-block display: inline-block
@ -316,7 +301,7 @@ button, .button, input[type="submit"]
border: 1px solid #ddd border: 1px solid #ddd
border-radius: 5px border-radius: 5px
text-decoration: none text-decoration: none
display: inline-block display: block
cursor: pointer cursor: pointer
i i
color: #fff color: #fff
@ -397,11 +382,14 @@ span.divider
.info .info
margin-left: 130px margin-left: 130px
.name .name
font-size: 150% font-size: 120%
font-weight: bold font-weight: bold
text-overflow: ellipsis
overflow: hidden
.description .description
font-size: 80% font-size: 80%
font-style: italic font-style: italic
word-wrap: break-word
.url .url
display: block display: block
text-overflow: ellipsis text-overflow: ellipsis
@ -602,14 +590,37 @@ noscript
@media all and (max-width: 800px) @media all and (max-width: 800px)
.navigator .navigator
padding: 0 10px 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 #navlogo
display: inline-block !important display: inline-block !important
.banner .banner
display: none display: none
.fullview
display: none !important
.mobview
display: inline-block !important
.logo .logo
font-size: 10vw font-size: 10vw
.document .document
@ -635,7 +646,7 @@ noscript
float: initial !important float: initial !important
display: block !important display: block !important
border: 0 !important border: 0 !important
width: fit-content !important width: 300px !important
margin: auto margin: auto
.dialog .dialog
width: 100vw !important width: 100vw !important

View File

@ -63,39 +63,23 @@ html
block nav block nav
.anchor .anchor
nav.navigator nav.navigator
ul li.hidden#navlogo
li.hidden#navlogo a(href="/")
a(href="/") .logo.small
.logo.small .part1 Icy
.part1 Icy .part2 Network
.part2 Network .menu
li.fullview .showButton(for="show-menu")
a.scroll(href="/#home") Home i.fa.fa-fw.fa-bars
li.fullview .list
a.scroll(href="/#news") News ul
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 li
a.scroll(href="/#home") Home a.scroll(href="/#home") Home
li li
a.scroll(href="/#news") News a.scroll(href="/#news") News
li li
a(href="https://forum.icynet.eu/") Forum a(href="https://forum.icynet.eu/") Forum
.division ul.floating
if user if user
li#user li#user
a(href="/user/manage") #{user.display_name} a(href="/user/manage") #{user.display_name}