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_field').on 'focusout', ->
$('#tipue_search_input').removeClass("focused") $('#tipue_search_input').removeClass("focused")
$('.nav-toggle').on 'click', -> $('.navbar-burger').on 'click', ->
$('.nav-menu').toggleClass('is-active') $('.navbar-menu').toggleClass('is-active')
$('.nav-toggle').toggleClass('is-active') $('.navbar-burger').toggleClass('is-active')

View file

@ -50,20 +50,13 @@
} }
} }
#cammie-section { #cammie-section {
.nav-center{
width:100%;
}
button{ button{
background-color: $orange; background-color: $orange;
color: white; color: white;
margin-top: 5px; margin-top: 5px;
border-radius: 0; border-radius: 0;
border: none; border: none;
width: 33.333333333333333333333333333333333333333333333333333%; width: 100%;
&:not(:last-child){
margin-right: 5px;
}
&:hover{ &:hover{
color: #363636; 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 { #logo-link {
@include desktop {
width: 124px;
border-bottom: 2px solid $body-background;
margin-bottom: -2px;
}
#logo { #logo {
padding-left: 10px; @include desktop {
max-width: none;
max-height: none;
left: 0;
bottom: 5px;
width: 100px; width: 100px;
position: absolute;
}
} }
} }
//Height of the line underneath when hovering over a menu item .navbar-item {
$border-height: 3px;
.nav {
height: 100%;
align-items: flex-end;
z-index: auto;
.nav-item {
transition: 0.2s;
font-variant: small-caps; font-variant: small-caps;
font-size: 1.15em; font-size: 1.15em;
&:not(.nav-search) {
border-bottom: $border-height solid transparent;
border-top: 3px solid transparent;
} }
&:hover { .navbar:not(.is-transparent) {
transition: 0.2s; .navbar-item {
&:not(.is-active) {
color: #7a7a7a;
} }
&.social-icon { &.is-active {
padding-left: 5px; color: $primary;
padding-right: 5px; border-bottom: 2px solid;
} margin-bottom: -2px;
&:not(.nav-search):hover, &.is-active {
border-bottom-color: $zeus-orange;
} }
} }
} }

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"; $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; $link-visited: $orange;
$border-hover: $blue; $border-hover: $blue;

View file

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

View file

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

View file

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

6
package-lock.json generated
View file

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

View file

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