Styling

frontend/src/components/DisplayTable.vue

@@ -1,11 +1,11 @@
 <template>
   <v-container fluid>
     <!-- User Interface controls -->
-    <v-row>
+    <v-row class="mt-n16">
       <slot name="create"></slot>
       <v-row v-if="showFilter" id="filter">
         <v-col lg="8" class="px-0 float-left"></v-col>
-        <v-col sm="12" lg="4" class="my-1 table-filter p-0">
+        <v-col sm="12" lg="4" class="my-1 pr-3 table-filter p-0">
           <v-row>
             <v-col cols="12">
               <v-form>

frontend/src/components/Programs/AlgorithmRules.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="algorithm-rules">
-    <h3>Algorithm Rules</h3>
+    <h3 class="ml-3 mt-5">Algorithm Rules</h3>
     <v-progress-circular
       v-if="isLoading"
       color="primary"

frontend/src/components/Programs/GraduationOptionalProgramRules.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="optional-graduation-program-rules">
-    <h3>Optional Program Rules</h3>
+    <h3 class="ml-3 mt-5">Optional Program Rules</h3>
     <v-progress-circular
       v-if="isLoading"
       color="primary"

frontend/src/components/Programs/GraduationOptionalPrograms.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3>Optional Programs</h3>
+    <h3 class="ml-3 mt-5">Optional Programs</h3>
     <DisplayTable
       v-bind:items="graduationOptionalPrograms"
       v-bind:fields="graduationOptionalProgramsFields"

frontend/src/components/Programs/GraduationProgramRules.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="graduation-program-rules">
-    <h3>Program Rules</h3>
+    <h3 class="ml-3 mt-5">Program Rules</h3>
     <v-progress-circular
       v-if="isLoading"
       color="primary"

frontend/src/components/Programs/GraduationProgramTranscriptMessage.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="transcript-message">
-    <h3>Transcript Messaging</h3>
+    <h3 class="ml-3 mt-5">Transcript Messaging</h3>
     <v-progress-circular
       v-if="isLoading"
       color="primary"

frontend/src/components/Programs/GraduationPrograms.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="graduation-programs">
-    <h3>Programs</h3>
+    <h3 class="ml-3 mt-5">Programs</h3>
     <v-progress-circular
       v-if="isLoading"
       color="primary"

frontend/src/components/Programs/LetterGrades.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3>Letter Grades</h3>
+    <h3 class="ml-3 mt-5">Letter Grades</h3>
     <DisplayTable
       v-bind:items="letterGrades"
       v-bind:filterOn="toFilterItem"

frontend/src/components/Programs/RequirementTypes.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
-    <h3>Requirement Type Codes</h3>
-    <p>
+    <h3 class="ml-3 mt-5">Requirement Type Codes</h3>
+    <p class="ml-3">
       Requirement type codes support how the algorithm runs program rules and
       optional program rules.
     </p>

frontend/src/components/Programs/SpecialCases.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3>Assessment Special Case Codes</h3>
+    <h3 class="ml-3 mt-5">Assessment Special Case Codes</h3>
     <DisplayTable
       v-bind:items="specialCases"
       v-bind:filterOn="toFilterItem"

frontend/src/views/Courses.vue

@@ -198,7 +198,7 @@
               ></DisplayTable>
             </v-window-item>
             <v-window-item value="courseRestrictionsTab">
-              <v-card-text>
+              <v-card-text class="mt-12">
                 <DisplayTable
                   title="Course restrictions"
                   v-bind:items="courseRestrictions"

frontend/src/views/Login.vue

@@ -1,6 +1,7 @@
 <template>
   <v-container class="d-flex justify-center">
     <v-row>
+      <v-spacer />
       <v-col cols="12" md="4" lg="4">
         <v-card class="pt-3 pb-4">
           <v-card-title>
@@ -17,6 +18,7 @@
           </v-card-actions>
         </v-card>
       </v-col>
+      <v-spacer />
     </v-row>
   </v-container>
 </template>