chore(#358): Refactor css classes and update relevant html

Duke-MatSci · Mar 18, 2023 · 533027e · 533027e
1 parent 614f362
commit 533027e
Show file tree

Hide file tree

Showing 17 changed files with 76 additions and 52 deletions.
diff --git a/app/src/assets/css/modules/_button.scss b/app/src/assets/css/modules/_button.scss
@@ -46,7 +46,7 @@ a.btn,
     }
 
     &--primary {
-        background-color: $primary;
+        background-color: $primary !important;
         color: $primary-white;
 
         &::after:not([disabled="disabled"]) {
@@ -147,3 +147,19 @@ a.btn-text,
         cursor: pointer;
     }
 }
+
+.viz-tab__button {
+    display: inline-flex;
+    padding: 0.8rem 0.8rem 0.4rem;
+    font-size: 1.3rem;
+    font-weight: 500;
+    color: $secondary-grey !important;
+    cursor: pointer;
+
+    &:hover{
+        text-decoration: none !important;
+    }
+    &.active{
+        border-bottom: 0.2rem solid $secondary-grey;
+    }
+}
diff --git a/app/src/assets/css/modules/_facet.scss b/app/src/assets/css/modules/_facet.scss
@@ -51,34 +51,28 @@
 }
 
 /*Resizeable*/
-.facet .resizer-right {
-    width: 5px;
-    height: 100%;
+
+.facet .resizer {
     background: transparent;
     position: absolute;
     right: 0;
     bottom: 0;
+}
+
+.facet .resizer-right {
+    width: 5px;
     cursor: e-resize;
 }
 
 .facet .resizer-bottom {
-    width: 100%;
     height: 5px;
-    background: transparent;
-    position: absolute;
-    right: 0;
-    bottom: 0;
     cursor: n-resize;
 }
 
 .facet .resizer-both {
     width: 5px;
     height: 5px;
-    background: transparent;
     z-index: 10;
-    position: absolute;
-    right: 0;
-    bottom: 0;
     cursor: nw-resize;
 }
 

diff --git a/app/src/assets/css/modules/_misc.scss b/app/src/assets/css/modules/_misc.scss
@@ -206,7 +206,6 @@
 .howto_item {
     &-header{
         cursor: pointer;
-        display: flex;
         display: -webkit-box;
         display: -ms-flexbox;
         -webkit-box-align: center;

diff --git a/app/src/assets/css/modules/_pages.scss b/app/src/assets/css/modules/_pages.scss
@@ -522,7 +522,6 @@
     }
 
     &__relatedImg {
-        display: flex;
         flex-direction: row;
         @include respond(phone){
             flex-direction: row !important;

diff --git a/app/src/assets/css/modules/_section.scss b/app/src/assets/css/modules/_section.scss
@@ -215,9 +215,4 @@
             }
         }
     }
-    &__share {
-        display: flex;
-        justify-content: right;
-        line-height: 50px;
-    }
 }
diff --git a/app/src/assets/css/modules/_tools.scss b/app/src/assets/css/modules/_tools.scss
@@ -14,7 +14,6 @@
 }
 
 .md-layout-responsive{
-  display: flex;
   flex-flow: row wrap;
   justify-content: space-evenly;
   min-height: 35rem;
@@ -108,7 +107,7 @@
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.3); /* dims the entire screen to make the modal stand out */
-  display: flex;
+  // display: flex; //Added with a utility class on element
   flex-direction: column;
   justify-content: center;
   align-items: center;

diff --git a/app/src/assets/css/modules/_utility.scss b/app/src/assets/css/modules/_utility.scss
@@ -27,18 +27,31 @@
         margin-left: 1rem;
         padding-left: 1rem;
     }
+
     &_width--small {
         width: 15rem;
     }
+
     &--bg {
         background-color: $primary !important;
-        color: $primary-white !important
+        color: $primary-white !important;
+
+        &--grey {
+            background-color: $secondary-grey
+        }
+    }
+
+    &_display {
+        &-flex {
+            display: flex;
+        }
     }
 
     &--alt-bg {
         background-color: $tertiary !important;
         color: $primary !important
     }
+
     &-clear {
         @include clearfix;
     }
@@ -132,6 +145,18 @@
         }
     }
 
+    &_height {
+        &--max {
+            height: 100% !important;
+        }
+    }
+
+    &_width {
+        &--max {
+            width: 100% !important;
+        }
+    }
+
     &--padding-lg {
         padding: 0 10rem;
     }
