mirror of
https://github.com/ae-utbm/sith3.git
synced 2024-06-01 04:19:43 +00:00
Added godfather page CSS rework
This commit is contained in:
parent
02eb768033
commit
8a77381cab
104
core/static/user/user_godfathers.scss
Normal file
104
core/static/user/user_godfathers.scss
Normal file
|
@ -0,0 +1,104 @@
|
|||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
|
||||
> form {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.users {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
gap: 10px
|
||||
}
|
||||
|
||||
.users-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 150px;
|
||||
padding: 10px;
|
||||
background-color: rgba(0, 0, 0, .05);
|
||||
border-radius: 10px;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Django moment
|
||||
> div.mini_profile_link {
|
||||
position: relative;
|
||||
|
||||
> a {
|
||||
&.mini_profile_link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
> span {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
max-width: 100%;
|
||||
max-height: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
>em {
|
||||
text-align: center;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: 10px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: orangered;
|
||||
|
||||
@media (max-width: 375px) {
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Django moment
|
||||
> a.mini_profile_link {
|
||||
display: none;
|
||||
}
|
||||
}
|
|
@ -1,45 +1,68 @@
|
|||
{% extends "core/base.jinja" %}
|
||||
{% from "core/macros.jinja" import user_link_with_pict, delete_godfather %}
|
||||
|
||||
{%- block additional_css -%}
|
||||
<link rel="stylesheet" href="{{ scss('user/user_godfathers.scss') }}">
|
||||
{%- endblock -%}
|
||||
|
||||
{% block title %}
|
||||
{% trans user_name=profile.get_display_name() %}{{ user_name }}'s family{% endtrans %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<p><a href="{{ url("core:user_godfathers_tree_pict", user_id=profile.id) }}?family">
|
||||
{% trans %}Show family picture{% endtrans %}</a></p>
|
||||
<div class="container">
|
||||
<a href="{{ url('core:user_godfathers_tree_pict', user_id=profile.id) }}?family">
|
||||
{% trans %}Show family picture{% endtrans %}
|
||||
</a>
|
||||
|
||||
{% if profile.godfathers.exists() %}
|
||||
<h4>{% trans %}Godfathers / Godmothers{% endtrans %}</h4>
|
||||
<ul>
|
||||
<ul class="users">
|
||||
{% for u in profile.godfathers.all() %}
|
||||
<li> <a href="{{ url("core:user_godfathers", user_id=u.id) }}" class="mini_profile_link" >
|
||||
{{ u.get_mini_item()|safe }} </a>{{ delete_godfather(user, profile, u, True) }}</li>
|
||||
<li class="users-card">
|
||||
<a href="{{ url('core:user_godfathers', user_id=u.id) }}" class="mini_profile_link">
|
||||
{{ u.get_mini_item() | safe }}
|
||||
</a>
|
||||
{{ delete_godfather(user, profile, u, True) }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p><a href="{{ url("core:user_godfathers_tree", user_id=profile.id) }}">
|
||||
{% trans %}Show ancestors tree{% endtrans %}</a></p>
|
||||
|
||||
<a href="{{ url('core:user_godfathers_tree', user_id=profile.id) }}">
|
||||
{% trans %}Show ancestors tree{% endtrans %}
|
||||
</a>
|
||||
{% else %}
|
||||
<p>{% trans %}No godfathers / godmothers{% endtrans %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if profile.godchildren.exists() %}
|
||||
<h4>{% trans %}Godchildren{% endtrans %}</h4>
|
||||
<ul>
|
||||
<ul class="users">
|
||||
{% for u in profile.godchildren.all() %}
|
||||
<li> <a href="{{ url("core:user_godfathers", user_id=u.id) }}" class="mini_profile_link" >
|
||||
{{ u.get_mini_item()|safe }} </a>{{ delete_godfather(user, profile, u, False) }}</li>
|
||||
<li class="users-card">
|
||||
<a href="{{ url('core:user_godfathers', user_id=u.id) }}" class="mini_profile_link">
|
||||
{{ u.get_mini_item()|safe }}
|
||||
</a>
|
||||
{{ delete_godfather(user, profile, u, False) }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p><a href="{{ url("core:user_godfathers_tree", user_id=profile.id) }}?descent">
|
||||
{% trans %}Show descent tree{% endtrans %}</a></p>
|
||||
|
||||
<a href="{{ url('core:user_godfathers_tree', user_id=profile.id) }}?descent">
|
||||
{% trans %}Show descent tree{% endtrans %}
|
||||
</a>
|
||||
{% else %}
|
||||
<p>{% trans %}No godchildren{% endtrans %}
|
||||
{% endif %}
|
||||
{% if profile == user or user.is_root %}
|
||||
|
||||
{% if profile == user or user.is_root %}
|
||||
<form action="" method="post">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p() }}
|
||||
<p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user