fix: #333 made the studio step two header, mobile friendly (#334)

ReadAlongs · Sep 11, 2024 · 90151e9 · 90151e9
1 parent 4d5a862
commit 90151e9
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/packages/studio-web/src/app/demo/demo.component.html b/packages/studio-web/src/app/demo/demo.component.html
@@ -1,7 +1,7 @@
 <section>
   <div class="container" *ngIf="studioService.render$ | async">
     <div class="row">
-      <div class="col-9">
+      <div class="col col-md-6 col-lg-9">
         <h2
           id="readalong-congratulations"
           i18n="Congratulations message"
@@ -10,7 +10,7 @@
           Congratulations! Here's your ReadAlong!
         </h2>
       </div>
-      <div class="col-3">
+      <div class="col col-md-6 col-lg-3">
         <ras-shared-download
           (downloadButtonClicked)="download($event)"
         ></ras-shared-download>
@@ -38,7 +38,7 @@
             [(ngModel)]="studioService.slots.title"
             [ngStyle]="{
               'width.ch': studioService.slots.title.length,
-              'min-width.ch': 20
+              'min-width.ch': 20,
             }"
             style="border: none"
             placeholder="Enter your title here"
@@ -49,7 +49,7 @@
             [(ngModel)]="studioService.slots.subtitle"
             [ngStyle]="{
               'width.ch': studioService.slots.subtitle.length,
-              'min-width.ch': 20
+              'min-width.ch': 20,
             }"
             style="border: none"
             placeholder="Enter your subtitle here"

diff --git a/packages/studio-web/src/app/demo/demo.component.sass b/packages/studio-web/src/app/demo/demo.component.sass
@@ -0,0 +1,5 @@
+#readalong-congratulations
+  text-align: center
+@media (min-width: 768px)
+  #readalong-congratulations
+    text-align: center
diff --git a/packages/studio-web/src/app/shared/download/download.component.html b/packages/studio-web/src/app/shared/download/download.component.html
@@ -1,5 +1,5 @@
 <div class="download__buttons">
-  <mat-form-field class="d-none d-lg-block" appearance="fill">
+  <mat-form-field class="d-lg-block" appearance="fill">
     <mat-label i18n="Output format">Output Format</mat-label>
     <mat-select [(ngModel)]="selectedOutputFormat">
       <mat-option *ngFor="let format of outputFormats" [value]="format.value">

diff --git a/packages/studio-web/src/app/shared/download/download.component.sass b/packages/studio-web/src/app/shared/download/download.component.sass
@@ -3,4 +3,8 @@
     button.download
         margin-top: 5px
         margin-left: 15px
-    justify-content: flex-end
+    justify-content: center
+
+@media (min-width: 768px)
+  .download__buttons
+    justify-content: flex-end