Add contact fancy contact buttons

This commit is contained in:
Wout Schellaert 2017-10-13 23:04:42 +02:00
parent 1242a00fb1
commit c07f12bbd2
2 changed files with 44 additions and 64 deletions

View file

@ -5,80 +5,60 @@ contact_links:
- icon: facebook - icon: facebook
link: https://www.facebook.com/zeus.wpi/ link: https://www.facebook.com/zeus.wpi/
description: FACEBOOK description: FACEBOOK
action: 'Like us' action: Like us
- icon: envelope - icon: envelope
link: mailto:bestuur@zeus.ugent link: ../about#board
description: EMAIL description: EMAIL
action: bestuur@zeus.ugent action: Mail us
- icon: twitter - icon: twitter
link: https://twitter.com/zeuswpi link: https://twitter.com/zeuswpi
description: TWITTER description: TWITTER
action: 'Follow us' action: Follow us
- icon: slack - icon: slack
link: https://zeuswpi.slack.com/ link: https://zeuswpi.slack.com/
description: SLACK description: SLACK
action: Message us 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</h1>
<div class=''> <div class='is-divider'></div>
<%# TODO: Put in a loop for all entries %> <ul id='contact-icons' class='columns is-centered is-multiline'>
<ul id='contact-icons' class='columns is-centered is-multiline'> <% @item[:contact_links].each do |option| %>
<% @item[:contact_links].each do |option| %> <div class='column is-one-quarter-desktop is-one-third-tablet is-half-mobile'>
<div class='column is-one-quarter-desktop is-half-tablet is-two-thirds-mobile'> <li class='contact-circle-option'>
<li 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> <%= fa option[:icon], size: @item[:icon_size], class: 'grow-large' %>
<%= fa option[:icon], size: @item[:icon_size], class: 'grow-large' %> </div>
</div> </a>
</a> <h4 class='contact-description'><%= option[:description] %></h3>
<h4 class='contact-description'><%= option[:description] %></h3> <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>
</li> </div>
</div> <% end %>
<% end %> </ul>
</ul>
<p> <div class='is-divider'></div>
Zeus WPI is located in the basement of the S9 building on Campus Sterre, by it's members often named “de kelder”. </ul>
</p> <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>
<ul>
<li>
come to “de kelder” and say hi! (find us <a href='https://soleway.ugent.be/routes/4370'> here</a>).
</li>
<li>
mail <a href='mailto:bestuur@zeus.ugent.be'>the board</a> (bestuur@zeus.ugent.be), or some <a href='../about'> specific members </a>
</li>
<li>
join our <a href='https://zeuswpi.slack.com/'>Slack team</a> (by *ugent.be mail or invite)
</li>
<li>
send a yellow postcard “Zeus WPI Krijgslaan 281, S9 9000 Gent”
</li>
<li>
keep up to date trough our <a href='http://lists.zeus.ugent.be/mailman/listinfo/leden'>mailinglist</a>
</li>
<li>
check out our <a href='irc://wina.ugent.be/#zeus'>IRC-channel</a>
</li>
<li>
call us at <a href='tel://+3292644751'>09 264 4751</a> (intern: 4751)
</li>
<li>
deposit at BE32 9799 9370 6502 (BIC: ARSP BE 22)
</li>
<li>
follow us on Twitter: <a href='http://twitter.com/ZeusWPI'>@ZeusWPI</a>
</li>
<li>
like us on <a href='https://www.facebook.com/zeus.wpi'>Facebook</a>
</li>
</ul>
<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>

View file

@ -9,7 +9,7 @@
.contact-circle-option { .contact-circle-option {
display: block; display: block;
max-width: 70vw; max-width: 200px;
.contact-circle-wrapper { .contact-circle-wrapper {
display: block; display: block;
@ -67,7 +67,7 @@
color: $text; color: $text;
border-bottom: 1px solid $secondary; border-bottom: 1px solid $secondary;
margin-top: 7px; margin-top: 7px;
font-size: 1.5em; //font-size: 1.5em;
} }
.contact-text-link:hover { .contact-text-link:hover {