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>

160
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'>
<p> <% @item[:contact_links].each do |option| %>
Zeus WPI is located in the basement of the S9 building on Campus Sterre, by it's members often named “de kelder”. <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> </p>
</li>
</div>
<% end %>
</ul>
<p>Reach us:</p> <!-- Extra information tiles -->
<div id='contact-info' class='tile is-ancestor is-vertical'>
<div class='tile is-parent'>
<div class='tile is-parent is-vertical'>
<ul> <!-- Payment information -->
<li> <div id='payment-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'>Pay us</h1>
</li> <div class='is-divider'></div>
<li> <p id='banknumber' 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> BE32 9799 9370 6502
</li> </p>
<li> <a class='button' href='https://zeus.ugent.be/tab/'>
join our <a href="https://zeuswpi.slack.com/">Slack team</a> (by *ugent.be mail or invite) <%= fa :euro, fw: true %> Use Tab
</li> </a>
<li> </div>
send a yellow postcard “Zeus WPI – Krijgslaan 281, S9 – 9000 Gent”
</li> <!-- Calling information -->
<li> <div id='calling-info' class='tile is-child box content has-text-centered'>
keep up to date trough our <a href="http://lists.zeus.ugent.be/mailman/listinfo/leden">mailinglist</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'>
check out our <a href="irc://wina.ugent.be/#zeus">IRC-channel</a> +32 92 64 47 5</br>
</li> Intern: 4751
<li> </p>
call us at <a href="tel://+3292644751">09 264 4751</a> (intern: 4751) </div>
</li> </div>
<li>
deposit at BE32 9799 9370 6502 (BIC: ARSP BE 22) <!-- Address information -->
</li> <div id='address-info' class='tile is-parent'>
<li> <div class='tile is-child box content'>
follow us on Twitter: <a href="http://twitter.com/ZeusWPI">@ZeusWPI</a> <h1 class='title has-text-centered'>Find us</h1>
</li> <div class='is-divider'></div>
<li> <p class='is-size-5'>
like us on <a href="https://www.facebook.com/zeus.wpi">Facebook</a> You can find our hiding place, or what we call <strong>'de kelder'</strong> at the basement level of following address:
</li> </p>
</ul> <blockquote id='address' class='is-size-5'>
<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> Krijgslaan 281 </br>
Campus Sterre S9 </br>
9000 Gent </br>
</blockquote>
<div id='contact-location-buttons'>
<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'>
<%= fa :'map-marker', fw: true %> Google Maps
</a>
<a class='button' href='https://soleway.ugent.be/routes/4370'>
<%= fa :'map-signs', fw: true %> Soleway
</a>
</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> </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"