use more CSS classes

flybywiresim · Jul 22, 2024 · b309689 · b309689
1 parent b14013f
commit b309689
Show file tree

Hide file tree

Showing 12 changed files with 169 additions and 131 deletions.
diff --git a/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/DestinationWindow.tsx b/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/DestinationWindow.tsx
@@ -72,12 +72,8 @@ export class DestinationWindow extends DisplayComponent<DestinationWindowProps>
   render(): VNode {
     return (
       <div ref={this.topRef} style="position: relative;">
-        <div
-          class="mfd-dialog"
-          style={`${this.props.contentContainerStyle ?? ''}; left: 195px; top: 225px; width: 500px; height: 300px;
-                    display: flex; flex-direction: column; justify-content: space-between;`}
-        >
-          <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 40px; padding-left: 15px;">
+        <div class="mfd-dialog mfd-fms-new-dest-box" style={`${this.props.contentContainerStyle ?? ''}`}>
+          <div class="mfd-fms-new-dest-box-inner">
             <span class="mfd-label">
               NEW DEST FROM{' '}
               <span ref={this.identRef} class="mfd-value bigger">
@@ -98,7 +94,7 @@ export class DestinationWindow extends DisplayComponent<DestinationWindowProps>
               />
             </div>
           </div>
-          <div style="display: flex; flex-direction: row; justify-content: space-between">
+          <div class="fr" style="justify-content: space-between">
             <Button
               label="CANCEL"
               onClick={() => {

diff --git a/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/InsertNextWptFrom.tsx b/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/InsertNextWptFrom.tsx
@@ -147,12 +147,8 @@ export class InsertNextWptFromWindow extends DisplayComponent<InsertNextWptFromW
   render(): VNode {
     return (
       <div ref={this.topRef} style="position: relative;">
-        <div
-          class="mfd-dialog"
-          style={`${this.props.contentContainerStyle ?? ''}; left: 175px; top: 50px; width: 500px; height: 625px; overflow: visible;
-                    display: flex; flex-direction: column; justify-content: space-between;`}
-        >
-          <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 0px; padding-left: 10px;">
+        <div class="mfd-dialog mfd-fms-insert-next-wpt-box" style={`${this.props.contentContainerStyle ?? ''}`}>
+          <div class="mfd-fms-insert-next-wpt-box-inner">
             <span class="mfd-label">
               INSERT NEXT WPT FROM <span ref={this.identRef} class="mfd-value bigger" />
             </span>
@@ -174,7 +170,7 @@ export class InsertNextWptFromWindow extends DisplayComponent<InsertNextWptFromW
               />
             </div>
           </div>
-          <div style="display: flex; flex-direction: row; justify-content: space-between">
+          <div class="fr" style="justify-content: space-between">
             <Button
               label="CANCEL"
               onClick={() => {

diff --git a/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFpln.scss b/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFpln.scss
@@ -326,3 +326,44 @@
   flex-direction: row;
   justify-content: space-between;
 }
+
+.mfd-fms-insert-next-wpt-box {
+  left: 175px;
+  top: 50px;
+  width: 500px;
+  height: 625px;
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.mfd-fms-insert-next-wpt-box-inner {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 0px;
+  padding-left: 10px;
+}
+
+.mfd-fms-new-dest-box {
+  left: 195px;
+  top: 225px;
+  width: 500px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.mfd-fms-new-dest-box-inner {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding-top: 40px;
+  padding-left: 15px;
+}
diff --git a/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFplnAirways.scss b/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFplnAirways.scss
@@ -1,56 +1,21 @@
 @import "../../../../MsfsAvionicsCommon/definitions";
 
 
-.mfd-fms-direct-to-wpt-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  margin-top: 10px;
-  margin-bottom: 40px;
-}
-
-.mfd-fms-direct-to-dropdown-div {
-  margin-left: 15px;
-}
-
-.mfd-fms-direct-to-wpt-info {
-  width: 65%;
-  display: grid;
-  grid-template-columns: auto auto auto;
-  align-self: center;
-  justify-content: center;
-  align-items: center;
-}
-
-.mfd-fms-direct-to-utc-label {
-  display: flex;
-  justify-content: flex-end;
-  padding-right: 10px;
-  margin-bottom: 10px;
-}
-
-.mfd-fms-direct-to-utc-value {
-  display: flex;
-  justify-content: flex-end;
-  margin-bottom: 10px;
+.mfd-fms-fpln-awy-awy-container {
+  height: 630px;
+  margin: 10px 30px 5px 30px;
+  border: 2px outset lightgrey;
+  padding: 15px;
 }
 
-.mfd-fms-direct-to-options-box {
+.mfd-fms-fpln-awy-btn-container {
   display: flex;
-  flex-direction: column;
-  border: 2px solid grey;
-  padding: 5px 10px 35px 10px;
-  margin-top: 10px;
-}
-
-.mfd-fms-direct-to-options {
-  margin-left: 15px;
-  margin-top: 45px;
+  flex-direction: row;
+  justify-content: center
 }
 
-.mfd-fms-direct-to-erase-return-btn {
-  display: flex;
-  justify-content: flex-end;
-  padding: 2px;
+.mfd-fms-awy-line-container {
+  justify-content: space-between;
+  margin-top: 15px;
+  margin-bottom: 15px;
 }
diff --git a/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFplnAirways.tsx b/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFplnAirways.tsx
@@ -1,6 +1,7 @@
 import { ComponentProps, DisplayComponent, FSComponent, Subject, VNode } from '@microsoft/msfs-sdk';
 
 import './MfdFmsFplnAirways.scss';
+import '../../common/style.scss';
 import { AbstractMfdPageProps, MfdDisplayInterface } from 'instruments/src/MFD/MFD';
 import { Footer } from 'instruments/src/MFD/pages/common/Footer';
 import { Button } from 'instruments/src/MFD/pages/common/Button';
@@ -106,7 +107,7 @@ export class MfdFmsFplnAirways extends FmsPage<MfdFmsFplnAirwaysProps> {
         {super.render()}
         {/* begin page content */}
         <div class="fc" style="margin-top: 15px;">
-          <div class="fr" style="align-items: center;">
+          <div class="fr aic">
             <span class="mfd-label" style="margin-left: 15px;">
               AIRWAYS FROM
             </span>
@@ -121,12 +122,9 @@ export class MfdFmsFplnAirways extends FmsPage<MfdFmsFplnAirwaysProps> {
               {this.revisedFixIdent}
             </span>
           </div>
-          <div
-            ref={this.airwayLinesRef}
-            style="height: 630px; margin: 10px 30px 5px 30px; border: 2px outset lightgrey; padding: 15px;"
-          />
+          <div ref={this.airwayLinesRef} class="mfd-fms-fpln-awy-awy-container" />
         </div>
-        <div style="display: flex; flex-direction: row; justify-content: center">
+        <div class="fr jcc">
           <IconButton
             icon="double-down"
             onClick={() => this.displayFromLine.set(this.displayFromLine.get() + 1)}
@@ -193,8 +191,8 @@ class AirwayLine extends DisplayComponent<AirwayLineProps> {
 
   render(): VNode {
     return (
-      <div class="fr" style="justify-content: space-between; margin-top: 15px; margin-bottom: 15px;">
-        <div class="fr" style="align-items: center;">
+      <div class="fr mfd-fms-awy-line-container">
+        <div class="fr aic">
           <div class="mfd-label" style="margin-right: 5px;">
             VIA
           </div>
@@ -247,7 +245,7 @@ class AirwayLine extends DisplayComponent<AirwayLineProps> {
             interactionMode={this.props.mfd.interactionMode}
           />
         </div>
-        <div class="fr" style="align-items: center;">
+        <div class="fr aic">
           <div class="mfd-label" style="margin-right: 5px;">
             TO
           </div>

diff --git a/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFplnArr.tsx b/fbw-a380x/src/systems/instruments/src/MFD/pages/FMS/F-PLN/MfdFmsFplnArr.tsx
@@ -393,8 +393,8 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
         {/* begin page content */}
         <div class="mfd-fms-fpln-labeled-box-container">
           <span class="mfd-label mfd-spacing-right mfd-fms-fpln-labeled-box-label">SELECTED ARRIVAL</span>
-          <div class="mfd-fms-fpln-label-bottom-space" style="display: flex; flex-direction: row; align-items: center;">
-            <div style="flex: 0.2; display: flex; flex-direction: row; align-items: center;">
+          <div class="mfd-fms-fpln-label-bottom-space fr aic">
+            <div class="fr aic" style="flex: 0.2;">
               <span class="mfd-label mfd-spacing-right">TO</span>
               <span
                 class={{
@@ -406,7 +406,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 {this.toIcao}
               </span>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">LS</span>
               <span
                 class={{
@@ -418,7 +418,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 {this.rwyLs}
               </span>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">RWY</span>
               <div>
                 <span
@@ -432,7 +432,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 </span>
               </div>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">LENGTH</span>
               <div>
                 <span
@@ -447,7 +447,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 <span class="mfd-label-unit mfd-unit-trailing">M</span>
               </div>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">CRS</span>
               <div>
                 <span
@@ -463,8 +463,8 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
               </div>
             </div>
           </div>
-          <div style="display: flex; flex-direction: row; align-items: center;">
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+          <div class="fr aic">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">APPR</span>
               <span
                 class={{
@@ -476,7 +476,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 {this.appr}
               </span>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">FREQ/CHAN</span>
               <span
                 class={{
@@ -488,7 +488,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 {this.rwyFreq}
               </span>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">VIA</span>
               <div>
                 <span
@@ -502,7 +502,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 </span>
               </div>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">STAR</span>
               <div>
                 <span
@@ -516,7 +516,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
                 </span>
               </div>
             </div>
-            <div style="flex: 0.2; display: flex; flex-direction: column;">
+            <div class="fc" style="flex: 0.2;">
               <span class="mfd-label mfd-fms-fpln-label-bottom-space">TRANS</span>
               <div>
                 <span
@@ -532,7 +532,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
             </div>
           </div>
         </div>
-        <div style="display: flex; flex-direction: row; justify-content: space-between;">
+        <div class="fr" style="justify-content: space-between;">
           <Button
             label="RWY"
             onClick={() => {}}
@@ -575,7 +575,7 @@ export class MfdFmsFplnArr extends FmsPage<MfdFmsFplnArrProps> {
           />
         </div>
         <div style="flex-grow: 1;" />
-        <div style="display: flex; flex-direction: row; justify-content: space-between;">
+        <div class="fr" style="justify-content: space-between;">
           <div ref={this.returnButtonDiv} style="display: flex; justify-content: flex-end; padding: 2px;">
             <Button
               label="RETURN"