Improve drivers menu layout.

src/app/drivers/drivers.page.html

@@ -11,7 +11,7 @@
 
 <ion-content>
   <ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
-    <ion-item *ngFor="let driver of drivers; index as id">
+    <ion-item *ngFor="let driver of drivers; index as id" class="driver">
       <ion-button slot="start" size="large" (click)="chooseColor(id)" fill="clear" class="ion-no-padding">
         <outline [color]="driver.color">
           {{id + 1}}
@@ -26,8 +26,8 @@
       >
       </ion-input>
       <ion-buttons slot="end">
-        <ion-note>{{driver.code || '#' + (id + 1)}}</ion-note>
-        <ion-button fill="clear" (click)="speak(id)">
+        <ion-note *ngIf="(orientation | async) == 'landscape'">{{driver.code || '#' + (id + 1)}}</ion-note>
+        <ion-button *ngIf="(orientation | async) == 'landscape'" fill="clear" (click)="speak(id)">
           <ion-icon name="volume-high-sharp"></ion-icon>
         </ion-button>
         <ion-reorder slot="end"></ion-reorder>

src/app/drivers/drivers.page.ts

@@ -6,8 +6,10 @@ import { take } from 'rxjs/operators';
 
 import { TranslateService } from '@ngx-translate/core';
 
+import { Observable } from 'rxjs';
+
 import { AppSettings, Driver } from '../app-settings';
-import { LoggingService, SpeechService } from '../services';
+import { AppService, LoggingService, SpeechService } from '../services';
 import { ColorComponent } from './color.component';
 
 @Component({
@@ -17,15 +19,19 @@ export class DriversPage implements OnDestroy, OnInit {
 
   drivers: Driver[];
 
+  orientation: Observable<string>;
+
   readonly placeholder = 'Driver {{number}}';
 
   constructor(
+    private app: AppService,
     private logger: LoggingService,
     private settings: AppSettings,
     private mc: ModalController,
     private speech: SpeechService,
     private translate: TranslateService) 
   {
+    this.orientation = app.orientation;
   }
 
   ngOnInit() {

src/global.scss

@@ -63,6 +63,19 @@ ion-input.right-align {
     }
 }
 
+/* drivers menu items */
+ion-item.driver {
+    ion-button {
+        margin-inline-end: 8px;
+    }
+    ion-buttons {
+        margin-left: 0;
+        ion-note {
+            width: 3em;
+        }
+    }
+}
+
 /* checkered flag blinking in title (only) */
 @keyframes blink-checkered-flag {
     0%   { opacity: 0; }