Clean-up sponsorende leden

- Simplified and clean-up html & css
- It's "sponsorende leden", not "sponserende leden"
This commit is contained in:
Niko Strijbol 2019-12-08 22:56:08 +01:00
parent 70c315e79e
commit 5ec2e56d1c
No known key found for this signature in database
GPG key ID: 1A8AEBABD9012251
4 changed files with 111 additions and 113 deletions

View file

@ -1,59 +0,0 @@
---
narrow_page: true
---
<%= render '/partials/_about_sub_navbar.*', selected: 'sponsoring_members' %>
<h1 class='title is-1 has-text-centered'>Sponserende leden</h1>
<div id='sponsoring_members' class="content">
<% current_sponsoring_members.each do |member| %>
<div id="<%= member[:nickname] %>" class="box sponsoring_member">
<article class="columns is-mobile">
<div class="column is-gapless is-narrow logo-wrapper">
<% if member[:photo] %>
<div class="sponserend_image">
<img src="<%=member[:photo]%>">
</div>
<% else %>
<div class="sponserend_image" style="background-color: #ff7f00">
<div class="logo-initial has-text-centered">
<%= member[:name].chars.first %>
</div>
</div>
<% end %>
<p class="name"><%= member[:name] %></p>
<p class="username">(<%= member[:nickname] %>)</p>
</div>
<div class="text_wrapper">
<div class="column text_data">
<div>
<i class="quote">
"<%= to_HTML(member[:quote]) %>"
</i>
</div>
<div class="description_text" style="margin-top: 0.5em">
<%= to_HTML(member[:description]) %>
</div>
</div>
<div class="columns links">
<% member[:links].each do |link| %>
<% if link[:icon] %>
<a style="padding: 5px" class="social-icon" href="<%= link[:url] %>" target="_blank">
<span class="icon">
<%= fa link[:icon], {:size => "2x"} %>
</span>
</a>
<% else %>
<a style="padding: 5px" class="social-icon" href="<%= link[:url] %>" target="_blank">
<span class="icon">
<%= fa :globe, {:size => "2x"} %>
</span>
</a>
<% end %>
<% end %>
</div>
</div>
</article>
</div>
<% end %>
</div>

View file

@ -0,0 +1,53 @@
---
narrow_page: true
---
<%= render '/partials/_about_sub_navbar.*', selected: 'sponsoring-members' %>
<h1 class='title is-1 has-text-centered'>Sponsorende leden</h1>
<div id='sponsoring-members' class="content">
<% current_sponsoring_members.each do |member| %>
<div id="<%= member[:nickname] %>" class="box sponsoring-member">
<article class="columns is-mobile">
<div class="column is-gapless is-narrow logo-wrapper">
<% if member[:photo] %>
<img src="<%= member[:photo] %>" alt="<%= member[:name] %>">
<% else %>
<div class="logo-initial has-text-centered">
<%= member[:name].chars.first %>
</div>
<% end %>
<div class="name"><%= member[:name] %></div>
<div class="username">(<%= member[:nickname] %>)</div>
</div>
<div class="column">
<div>
<blockquote>
<%= to_HTML(member[:quote]) %>
</blockquote>
<p class="description">
<%= to_HTML(member[:description]) %>
</p>
</div>
<div class="links">
<% member[:links].each do |link| %>
<% if link[:icon] %>
<a class="social-icon" href="<%= link[:url] %>" target="_blank">
<span class="icon">
<%= fa link[:icon], {:size => "2x"} %>
</span>
</a>
<% else %>
<a class="social-icon" href="<%= link[:url] %>" target="_blank">
<span class="icon">
<%= fa :globe, {:size => "2x"} %>
</span>
</a>
<% end %>
<% end %>
</div>
</div>
</article>
</div>
<% end %>
</div>

View file

@ -162,60 +162,64 @@ table.board-table {
}
}
.name{
padding-top: 0.75rem;
font-size: 1.4rem;
font-weight: bold;
}
.username{
margin-top: -1.5rem;
font-weight: lighter;
font-size: 1.1rem;
}
.logo-wrapper{
display: flex;
flex-direction: column;
align-items: center;
width: 14rem;
padding: 0.75rem 0;
}
@media screen and (max-width: 550px){
.logo-wrapper{
width: 10rem;
.sponsoring-member {
.name {
padding-top: 0.75rem;
font-size: 1.4rem;
font-weight: bold;
text-align: center;
}
.name{
font-size: 1rem;
.username {
font-weight: lighter;
font-size: 1.1rem;
}
.username{
font-size: 0.9rem;
.logo-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 14rem;
padding: 0.75rem 0;
img {
max-width: 9rem;
max-height: 9rem;
}
}
.links {
margin-top: 1.5rem;
.social-icon {
margin-right: 0.6rem;
}
}
blockquote {
font-size: 1.2rem;
}
.description {
font-size: 1.1rem;
font-weight: normal;
}
.logo-initial {
background-color: #ff7f00;
width: 7rem;
height: 7rem;
}
@media screen and (max-width: 550px){
.logo-wrapper {
width: 10rem;
}
.name{
font-size: 1rem;
}
.username{
font-size: 0.9rem;
}
}
}
.links{
padding-left: 1rem;
}
.quote {
font-size: 1.2rem;
}
.text_data {
margin: 2rem 0;
border-left: 0.25rem solid #09C3FF;
}
.description {
font-size: 1.1rem;
}
.sponserend_image {
width: 8rem;
height: 8rem;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
border-radius: 100000000000000px;
}

View file

@ -5,6 +5,6 @@
<li class="<%= 'is-active' if @selected == 'historiek'%>"><a href="/about/historiek">Historiek</a></li>
<li class="<%= 'is-active' if @selected == 'oud-bestuur'%>"><a href="/about/oud-bestuur">Oud-bestuur</a></li>
<li class="<%= 'is-active' if @selected == 'verslagen'%>"><a href="/about/verslagen">Verslagen</a></li>
<li class="<%= 'is-active' if @selected == 'sponsoring_members'%>"><a href="/about/sponserende_leden">Sponserende leden</a></li>
<li class="<%= 'is-active' if @selected == 'sponsoring-members'%>"><a href="/about/sponsorende-leden">Sponsorende leden</a></li>
</ul>
</div>