feat: style mobile list view

farscrl · Feb 14, 2024 · 638e81a · 638e81a
1 parent 9fbee24
commit 638e81a
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 29 deletions.
diff --git a/src/app/components/events/event-list-item/event-list-item.component.html b/src/app/components/events/event-list-item/event-list-item.component.html
@@ -1,14 +1,17 @@
 <a *ngIf="event" class="evt" [routerLink]="'/' + event.eventId" [class.first]="isFirst">
     <div class="title">
-        <span class="inline-time">{{ event.start ? event.start : 'tuttadi' }}</span>
         {{ event.title }}
         <span class="cancelled" *ngIf="event.isCancelled">annullà</span>
     </div>
     <div class="location">
         {{ event.location }}
     </div>
     <div class="time">{{ event.start ? event.start : 'tuttadi' }}</div>
-    <div class="tags">
-        <div class="tag" *ngFor="let tag of event.genres">{{ tag.name }}</div>
+    <div class="infos">
+        <span class="inline-time">{{ event.start ? event.start : 'tuttadi' }}</span>
+        <div class="tags">
+            <div class="tag" *ngFor="let tag of event.genres">{{ tag.name }}</div>
+
+        </div>
     </div>
 </a>
diff --git a/src/app/components/events/event-list-item/event-list-item.component.scss b/src/app/components/events/event-list-item/event-list-item.component.scss
@@ -21,17 +21,6 @@
 
     }
 
-    .inline-time {
-        background-color: var(--accent);
-        color: white;
-        border-radius: 3px;
-        padding: 0 2px;
-
-        @include media-breakpoint-up(md) {
-            display: none;
-        }
-    }
-
     .cancelled {
         background-color: #E42F2F;
         color: white;
@@ -41,7 +30,10 @@
 
 .location {
     color: black;
-    padding-left: 15px;
+
+    @include media-breakpoint-up(md) {
+        padding-left: 15px;
+    }
 }
 
 .time {
@@ -54,24 +46,47 @@
     }
 }
 
-.tags {
-    display: none;
+.infos {
+    display: flex;
 
     @include media-breakpoint-up(md) {
-        display: flex;
-        align-items: flex-start;
-        flex-wrap: wrap;
-        white-space: nowrap;
-        padding-top: 5px;
         padding-left: 15px;
+    }
+
+    .inline-time {
+        color: black;
+
+        @include media-breakpoint-up(md) {
+            display: none;
+        }
+    }
+
+    .tags {
+        flex-grow: 1;
+    }
+}
+
+.tags {
+    display: flex;
+    flex-wrap: wrap;
+    white-space: nowrap;
+    justify-content: flex-end;
+    align-items: flex-start;
+
+    @include media-breakpoint-up(md) {
+        justify-content: unset;
+    }
+
+    .tag {
+        background-color: var(--accent);
+        color: white;
+        padding: 2px 7px;
+        font-size: 0.85rem;
+        margin-right: 6px;
+        margin-bottom: 6px;
 
-        .tag {
-            background-color: var(--accent);
-            color: white;
-            padding: 2px 7px;
-            font-size: 0.85rem;
-            margin-right: 6px;
-            margin-bottom: 6px;
+        @include media-breakpoint-up(lg) {
+            font-size: 1rem;
         }
     }
 }