remove many unused css styles and use the global "clickable" class mo…

…st places where "cursor: pointer" was used
datalab-org · Feb 16, 2024 · 380c42b · 380c42b
1 parent 9d6386e
commit 380c42b
Show file tree

Hide file tree

Showing 15 changed files with 16 additions and 216 deletions.
diff --git a/webapp/src/components/BatchCreateSampleModal.vue b/webapp/src/components/BatchCreateSampleModal.vue
@@ -23,10 +23,10 @@
                   <font-awesome-icon
                     :icon="['fas', 'chevron-right']"
                     fixed-width
-                    class="collapse-arrow"
+                    class="collapse-arrow clickable"
                     :class="{ expanded: templateIsOpen }"
                   />
-                  <label class="blue-label collapse-clickable ml-2"> Template: </label>
+                  <label class="blue-label clickable pl-2"> Template: </label>
                 </div>
                 <label
                   for="batchSampleNRows"
@@ -523,17 +523,12 @@ export default {
 
 .collapse-arrow {
   transition: all 0.4s;
-  cursor: pointer;
 }
 
 .collapse-arrow:hover {
   color: #7ca7ca;
 }
 
-.collapse-clickable {
-  cursor: pointer;
-}
-
 .expanded {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);

diff --git a/webapp/src/components/CellPreparationInformation.vue b/webapp/src/components/CellPreparationInformation.vue
@@ -106,55 +106,11 @@ export default {
   width: 700px;
 }
 
-.first-column {
-  position: relative;
-}
-
-.swap-constituent-icon {
-  cursor: pointer;
-  position: absolute;
-  font-size: regular;
-  color: #bbb;
-  float: right;
-  transform: translateY(30%);
-  transition: transform 0.4s ease;
-  width: 1.5rem;
-  left: -1.5rem;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.select-in-row {
-  width: 100%;
-}
-
 .subheading {
   color: darkslategrey;
   font-size: small;
   font-weight: 600;
   text-transform: uppercase;
   margin-bottom: 0px;
 }
-
-table {
-  margin-bottom: 0rem;
-}
-
-.borderless td,
-.borderless th {
-  border: none;
-}
-
-.empty-search {
-  opacity: 0.5;
-  font-style: italic;
-}
 </style>
diff --git a/webapp/src/components/CollectionRelationshipVisualization.vue b/webapp/src/components/CollectionRelationshipVisualization.vue
@@ -32,28 +32,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.nav-link {
-  cursor: pointer;
-}
-
-.contents-item {
-  cursor: pointer;
-}
-
-.contents-blocktype {
-  font-style: italic;
-  color: gray;
-  margin-right: 1rem;
-}
-
-.contents-blocktitle {
-  color: #004175;
-}
-
-#contents-ol {
-  margin-bottom: 0rem;
-  padding-left: 1rem;
-}
-</style>
diff --git a/webapp/src/components/CompactConstituentTable.vue b/webapp/src/components/CompactConstituentTable.vue
@@ -78,7 +78,7 @@
         >
           <transition name="fade">
             <font-awesome-icon
-              class="add-row-button"
+              class="add-row-button clickable"
               v-if="!addNewConstituentIsActive"
               :icon="['far', 'plus-square']"
             />
@@ -179,7 +179,6 @@ td {
 }
 
 .add-row-button {
-  cursor: pointer;
   position: absolute;
   font-size: regular;
   color: #bbb;
@@ -204,18 +203,6 @@ td {
   width: 100%;
 }
 
-.clickable {
-  cursor: pointer;
-}
-
-.subheading {
-  color: darkslategrey;
-  font-size: small;
-  font-weight: 600;
-  text-transform: uppercase;
-  margin-bottom: 0px;
-}
-
 .borderless tr,
 .borderless td {
   border: none !important;

diff --git a/webapp/src/components/FormattedCollectionName.vue b/webapp/src/components/FormattedCollectionName.vue
@@ -61,3 +61,13 @@ export default {
   emits: ["collectionIdClicked"],
 };
 </script>
+
+<style scoped>
+.formatted-collection-name {
+  border-width: 1px;
+}
+
+.formatted-collection-name:hover {
+  border-width: 1.5px !important;
+}
+</style>
diff --git a/webapp/src/components/FormattedRefcode.vue b/webapp/src/components/FormattedRefcode.vue
@@ -45,9 +45,6 @@ export default {
 </script>
 
 <style scoped>
-.clickable {
-  cursor: pointer;
-}
 .badge {
   color: black;
 }

diff --git a/webapp/src/components/ItemGraph.vue b/webapp/src/components/ItemGraph.vue
@@ -177,7 +177,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style>
 #flex-container {
   flex-flow: column;
 }

diff --git a/webapp/src/components/ItemRelationshipVisualization.vue b/webapp/src/components/ItemRelationshipVisualization.vue
@@ -32,28 +32,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.nav-link {
-  cursor: pointer;
-}
-
-.contents-item {
-  cursor: pointer;
-}
-
-.contents-blocktype {
-  font-style: italic;
-  color: gray;
-  margin-right: 1rem;
-}
-
-.contents-blocktitle {
-  color: #004175;
-}
-
-#contents-ol {
-  margin-bottom: 0rem;
-  padding-left: 1rem;
-}
-</style>
diff --git a/webapp/src/components/MessageBubble.vue b/webapp/src/components/MessageBubble.vue
@@ -18,7 +18,7 @@
       <span class="system-prompt-label" v-if="role === 'system'">system prompt:</span>
       <div ref="markdownDiv" v-show="!showRaw" class="markdown-content" v-html="markdownContent" />
       <div class="raw-content" v-show="showRaw">{{ message.content }}</div>
-      <div class="float-right raw-toggle" @click="showRaw = !showRaw">
+      <div class="float-right raw-toggle clickable" @click="showRaw = !showRaw">
         <span :class="{ 'font-weight-bold': showRaw }"> raw </span> |
         <span :class="{ 'font-weight-bold': !showRaw }">formatted</span>
       </div>
@@ -168,8 +168,8 @@ export default {
   font-size: 0.875rem;
   color: rgb(100, 100, 100);
   opacity: 0.5;
-  cursor: pointer;
 }
+
 .raw-toggle:hover {
   opacity: 1;
 }

diff --git a/webapp/src/components/RelationshipVisualization.vue b/webapp/src/components/RelationshipVisualization.vue
@@ -106,12 +106,6 @@ export default {
   cursor: pointer;
 }
 
-.contents-blocktype {
-  font-style: italic;
-  color: gray;
-  margin-right: 1rem;
-}
-
 .contents-blocktitle {
   color: #004175;
 }

diff --git a/webapp/src/components/SampleTable.vue b/webapp/src/components/SampleTable.vue
@@ -109,10 +109,6 @@ export default {
 </script>
 
 <style scoped>
-.clickable {
-  cursor: pointer;
-}
-
 .table-item-id {
   font-size: 1.2em;
   font-weight: normal;

diff --git a/webapp/src/components/SynthesisInformation.vue b/webapp/src/components/SynthesisInformation.vue
@@ -82,59 +82,11 @@ export default {
 </script>
 
 <style scoped>
-.first-column {
-  position: relative;
-}
-
-.swap-constituent-icon {
-  cursor: pointer;
-  position: absolute;
-  font-size: regular;
-  color: #bbb;
-  float: right;
-  transform: translateY(30%);
-  transition: transform 0.4s ease;
-  width: 1.5rem;
-  left: -1.5rem;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.select-in-row {
-  width: 100%;
-}
-
 .subheading {
   color: darkslategrey;
   font-size: small;
   font-weight: 600;
   text-transform: uppercase;
   margin-bottom: 0px;
 }
-
-table {
-  margin-bottom: 0rem;
-}
-
-.borderless td,
-.borderless th {
-  border: none;
-}
-
-.red-border {
-  border-color: red;
-}
-
-.empty-search {
-  opacity: 0.5;
-  font-style: italic;
-}
 </style>
diff --git a/webapp/src/components/TableOfContents.vue b/webapp/src/components/TableOfContents.vue
@@ -112,12 +112,6 @@ export default {
   cursor: pointer;
 }
 
-.contents-blocktype {
-  font-style: italic;
-  color: gray;
-  margin-right: 1rem;
-}
-
 .contents-blocktitle {
   color: #004175;
 }

diff --git a/webapp/src/components/ToggleableCollectionFormGroup.vue b/webapp/src/components/ToggleableCollectionFormGroup.vue
@@ -69,10 +69,6 @@ export default {
 </script>
 
 <style scoped>
-.clickable {
-  cursor: pointer;
-}
-
 .text-italic {
   opacity: 0.7;
 }

diff --git a/webapp/src/views/CollectionPage.vue b/webapp/src/views/CollectionPage.vue
@@ -188,31 +188,4 @@ label,
 .navbar-brand {
   cursor: pointer;
 }
-
-.block-container {
-  padding-bottom: 100px;
-  position: relative;
-}
-
-.block-list-item {
-  transition: all 0.6s ease;
-  /*display: inline-block;*/
-  width: 100%;
-  position: relative;
-}
-
-.block-list-enter-from,
-.block-list-leave-to {
-  opacity: 0;
-  /*transform: translateX(-100px);*/
-}
-
-.block-list-leave-active {
-  position: absolute;
-  max-width: calc(100% - 30px);
-}
-
-.dropdown-menu {
-  cursor: pointer;
-}
 </style>