continue detail page

This commit is contained in:
ajuvercr 2020-09-17 20:14:53 +02:00
parent 6d0d10fea0
commit 980af43fd4
6 changed files with 128 additions and 73 deletions

View file

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

View file

Before

Width:  |  Height:  |  Size: 2 KiB

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -7,6 +7,7 @@ konvent: wvk
website: https://wvk.ugent.be/
contact: wvk@student.ugent.be
---
Het WVK groepeert alle maatschappelijk-sociaal geïnspireerde studentenverenigingen en alle wetenschappelijke werkgroepen. Als konvent organiseert het WVK zelf (in tegenstelling tot sommige andere konventen) geen eigen activiteiten, maar richt het zich volledig op het samenbrengen en verdedigen van de belangen van de maatschappelijke verenigingen en wetenschappelijke werkgroepen aan de Universiteit Gent.
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwvkcentraal%2Fvideos%2F795092330635099%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Fwvkcentraal%2Fvideos%2F795092330635099%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden; margin: auto;" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>

View file

@ -110,8 +110,9 @@ footer {
font-weight: bolder;
}
.hidden{
display: none;}
.hidden {
display: none;
}
.nav-link svg {
width: 2rem;
@ -239,7 +240,6 @@ header {
background-color: var(--lightCyan);
}
h2 {
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
font-size: 2.8rem;
@ -542,7 +542,7 @@ fieldset p label input {
opacity: 1;
}
.title_link{
.title_link {
text-decoration: none;
}
@ -598,117 +598,150 @@ fieldset p label input {
min-width: 400px;
}
.details-logo>img{
.details-logo > img {
width: 100px;
}
.details-logo{
.details-logo {
display: flex;
justify-content: center;
}
.detail_title{
.detail_title {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.social>a {
.detail_title h2 {
margin: 0;
text-align: center;
}
.social > a {
display: block;
background-size: 50px;
background-repeat: no-repeat;
background-position: top center;
width: 100px;
height: 100px;
}
.social>a>.link{
.social > a > .link {
display: none;
}
.social>a>p{
.social > a > p {
padding-top: 65px;
text-align: center;
}
.social-facebook>a{
.social-facebook > a {
background-image: url(/assets/social/facebook_small.png);
}
.social-instagram>a{
.social-instagram > a {
background-image: url(/assets/social/instagram_small.png);
}
.social-twitter>a{
.social-twitter > a {
background-image: url(/assets/social/twitter_small.png);
}
.social-youtube>a{
.social-youtube > a {
background-image: url(/assets/social/youtube_small.png);
}
.social-tiktok>a{
.social-tiktok > a {
background-image: url(/assets/social/tiktok_small.png);
}
.social-linkedin>a{
.social-linkedin > a {
background-image: url(/assets/social/linkedIn_small.png);
}
.social-fetlife>a{
.social-fetlife > a {
background-image: url(/assets/social/fetLife_small.png);
}
.social-container>ul{
.social-container > ul {
list-style: none;
display: flex;
padding: 0;
gap: 1rem;
/* gap: 0.5rem; */
margin: auto;
justify-content: space-around;
}
.vereniging_themas{
.detail-body {
margin: auto;
max-width: 1200px;
padding: 2rem 10%;
position: relative;
}
.social {
width: 52px;
height: 52px;
}
.social > img {
width: 52px;
height: 52px;
}
.social + .social {
margin-left: 20px;
}
.vereniging_themas {
list-style: none;
display: flex;
align-items: center;
margin: 0 3rem;
padding: 0;
}
.vereniging_thema{
/* .vereniging_thema {
width: 4rem;
height: 4rem;
margin: 0 1rem 0 0;
}
} */
.vereniging_thema>a>svg:hover{
.vereniging_thema > a > svg:hover {
transform: scale(1.2);
transform-origin: center center;
transition: all 150ms ease;
}
.vereniging_thema>a>svg{
.vereniging_thema > a > svg {
fill: #013e7a;
width: 3rem;
height: 3rem;
}
footer{
footer {
padding-top: 1rem;
display: flex;
justify-content: space-between;
}
.showcase-image>img{
.showcase-image > img {
flex-grow: 3;
height: 30rem;
max-width: 80vw;
}
.showcase-container{
.showcase-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
@media only screen and (max-width: 600px) {
.tile-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@ -720,3 +753,27 @@ footer{
grid-template-columns: auto;
}
}
.detail-content {
max-width: 1100px;
}
.details-contact {
padding: 1rem;
float: right;
margin: auto;
}
@media only screen and (max-width: 700px) {
.details-contact {
float: none;
width: 300px;
padding-bottom: 2rem;
}
}
@media only screen and (max-width: 600px) {
.detail-body {
width: 100%;
}
}

View file

@ -7,9 +7,10 @@ konvent: fk
website: https://www.vlaamsebiomedischekring.be/
contact: vbkgent@gmail.com
social:
- plaform: facebook
- platform: facebook
link: https://www.facebook.com/vlaamsebiomedischekring/
themas:
- faculteit
- faculteit
---
V.B.K. simply the best! Voor alle studenten Biomedische wetenschappen organiseren wij tal van beestelijke feestjes in de Point Final, tevens ons kringcafe waar tal van promo's doorgaan. Ook hebben wij ons zalige galabal samen met VLAK. Naast feestjes doen we ook toffe sportactiviteiten, cultuuractiviteiten enz. Met ons zal je de leukste studententijd tegemoet gaan, twijfel dus niet om lid te worden van onze familie, je zal er zeker geen spijt van hebben!

View file

@ -1,45 +1,41 @@
<div class="details-container details-logo">
<a target="_blank" href="<%= item[:website] %>"><img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=small" alt="<%= item[:naam] %>"></a>
</div>
<div class="detail_title">
<a class="title_link" target="_blank" href="<%= item[:website] %>"><h2>
<%= item[:naam] %>
</h2></a>
<% if item[:themas] %>
<ul class="vereniging_themas">
<% for thema in item[:themas] %>
<li>
<div class="vereniging_thema">
<a href="/themas/<%= thema %>.html">
<%= @items["/assets/themas_icon/"+thema+".svg"].compiled_content %>
</a>
</div>
</li>
<% end %>
</ul>
<% end %>
</div>
<div class="details-container details-contact">
<h3>contact</h3>
<% if item[:deelname_link] %>
<a href="<%= item[:deelname_link] %>"><%= item[:deelname_link] %></a>
<% end %>
<div class="contact-container">
<p>Email-adres: <a href="<%= item[:contact] %>"><%= item[:contact] %></a></p>
<p>Website: <a href="<%= item[:website] %>"><%= item[:website] %></a></p>
</div>
<% if item[:social] %>
<div class="social-container">
<h4>sociale media</h4>
<ul>
<div class="detail-body">
<div class="details-contact">
<%if item[:deelname_link] || item[:contact] || item[:website]%>
<h3>Contact</h3>
<% if item[:deelname_link] %><a href="<%= item[:deelname_link] %>"><%= item[:deelname_link] %></a><% end %>
<div class="contact-container">
<% if item[:contact] %><p>Email-adres: <a href="<%= item[:contact] %>"><%= item[:contact] %></a></p><%end%>
<% if item[:website] %><p>Website: <a href="<%= item[:website] %>"><%= item[:website] %></a></p><%end%>
</div><%end%>
<% if item[:social] %>
<div class="social-container">
<h4>Sociale media</h4>
<ul>
<% for social in item[:social] %>
<li class="social social-<%= social[:platform] %>">
<a href="<%= social[:link] %>"><p class="link"><%= social[:link] %></p><p><%= social[:platform] %></p></a>
</li>
<a class="social" href="<%= social[:link] %>">
<img src="/assets/social/<%= social[:platform].downcase %>_small.png">
</a>
<% end %>
</ul>
</ul>
</div>
<% end %>
</div>
<div class="detail_title">
<a target="_blank" href="<%= item[:website] %>"><img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=small" alt="<%= item[:naam] %>"></a>
<h2><%= item[:naam] %></h2>
<% if item[:themas] %>
<% for thema in item[:themas] %>
<div class="vereniging_thema">
<a href="/themas/<%= thema %>.html">
<%= @items["/assets/themas_icon/"+thema+".svg"].compiled_content %>
</a>
</div>
<% end %>
<% end %>
</div>
<div class="detail-content">
<%= yield%>
</div>
<% end %>
</div>
<div class="details-container details-photo">
<div class="showcase-container">
@ -65,7 +61,7 @@
<% if item.path.include? "konventen" %>
<% for vereniging in verenigingen_voor_konvent(item[:id]) %>
<div>
<%= vereniging[:naam] %>
<%= render '/partials/pretty_link.*', item: vereniging %>
</div>
<% end %>
<% end %>
<% end %>