169: clean css and style draft events list

Atmos4 · Mar 7, 2024 · 45c7b5d · 45c7b5d
1 parent 89c3789
commit 45c7b5d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 79 deletions.
diff --git a/app/pages/events/event_list/RenderEvents.php b/app/pages/events/event_list/RenderEvents.php
@@ -72,13 +72,13 @@ function render_events_article(EventDto $event)
             <div class="icon">
                 <?php if ($event->open):
                     if ($event->registered == true): ?>
-                        <ins><i class="fas fa-check fa-xl"></i></ins>
+                        <ins><i class="fas fa-check fa-xl" title="Inscrit !"></i></ins>
                     <?php elseif ($event->registered === false): ?>
-                        <del><i class="fas fa-xmark fa-xl"></i></del>
+                        <del><i class="fas fa-xmark fa-xl" title="Pas inscrit"></i></del>
                     <?php else: ?>
-                        <i class="fas fa-question fa-xl"></i>
+                        <i class="fas fa-question fa-xl" title="Pas encore inscrit"></i>
                     <?php endif; else: ?>
-                    <i class="fas fa-file"></i>
+                    <i class="fas fa-file" title="Brouillon"></i>
                 <?php endif ?>
             </div>
 
@@ -95,7 +95,7 @@ function render_events_article(EventDto $event)
                 </span>
             </div>
             <div class="event-limit <?= $limit_class ?>">
-                <i class="fas fa-clock"></i><span <?= $tooltip_content ?> data-placement='left'>
+                <i title="Deadline" class="fas fa-clock"></i><span <?= $tooltip_content ?> data-placement='left'>
                     <?= format_date($event->deadline) ?>
                 </span>
             </div>

diff --git a/app/pages/events/event_list/event_list.php b/app/pages/events/event_list/event_list.php
@@ -52,22 +52,10 @@
     if ($can_edit && count($draft_events)): ?>
 
         <h6>Événements en attente</h6>
-        <table role="grid">
-            <thead class=header-responsive>
-                <tr>
-                    <th></th>
-                    <th>Nom</th>
-                    <th colspan=2>Dates</th>
-                </tr>
-            </thead>
-            <tbody>
-                <?php
-                foreach ($draft_events as $draft_event) {
-                    render_event($draft_event);
-                } ?>
-
-            </tbody>
-        </table>
+        <?php
+        foreach ($draft_events as $draft_event) {
+            render_events_article($draft_event);
+        } ?>
         <h6>Événements publiés</h6>
     <?php endif ?>
 

diff --git a/assets/css/event_list.css b/assets/css/event_list.css
@@ -1,6 +1,3 @@
-tr.delimiter {
-  background-color: var(--card-sectionning-background-color) !important;
-}
 .event-limit {
   white-space: nowrap;
   grid-area: event-limit;
@@ -19,80 +16,33 @@ tr.delimiter {
   color: red;
 }
 
-@media screen and (max-width: 768px) {
-  table tr {
-    display: grid;
-    grid:
-      "icon name name"
-      "date date limit" / auto 1fr;
-    border-bottom: var(--border-width) solid var(--table-border-color);
-    align-items: center;
-  }
-  table td {
-    border-bottom: none;
-  }
-  table .event-entry {
-    grid-area: icon;
-    padding-bottom: 0;
-  }
-  table .event-name {
-    grid-area: name;
-    padding-bottom: 0;
-  }
-  table .event-date {
-    grid-area: date;
-  }
-  table .event-limit {
-    grid-area: limit;
-    justify-self: right;
-  }
-  .header-responsive {
-    display: none;
-  }
-}
-
-@media (min-width: 768px) {
-  .responsive-description {
-    display: none;
-  }
-
-  .competition-date div {
-    display: grid;
-    grid: auto-flow / auto 1fr;
-    align-items: center;
-    gap: 10px;
-    white-space: nowrap;
-  }
-}
-
 .birthday {
   border-left: solid 5px;
   border-color: var(--primary-focus);
   background-color: var(--card-background-color);
   padding: 10px;
   margin-bottom: 10px;
 }
-
 .grid {
   display: grid;
-  grid-template-columns: 15% auto auto;
+  gap: 10px;
+  grid-template-columns: auto 1fr auto;
   grid-template-rows: auto auto;
   grid-template-areas:
     "icon title title"
-    "icon dates event-limit";
-  align-items: center;
-  row-gap: 0.3rem;
+    "dates dates event-limit";
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (min-width: 768px) {
   .grid {
     display: grid;
-    gap: 10px;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 15% auto auto;
     grid-template-rows: auto auto;
     grid-template-areas:
       "icon title title"
-      "dates dates event-limit";
+      "icon dates event-limit";
+    align-items: center;
+    row-gap: 0.3rem;
   }
 }