Merge pull request #39 from Bludwarf/Affichage-sections/patterns-pour…

…-mobile-#23 feat: mobile-rehearsal B
Bludwarf · Apr 19, 2024 · 3c2e6ba · 3c2e6ba
2 parents 981d0d4 + ba64b83
commit 3c2e6ba
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git a/src/app/rehearsal/mobile/chords-grid/chords-grid.component.html b/src/app/rehearsal/mobile/chords-grid/chords-grid.component.html
@@ -2,7 +2,7 @@
   <div *ngIf="chords.getChordsAtBar(bar); let currentBarChords" class="bar" [class.current]="isCurrentBar(bar)"
        (click)="onClickBar(bar)" [class.multi-chords]="currentBarChords.length > 1">
     <div *ngFor="let chord of currentBarChords" class="chord">
-      {{ chord.toString() }}
+      <span>{{ chord.toString() }}</span>
     </div>
   </div>
 </ng-container>
diff --git a/src/app/rehearsal/mobile/chords-grid/chords-grid.component.scss b/src/app/rehearsal/mobile/chords-grid/chords-grid.component.scss
@@ -17,19 +17,26 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: 2px;
 
-  & > * {
+  $padding: 2px;
+  padding: $padding;
+
+  & > .chord {
     flex: 1;
+    display: flex;
+
+    & > span {
+      margin: auto;
+    }
   }
 
   &.multi-chords {
-    .chord:first-of-type {
-      text-align: left;
+    .chord:first-of-type > span {
+      margin-left: $padding;
     }
 
-    .chord:last-of-type {
-      text-align: right;
+    .chord:last-of-type > span {
+      margin-right: $padding;
     }
   }