Commit ca8ecb3c authored by Maxime Corbeau's avatar Maxime Corbeau

Provides a proper detail page for organizations

Summary: Detail page now provides a better looking UX for visiting an organization's page

Test Plan: Nothing, just add an image to association entries in DB as fixtures are not yet available

Reviewers: Valz

Reviewed By: Valz

Maniphest Tasks: T52

Differential Revision: https://phabricator.atilla.org/D30
parent ce89cb99
......@@ -3,13 +3,47 @@
{% block title %}Associations {{ super }}{% endblock %}
{% block content %}
<h3>{{ asso.name }}</h3>
<h5>{{ asso.description }}</h5>
<p>Local : {{ asso.room }}</p>
{% if asso.subscription_cost > 0 %}
<p>Cotisation : {{ asso.subscription_cost }}€</p>
{% else %}
<p>Inscription gratuite</p>
{% endif %}
{% endblock %}
\ No newline at end of file
<div id="banner" style="background-image: url('{{ asso.banner.url }}');">
<div class="logo-wrapper" >
<img class="logo responsive-img" src="{{ asso.logo.url }}"/>
</div>
</div>
<div class="container">
<h3 id="name-asso">{{ asso.name }}</h3>
<hr style="width:80%; margin-bottom: 20px"/>
<div id="info-asso-grid">
<div id="info-column">
<div id="info-title">
<h5>Informations pratique</h5>
</div>
<div id="info-description">
<p>Local : {{ asso.room }}</p>
{% if asso.subscription_cost > 0 %}
<p>Cotisation : {{ asso.subscription_cost }}€</p>
{% else %}
<p>Inscription gratuite</p>
{% endif %}
</div>
</div>
<div id="desc-column">
<div id="desc-title">
<h5>Description</h5>
</div>
<div id="desc-description">
<p>{{ asso.description }}</p>
</div>
</div>
<div id="event-column">
<div id="event-title">
<h5>Évènements</h5>
</div>
<div id="event-description">
<p>Ceci est l'endroit où une liste d'événements très intéressants auxquels il faut participer</p>
</div>
</div>
</div>
</div>
{% endblock %}
......@@ -30,7 +30,7 @@
{% endif %}
<main>
<div class="container">
<div class="container" style="min-width:100%">
{% block content %}{% endblock content %}
</div>
</main>
......
......@@ -34,8 +34,67 @@ header, main, footer {
background-color: #526c77;
}
/* ASSOCIATIONS
************************************************************/
#banner {
height: 18vh;
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 4fr 1fr;
grid-template-areas:
". . ."
". logo-wr ."
". . .";
background-size: cover;
background-position-y: center;
}
#banner > .logo-wrapper{
max-height: 100%;
margin: auto;
grid-area: logo-wr;
}
#banner > .logo-wrapper > img {
display: flex;
max-height: 12vh;
}
#name-asso{
text-align: center;
}
#info-column, #desc-column, #event-column {
padding: 0 5% 0 5%;
}
#info-asso-grid {
display: grid;
text-align: center;
grid-template-columns : 1fr 2fr;
grid-template-rows : 1fr 1fr;
grid-template-areas:
"infoColumn descColumn "
"eventColumn eventColumn";
}
#event-column {
grid-column-end: -1;
grid-column-start: 1;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
#info-asso-grid{
grid-template-columns: 1fr;
grid-row-gap: 20px;
grid-template-areas:
"infoColumn"
"descColumn"
"eventColumn";
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment