Merge

hobbyfarm · Apr 4, 2024 · acf7740 · acf7740
2 parents 47ffe2b + 9bc1bd8
commit acf7740
Show file tree

Hide file tree

Showing 7 changed files with 640 additions and 385 deletions.
diff --git a/src/app/configuration/environments/edit-environment/edit-environment.component.html b/src/app/configuration/environments/edit-environment/edit-environment.component.html
diff --git a/src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html b/src/app/configuration/vmtemplates/edit-vmtemplate/edit-vmtemplate.component.html
diff --git a/src/app/course/course-wizard/course-wizard.component.html b/src/app/course/course-wizard/course-wizard.component.html
@@ -3,6 +3,7 @@
   clrWizardSize="xl"
   (clrWizardOnFinish)="whenFinish()"
   (clrWizardOnCancel)="doCancel()"
+  class="customized"
 >
   <clr-wizard-title> {{ wizardTitle }} </clr-wizard-title>
 

diff --git a/src/app/event/new-scheduled-event/new-scheduled-event.component.html b/src/app/event/new-scheduled-event/new-scheduled-event.component.html
@@ -4,6 +4,7 @@
   clrWizardSize="xl"
   (clrWizardOnFinish)="save()"
   (clrWizardOnCancel)="close()"
+  class="customized"
 >
   <clr-wizard-title>New Scheduled Event</clr-wizard-title>
 
@@ -163,7 +164,8 @@
       <ng-template clrPageTitle>Event Times</ng-template>
       <div class="clr-row">
         <div class="clr-col">
-          Start Time: {{ se.start_time ? (se.start_time | date : 'long') : '' }} <br />
+          Start Time:
+          {{ se.start_time ? (se.start_time | date : "long") : "" }} <br />
           <clr-signpost>
             <button class="btn btn-link" clrSignpostTrigger>
               Set Start Time
@@ -189,7 +191,8 @@
 
       <div class="clr-row">
         <div class="clr-col">
-          End Time: {{ se.end_time ? (se.end_time | date : 'long') : '' }} <br />
+          End Time: {{ se.end_time ? (se.end_time | date : "long") : "" }}
+          <br />
           <clr-signpost>
             <button class="btn btn-link" clrSignpostTrigger>
               Set End Time
@@ -271,7 +274,9 @@
       <p>
         <i> All times are in {{ tz }} (browser detected) </i>
       </p>
-      <ng-container *ngIf="se.start_time && se.end_time && se.start_time >= se.end_time">
+      <ng-container
+        *ngIf="se.start_time && se.end_time && se.start_time >= se.end_time"
+      >
         <clr-alert
           [clrAlertSizeSmall]="true"
           [clrAlertType]="'danger'"

diff --git a/src/app/scenario/scenario-wizard/scenario-wizard.component.html b/src/app/scenario/scenario-wizard/scenario-wizard.component.html
@@ -4,6 +4,7 @@
   clrWizardSize="xl"
   (clrWizardOnFinish)="finishScenario()"
   (clrWizardOnCancel)="doCancel()"
+  class="customized"
 >
   <clr-wizard-title>{{ wizardTitle }} </clr-wizard-title>
 

diff --git a/src/styles.scss b/src/styles.scss
@@ -2,87 +2,95 @@
 @import "../node_modules/@clr/ui/src/main.scss";
 
 .row {
-    @extend .clr-row;
+  @extend .clr-row;
 }
 
 .col {
-    @extend .clr-col;
+  @extend .clr-col;
 }
 
 .col-10 {
-    @extend .clr-col-10;
+  @extend .clr-col-10;
 }
 
 /* added because of the edit step stack view improperly rendering at 55vh */
 .modal .stack-view {
-    height: unset !important;
+  height: unset !important;
 }
 
 /* created compact stack view */
 clr-stack-view.compact {
-    .stack-view .stack-block-label {
-        line-height: 1rem;
-    }
+  .stack-view .stack-block-label {
+    line-height: 1rem;
+  }
 }
 
 .clr-accordion-inner-content {
-    padding: 0rem !important;
+  padding: 0rem !important;
 }
 
 /* Dragula Stuff */
 /* in-flight clone */
 .gu-mirror {
-    position: fixed !important;
-    margin: 0 !important;
-    z-index: 9999 !important;
-    opacity: 0.8;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
-    filter: alpha(opacity=80);
-    pointer-events: none;
-  }
-  /* high-performance display:none; helper */
-  .gu-hide {
-    left: -9999px !important;
-  }
-  /* added to mirrorContainer (default = body) while dragging */
-  .gu-unselectable {
-    -webkit-user-select: none !important;
-    -moz-user-select: none !important;
-    -ms-user-select: none !important;
-    user-select: none !important;
-  }
-  /* added to the source element while its mirror is dragged */
-  .gu-transit {
-    opacity: 0.2;
-    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
-    filter: alpha(opacity=20);
-  }
+  position: fixed !important;
+  margin: 0 !important;
+  z-index: 9999 !important;
+  opacity: 0.8;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+  filter: alpha(opacity=80);
+  pointer-events: none;
+}
+/* high-performance display:none; helper */
+.gu-hide {
+  left: -9999px !important;
+}
+/* added to mirrorContainer (default = body) while dragging */
+.gu-unselectable {
+  -webkit-user-select: none !important;
+  -moz-user-select: none !important;
+  -ms-user-select: none !important;
+  user-select: none !important;
+}
+/* added to the source element while its mirror is dragged */
+.gu-transit {
+  opacity: 0.2;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
+  filter: alpha(opacity=20);
+}
 
-  .table-input {
-    margin-top: 0 !important;
+.table-input {
+  margin-top: 0 !important;
 }
 
 .btn-table {
-    line-height: unset;
-    height: unset;
-    margin: 0 0 0 0;
+  line-height: unset;
+  height: unset;
+  margin: 0 0 0 0;
 }
 
 // .clr_select_disabled > div.datagrid-row-master > div:first-child {
 //     display: none;
 // }
 
-clr-datagrid.clr_disable_selection div.datagrid-row-master > div:first-child  {
-    display: none;
+clr-datagrid.clr_disable_selection div.datagrid-row-master > div:first-child {
+  display: none;
 }
 
 .modal-body-wrapper {
-    width: 100%;
-    margin-bottom: auto;
+  width: 100%;
+  margin-bottom: auto;
 }
 
 /* added because the modal-body is improperly rendering at 70vh,
 overflows the modal and hence displays an unneeded scrollbar */
 .modal-body {
-    min-height: unset !important;
-}
+  min-height: unset !important;
+}
+
+// let's improve the user experience for hovering on stepnav-links within a wizard
+.clr-wizard.customized .clr-wizard-stepnav-item {
+  &:hover .clr-wizard-stepnav-link {
+    background-color: $clr-global-selection-color;
+    color: $clr-color-action-800;
+  }
+}
diff --git a/src/theme.scss b/src/theme.scss
@@ -1,21 +1,20 @@
 header {
-    // background-image: linear-gradient(45deg,#64c89f,#97a39e)!important;
-    background-color: #000 !important;
+  // background-image: linear-gradient(45deg,#64c89f,#97a39e)!important;
+  background-color: #000 !important;
 }
 
-
 .header-nav > .nav-link {
-    &:hover {
-        opacity: 1 !important;
-    }
+  &:hover {
+    opacity: 1 !important;
+  }
 
-    &.active {
-        background: rgba(204, 204, 204, 0.25) !important;
-    }
+  &.active {
+    background: rgba(204, 204, 204, 0.25) !important;
+  }
 }
 
 .datagrid-footer {
-    border: 0 !important;
+  border: 0 !important;
 }
 
 $clr-table-borderwidth: 0;
@@ -36,10 +35,6 @@ $clr-table-bgcolor: #fafafa;
 // e65c3c
 // 3fc5f0
 
-
-
-
-
 $clr-color-hue: 195;
 $clr-color-action-50: hsl($clr-color-hue, 87%, 88%);
 $clr-color-action-100: hsl($clr-color-hue, 86%, 84%);
@@ -94,6 +89,11 @@ $clr-color-warning-1000: hsl($clr-warning-hue, 67%, 42%);
 
 $clr-global-borderradius: 0rem;
 
-$clr-font: Montserrat, 'Avenir Next', Arial, sans-serif;
+$clr-font: Montserrat, "Avenir Next", Arial, sans-serif;
+
+$clr-altFont: Barlow, Arial, sans-serif;
+
+$clr-global-selection-color: hsl(201, 29%, 88%) !default;
 
-$clr-altFont: Barlow, Arial, sans-serif; 
+// The text color on hovering a button of clarity class type btn-link
+$clr-color-action-800: hsl(198, 100%, 24%) !default;