From bd024d4a734c81f20c1a854ab8c7437d81d74d78 Mon Sep 17 00:00:00 2001
From: Gregory Trullemans <redj@MacBook-Pro-de-Gregory.local>
Date: Tue, 2 Apr 2024 17:17:47 +0200
Subject: [PATCH] Add minor improvement for smartphone screen

---
 jarvis/people/templates/gymnasts/details.html |  18 +--
 .../templates/gymnasts/tabs/tab_skills.html   | 126 +++++++++---------
 static/css/jarvis.css                         |   6 +
 3 files changed, 78 insertions(+), 72 deletions(-)

diff --git a/jarvis/people/templates/gymnasts/details.html b/jarvis/people/templates/gymnasts/details.html
index 3d2e722..eebf61a 100644
--- a/jarvis/people/templates/gymnasts/details.html
+++ b/jarvis/people/templates/gymnasts/details.html
@@ -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">
diff --git a/jarvis/people/templates/gymnasts/tabs/tab_skills.html b/jarvis/people/templates/gymnasts/tabs/tab_skills.html
index 1c004ec..ca3f5b4 100644
--- a/jarvis/people/templates/gymnasts/tabs/tab_skills.html
+++ b/jarvis/people/templates/gymnasts/tabs/tab_skills.html
@@ -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>
diff --git a/static/css/jarvis.css b/static/css/jarvis.css
index 4166e51..23a6714 100644
--- a/static/css/jarvis.css
+++ b/static/css/jarvis.css
@@ -143,4 +143,10 @@ textarea.form-control {
     background-image: linear-gradient(to bottom left, #ec250d, #fd5d93, #ec250d);
     background-size: 210% 210%;
     background-position: top right;
+}
+
+@media screen and (max-width: 575.98px) {
+    .not-displayed-on-phone {
+        display: none;
+    }
 }
\ No newline at end of file