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

Merge pull request #198 from ZeusWPI/revamp-contact

Browse source 
Revamp contact
This commit is contained in:
lorin 2017-10-23 17:47:16 +02:00 committed by GitHub
commit 439e397ab0
6 changed files with 233 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
content/about/about.erb
View file

@ -25,12 +25,15 @@ narrow_page: true
</p> </p>
<h2>The board</h2> <h2>The board</h2>
<p id="board">
<p>
The board is the oil in the machine and is the driving force behind the organization of events and projects. The board is the oil in the machine and is the driving force behind the organization of events and projects.
The Zeus WPI board for the <%= pretty_year @config[:academic_year] %> academic year is: The Zeus WPI board for the <%= pretty_year @config[:academic_year] %> academic year is:
</p> </p>
<blockquote>
Mail us all at: <a href='mailto:bestuur@zeus.ugent.be'>bestuur@zeus.ugent.be</a>
</blockquote>
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>

162
content/about/contact.erb
View file

@ -1,49 +1,129 @@
--- ---
narrow_page: true narrow_page: true
icon_size: 2x
contact_links:
- icon: facebook
link: https://www.facebook.com/zeus.wpi/
description: Facebook
action: Like us
- icon: envelope
link: ../about#board
description: Email
action: Mail us
- icon: twitter
link: https://twitter.com/zeuswpi
description: Twitter
action: Follow us
- icon: slack
link: https://zeuswpi.slack.com/
description: Slack
action: Message us
- icon: commenting
link: irc://wina.ugent.be/#zeus
description: irc
action: Chat with us
- icon: inbox
link: http://lists.zeus.ugent.be/mailman/listinfo/leden
description: Mailinglist
action: Keep up to date
- icon: github
link: https://github.com/ZeusWPI/
description: GitHub
action: Fork us
- icon: phone
link: 'tel:+3292644751'
description: Phone
action: Call us
--- ---
<%= render '/partials/_about_sub_navbar.*', selected: 'contact' %> <%= render '/partials/_about_sub_navbar.*', selected: 'contact' %>
<h1 class="title is-1 has-text-centered">Contact</h1> <h1 class='title is-1 has-text-centered'>Contact us</h1>
<h2 class='subtitle is-4 has-text-centered has-text-weight-light'>bleep bloop</h1>
<div class="content"> <!-- Contact buttons -->
<ul id='contact-icons' class='columns is-centered is-multiline'>
<% @item[:contact_links].each do |option| %>
<div class='column is-one-quarter-desktop is-one-third-tablet is-half-mobile'>
<li id='<%= option[:description] %>' class='contact-circle-option'>
<a href='<%= option[:link] %>' class='contact-circle-wrapper'>
<div class='contact-circle is-centered'>
<div class='contact-circle-pulse grow'></div>
<%= fa option[:icon], size: @item[:icon_size], class: 'grow-large' %>
</div>
</a>
<h4 class='contact-description is-uppercase'><%= option[:description] %></h3>
<p class='has-text-centered'>
<a href='<%= option[:link] %>' class='contact-text-link is-link'><%= option[:action] %></a>
</p>
</li>
</div>
<% end %>
</ul>
<p> <!-- Extra information tiles -->
Zeus WPI is located in the basement of the S9 building on Campus Sterre, by it's members often named “de kelder”. <div id='contact-info' class='tile is-ancestor is-vertical'>
</p> <div class='tile is-parent'>
<div class='tile is-parent is-vertical'>
<p>Reach us:</p> <!-- Payment information -->
<div id='payment-info' class='tile is-child box content has-text-centered'>
<h1 class='title has-text-centered'>Pay us</h1>
<div class='is-divider'></div>
<p id='banknumber' class='is-size-5'>
BE32 9799 9370 6502
</p>
<a class='button' href='https://zeus.ugent.be/tab/'>
<%= fa :euro, fw: true %> Use Tab
</a>
</div>
<ul> <!-- Calling information -->
<li> <div id='calling-info' class='tile is-child box content has-text-centered'>
come to “de kelder” and say hi! (find us <a href="https://soleway.ugent.be/routes/4370"> here</a>). <h1 class='title has-text-centered'>Call us</h1>
</li> <div class='is-divider'></div>
<li> <p id='phone-number' class='is-size-5'>
mail <a href="mailto:bestuur@zeus.ugent.be">the board</a> (bestuur@zeus.ugent.be), or some <a href="../about"> specific members </a> +32 92 64 47 5</br>
</li> Intern: 4751
<li> </p>
join our <a href="https://zeuswpi.slack.com/">Slack team</a> (by *ugent.be mail or invite) </div>
</li> </div>
<li>
send a yellow postcard “Zeus WPI – Krijgslaan 281, S9 – 9000 Gent” <!-- Address information -->
</li> <div id='address-info' class='tile is-parent'>
<li> <div class='tile is-child box content'>
keep up to date trough our <a href="http://lists.zeus.ugent.be/mailman/listinfo/leden">mailinglist</a> <h1 class='title has-text-centered'>Find us</h1>
</li> <div class='is-divider'></div>
<li> <p class='is-size-5'>
check out our <a href="irc://wina.ugent.be/#zeus">IRC-channel</a> You can find our hiding place, or what we call <strong>'de kelder'</strong> at the basement level of following address:
</li> </p>
<li> <blockquote id='address' class='is-size-5'>
call us at <a href="tel://+3292644751">09 264 4751</a> (intern: 4751) Krijgslaan 281 </br>
</li> Campus Sterre S9 </br>
<li> 9000 Gent </br>
deposit at BE32 9799 9370 6502 (BIC: ARSP BE 22) </blockquote>
</li> <div id='contact-location-buttons'>
<li> <a class='button' href='https://www.google.com/maps/place/Zeus+WPI/@51.023115,3.7103,17z/data=!4m5!3m4!1s0x0:0x49fd54f81cafeb5f!8m2!3d51.0231149!4d3.7103?hl=en-US'>
follow us on Twitter: <a href="http://twitter.com/ZeusWPI">@ZeusWPI</a> <%= fa :'map-marker', fw: true %> Google Maps
</li> </a>
<li> <a class='button' href='https://soleway.ugent.be/routes/4370'>
like us on <a href="https://www.facebook.com/zeus.wpi">Facebook</a> <%= fa :'map-signs', fw: true %> Soleway
</li> </a>
</ul> </div>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1156.8611760710044!2d3.7102397000000003!3d51.023149499999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c373c271502d9b%3A0x49fd54f81cafeb5f!2sZeus+WPI!5e0!3m2!1sen!2sbe!4v1481415854540" height="450" style="border:0;width:100%" allowfullscreen></iframe> </div>
</div> </div>
</div>
<!-- Slack information -->
<div id='slack-info' class='tile is-parent'>
<div class='tile is-child box content'>
<h1 class='title has-text-centered'>Slack info</h1>
<div class='is-divider'></div>
<p id='slack-info-text' class='is-size-5'>
You can register with any <strong>*.zeus.ugent.be</strong> or even <strong>*.ugent.be</strong> email address.
If you don't have one, try to reach us on one of our other channels and ask for an invitation.
</p>
</div>
</div>
</div>
<!-- Embedded Google Maps -->
<iframe id='google-maps' src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1156.8611760710044!2d3.7102397000000003!3d51.023149499999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c373c271502d9b%3A0x49fd54f81cafeb5f!2sZeus+WPI!5e0!3m2!1sen!2sbe!4v1481415854540' height='450' style='border:0;width:100%' allowfullscreen></iframe>

