update to bulma 0.7.0

This commit is contained in:
Lorin Werthen 2018-04-14 23:33:56 +02:00
parent 1ac6365d16
commit 1516622f91
No known key found for this signature in database
GPG key ID: F11FFC921E0E08E0
9 changed files with 90 additions and 133 deletions

View file

@ -4,6 +4,6 @@ $('#tipue_search_input_field').on 'focusin', ->
$('#tipue_search_input_field').on 'focusout', ->
$('#tipue_search_input').removeClass("focused")
$('.nav-toggle').on 'click', ->
$('.nav-menu').toggleClass('is-active')
$('.nav-toggle').toggleClass('is-active')
$('.navbar-burger').on 'click', ->
$('.navbar-menu').toggleClass('is-active')
$('.navbar-burger').toggleClass('is-active')

View file

@ -50,20 +50,13 @@
}
}
#cammie-section {
.nav-center{
width:100%;
}
button{
background-color: $orange;
color: white;
margin-top: 5px;
border-radius: 0;
border: none;
width: 33.333333333333333333333333333333333333333333333333333%;
&:not(:last-child){
margin-right: 5px;
}
width: 100%;
&:hover{
color: #363636;
}

View file

@ -17,62 +17,39 @@
}
}
.nav-menu {
z-index: 20;
.nav-transparent {
background: none;
}
}
.actual-nav-bar {
padding: 0;
margin: 10px;
margin-bottom: 0;
border-bottom: 1px solid #eee;
}
#inline-logo {
min-width: 38.703px;
}
#logo-link {
@include desktop {
width: 124px;
border-bottom: 2px solid $body-background;
margin-bottom: -2px;
}
#logo {
padding-left: 10px;
@include desktop {
max-width: none;
max-height: none;
left: 0;
bottom: 5px;
width: 100px;
position: absolute;
}
}
}
//Height of the line underneath when hovering over a menu item
$border-height: 3px;
.nav {
height: 100%;
align-items: flex-end;
z-index: auto;
.nav-item {
transition: 0.2s;
.navbar-item {
font-variant: small-caps;
font-size: 1.15em;
&:not(.nav-search) {
border-bottom: $border-height solid transparent;
border-top: 3px solid transparent;
}
&:hover {
transition: 0.2s;
.navbar:not(.is-transparent) {
.navbar-item {
&:not(.is-active) {
color: #7a7a7a;
}
&.social-icon {
padding-left: 5px;
padding-right: 5px;
}
&:not(.nav-search):hover, &.is-active {
border-bottom-color: $zeus-orange;
&.is-active {
color: $primary;
border-bottom: 2px solid;
margin-bottom: -2px;
}
}
}

View file

@ -15,6 +15,7 @@ $turquoise: #30D1B2;
$family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
$link: $orange;
$link-visited: $orange;
$border-hover: $blue;

View file

@ -49,14 +49,18 @@ title: Cammie
</div>
</div>
</div>
<nav class="nav">
<div class="nav-center">
<nav class="nav columns">
<div class="column">
<button class="button ctrl" data-command="set_pos" data-x="16" data-y="16">
Kleine tafel
</button>
</div>
<div class="column">
<button class="button ctrl" data-command="set_pos" data-x="50" data-y="10">
Grote tafel
</button>
</div>
<div class="column">
<button class="ctrl button" data-command="set_pos" data-x="0" data-y="12">
Zetel
</button>

View file

@ -35,10 +35,7 @@
</div>
<!-- latest blogpost -->
<div class="tile is-6 is-parent">
<%= render '/partials/_tile.*',
article: sorted_articles.first,
small_text: "Latest blogpost",
htmlclass:"highlighted"%>
<%= render '/partials/_blog_preview.*', post: sorted_articles.first %>
</div>
</div>
<div class="tile">
@ -52,9 +49,7 @@
<div class="tile is-vertical">
<% sorted_articles[1..3].each do |post| %>
<div class="tile is-parent ">
<%= render '/partials/_tile.*',
article: post,
small_text: "Blogpost"%>
<%= render '/partials/_blog_preview.*', post: post %>
</div>
<%end%>

View file

@ -1,72 +1,59 @@
<div id="navbar">
<div class="columns">
<div class="logo-wrapper column is-narrow is-hidden-mobile">
<a id="logo-link" href="/">
<div class="navbar <%= 'is-transparent' if defined? @transparent_nav %>">
<div class="navbar-brand">
<a class="navbar-item" id="logo-link" href="/">
<% if christmastime? %>
<img id="santa" src="/assets/images/pusheen.png">
<% end %>
<img id="logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
</a>
</div>
<div class="actual-nav-bar column">
<nav class="nav">
<a class="is-hidden-tablet nav-item" href="/">
<img id="inline-logo" src="<%= zeus_logo_url color: @zeus_logo_color %>" alt="" />
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="nav-menu nav-left <%= 'nav-transparent' if defined? @transparent_nav %>">
</div>
<div class="navbar-menu">
<div class="navbar-start">
<% navigables.each do |i| %>
<a class="nav-item is-tab <%= 'is-active' if child_of(i) %>" href="<%= i.path %>">
<a class="navbar-item <%= 'is-active' if child_of(i) %>" href="<%= i.path %>">
<%= i[:title] %>
</a>
<% end %>
</div>
<!-- Filler for when mobile -->
<div class="nav-left is-hidden-tablet"></div>
<div class="nav-right">
<form action="/search/?" method="get">
<div id="tipue_search_input" class="nav-item nav-search">
<!-- TODO: Remove this is-hidden-touch, it's just a convenience for now -->
<div class="navbar-end is-hidden-touch">
<form action="/search/?" method="get" class="navbar-item nav-search">
<div id="tipue_search_input">
<input type="text" name="q" id="tipue_search_input_field" autocomplete="off">
</div>
</form>
</div>
<span class="nav-toggle">
<span></span>
<span></span>
<span></span>
</span>
<div class="nav-right is-hidden-mobile">
<a class="nav-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
<a class="navbar-item social-icon" href="https://github.com/ZeusWPI" target="_blank">
<span class="icon">
<%= fa :github %>
</span>
</a>
<a class="nav-item social-icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
<a class="navbar-item social-icon" href="https://www.facebook.com/zeus.wpi/" target="_blank">
<span class="icon">
<%= fa :facebook %>
</span>
</a>
<a class="nav-item social-icon" href="/feed.xml" target="_blank">
<a class="navbar-item social-icon" href="/feed.xml" target="_blank">
<span class="icon">
<%= fa :rss %>
</span>
</a>
<a class="nav-item social-icon" href="/ical.ics">
<a class="navbar-item social-icon" href="/ical.ics">
<span class="icon">
<%= fa :calendar %>
</span>
</a>
<a class="nav-item social-icon" href="//zeus.ugent.be/wiki">
<a class="navbar-item social-icon" href="//zeus.ugent.be/wiki">
<span class="icon">
<%= fa :'wikipedia-w' %>
</span>
</a>
</div>
</nav>
</div>
</div>
</div>

6
package-lock.json generated
View file

@ -5,9 +5,9 @@
"requires": true,
"dependencies": {
"bulma": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.5.1.tgz",
"integrity": "sha1-2ygxyUr+cyJQx7ElJ6e3kqTcnvg="
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/bulma/-/bulma-0.7.0.tgz",
"integrity": "sha1-1IAXDIdoy3dP9galqvXeqpLNpiI="
},
"bulma-divider": {
"version": "0.0.1",

View file

@ -7,7 +7,7 @@
"license": "MIT",
"repository": "https://github.com/ZeusWPI/zeus.ugent.be",
"dependencies": {
"bulma": "0.5.1",
"bulma": "0.7.0",
"bulma-divider": "~0.0.1"
}
}