Speaking times card (#3208)

OpenSlides · Jan 26, 2024 · 47b8b0f · 47b8b0f
1 parent 48b38fe
commit 47b8b0f
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 31 deletions.
diff --git a/.../modules/list-of-speakers-content/components/speaking-times/speaking-times.component.html b/.../modules/list-of-speakers-content/components/speaking-times/speaking-times.component.html
@@ -9,14 +9,16 @@
 
 <div class="structure-level-list">
     <div class="structure-level" *ngFor="let structure_level of getStructureLevels()">
-        <div class="structure-level-info" [ngStyle]="{ 'border-top-color': structure_level.color }">
+        <div class="structure-level-content">
+            <hr class="structure-level-color" [ngStyle]="{ 'background-color': structure_level.color }" />
             <span class="structure-level-time">
                 <os-countdown-time [unstyled]="true" [countdown]="structure_level.countdown"></os-countdown-time>
             </span>
             <div class="structure-level-name">{{ structure_level.name }}</div>
         </div>
         <ng-container *osPerms="permission.listOfSpeakersCanManage">
             <button
+                class="icon-less-space-to-left"
                 type="button"
                 mat-icon-button
                 [matMenuTriggerFor]="editAndDistributeMenu"

diff --git a/.../modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss b/.../modules/list-of-speakers-content/components/speaking-times/speaking-times.component.scss
@@ -5,20 +5,39 @@
     padding: 8px 25px 0 25px;
     .structure-level {
         width: 33%;
-        margin-bottom: 26px;
+        margin-bottom: 16px;
         display: flex;
         flex-direction: row;
-    }
-    .structure-level-info {
-        border-top-color: transparent;
-        border-top-width: 3px;
-        border-top-style: solid;
-    }
-    .structure-level-time {
-        font-size: 35px;
-        line-height: 1;
-    }
-    .structure-level-name {
-        line-height: 1;
+        justify-content: end;
+
+        .structure-level-content {
+            width: 100%;
+
+            .structure-level-color {
+                height: 3px;
+                background-color: transparent;
+                margin-left: 10%;
+                width: calc(100% - margin-left);
+                border-width: 0;
+                border-radius: 7px;
+            }
+
+            .structure-level-time {
+                font-size: 35px;
+                display: flex;
+                justify-content: end;
+                line-height: 0.95;
+            }
+
+            .structure-level-name {
+                line-height: 1;
+                text-align: right;
+            }
+        }
+
+        .icon-less-space-to-left {
+            width: 25px;
+            margin-top: 12px;
+        }
     }
 }
diff --git a/...ng-structure-level-slide/components/current-speaking-structure-level-slide.component.html b/...ng-structure-level-slide/components/current-speaking-structure-level-slide.component.html
@@ -1,6 +1,9 @@
 <div id="structure-level-current" *ngIf="data && (data.data.current_start_time || data.data.remaining_time)">
     <span id="inner">
         <div id="inner-countdown">
+            <span class="align-right">
+                <hr class="structure-level-color" [ngStyle]="{ 'background-color': data.data.color }" />
+            </span>
             <os-countdown-time
                 [unstyled]="true"
                 [countdown]="{

diff --git a/...ng-structure-level-slide/components/current-speaking-structure-level-slide.component.scss b/...ng-structure-level-slide/components/current-speaking-structure-level-slide.component.scss
@@ -17,4 +17,17 @@
         font-size: 70px;
         opacity: 0.9;
     }
+
+    .structure-level-color {
+        height: 15px;
+        background-color: transparent;
+        width: 100%;
+        border-width: 0;
+        border-radius: 7px;
+    }
+
+    .align-right {
+        display: flex;
+        justify-content: flex-end;
+    }
 }
diff --git a/...t-structure-level-list-slide/components/current-structure-level-list-slide.component.html b/...t-structure-level-list-slide/components/current-structure-level-list-slide.component.html
@@ -14,18 +14,22 @@ <h2>
                 <ng-container *ngIf="getStructureLevel(i, j)">
                     <div class="ellipsis-overflow spacer-top-25">
                         <div class="level-time-list">
-                            <span class="color-line" [ngStyle]="{ 'border-top-color': getStructureLevel(i, j).color }">
-                                <os-countdown-time
-                                    [unstyled]="true"
-                                    [countdown]="{
-                                        running: !!getStructureLevel(i, j).current_start_time,
-                                        countdown_time: getStructureLevel(i, j).current_start_time
-                                            ? getStructureLevel(i, j).current_start_time +
-                                              getStructureLevel(i, j).remaining_time
-                                            : getStructureLevel(i, j).remaining_time
-                                    }"
-                                ></os-countdown-time>
+                            <span class="align-right">
+                                <hr
+                                    class="structure-level-color"
+                                    [ngStyle]="{ 'background-color': getStructureLevel(i, j).color }"
+                                />
                             </span>
+                            <os-countdown-time
+                                [unstyled]="true"
+                                [countdown]="{
+                                    running: !!getStructureLevel(i, j).current_start_time,
+                                    countdown_time: getStructureLevel(i, j).current_start_time
+                                        ? getStructureLevel(i, j).current_start_time +
+                                          getStructureLevel(i, j).remaining_time
+                                        : getStructureLevel(i, j).remaining_time
+                                }"
+                            ></os-countdown-time>
                         </div>
                         <div class="structure-level-name">
                             {{ getStructureLevel(i, j).name }}

diff --git a/...t-structure-level-list-slide/components/current-structure-level-list-slide.component.scss b/...t-structure-level-list-slide/components/current-structure-level-list-slide.component.scss
@@ -16,15 +16,22 @@ td {
 .level-time-list {
     font-size: 80px;
     text-align: right;
-    .color-line {
-        border-top-color: transparent;
-        border-top-width: 10px;
-        border-top-style: solid;
-        line-height: 1.25;
-    }
 }
 
 .structure-level-name {
     text-align: right;
     font-size: 30px;
 }
+
+.structure-level-color {
+    height: 5px;
+    background-color: transparent;
+    width: 90%;
+    border-width: 0;
+    border-radius: 7px;
+}
+
+.align-right {
+    display: flex;
+    justify-content: flex-end;
+}