teams: smoother surveys form layout (fixes #8242) (#8246)

Co-authored-by: dogi <[email protected]>
open-learning-exchange · Feb 18, 2025 · 030234b · 030234b
1 parent 24f5f6c
commit 030234b
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "planet",
   "license": "AGPL-3.0",
-  "version": "0.17.19",
+  "version": "0.17.20",
   "myplanet": {
-    "latest": "v0.23.8",
-    "min": "v0.22.8"
+    "latest": "v0.23.14",
+    "min": "v0.22.14"
   },
   "scripts": {
     "ng": "ng",

diff --git a/src/app/exams/exams-add.component.html b/src/app/exams/exams-add.component.html
@@ -10,20 +10,22 @@
   <div class="view-container view-full-height">
     <form [formGroup]="examForm" (ngSubmit)="onSubmit()" [ngClass]="{'survey-form':!isCourseContent}" novalidate>
       <div class="exam-buttons">
-        <button mat-raised-button color="primary" type="submit" i18n>Save</button>
-        <button mat-raised-button color="primary" type="button" [planetSubmit]="examForm.valid" (click)="onSubmit(true)" i18n class="margin-lr-5">Save & Return</button>
-        <button mat-raised-button color="accent" type="button" [matMenuTriggerFor]="questionMenu" i18n>Add Question</button>
-        <mat-menu #questionMenu>
-          <button mat-menu-item type="button" (click)="addQuestion('input')" i18n>Text - Short answer</button>
-          <button mat-menu-item type="button" (click)="addQuestion('textarea')" i18n>Text - Long answer</button>
-          <button mat-menu-item type="button" (click)="addQuestion('select')" i18n>Multiple Choice - single answer</button>
-          <button mat-menu-item type="button" (click)="addQuestion('selectMultiple')" i18n>Multiple Choice - multiple answer</button>
-        </mat-menu>
-        <button mat-raised-button color="accent" type="button" (click)="showPreviewDialog()" class="margin-lr-5" i18n>Preview {examType, select, exam {Test} survey {Survey}}</button>
+        <div class="button-group">
+          <button mat-raised-button color="primary" type="submit" i18n>Save</button>
+          <button mat-raised-button color="primary" type="button" [planetSubmit]="examForm.valid" (click)="onSubmit(true)" i18n>Save & Return</button>
+          <div class="menu-button"><button mat-raised-button color="accent" type="button" [matMenuTriggerFor]="questionMenu" i18n>Add Question</button></div>
+          <button mat-raised-button color="accent" type="button" (click)="showPreviewDialog()" i18n>Preview {examType, select, exam {Test} survey {Survey}}</button>
+        </div>
         <mat-checkbox *ngIf="isManagerRoute" formControlName="teamShareAllowed"><span style="font-size: small; font-style: italic; margin: 0.1rem" i18n>Allow team view</span></mat-checkbox>
         <span *ngIf="showFormError" i18n class="mat-caption warn-text-color">Some required fields are missing.</span>
         <span *ngIf="showPreviewError" i18n class="mat-caption warn-text-color">You must add a question to preview the {examType, select, exam {test} survey {survey}}</span>
       </div>
+      <mat-menu #questionMenu>
+        <button mat-menu-item type="button" (click)="addQuestion('input')" i18n>Text - Short answer</button>
+        <button mat-menu-item type="button" (click)="addQuestion('textarea')" i18n>Text - Long answer</button>
+        <button mat-menu-item type="button" (click)="addQuestion('select')" i18n>Multiple Choice - single answer</button>
+        <button mat-menu-item type="button" (click)="addQuestion('selectMultiple')" i18n>Multiple Choice - multiple answer</button>
+      </mat-menu>
       <div class="exam-inputs" *ngIf="!isCourseContent">
         <mat-form-field class="full-width">
           <input matInput i18n-placeholder placeholder="Title" formControlName="name" required>

diff --git a/src/app/exams/exams-add.scss b/src/app/exams/exams-add.scss
@@ -15,16 +15,34 @@
   form {
     display: grid;
     grid-template-areas: "buttons" "questions";
-    grid-template-rows: 48px calc(#{$view-container-height-no-toolbar} - 48px - 2rem);
+    grid-template-rows: auto calc(#{$view-container-height-no-toolbar} - 2rem);
   }
 
   form.survey-form {
     grid-template-areas: "buttons" "inputs" "questions";
-    grid-template-rows: 48px 72px calc(#{$view-container-height-no-toolbar} - 120px - 2rem);
+    grid-template-rows: auto 72px calc(#{$view-container-height-no-toolbar} - 120px - 2rem);
   }
 
   .exam-buttons {
     grid-area: buttons;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+    .button-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-right: 8px;
+    }
+
+    .warn-text-color {
+      display: block;
+      width: 100%;
+    }
+
+  .warn-text-color {
+    margin: 4px;
   }
 
   .exam-inputs {