98
content/assets/stylesheets/includes/about.scss Normal file
View file

@ -0,0 +1,98 @@
#contact-icons {
display: flex;
justify-content: center;
align-items: center;
> .column {
max-width: 70vw;
}
.contact-circle-option {
display: block;
max-width: 200px;
.contact-circle-wrapper {
display: block;
position: relative;
width: 60%;
padding-bottom: 60%;
height: 0;
margin: 0 auto;
.contact-circle-pulse {
position: absolute;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid $secondary;
margin: 0 auto;
}
.contact-circle {
position: absolute;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $secondary;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
color: $highlighted-text-colour;
}
}
.contact-circle-wrapper:hover, .contact-circle-wrapper:focus {
.grow {
transition: all .2s ease-in-out;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
.contact-description {
display: block;
text-align: center;
margin-top: 20px;
color: $primary;
}
.contact-text-link {
color: $text;
border-bottom: 1px solid $secondary;
margin-top: 7px;
//font-size: 1.5em;
}
.contact-text-link:hover {
color: $secondary;
}
}
}
#contact-info {
h1 {
margin-bottom: 0.3em;
}
.is-divider {
margin-bottom: 0.7em;
margin-top: 0.7em;
}
#contact-location-buttons {
width: 100%;
text-align: center;
}
.button:hover, .button:focus {
border-color: $primary;
}
}

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

@ -174,6 +174,10 @@ footer.footer {
} }
.content { .content {
blockquote {
border-left-color: $secondary;
}
// Bold definition types in <dl></dl> // Bold definition types in <dl></dl>
dt { dt {
font-weight: bold; font-weight: bold;
@ -181,9 +185,11 @@ footer.footer {
figure { figure {
position: relative; position: relative;
img { img {
display: block; display: block;
} }
figcaption { figcaption {
position: absolute; position: absolute;
background-color: rgba(0,0,0,.7); background-color: rgba(0,0,0,.7);
@ -196,6 +202,7 @@ footer.footer {
opacity: 0; opacity: 0;
} }
&:hover { &:hover {
figcaption { figcaption {
opacity: 1; opacity: 1;

2
content/assets/stylesheets/includes/tiles.scss
View file

@ -24,7 +24,7 @@ a.box {
filter: grayscale(30%); filter: grayscale(30%);
.event-content { .event-content {
color: #4a4a4a; color: $text;
height: 100%; height: 100%;
width: 100%; width: 100%;
background: rgba($tertiary, 0.2); background: rgba($tertiary, 0.2);

1
content/assets/stylesheets/main.scss
View file

@ -34,3 +34,4 @@ body.site {
@import "includes/projects"; @import "includes/projects";
@import "includes/navbar"; @import "includes/navbar";
@import "includes/search"; @import "includes/search";
@import "includes/about"