Merge pull request #667 from bcgov/sam-student-profile

Warnings squashed and tab style improvements on Programs and Codes views. Also includes env banner style tweaks

frontend/src/assets/css/bcgov.css

@@ -25,10 +25,10 @@ form {
   padding: 5px 5px 5px 7px;
 }
 
-.text_input[type="text"]:focus {
+/* .text_input[type="text"]:focus {
     outline: 4px solid #3B99FC;
     outline-offset: 1px;
-}
+} */
 
 .text_label {
   display: flex;
@@ -56,10 +56,10 @@ text-decoration: underline;
 opacity: 0.80;
 }
 
-.text_input:focus {
+/* .text_input:focus {
 outline: 4px solid #3B99FC;
 outline-offset: 1px;
-}
+} */
 
 .BC-Gov-PrimaryButton:active {
 opacity: 1;

frontend/src/assets/css/global.css

@@ -90,7 +90,7 @@ option:disabled{
     background: #fff !important;
     border: none !important;
   }
-  #optional-programs-dd button{
+  /* #optional-programs-dd button{
     padding: 0px !important;
     line-height: 1em;
     color: #1a5a96;
@@ -101,7 +101,7 @@ option:disabled{
   #optional-programs-dd button:focus{
     box-shadow: none;
     color: #495057;
-  }
+  } */
   .nav-item a{
     border-radius: 0px !important;
   }
@@ -166,11 +166,18 @@ th {
   color: rgb(var(--v-theme-primary));
   font-weight: bold;
 }
+.bg-bcGovLightGrey .v-btn.v-tab-item--selected .v-btn__content {
+  font-weight: bold;
+}
 .v-btn.v-tab-item--selected .v-tab__slider {
   display: none;
 }
 .v-slide-group.bg-primary {
   background-color: white !important;
 }
 
+button.v-btn:focus {
+  outline: none;
+}
+
 

frontend/src/components/Header/EnvironmentBanner.vue

@@ -5,21 +5,22 @@
       density="compact"
       class="local-env"
     >
-      <v-spacer />Vue 3 - <strong>localhost</strong> environment <v-spacer />
+      <v-spacer /><strong>localhost</strong>&nbsp;environment
+      <v-spacer />
     </v-app-bar>
     <v-app-bar
       v-else-if="environment === 'dev'"
       density="compact"
       class="dev-env"
     >
-      <v-spacer />Vue 3 - <strong>DEV</strong> environment<v-spacer />
+      <v-spacer /><strong>DEV</strong>&nbsp;environment<v-spacer />
     </v-app-bar>
     <v-app-bar
       v-else-if="environment == 'test'"
       density="compact"
       class="test-env"
     >
-      <v-spacer />Vue 3 - <strong>TEST</strong> environment<v-spacer />
+      <v-spacer /><strong>TEST</strong>&nbsp;environment<v-spacer />
     </v-app-bar>
   </div>
 </template>
@@ -83,7 +84,7 @@ export default {
   float: none;
 }
 #env-banner .test-env {
-  background-color: #80ff00;
+  background-color: #80ff00ad;
   color: #000;
   width: 100%;
   float: none;

frontend/src/components/StudentProfile/AuditHistory/StudentNotes.vue

@@ -1,26 +1,30 @@
 <template>
   <div>
     <!-- Button to open the dialog -->
-    <v-btn
-      color="primary"
-      @click="showDialog = true"
-      prepend-icon="mdi-plus"
-      class="text-none"
-      >Add Note</v-btn
-    >
+    <v-row no-gutters>
+      <v-spacer />
+      <v-btn
+        color="primary"
+        @click="showDialog = true"
+        prepend-icon="mdi-plus"
+        class="text-none"
+        >Add Student Note</v-btn
+      >
+    </v-row>
 
     <!-- v-dialog for adding notes -->
     <v-dialog v-model="showDialog" max-width="600px">
       <v-card>
         <v-card-title>
-          <span class="headline">Add Note</span>
+          <span class="headline">Add Student Note</span>
         </v-card-title>
-        <v-card-text>
+        <v-card-text class="bg-surface-light">
           <v-form @submit.prevent="onSubmit" @reset="onReset">
             <v-textarea
               v-model="newNote.note"
               label="Add note:"
               placeholder="Max 255 Characters"
+              variant="outlined"
               :rules="[
                 (value) =>
                   !value || value.length <= 255 || 'Max 255 characters',
@@ -30,72 +34,96 @@
           </v-form>
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" @click="onSubmit" class="text-none">Add</v-btn>
-          <v-btn text @click="showDialog = false" class="text-none"
+          <v-btn
+            color="error"
+            variant="outlined"
+            @click="showDialog = false"
+            class="text-none ml-4"
             >Cancel</v-btn
           >
+          <v-spacer />
+          <v-btn
+            color="error"
+            variant="flat"
+            @click="onSubmit"
+            class="text-none mr-4 mb-4"
+            >Add Student Note</v-btn
+          >
         </v-card-actions>
       </v-card>
     </v-dialog>
 
     <v-list>
-      <v-list-item-group>
-        <v-list-item
-          v-for="(studentNote, studentNoteIndex) in studentNotes"
-          :key="studentNote.id"
-        >
-          <v-card class="mb-2" outlined>
-            <v-card-title>
-              <span>{{ studentNote.createUser }}</span>
-              <v-spacer></v-spacer>
-              <v-btn icon @click="onEditNote(studentNote)">
-                <v-icon>mdi-pencil</v-icon>
-              </v-btn>
+      <v-list-item
+        v-for="(studentNote, studentNoteIndex) in studentNotes"
+        :key="studentNote.id"
+      >
+        <v-card class="mb-2" variant="elevated" max-width="1200px">
+          <v-card-title>
+            <span>{{ studentNote.createUser }}</span>
+            <v-btn
+              v-if="showAddButton"
+              @click="onDelete(studentNote.id)"
+              color="error"
+              icon="mdi-delete"
+              variant="text"
+              class="float-right"
+            >
+            </v-btn>
+            <v-btn
+              @click="onEditNote(studentNote)"
+              color="bcGovBlue"
+              icon="mdi-pencil"
+              variant="text"
+              class="float-right"
+            >
+            </v-btn>
+          </v-card-title>
+          <v-divider class="mx-4 mt-0" />
+          <v-card-text>
+            <div v-if="showEditForm != studentNote.id">
+              {{ studentNote.note }}
+            </div>
+            <v-textarea
+              v-if="showEditForm == studentNote.id"
+              v-model="editedNote.note"
+              placeholder="Max 255 Characters"
+              variant="outlined"
+              :rules="[
+                (value) =>
+                  !value || value.length <= 255 || 'Max 255 characters',
+              ]"
+              rows="3"
+              max-rows="6"
+            ></v-textarea>
+            <v-row no-gutters>
               <v-btn
-                v-if="showAddButton"
-                icon
-                @click="onDelete(studentNote.id)"
+                v-if="showEditForm == studentNote.id"
+                color="error"
+                variant="outlined"
+                class="text-none mb-2"
+                @click="cancelEdit()"
               >
-                <v-icon color="red">mdi-delete</v-icon>
+                Cancel
               </v-btn>
-            </v-card-title>
-            <v-card-subtitle>
-              <strong>Created:</strong>
-              {{ $filters.formatTime(studentNote.createDate) }}
-            </v-card-subtitle>
-            <v-card-text>
-              <div v-if="showEditForm != studentNote.id">
-                {{ studentNote.note }}
-              </div>
-              <v-textarea
-                v-if="showEditForm == studentNote.id"
-                v-model="editedNote.note"
-                placeholder="Max 255 Characters"
-                :rules="[
-                  (value) =>
-                    !value || value.length <= 255 || 'Max 255 characters',
-                ]"
-                rows="3"
-                max-rows="6"
-              ></v-textarea>
+              <v-spacer />
               <v-btn
                 v-if="showSave && showEditForm == studentNote.id"
-                color="primary"
+                color="error"
+                variant="flat"
+                class="text-none mb-2"
                 @click="onSaveEditedNote(studentNoteIndex, editedNote)"
               >
                 Save
               </v-btn>
-              <v-btn
-                v-if="showEditForm == studentNote.id"
-                text
-                @click="cancelEdit()"
-              >
-                Cancel
-              </v-btn>
-            </v-card-text>
-          </v-card>
-        </v-list-item>
-      </v-list-item-group>
+            </v-row>
+          </v-card-text>
+          <v-card-subtitle class="ml-0 mb-4">
+            <strong>Created:</strong>
+            {{ $filters.formatTime(studentNote.createDate) }}
+          </v-card-subtitle>
+        </v-card>
+      </v-list-item>
     </v-list>
   </div>
 </template>

frontend/src/components/StudentProfile/StudentOptionalPrograms.vue

@@ -190,7 +190,7 @@
                 color="error"
                 icon="mdi-delete-forever"
                 density="compact"
-                variant="outline"
+                variant="text"
               ></v-btn>
             </template>
             <v-card
@@ -346,7 +346,7 @@
                           color="error"
                           icon="mdi-delete-forever"
                           density="compact"
-                          variant="outline"
+                          variant="text"
                         ></v-btn>
                       </template>
                       <v-card
@@ -567,6 +567,10 @@ export default {
         {
           key: "data-table-expand",
           title: "",
+          cellProps: {
+            style: "vertical-align: baseline;",
+            class: "pt-5 pb-5",
+          },
         },
         {
           key: "programCode",
@@ -585,10 +589,21 @@ export default {
           },
         },
         { key: "optionalReqMet", title: "Requirements Met" },
-        { key: "optionalNonGradReasons", title: "Requirements Not Met" },
+        {
+          key: "optionalNonGradReasons",
+          title: "Requirements Not Met",
+          cellProps: {
+            style: "vertical-align: baseline;",
+            class: "pt-5 pb-5",
+          },
+        },
         {
           key: "optionalProgramCompletionDate",
           title: "Optional Program Completion Date",
+          cellProps: {
+            style: "vertical-align: baseline;",
+            class: "pt-5 pb-5",
+          },
         },
         {
           key: "actions",

frontend/src/views/Codes.vue

@@ -12,9 +12,10 @@
               <v-btn
                 text
                 v-bind="props"
-                variant="link"
+                variant="text"
                 class="text-none"
                 size="large"
+                append-icon="mdi-menu-down"
                 >Credentials</v-btn
               >
             </template>

frontend/src/views/Programs.vue

@@ -13,10 +13,11 @@
               <v-btn
                 text
                 v-bind="props"
-                variant="link"
                 class="text-none"
                 size="large"
-                >Programs <v-icon>mdi-menu-down</v-icon></v-btn
+                variant="text"
+                append-icon="mdi-menu-down"
+                >Programs</v-btn
               >
             </template>
             <v-list>
@@ -38,11 +39,12 @@
               <v-btn
                 text
                 v-bind="props"
-                variant="link"
                 class="text-none"
                 size="large"
+                variant="text"
+                append-icon="mdi-menu-down"
                 block
-                >Optional Programs <v-icon>mdi-menu-down</v-icon></v-btn
+                >Optional Programs</v-btn
               >
             </template>
             <v-list>