midgard/zeus.ugent.be
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

hamburger menu \o/

Browse source
This commit is contained in:
Lorin Werthen 2016-10-31 17:51:52 +01:00
parent a8a3cc535e
commit a0ce431892
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
4 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
content/assets/scripts/search.coffee
View file

@ -4,3 +4,7 @@ $ ->
$('#tipue_search_input_field').focusout ->
$('#tipue_search_input').removeClass("focused")
$('.nav-toggle').click ->
$('.nav-menu').toggleClass('open')
console.log 'heuj'

19
content/assets/stylesheets/includes/general.scss
View file

@ -107,6 +107,25 @@ footer.footer {
background-color: $turquoise;
}
// For better centering on mobile
@media screen and (max-width: 768px) {
#tipue_search_input {
margin: 5px;
}
.nav-menu {
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: all 0.30s ease-in-out;
&.open {
max-height: 250px;
}
}
}
#tipue_search_input {
background: none;
padding: 12px;

2
layouts/default.erb
View file

@ -41,6 +41,8 @@
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<%= content_for(@item, :head) %>
</head>
<body class="site">

18
layouts/partials/_navbar.erb
View file

@ -7,10 +7,10 @@
</div>
<div class="column">
<nav class="nav">
<div class="nav-left">
<a class="is-hidden-tablet nav-item" href="/">
<img id="inline-logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
</a>
<a class="is-hidden-tablet nav-item" href="/">
<img id="inline-logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
</a>
<div class="nav-menu nav-left">
<% nav_items do |item, active| %>
<a class="nav-item is-tab <%= 'is-active' if active %>" href="<%= item.path %>">
<%= item[:title] %>
@ -18,6 +18,10 @@
<% end %>
</div>
<!-- Filler for when mobile -->
<div class="nav-left is-hidden-desktop"></div>
<div class="nav-right">
<form action="/search/?" method="get">
<div id="tipue_search_input" class="nav-item">
@ -26,6 +30,12 @@
</form>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right is-hidden-mobile social-icons">
<a class="nav-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
<span class="icon">