start fixing projector-detail

OpenSlides · May 27, 2024 · bce3ba9 · bce3ba9
1 parent 033cbdf
commit bce3ba9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.html b/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.html
@@ -91,7 +91,9 @@ <h2>{{ projector.name }}</h2>
                         <mat-icon>refresh</mat-icon>
                     </button>
                     <!-- scaling indicator -->
-                    <div class="button-size" [ngClass]="projector.scale !== 0 ? 'warn' : ''">{{ projector.scale }}</div>
+                    <span class="button-size" [ngClass]="projector.scale !== 0 ? 'warn' : ''">
+                        {{ projector.scale }}
+                    </span>
 
                     <!-- scroll viewport up (fast), decrease scroll counter -->
                     <button
@@ -142,32 +144,32 @@ <h2>{{ projector.name }}</h2>
                         <mat-icon>refresh</mat-icon>
                     </button>
                     <!-- scroll indicator -->
-                    <div class="button-size" [ngClass]="projector.scroll !== 0 ? 'warn' : ''">
+                    <span class="button-size" [ngClass]="projector.scroll !== 0 ? 'warn' : ''">
                         {{ projector.scroll }}
-                    </div>
+                    </span>
                 </div>
             </div>
         </os-tile>
         <os-tile [preferredSize]="projectorTileSizeRight">
             <div *osPerms="permission.projectorCanManage" style="padding-bottom: 60px">
-                <div class="control-group slide-controls">
+                <div class="back-n-forth-controls slide-controls">
                     <button
                         type="button"
                         mat-button
                         (click)="projectPreviousSlide()"
                         [disabled]="projector.history_projections.length === 0"
                     >
                         <mat-icon>arrow_back</mat-icon>
-                        <span>{{ 'Previous' | translate }}</span>
+                        {{ 'Previous' | translate }}
                     </button>
                     <button
                         type="button"
                         mat-button
                         (click)="projectNextSlide()"
                         [disabled]="projector.preview_projections.length === 0"
                     >
-                        <span>{{ 'Next' | translate }}</span>
-                        <mat-icon>arrow_forward</mat-icon>
+                        {{ 'Next' | translate }}
+                        <mat-icon iconPositionEnd>arrow_forward</mat-icon>
                     </button>
                     <hr />
                 </div>
@@ -178,7 +180,7 @@ <h2>{{ projector.name }}</h2>
                             *ngFor="let projection of projector.nonStableCurrentProjections"
                             class="current-element backgroundColorAccent"
                         >
-                            <div class="emelent-grid">
+                            <div class="element-grid">
                                 <os-projector-button [blendIn]="true"></os-projector-button>
 
                                 <!-- Slide title and subtitle -->

diff --git a/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.scss b/...tors/modules/projector-detail/components/projector-detail/projector-detail.component.scss
@@ -15,6 +15,13 @@
 }
 
 .control-group {
+    padding-left: 5px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}
+
+.back-n-forth-controls {
     .button-size {
         padding-left: 5px;
         display: inline-block;
@@ -33,7 +40,7 @@
     margin-bottom: 20px;
     box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
 
-    .emelent-grid {
+    .element-grid {
         display: grid;
         width: 100%;
         grid-gap: 5px;