Kelder/durfdoen-2.0
33
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update 'Ontdek verenigingen'

Browse source
This commit is contained in:
ajuvercr 2020-09-12 16:48:24 +02:00
parent e8855c8de4
commit 76db2afbbc
2 changed files with 13 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
content/stylesheets/main.css
View file

@ -323,19 +323,21 @@ fieldset p label input {
.tile-grid { .tile-grid {
display: grid; display: grid;
gap: 0.5rem; column-gap: 0.5rem;
row-gap: 0.5rem;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
grid-template-columns: repeat(3, minmax(33%, 12vw)); align-content: center;
grid-template-columns: repeat(3, minmax(33%, 170px));
} }
.tile { .tile {
min-width: 200px; min-width: 200px;
max-width: 300px; max-width: 300px;
flex: 1 0 calc(25% - 10px); flex: 1 0 calc(25% - 10px);
margin: 5px; /* margin: 5px; */
background: #111; /* background: #111; */
position: relative; position: relative;
} }
@ -347,7 +349,7 @@ fieldset p label input {
.tile--medium { .tile--medium {
min-width: 150px; min-width: 150px;
max-width: 33%; max-width: 200px;
} }
.tile--blue { .tile--blue {
@ -365,7 +367,7 @@ fieldset p label input {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
height: 80%; height: 95%;
width: auto; width: auto;
transition: ease-in 0.2s; transition: ease-in 0.2s;
@ -436,34 +438,24 @@ fieldset p label input {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
}
.split-2-1, gap: 1rem;
.split-2-2 {
min-width: 400px;
flex-basis: 1;
}
.split-2-2,
.split-2-1 {
width: 45%;
} }
.split-title { .split-title {
text-align: center; text-align: center;
min-width: 400px;
} }
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.tile-grid { .tile-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.1rem;
} }
} }
@media only screen and (max-width: 400px) { @media only screen and (max-width: 300px) {
.tile-grid { .tile-grid {
grid-template-columns: auto; grid-template-columns: auto;
gap: 0.1rem;
} }
} }

2
layouts/verenigingen.erb
View file

@ -14,7 +14,7 @@
</div> </div>
<div class="split-2-2"> <div class="split-2-2">
<h1 class="split-title"> Konventen en projecten </h1> <h1 class="split-title"> Konventen en projecten </h1>
<div class="tile-grid--flex"> <div class="tile-grid">
<% for item in konventen %> <% for item in konventen %>
<div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'"> <div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'">
<img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>"> <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">