Attempt to make a better mobile navigation
This commit is contained in:
parent
0f8205a75d
commit
8000270a64
GPG Key ID:
1688DA83D222D0B5
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Reference in New Issue