From 939669d6fcf589a67845d173bd8d4ea02f3b2d31 Mon Sep 17 00:00:00 2001
From: domoberzin <74132255+domoberzin@users.noreply.github.com>
Date: Thu, 6 Jul 2023 01:30:59 +0900
Subject: [PATCH] [#12280] Improve display for create course card header
 (#12500)

* fix: add css for create course card header

* fix: lint indentation fixes

* fix: conditionally apply styles for add mode

* fix: update snapshots

* fix: re-add whitespaces

* fix: re-add whitespaces
---
 .../course-edit-form.component.spec.ts.snap            |  4 ++--
 .../course-edit-form/course-edit-form.component.html   |  2 +-
 .../course-edit-form/course-edit-form.component.scss   | 10 ++++++++++
 .../instructor-courses-page.component.spec.ts.snap     |  2 +-
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/web/app/components/course-edit-form/__snapshots__/course-edit-form.component.spec.ts.snap b/src/web/app/components/course-edit-form/__snapshots__/course-edit-form.component.spec.ts.snap
index b7e4250e02d..87ed3a9aef3 100644
--- a/src/web/app/components/course-edit-form/__snapshots__/course-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/course-edit-form/__snapshots__/course-edit-form.component.spec.ts.snap
@@ -27,7 +27,7 @@ exports[`CourseEditFormComponent should snap when in ADD Mode and is display onl
     class="card"
   >
     <div
-      class="card-header bg-primary text-white"
+      class="card-header bg-primary text-white add-mode"
     >
       <strong>
         Create a new Course
@@ -248,7 +248,7 @@ exports[`CourseEditFormComponent should snap when in ADD Mode with default field
     class="card"
   >
     <div
-      class="card-header bg-primary text-white"
+      class="card-header bg-primary text-white add-mode"
     >
       <strong>
         Create a new Course
diff --git a/src/web/app/components/course-edit-form/course-edit-form.component.html b/src/web/app/components/course-edit-form/course-edit-form.component.html
index e95bfec0e8a..cb48ceb2fb3 100644
--- a/src/web/app/components/course-edit-form/course-edit-form.component.html
+++ b/src/web/app/components/course-edit-form/course-edit-form.component.html
@@ -1,5 +1,5 @@
 <div class="card">
-  <div class="card-header bg-primary text-white">
+  <div class="card-header bg-primary text-white" [ngClass]="{'add-mode': isInAddMode}">
     <strong *ngIf="isInEditMode">Course</strong>
     <strong *ngIf="isInAddMode">Create a new Course</strong>
     <div class="card-header-btn-toolbar">
diff --git a/src/web/app/components/course-edit-form/course-edit-form.component.scss b/src/web/app/components/course-edit-form/course-edit-form.component.scss
index 1b26ee9d2e2..9ff200f5965 100644
--- a/src/web/app/components/course-edit-form/course-edit-form.component.scss
+++ b/src/web/app/components/course-edit-form/course-edit-form.component.scss
@@ -6,3 +6,13 @@
 .fill-plain {
   background-color: #EAEFF5;
 }
+
+@media (max-width: 576px) {
+  .add-mode {
+    display: flex;
+    flex-direction: column;
+    align-content: flex-start;
+    align-items: flex-start;
+    flex-wrap: wrap;
+  }
+}
diff --git a/src/web/app/pages-instructor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap
index ccdb3e31cf0..9f2c9fa8b72 100644
--- a/src/web/app/pages-instructor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-courses-page/__snapshots__/instructor-courses-page.component.spec.ts.snap
@@ -875,7 +875,7 @@ exports[`InstructorCoursesPageComponent should snap when new course form is expa
         class="card"
       >
         <div
-          class="card-header bg-primary text-white"
+          class="card-header bg-primary text-white add-mode"
         >
           <strong
             style=""