Commit 1b8a2cea authored by Maxime Corbeau's avatar Maxime Corbeau

Add social links to detail page & split css

Summary:
 - CSS for associations details is split from main CSS
 - Social links are added to details page

Test Plan:
 - Make sure you have social links for at least one organization
 - Nothing else should be required

Reviewers: Valz

Reviewed By: Valz

Maniphest Tasks: T52

Differential Revision: https://phabricator.atilla.org/D33
parent 8b8ec0a1
{% extends 'common/base.html' %}
{% block title %}Associations {{ super }}{% endblock %}
{% load static from staticfiles %}
{% block content %}
<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>
{% block css %}
<link type="text/css" rel="stylesheet" href="{% static "css/associations.css" %}"/>
{% endblock %}
<hr style="width:80%; margin-bottom: 20px"/>
{% block title %}Associations {{ super }}{% endblock %}
<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>
{% block content %}
<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>
{% if asso.subscription_cost > 0 %}
<p>Cotisation : {{ asso.subscription_cost }}€</p>
{% else %}
<p>Inscription gratuite</p>
{% endif %}
{% if links %}
<div id="social-links">
{% for link in links %}
{% if link.type_link == "FB" %}
<a class="sn-link fb" href={{ link.url }} target=_blank>
<i class="fab fa-facebook-f fa-2x"></i>
</a>
{% elif link.type_link == "TW" %}
<a class="sn-link tw" href={{ link.url }} target=_blank>
<i class="fab fa-twitter fa-2x"></i>
</a>
{% elif "YT" == link.type_link %}
<a class="sn-link yt" href={{ link.url}} target=_blank>
<i class="fab fa-youtube fa-2x"></i>
</a>
{% elif "WE" == link.type_link %}
<a class="sn-link we" href={{ link.url }} target=_blank>
<i class="fas fa-code fa-2x"></i>
</a>
{% elif "MA" == link.type_link %}
<a class="sn-link ma" href={{ link.url }} target=_blank>
<i class="fas fa-at fa-2x"></i>
</a>
{% else %}
<a class="sn-link ot" href={{ link.url }} target=_blank>
<i class="fas fa-link fa-2x"></i>
</a>
{% endif %}
{% endfor %}
</div>
{% endif %}
<input class="btn blue darken-2 center" value="join" type="submit"/>
</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 va apparaître</p>
</div>
</div>
</div>
</div>
{% endblock %}
......@@ -9,8 +9,12 @@ from .models import Association
from .forms import AssociationForm
def list(request):
def orderKey(links):
L = ['FB', 'TW', 'YT', 'WE', 'MA', 'OT']
return (L.index(links.type_link))
def list(request):
assos = {
(asso, asso.is_member(request.user))
for asso in Association.objects.all()
......@@ -25,7 +29,12 @@ def list(request):
def details(request, id):
asso = get_object_or_404(Association, pk=id)
return render(request, 'associations/details.html', {'asso': asso})
links = sorted(asso.sociallink_set.all(), key=orderKey)
return render(
request,
'associations/details.html',
{'asso': asso, 'links': links}
)
def edit(request, id):
......
......@@ -14,6 +14,10 @@
<link type="text/css" rel="stylesheet" href="{% static "css/normalize.css" %}"/>
<link type="text/css" rel="stylesheet" href="{% static "css/materialize.min.css" %}"/>
<link type="text/css" rel="stylesheet" href="{% static "css/styles.css" %}"/>
{% block css %}{% endblock %}
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body class="grey lighten-3">
......
/* 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-areas:
"infoColumn descColumn "
"eventColumn eventColumn";
}
#event-column {
grid-column-end: -1;
grid-column-start: 1;
}
#info-column {
border-right-style: solid;
border-right-right: black;
border-width: thin;
}
.sn-link {
display: inline-block;
width: 40px;
height: 40px;
margin: 10px;
padding: 7px;
border-style: solid;
border-width: 1px;
border-radius: 50%;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transition: .2s ease-out;
}
#social-links {
margin: 10px;
}
.sn-link > svg {
color: white;
margin: auto;
height: 100%;
width: 100% !important;
}
.sn-link:hover {
box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
background-color: initial;
}
.fb {
border-color: #3B5998;
background-color: #3B5998;
}
.fb:hover > svg {
color: #3B5998;
}
.tw {
border-color: #33CCFF;
background-color: #33CCFF;
}
.tw:hover > svg {
color: #33CCFF;
}
.yt {
border-color: #CD201F;
background-color: #CD201F;
}
.yt:hover > svg {
color: #CD201F;
}
.we {
border-color: black;
background-color: black;
}
.we:hover > svg {
color: black;
}
.ma {
border-color: #DD5347;
background-color: #DD5347;
}
.ma:hover > svg {
color: #DD5347;
}
.ot {
border-color: #777777;
background-color: #777777;
}
.ot:hover > svg {
color: #777777;
}
@media only screen and (max-width : 992px) {
#info-asso-grid{
grid-template-columns: 1fr;
grid-row-gap: 20px;
grid-template-areas:
"infoColumn"
"descColumn"
"eventColumn";
}
#info-column {
border-style: None;
}
}
......@@ -34,67 +34,8 @@ 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