klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-12-23 00:01:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

[CSS] Follow up of #578 (#589)

Browse Source
This commit is contained in:
Julien Constant 2023-04-04 15:21:09 +02:00 committed by GitHub
parent 93cc2c883e
commit 1bfe929ab3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 156 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
core/static/core/header.scss
View File

@ -23,11 +23,11 @@
flex-direction: row; flex-direction: row;
gap: 10px; gap: 10px;
> a { >a {
color: #fff; color: #fff;
} }
&:hover > a { &:hover>a {
color: #1a78b3; color: #1a78b3;
} }
@ -57,11 +57,11 @@
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
> span:first-child { >span:first-child {
font-size: 1.43em; font-size: 1.43em;
} }
> span:last-child { >span:last-child {
font-size: .7em; font-size: .7em;
} }
} }
@ -80,12 +80,12 @@
flex-direction: row; flex-direction: row;
} }
> form { >form {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
> input[type=submit] { >input[type=submit] {
border-radius: 0; border-radius: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
@ -115,7 +115,7 @@
justify-content: center; justify-content: center;
} }
> .button { >.button {
box-sizing: border-box; box-sizing: border-box;
height: 35px; height: 35px;
background-color: transparent; background-color: transparent;
@ -137,7 +137,7 @@
} }
} }
&-disconnected ~ &-lang { &-disconnected~&-lang {
@media (max-width: 662px) { @media (max-width: 662px) {
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
@ -165,8 +165,8 @@
padding: 0 10px; padding: 0 10px;
} }
> .right, >.right,
> .left { >.left {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -179,11 +179,11 @@
} }
} }
> .right { >.right {
flex: 1; flex: 1;
justify-content: flex-end; justify-content: flex-end;
> .user { >.user {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -193,28 +193,45 @@
@media (max-width: 1200px) { @media (max-width: 1200px) {
width: 100%; width: 100%;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-end;
} }
> a > img { >a>img {
width: 40px; width: 40px;
height: 40px; height: 40px;
border-radius: 50%; border-radius: 50%;
} }
> .options { >.options {
display: flex;
flex-direction: column;
gap: 2px;
>.username {
display: flex;
justify-content: flex-end;
gap: 5px;
>a {
color: white;
&:hover {
color: #1a78b3;
}
}
}
>.links {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-direction: column;
gap: 5px; gap: 5px;
@media (max-width: 1200px) { @media (max-width: 1200px) {
justify-content: flex-start; justify-content: flex-start;
flex-direction: row;
gap: 15px;
} }
> a { >a {
text-align: right; text-align: right;
color: white; color: white;
@ -232,8 +249,9 @@
} }
} }
} }
}
> .notification { >.notification {
height: 100%; height: 100%;
width: 55px; width: 55px;
display: flex; display: flex;
@ -241,7 +259,7 @@
align-items: center; align-items: center;
position: relative; position: relative;
> a { >a {
color: white; color: white;
position: relative; position: relative;
font-size: 25px; font-size: 25px;
@ -250,7 +268,7 @@
color: #1a78b3; color: #1a78b3;
} }
> span { >span {
color: white; color: white;
font-size: 14px; font-size: 14px;
display: flex; display: flex;
@ -267,7 +285,7 @@
} }
} }
> #header_notif { >#header_notif {
box-sizing: border-box; box-sizing: border-box;
display: none; display: none;
position: absolute; position: absolute;
@ -282,17 +300,18 @@
border-radius: 10px; border-radius: 10px;
box-shadow: 3px 3px 3px 0 #767676; box-shadow: 3px 3px 3px 0 #767676;
> ul { >ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
min-height: 20px;
max-height: 120px; max-height: 120px;
overflow-y: auto; overflow-y: auto;
> li { >li {
> a { >a {
.datetime { .datetime {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
@ -314,8 +333,9 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 10px; margin-top: 10px;
gap: 5px;
> a { >a {
color: black; color: black;
padding: 5px; padding: 5px;
width: 50%; width: 50%;
@ -324,6 +344,7 @@
text-align: center; text-align: center;
align-items: center; align-items: center;
border-radius: 5px; border-radius: 5px;
background-color: #ddd;
&:hover { &:hover {
background-color: rgba(0, 0, 0, .2); background-color: rgba(0, 0, 0, .2);
@ -334,7 +355,7 @@
} }
} }
> .left { >.left {
gap: 10px; gap: 10px;
display: flex; display: flex;
@ -346,7 +367,7 @@
flex-direction: column-reverse; flex-direction: column-reverse;
} }
> form { >form {
margin: 0; margin: 0;
width: 200px; width: 200px;
@ -354,7 +375,7 @@
width: 100%; width: 100%;
} }
> input[type=text] { >input[type=text] {
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
@ -370,7 +391,7 @@
} }
} }
&-connected ~ &-lang { &-connected~&-lang {
@media (max-width: 1200px) { @media (max-width: 1200px) {
flex-direction: row; flex-direction: row;
width: 100%; width: 100%;
@ -390,7 +411,7 @@
gap: 20px; gap: 20px;
} }
> li > a { >li>a {
display: flex; display: flex;
color: white; color: white;
@ -398,11 +419,11 @@
color: #1a78b3; color: #1a78b3;
} }
> span { >span {
margin-left: 10px; margin-left: 10px;
} }
> i { >i {
width: 16px; width: 16px;
display: flex; display: flex;
justify-content: center; justify-content: center;

54
core/static/user/user_tools.scss
View File

@ -8,6 +8,7 @@ main {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
margin-top: 20px;
gap: 10px; gap: 10px;
> div { > div {
@ -15,16 +16,65 @@ main {
background-color: rgba(0, 0, 0, .05); background-color: rgba(0, 0, 0, .05);
width: 210px; width: 210px;
>h4 { > h4 {
text-align: center; text-align: center;
} }
>ul { > ul {
list-style-type: none; list-style-type: none;
margin: 20px 10px; margin: 20px 10px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
> .rows {
display: flex;
flex-direction: column;
gap: 5px;
> span {
margin-top: 5px;
}
> span > span,
> span {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 5px;
width: 100%;
>.button {
font-size: smaller;
width: 100%;
margin: 0;
}
> span {
display: flex;
flex-direction: row;
width: 100%;
> .button {
width: 100%;
}
}
}
> span > span {
flex-wrap: nowrap;
}
}
> .counter {
background-color: rgba(0, 0, 0, .05);
border-radius: 5px;
padding: 10px;
@media (max-width: 550px) {
background-color: rgba(0, 0, 0, .1);
}
}
} }
} }

7
core/templates/core/base.jinja
View File

@ -89,9 +89,14 @@
<div class="right"> <div class="right">
<div class="user"> <div class="user">
<div class="options"> <div class="options">
<div class="username">
<a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
</div>
<div class="links">
<a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a> <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
<a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a> <a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
</div> </div>
</div>
<a href="{{ url('core:user_profile', user_id=user.id) }}"> <a href="{{ url('core:user_profile', user_id=user.id) }}">
{% if user.profile_pict %} {% if user.profile_pict %}
<img src="{{ user.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" title="{% trans %}Profile{% endtrans %}" /> <img src="{{ user.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" title="{% trans %}Profile{% endtrans %}" />
@ -284,7 +289,9 @@
{% endblock %} {% endblock %}
<br> <br>
<code class="version"> <code class="version">
{% cache 1000 "sith_version" %}
{% trans %}Sith version:{% endtrans %}&nbsp;{{ get_sith().version }} {% trans %}Sith version:{% endtrans %}&nbsp;{{ get_sith().version }}
{% endcache %}
</code> </code>
</footer> </footer>
{% endif %} {% endif %}

2
core/templates/core/user_clubs.jinja
View File

@ -16,6 +16,8 @@
<td>{% trans %}Role{% endtrans %}</td> <td>{% trans %}Role{% endtrans %}</td>
<td>{% trans %}Description{% endtrans %}</td> <td>{% trans %}Description{% endtrans %}</td>
<td>{% trans %}Since{% endtrans %}</td> <td>{% trans %}Since{% endtrans %}</td>
<td></td>
<td></td>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

30
core/templates/core/user_tools.jinja
View File

@ -54,19 +54,29 @@
<li><a href="{{ url('counter:invoices_call') }}">{% trans %}Invoices call{% endtrans %}</a></li> <li><a href="{{ url('counter:invoices_call') }}">{% trans %}Invoices call{% endtrans %}</a></li>
<li><a href="{{ url('counter:eticket_list') }}">{% trans %}Etickets{% endtrans %}</a></li> <li><a href="{{ url('counter:eticket_list') }}">{% trans %}Etickets{% endtrans %}</a></li>
{% endif %} {% endif %}
</ul>
<ul>
{% for b in settings.SITH_COUNTER_BARS %} {% for b in settings.SITH_COUNTER_BARS %}
{% if user.is_in_group(b[1]+" admin") %} {% if user.is_in_group(b[1]+" admin") %}
<li>
<a href="{{ url('counter:details', counter_id=b[0]) }}">{{ b[1] }}</a> -
<a href="{{ url('counter:admin', counter_id=b[0]) }}">{% trans %}Edit{% endtrans %}</a> -
<a href="{{ url('counter:stats', counter_id=b[0]) }}">{% trans %}Stats{% endtrans %}</a> -
{% set c = Counter.objects.filter(id=b[0]).first() %} {% set c = Counter.objects.filter(id=b[0]).first() %}
<li class="rows counter">
<a href="{{ url('counter:details', counter_id=b[0]) }}">{{ b[1] }}</a>
<span>
<span>
<a class="button" href="{{ url('counter:admin', counter_id=b[0]) }}">{% trans %}Edit{% endtrans %}</a>
<a class="button" href="{{ url('counter:stats', counter_id=b[0]) }}">{% trans %}Stats{% endtrans %}</a>
{% if c.stock %} {% if c.stock %}
<a href="{{ url('stock:items_list', stock_id=c.stock.id)}}">Stock</a> - <a class="button" href="{{ url('stock:items_list', stock_id=c.stock.id)}}">Stock</a>
<a href="{{ url('stock:shoppinglist_list', stock_id=c.stock.id)}}">{% trans %}Shopping lists{% endtrans %}</a>
{% else %}
<a href="{{url('stock:new', counter_id=c.id)}}">{% trans %}Create new stock{% endtrans%}</a>
{% endif %} {% endif %}
</span>
{% if c.stock %}
<a class="button" href="{{ url('stock:shoppinglist_list', stock_id=c.stock.id)}}">{% trans %}Shopping lists{% endtrans %}</a>
{% else %}
<a class="button" href="{{url('stock:new', counter_id=c.id)}}">{% trans %}Create new stock{% endtrans%}</a>
{% endif %}
</span>
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
@ -89,7 +99,7 @@
{% for m in user.memberships.filter(end_date=None).filter(role__gte=7).all() -%} {% for m in user.memberships.filter(end_date=None).filter(role__gte=7).all() -%}
{%- for b in m.club.bank_accounts.all() %} {%- for b in m.club.bank_accounts.all() %}
<li> <li class="rows">
<strong>{% trans %}Bank account: {% endtrans %}</strong> <strong>{% trans %}Bank account: {% endtrans %}</strong>
<a href="{{ url('accounting:bank_details', b_account_id=b.id) }}">{{ b }}</a> <a href="{{ url('accounting:bank_details', b_account_id=b.id) }}">{{ b }}</a>
</li> </li>
@ -97,7 +107,7 @@
{% if m.club.club_account.exists() -%} {% if m.club.club_account.exists() -%}
{% for ca in m.club.club_account.all() %} {% for ca in m.club.club_account.all() %}
<li> <li class="rows">
<strong>{% trans %}Club account: {% endtrans %}</strong> <strong>{% trans %}Club account: {% endtrans %}</strong>
<a href="{{ url('accounting:club_details', c_account_id=ca.id) }}">{{ ca }}</a> <a href="{{ url('accounting:club_details', c_account_id=ca.id) }}">{{ ca }}</a>
</li> </li>