Merge pull request #448 from ZeusWPI/mobile-css-enhancements

fix some mobile css and balance out the site a bit more
This commit is contained in:
lorin 2021-03-21 09:23:56 +01:00 committed by GitHub
commit 2e0c34be56
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 59 additions and 67 deletions

View file

@ -66,17 +66,13 @@ table.board-table {
} }
#contact-icons { #contact-icons {
display: flex;
justify-content: center;
align-items: center;
> .column { > .column {
max-width: 70vw; max-width: 40vw;
} }
.contact-circle-option { .contact-circle-option {
display: block; //display: block;
max-width: 200px; //max-width: 200px;
.contact-circle-wrapper { .contact-circle-wrapper {
display: block; display: block;

View file

@ -12,7 +12,6 @@
.titlewrap { .titlewrap {
position: relative; position: relative;
margin: auto; margin: auto;
min-width: 400px;
.title { .title {
@include tablet { @include tablet {
@ -66,20 +65,10 @@
} }
.blog-preview { .blog-preview {
.blogpreview-heading { .blogpreview-extra {
display: flex;
> a {
flex-grow: 1;
margin-bottom: 0;
display: inline-block;
}
}
> .blogpreview-extra {
color: #7a7a7a; color: #7a7a7a;
display: inline-block;
margin-bottom: 5px;
} }
> .blogpreview-tags { .blogpreview-tags {
color: #7a7a7a; color: #7a7a7a;
} }
} }

View file

@ -30,6 +30,14 @@ $top_coder_size: 80px;
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
>h2 {
margin-bottom: 0;
}
>hr {
margin: 0.4rem 0;
}
.event-time-loc { .event-time-loc {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;

View file

@ -6,8 +6,7 @@
@import "includes/variables"; @import "includes/variables";
@import "node_modules/bulma/bulma"; @import "node_modules/bulma/bulma";
@import "node_modules/bulma-divider/dist/css/bulma-divider"; @import "node_modules/bulma-timeline/src/sass/index.sass";
@import "node_modules/bulma-timeline/dist/css/bulma-timeline";
// Sticky footer // Sticky footer

View file

@ -47,9 +47,10 @@ contact_links:
<h2 class='subtitle is-4 has-text-centered has-text-weight-light'>bleep bloop</h2> <h2 class='subtitle is-4 has-text-centered has-text-weight-light'>bleep bloop</h2>
<!-- Contact buttons --> <!-- Contact buttons -->
<ul id='contact-icons' class='columns is-centered is-multiline'> <div id='contact-icons' class='columns is-centered is-multiline is-mobile'>
<% @item[:contact_links].each do |option| %> <% @item[:contact_links].each do |option| %>
<li id='<%= option[:description] %>' class='contact-circle-option column is-one-quarter-desktop is-one-third-tablet is-half-mobile'> <div class='column is-one-quarter-desktop is-one-third-tablet is-half-mobile'>
<div id='<%= option[:description] %>' class='contact-circle-option'>
<a href='<%= option[:link] %>' class='contact-circle-wrapper'> <a href='<%= option[:link] %>' class='contact-circle-wrapper'>
<div class='contact-circle is-centered'> <div class='contact-circle is-centered'>
<div class='contact-circle-pulse grow'></div> <div class='contact-circle-pulse grow'></div>
@ -60,9 +61,10 @@ contact_links:
<p class='has-text-centered'> <p class='has-text-centered'>
<a href='<%= option[:link] %>' class='contact-text-link is-link'><%= option[:action] %></a> <a href='<%= option[:link] %>' class='contact-text-link is-link'><%= option[:action] %></a>
</p> </p>
</li> </div>
</div>
<% end %> <% end %>
</ul> </div>
<div id="board"> <div id="board">
<h2>The board (<%= pretty_year @config[:academic_year] %>)</h2> <h2>The board (<%= pretty_year @config[:academic_year] %>)</h2>
@ -83,7 +85,7 @@ contact_links:
<!-- Payment information --> <!-- Payment information -->
<div id='payment-info' class='tile is-child box content has-text-centered'> <div id='payment-info' class='tile is-child box content has-text-centered'>
<h1 class='title has-text-centered'>Pay us</h1> <h1 class='title has-text-centered'>Pay us</h1>
<div class='is-divider'></div> <hr/>
<p id='banknumber' class='is-size-5'> <p id='banknumber' class='is-size-5'>
BE32 9799 9370 6502 BE32 9799 9370 6502
</p> </p>
@ -98,7 +100,7 @@ contact_links:
<!-- Calling information --> <!-- Calling information -->
<div id='calling-info' class='tile is-child box content has-text-centered'> <div id='calling-info' class='tile is-child box content has-text-centered'>
<h1 class='title has-text-centered'>Call us</h1> <h1 class='title has-text-centered'>Call us</h1>
<div class='is-divider'></div> <hr/>
<p id='phone-number' class='is-size-5'> <p id='phone-number' class='is-size-5'>
+32 9 264 47 51<br/> +32 9 264 47 51<br/>
Internal: 4751 Internal: 4751
@ -110,7 +112,7 @@ contact_links:
<div id='address-info' class='tile is-parent'> <div id='address-info' class='tile is-parent'>
<div class='tile is-child box content'> <div class='tile is-child box content'>
<h1 class='title has-text-centered'>Find us</h1> <h1 class='title has-text-centered'>Find us</h1>
<div class='is-divider'></div> <hr/>
<p class='is-size-5'> <p class='is-size-5'>
You can find our hiding place, or what we call <strong>'de kelder'</strong> at the basement level of following address: You can find our hiding place, or what we call <strong>'de kelder'</strong> at the basement level of following address:
</p> </p>
@ -138,7 +140,7 @@ contact_links:
<div id='mattermost-info' class='tile is-parent'> <div id='mattermost-info' class='tile is-parent'>
<div class='tile is-child box content'> <div class='tile is-child box content'>
<h1 class='title has-text-centered'>Mattermost info</h1> <h1 class='title has-text-centered'>Mattermost info</h1>
<div class='is-divider'></div> <hr/>
<p id='mattermost-info-text' class='is-size-5'> <p id='mattermost-info-text' class='is-size-5'>
You can register with any valid email address. You can register with any valid email address.
</p> </p>

View file

@ -21,7 +21,7 @@
<div class="tile is-parent"> <div class="tile is-parent">
<div class="tile is-child"> <div class="tile is-child">
<div class="block has-text-centered"> <div class="block has-text-centered">
<span class="title is-2 underline--magical">Upcoming Events</span> <span class="title is-2-responsive underline--magical">Upcoming Events</span>
</div> </div>
<% unless upcoming_events.empty? %> <% unless upcoming_events.empty? %>
<% upcoming_events.each do |event| %> <% upcoming_events.each do |event| %>
@ -41,7 +41,7 @@
<div class="tile is-parent"> <div class="tile is-parent">
<div class="tile is-child"> <div class="tile is-child">
<div class="block has-text-centered"> <div class="block has-text-centered">
<span class="title is-2 underline--magical">Top Coders</span> <span class="title is-2-responsive underline--magical">Top Coders</span>
</div> </div>
<div class="box gamification-tile"> <div class="box gamification-tile">
<div class="content"> <div class="content">
@ -60,7 +60,7 @@
<div class="block has-text-centered"> <div class="block has-text-centered">
<span class="title is-2 underline--magical">Previous Events</span> <span class="title is-2-responsive underline--magical">Previous Events</span>
</div> </div>
<% previous_events[0..3].each do |event| %> <% previous_events[0..3].each do |event| %>
<div class="block"> <div class="block">
@ -82,7 +82,7 @@
</p> </p>
</div> </div>
<div class="block has-text-centered"> <div class="block has-text-centered">
<span class="title is-2 underline--magical">Blogposts</span> <span class="title is-2-responsive underline--magical">Blogposts</span>
</div> </div>
<% sorted_articles[0..3].each do |post| %> <% sorted_articles[0..3].each do |post| %>
<%= render '/partials/_blog_preview.*', post: post %> <%= render '/partials/_blog_preview.*', post: post %>

2
drive

@ -1 +1 @@
Subproject commit e346d083f848488ec334619a5be9ab924123ba1d Subproject commit 4a68374555496d3d849ee95d74aa0c88883670b3

View file

@ -25,7 +25,7 @@
<%= item[:title] %> <%= item[:title] %>
</h1> </h1>
<% if item[:author] %> <% if item[:author] %>
<h2 class="subtitle is-3-responsive has-text-centered animated fadeInLeft"> <h2 class="subtitle is-4-responsive has-text-centered animated fadeInLeft">
door <%= item[:author] %> door <%= item[:author] %>
</h2> </h2>
<% end %> <% end %>

View file

@ -7,8 +7,8 @@
<% if item[:subnavigation] %> <% if item[:subnavigation] %>
<%= render '/partials/_sub_navbar.*', selected: item[:subnavigation][:identifier] %> <%= render '/partials/_sub_navbar.*', selected: item[:subnavigation][:identifier] %>
<% end %> <% end %>
<div class="columns"> <div class="columns is-centered">
<article class="column is-8 is-offset-2 <%= 'toc-container' if @item[:toc] %>"> <article class="column is-8 <%= 'toc-container' if @item[:toc] %>">
<% end %> <% end %>
<%= yield %> <%= yield %>

View file

@ -1,21 +1,30 @@
<div class="content blog-preview"> <div class="content blog-preview">
<div class="blogpreview-heading"> <div class="blogpreview-heading columns is-multiline is-gapless">
<a class="title is-3" href="<%= relative_path_to(post) %>"> <div class="column is-full">
<%= post[:title] %> <div class="columns is-gapless is-vcentered">
</a> <div class="column">
<div class="blogpreview-tags"> <a class="title is-3 is-size-4-mobile" href="<%= relative_path_to(post) %>">
<% post[:tags]&.each do |tag| %> <%= post[:title] %>
<!-- The following code is a bit hacky, fix when necessary --> </a>
<a class="tag is-normal is-rounded" href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>> </div>
<%= tag %> <% if post[:tags] %>
</a> <div class="column is-narrow">
<% end %> <div class="blogpreview-tags">
<% post[:tags]&.each do |tag| %>
<!-- The following code is a bit hacky, fix when necessary -->
<a class="tag is-normal is-rounded" href=<%= "/blog/#{tag.gsub(' ', '_')}/index.html" %>>
<%= tag %>
</a>
<% end %>
</div>
</div>
<% end %>
</div>
</div> </div>
<small class="column blogpreview-extra"><%= post[:created_at] %><% if post[:author] %> • <%= post[:author] %> <% end %> <%= "• #{post[:description]}" if post[:description] %></small>
</div> </div>
<small class="blogpreview-extra"><%= post[:created_at] %><% if post[:author] %> • <%= post[:author] %> <% end %> • <%= post[:description] %></small>
<br/>
<p> <p>
<%= excerptize(post.reps[:text].compiled_content, length: 500).tr("\n", ' ')%> <%= excerptize(post.reps[:text].compiled_content, length: 500).tr("\n", ' ')%>
</p> </p>
<hr> <hr>
</div> </div>

View file

@ -12,7 +12,7 @@
<img class="event-tile-image" src="<%= @event[:image] %>" alt=""> <img class="event-tile-image" src="<%= @event[:image] %>" alt="">
<% end %> <% end %>
<div class="event-text"> <div class="event-text">
<h2 class="is-size-5-mobile has-text-centered"> <h2 class="is-size-4-mobile has-text-centered">
<%= @event[:title] %> <%= @event[:title] %>
</h2> </h2>
@ -20,7 +20,7 @@
<%= @event[:description] %> <%= @event[:description] %>
</div> </div>
<div class="is-divider"></div> <hr/>
<div class="is-size-7-mobile event-time-loc"> <div class="is-size-7-mobile event-time-loc">
<%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B, %H:%M') %> <%= fa :'clock-o' , fw: true %><%= @event[:time].strftime('%A %d %B, %H:%M') %>

View file

@ -80,11 +80,6 @@ data_sources:
items_root: /data items_root: /data
content_dir: data content_dir: data
layouts_dir: null layouts_dir: null
-
type: filesystem
items_root: /node_modules
content_dir: node_modules
layouts_dir: null
- -
type: filesystem type: filesystem
items_root: /about/verslagen/ items_root: /about/verslagen/

View file

@ -8,7 +8,6 @@
"repository": "https://github.com/ZeusWPI/zeus.ugent.be", "repository": "https://github.com/ZeusWPI/zeus.ugent.be",
"dependencies": { "dependencies": {
"bulma": "0.9.1", "bulma": "0.9.1",
"bulma-divider": "~0.2.0",
"bulma-timeline": "^3.0.4" "bulma-timeline": "^3.0.4"
} }
} }

View file

@ -2,17 +2,12 @@
# yarn lockfile v1 # yarn lockfile v1
bulma-divider@~0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/bulma-divider/-/bulma-divider-0.2.0.tgz#a9b4d9fe8b270c7cb7573023c575062bc62616f3"
integrity sha512-REe3k56GECRfDaqFjC8cwLhV4RxXmV0RubuzDJqwior9wlJcdHlN0qfW0tvUX+qphikaTQegIeRuhjRIAqkjkw==
bulma-timeline@^3.0.4: bulma-timeline@^3.0.4:
version "3.0.4" version "3.0.4"
resolved "https://registry.yarnpkg.com/bulma-timeline/-/bulma-timeline-3.0.4.tgz#494f458098a06dcf8dcc7fe8f2f158b63d1d1ef2" resolved "https://registry.yarnpkg.com/bulma-timeline/-/bulma-timeline-3.0.4.tgz"
integrity sha512-gCUOcSUuzHoeVMkCpLF49j5Z5yl78XQ+KgJcT+1ju5WIGgBgVytRUob/dw5NHAxPLO2rmcvwYNbCJFp7w4WT4Q== integrity sha512-gCUOcSUuzHoeVMkCpLF49j5Z5yl78XQ+KgJcT+1ju5WIGgBgVytRUob/dw5NHAxPLO2rmcvwYNbCJFp7w4WT4Q==
bulma@0.9.1: bulma@0.9.1:
version "0.9.1" version "0.9.1"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.1.tgz#2bf0e25062a22166db5c92e8c3dcb4605ab040d8" resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.1.tgz"
integrity sha512-LSF69OumXg2HSKl2+rN0/OEXJy7WFEb681wtBlNS/ulJYR27J3rORHibdXZ6GVb/vyUzzYK/Arjyh56wjbFedA== integrity sha512-LSF69OumXg2HSKl2+rN0/OEXJy7WFEb681wtBlNS/ulJYR27J3rORHibdXZ6GVb/vyUzzYK/Arjyh56wjbFedA==