Add minor improvement for smartphone screen

This commit is contained in:
Gregory Trullemans 2024-04-02 17:17:47 +02:00
parent 233d82d992
commit bd024d4a73
3 changed files with 78 additions and 72 deletions

View File

@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="col-12 col-md-4 pl-0 pr-0">
<div class="card card-user mb-4">
<div class="card-body">
<div class="author">
@ -56,7 +56,7 @@
</div>
</div>
<div class="col-12 col-sm-12 col-md-4 col-lg-4">
<div class="col-12 col-md-4 mb-4">
{% if gymnast_nb_known_skills %}
{% generate_skill_doughnut gymnast.id %}
{% else %}
@ -64,18 +64,18 @@
{% endif %}
</div>
<div class="col-12 col-sm-12 col-md-4 card mb-4">
{% if gymnast_nb_known_skills %}
{% generate_level_chart_bar gymnast.id %}
{% else %}
<p class="text-muted mt-3">No level/rank information.</p>
{% endif %}
<div class="col-12 col-md-4 card">
{% if gymnast_nb_known_skills %}
{% generate_level_chart_bar gymnast.id %}
{% else %}
<p class="text-muted mt-3">No level/rank information.</p>
{% endif %}
</div>
</div>
<div class="row">
<div class="col-12 col-sm-1 col-md-1 col-lg-1 col-xl-1">
<div class="col-12 col-sm-1 mb-4">
<ul class="nav nav-pills nav-pills-primary nav-pills-icons justify-content-center">
<li class="nav-item">

View File

@ -1,7 +1,7 @@
{% load has_group %}
<div class="row justify-content-center ml-1">
<div class="col-md-12">
<div class="row justify-content-center">
<div class="col-md-12 pl-0">
<div class="card">
<div class="card-body">
{% if planned_skill or skill_whith_help or skill_without_help or skill_chained or skill_masterised or skill_by_rank or skill_by_level or skill_by_age or unknown_skill %}
@ -87,7 +87,7 @@
{% endif %}
</ul>
<div class="tab-content tab-space tab-subcategories pt-0 pb-0">
<div class="tab-content tab-space tab-subcategories p-0">
{% if planned_skill %}
<div class="tab-pane {% if planned_skill %}active{% endif %}" id="planned_skill">
<table class="table table-condensed table-striped tablesorter" id="table_planned_skill">
@ -98,9 +98,9 @@
<th class="header text-left" style="width: 35%">Label</th>
<th class="header text-left" style="width: 10%">Phase</th>
<th class="header text-left" style="width: 10%">Deadline</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 8%">Level</th>
<th class="header" style="width: 13%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 8%">Level</th>
<th class="header not-displayed-on-phone" style="width: 13%">Rank</th>
</tr>
</thead>
<tbody>
@ -138,9 +138,9 @@
{{ plan.date | date:"d-m-Y" }}
{% if plan.is_past %}</b></span>{% endif %}
</td>
<td>{{ plan.educative.difficulty }}</td>
<td>{{ plan.educative.level }}</td>
<td>{{ plan.educative.rank }}</td>
<td class="not-displayed-on-phone">{{ plan.educative.difficulty }}</td>
<td class="not-displayed-on-phone">{{ plan.educative.level }}</td>
<td class="not-displayed-on-phone">{{ plan.educative.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -156,9 +156,9 @@
<th style="width: 10%"></th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 35%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -184,9 +184,9 @@
<td class="text-left">
<a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a>
</td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -202,9 +202,9 @@
<th style="width: 10%"></th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 35%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -228,9 +228,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -246,9 +246,9 @@
<th style="width: 12%"></th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 55%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -272,9 +272,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -290,9 +290,9 @@
<th style="width: 12%"></th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 35%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -316,9 +316,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -334,9 +334,9 @@
<th style="width: 12%"></th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 35%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -360,9 +360,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -378,9 +378,9 @@
<th style="width: 13%">Actions</th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 50%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -408,9 +408,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -426,9 +426,9 @@
<th style="width: 15%">Actions</th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 50%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -456,9 +456,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -474,9 +474,9 @@
<th style="width: 15%">Actions</th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 50%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
@ -505,9 +505,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>
@ -523,9 +523,9 @@
<th style="width: 15%">Actions</th>
<th style="width: 10%">Notation</th>
<th class="header text-left" style="width: 50%">Label</th>
<th class="header" style="width: 7%">Diff.</th>
<th class="header" style="width: 7%">Level</th>
<th class="header" style="width: 7%">Rank</th>
<th class="header not-displayed-on-phone" style="width: 7%">Diff.</th>
<th class="header not-displayed-on-phone" style="width: 7%">Level</th>
<th class="header not-displayed-on-phone" style="width: 7%">Rank</th>
</tr>
</thead>
<tbody>
@ -553,9 +553,9 @@
<td>{{ skill.notation }}</td>
<td class="text-left"><a href="{% url 'skill_details' skill.id %}">{{ skill.long_label }}</a></td>
<td>{{ skill.difficulty }}</td>
<td>{{ skill.level }}</td>
<td>{{ skill.rank }}</td>
<td class="not-displayed-on-phone">{{ skill.difficulty }}</td>
<td class="not-displayed-on-phone">{{ skill.level }}</td>
<td class="not-displayed-on-phone">{{ skill.rank }}</td>
</tr>
{% endfor %}
</tbody>

View File

@ -144,3 +144,9 @@ textarea.form-control {
background-size: 210% 210%;
background-position: top right;
}
@media screen and (max-width: 575.98px) {
.not-displayed-on-phone {
display: none;
}
}