fix: reduce how much real estate is spent on studio&editor headers (#332

)
ReadAlongs · Aug 27, 2024 · 4d5a862 · 4d5a862
1 parent 8a1bc02
commit 4d5a862
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 40 deletions.
diff --git a/packages/studio-web/src/app/editor/editor.component.html b/packages/studio-web/src/app/editor/editor.component.html
@@ -1,19 +1,19 @@
 <section class="container mt-1"></section>
 <section id="editor">
-  <div class="container mb-2 mt-5">
-    <div class="row justify-content-center mb-5">
-      <div class="col-6">
+  <div class="container mt-4">
+    <div class="row mb-3">
+      <div class="col-8">
         <h1 i18n="Welcome message for app editor" id="welcome-header">
           Welcome to the ReadAlong Studio Editor
         </h1>
         <p>
           This is a tool to help you edit your existing 'readalongs'. To get
           started, click on the tour button below, and follow the steps.
         </p>
-        <div class="row mt-5 justify-content-center">
+        <div class="row mt-0 justify-content-center">
           <button
             i18n="Take the tour"
-            class="mb-4 col center text-center plausible-event-name=Tour"
+            class="mb-4 col-9 center text-center plausible-event-name=Tour"
             mat-raised-button
             color="primary"
             (click)="startTour()"
@@ -22,7 +22,7 @@ <h1 i18n="Welcome message for app editor" id="welcome-header">
           </button>
         </div>
       </div>
-      <div class="col-6" *ngIf="editorService.uploadFormGroup.valid">
+      <div class="col-4" *ngIf="editorService.uploadFormGroup.valid">
         <ras-shared-download
           (downloadButtonClicked)="download($event)"
         ></ras-shared-download>

diff --git a/packages/studio-web/src/app/studio/studio.component.html b/packages/studio-web/src/app/studio/studio.component.html
@@ -9,40 +9,36 @@
     label="Step 1"
   >
     <section>
-      <div class="container mb-2">
-        <div class="row justify-content-center mb-5">
-          <div class="col-6">
-            <p i18n="Description of app">
-              This is a tool to help you make your own interactive 'readalong'
-              that highlights words as they are spoken. Have a look at
-              <a
-                href="https://www.eastcree.org/cree/en/lessons/read-along/northern-dialect/when-the-beaver-had-a-round-tail/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <mat-icon inline style="vertical-align: middle"
-                  >launch</mat-icon
-                >
-                this example in East Cree</a
-              >
-              to get a better idea of what these are.
-            </p>
-            <p i18n="Get started">
-              To get started making your own, click on the tour button below,
-              and follow the steps.
-            </p>
-            <div class="row mt-5 justify-content-center">
-              <button
-                i18n="Take the tour"
-                class="mb-4 col center text-center plausible-event-name=Tour"
-                mat-raised-button
-                color="primary"
-                (click)="startTour()"
-              >
-                Take the tour!
-              </button>
-            </div>
-          </div>
+      <div class="container mb-3">
+        <p i18n="Description of app">
+          This is a tool to help you make your own interactive 'readalong' that
+          highlights words as they are spoken. Have a look at
+          <a
+            href="https://www.eastcree.org/cree/en/lessons/read-along/northern-dialect/when-the-beaver-had-a-round-tail/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <mat-icon inline style="vertical-align: middle">launch</mat-icon>
+            this example in East Cree</a
+          >
+          to get a better idea of what these are.
+        </p>
+        <p i18n="Get started">
+          To get started making your own, click on the tour button below, and
+          follow the steps.
+        </p>
+        <div class="row center mt-0 justify-content-center">
+          <div class="col-3"></div>
+          <button
+            i18n="Take the tour"
+            class="mb-3 col-6 center text-center plausible-event-name=Tour"
+            mat-raised-button
+            color="primary"
+            (click)="startTour()"
+          >
+            Take the tour!
+          </button>
+          <div class="col-3"></div>
         </div>
       </div>
     </section>