@@ -313,16 +338,20 @@
     }
 
     &_pointer {
-        cursor: pointer;
+        cursor: pointer !important;
+
+        &--ew {
+            cursor: ew-resize !important;
+        }
     }
 
     &_centralize {
         &_text {
             text-align: center;
         }
         &_content {
+            // Flex type content
             justify-content: center; 
-            display: flex;
         }
         &_other {
             margin: 0 auto;
@@ -369,7 +398,7 @@
                 cursor: pointer;
             }
         }
-        & > div:hover{
+        & > div:hover{ // Todo (ticket xx): This requires a rewrite. We can use existing utils
             background-color: $primary-light;
             & > i {
                 color: $secondary-light !important;

diff --git a/app/src/components/Spinner.vue b/app/src/components/Spinner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="spinner" v-show="loading">
+  <div class="u_display-flex spinner" v-show="loading">
     <div v-if="text" style="font-size:1.5rem; font-weight:200; flex:0 0 auto; margin-bottom: 2rem">{{ text }} <br /></div>
     <div style="flex: 0 0 auto;">
       <span class="sync" :style="[spinnerStyle, spinnerDelay1]"></span>
@@ -70,7 +70,6 @@ export default {
 .spinner {
   width: 100%;
   height: 100%;
-  display: flex;
   align-items: center;
   justify-content: center;
   align-content: center;

diff --git a/app/src/components/accordion.vue b/app/src/components/accordion.vue
@@ -2,7 +2,7 @@
 <div class="accordion">
   <div @click="toggleOpen">
     <md-toolbar :class="dense ? 'md-dense' :'md-toolbar_adjust u--padding-zero'">
-      <div class="accordion-toolbar-row viz-sample__header">
+      <div class="u_display-flex accordion-toolbar-row viz-sample__header">
         <h4 v-if="dense" class="md-subheader">{{title}}</h4>
         <h3 v-else class="md-title">{{title}}</h3>
         <div class="accordion-icons">
@@ -59,7 +59,6 @@ export default Vue.component('accordion', {
 }
 .accordion-toolbar-row {
   width: 100%;
-  display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;

diff --git a/app/src/components/nanomine/EditImage.vue b/app/src/components/nanomine/EditImage.vue
@@ -12,7 +12,7 @@
 -->
 
 <template>
-  <div class='editImage_modal' v-if='value'>
+  <div class='u_display-flex editImage_modal' v-if='value'>
     <div class='image-cropper-container'>
 
       <h1>{{ computedTitle }}</h1>
@@ -24,7 +24,7 @@
 
       <!-- instructions (varies based on use case) -->
       <p v-if='type === "phase"'><strong>Instructions:</strong> click on the phase within the image that you would like to be analyzed.</p>
-      <p v-if='type === "calibrate"'><strong>Instruction:</strong> click and drag over the scale bar within the image to calibrate image size to scale bar.<p>
+      <p v-if='type === "calibrate"'><strong>Instruction:</strong> click and drag over the scale bar within the image to calibrate image size to scale bar.</p>
 
       <!-- displayed when user opens phase select -->
       <div class='relative imageWrapper' v-if='type === "phase"' ref='imageWrapperDiv'>

diff --git a/app/src/modules/facet.js b/app/src/modules/facet.js
@@ -81,19 +81,19 @@ function initResizeElement () {
     var p = facets[i]
 
     var right = document.createElement('div')
-    right.className = 'resizer-right'
+    right.className = 'resizer resizer-right u_height--max'
     p.appendChild(right)
     right.addEventListener('mousedown', initDrag, false)
     right.parentFacet = p
 
     var bottom = document.createElement('div')
-    bottom.className = 'resizer-bottom'
+    bottom.className = 'resizer resizer-bottom u_width--max'
     p.appendChild(bottom)
     bottom.addEventListener('mousedown', initDrag, false)
     bottom.parentFacet = p
 
     var both = document.createElement('div')
-    both.className = 'resizer-both'
+    both.className = 'resizer resizer-both'
     p.appendChild(both)
     both.addEventListener('mousedown', initDrag, false)
     both.parentFacet = p

diff --git a/app/src/pages/explorer/Curate.vue b/app/src/pages/explorer/Curate.vue
@@ -4,7 +4,7 @@
 			<div class="curate">
 				<div>
                     <h2 class="visualize_header-h1">Curate</h2>
-                    <div class="md-layout md-layout-responsive">
+                    <div class="md-layout u_display-flex md-layout-responsive">
                         <div class="md-layout-item md-layout-item_card">
                             <router-link to="/explorer/curate/spreadsheet" v-slot="{navigate, href}" custom>
                                 <div class="teams_container explorer_page-nav-card md-layout-item_card" :href="href" @click="navigate">
@@ -53,7 +53,7 @@
                 <div class="u_margin-top-med">
                     <h2 class="visualize_header-h1 metamine_footer-ref-header">Valid Curation List Entry</h2>
 
-                    <div class="md-layout md-layout-responsive">
+                    <div class="md-layout u_display-flex md-layout-responsive">
                         <div class="md-layout-item md-layout-item_card">
                             <router-link to="/explorer/curate/validList/all" v-slot="{navigate, href}" custom>
                                 <div class="teams_container explorer_page-nav-card md-layout-item_card" :href="href" @click="navigate">
@@ -87,7 +87,7 @@
                 </div>
                 <div class="u_margin-top-med">
                     <h2 class="visualize_header-h1 metamine_footer-ref-header">Create Visualization</h2>
-                    <div class="md-layout md-layout-responsive">
+                    <div class="md-layout u_display-flex md-layout-responsive">
                         <!-- <div class="md-layout-item">&nbsp;</div> -->
                         <div class="md-layout-item md-layout-item_card">
                             <router-link to="/explorer/chart" v-slot="{navigate, href}" custom>

diff --git a/app/src/pages/explorer/Visualization.vue b/app/src/pages/explorer/Visualization.vue
@@ -3,7 +3,7 @@
 		<div class="section_teams">
 			<div class="search_box">
 				<h2 class="search_box_header u_margin-bottom-big adjust_metamine-title">Gallery Categories:</h2>
-        <div class="md-layout md-layout-responsive">
+        <div class="md-layout u_display-flex md-layout-responsive">
           <div class="md-layout-item md-layout-item_card">
             <router-link to="/explorer/chart" v-slot="{navigate, href}" custom>
               <div class="teams_container explorer_page-nav-card md-layout-item_card" :href="href" @click="navigate">

diff --git a/app/src/pages/explorer/curate/spreadsheet/SpreadsheetBase.vue b/app/src/pages/explorer/curate/spreadsheet/SpreadsheetBase.vue
@@ -5,7 +5,7 @@
         <div>
             <h2 class="visualize_header-h1">Spreadsheet</h2>
             <div class="md-layout md-gutter utility_flex_mobile">
-                <div class="md-layout md-layout-responsive md-gutter">
+                <div class="md-layout u_display-flex md-layout-responsive md-gutter">
                     <div class="md-layout-item md-small-hide">&nbsp;</div>
                     <div class="md-layout-item">
                         <div class="teams_container explorer_page-nav-card md-layout-item_card" @click="createDatasetIdVuex">

diff --git a/app/src/pages/explorer/image/ImageDetailView.vue b/app/src/pages/explorer/image/ImageDetailView.vue
@@ -53,7 +53,7 @@
                 <md-icon>arrow_back</md-icon>
               </md-button>
 
-              <div class="section_md-header image-detail-page__relatedImg">
+              <div class="section_md-header u_display-flex image-detail-page__relatedImg">
                 <md-card
                   v-for="(image, index) in assetItems"
                   :key="index"

diff --git a/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue b/app/src/pages/explorer/parameterized-query/parameterized-query-page.vue
@@ -11,7 +11,7 @@
       <div class="viz-sample__header">
         <h3 class="md-title">Query Template</h3>
       </div>
-      <div class="display">
+      <div class="u_display-flex display">
         <md-button
           class="template-back"
           @click="shiftTemplate(-1)"
@@ -73,7 +73,7 @@
           :startOpen="true"
           title="SPARQL Results"
         >
-          <div class="results-controls">
+          <div class="u_display-flex results-controls">
             <button
               class="btn btn--primary"
               :disabled="autoRefresh || !newQuery"
@@ -87,7 +87,7 @@
             >
               Auto Refresh
             </md-switch>
-            <div class="button-row">
+            <div class="u_display-flex button-row">
               <div>
                 <button
                     class="btn btn--primary"
@@ -99,7 +99,7 @@
             </div>
           </div>
           <div
-            class="results-progress"
+            class="u_display-flex results-progress"
             v-show="runningQuery"
           >
             <spinner
@@ -339,11 +339,9 @@ export default {
 }
 .button-row {
   margin: 10px 0;
-  display: flex;
   justify-content: flex-end;
 }
 .display {
-  display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
@@ -369,7 +367,6 @@ export default {
 }
 .results-controls {
   margin: 20px 10px;
-  display: flex;
   justify-content: space-between;
   align-items: center;
 
@@ -378,7 +375,6 @@ export default {
   }
 }
 .results-progress {
-  display: flex;
   justify-content: center;
 }
 .no-results-message {