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')
})
$('#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')

View File

@ -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
@ -84,6 +88,19 @@ a
&: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"
position: relative
@ -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

View File

@ -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="#")
.menu
.showButton(for="show-menu")
i.fa.fa-fw.fa-bars
ul.flexview
.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}