Unglobalize node page styles (#858)

### Related issues - Closes #848 #856 ### Summary Removes global style changes done in the process of creating the new node overview page. ### Checks - [ ] All tests have passed (or issues created for failing tests)
monarch-initiative · Oct 22, 2024 · d0e380c · d0e380c
1 parent 793cd1c
commit d0e380c
Show file tree

Hide file tree

Showing 10 changed files with 21 additions and 26 deletions.
diff --git a/frontend/src/components/AppSection.vue b/frontend/src/components/AppSection.vue
@@ -55,30 +55,17 @@ defineSlots<Slots>();
     padding: 30px 20px;
   }
 
-  &.node {
-    margin: 10px 20px 10px $toc-width + 20px !important;
-  }
   &.inset {
     padding: 30px 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
 
-  &.left {
-    margin: 10px 20px;
-  }
-
   &.medium {
-    &.center {
-      padding: 30px max(20px, calc((100% - $section) / 2));
-    }
-    &.left {
-      padding: 5px 15px;
-    }
+    padding: 30px max(20px, calc((100% - $section) / 2));
   }
 
   &.big {
-    padding: 30px 20px;
-    //padding: 30px max(20px, calc((100% - $section-big) / 2));
+    padding: 30px max(20px, calc((100% - $section-big) / 2));
   }
 
   &.normal {

diff --git a/frontend/src/global/styles.scss b/frontend/src/global/styles.scss
@@ -37,7 +37,6 @@ h1 {
   font-weight: 600;
   font-size: 1.5rem;
   letter-spacing: 1px;
-  text-align: left;
   /** text-transform: uppercase; */
 }
 
@@ -47,7 +46,6 @@ h2 {
   padding: 10px 0;
   font-weight: 500;
   font-size: 1.3rem;
-  text-align: left;
 }
 
 h3 {
@@ -57,7 +55,6 @@ h3 {
   padding: 10px 0;
   font-weight: 500;
   font-size: 1.1rem;
-  text-align: left;
 }
 
 /** elements */

diff --git a/frontend/src/pages/node/PageNode.vue b/frontend/src/pages/node/PageNode.vue
@@ -5,7 +5,7 @@
 <template>
   <!-- status -->
   <template v-if="isLoading || isError">
-    <AppSection design="fill" class="bare node">
+    <AppSection width="full" design="fill" class="bare node">
       <AppHeading class="heading">
         {{ $route.params.id }}
       </AppHeading>
@@ -128,4 +128,9 @@ onMounted(runGetNode);
 .heading {
   font-size: 1.2rem;
 }
+
+/** make room for the table of contents **/
+.section {
+  margin: 10px 20px 10px $toc-width + 20px !important;
+}
 </style>
diff --git a/frontend/src/pages/node/SectionAssociations.vue b/frontend/src/pages/node/SectionAssociations.vue
@@ -6,7 +6,7 @@
   <!-- show an AppSection for each category in categoryOptions  -->
   <div v-for="category in categoryOptions" :key="category.id">
     <!-- Association table -->
-    <AppSection alignment="left" class="inset node">
+    <AppSection alignment="left" width="full" class="inset">
       <AppHeading :level="3">{{ category.label }}</AppHeading>
       <span v-if="!categoryOptions.length"
         >No associations with &nbsp;<AppNodeBadge :node="node" />
@@ -117,4 +117,8 @@ watch(
 .arrow {
   color: $gray;
 }
+/** make room for the table of contents **/
+.section {
+  margin: 10px 20px 10px $toc-width + 20px !important;
+}
 </style>
diff --git a/frontend/src/pages/node/SectionBreadcrumbs.vue b/frontend/src/pages/node/SectionBreadcrumbs.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection alignment="left" class="node">
+  <AppSection width="full" alignment="left">
     <AppHeading icon="location-dot">Breadcrumbs</AppHeading>
 
     <template v-if="breadcrumbs.length">

diff --git a/frontend/src/pages/node/SectionExtra.vue b/frontend/src/pages/node/SectionExtra.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection alignment="left" class="node inset">
+  <AppSection width="full" alignment="left" class="inset">
     <AppHeading icon="clipboard-list">Extra Info</AppHeading>
 
     <AppDetails>

diff --git a/frontend/src/pages/node/SectionHierarchy.vue b/frontend/src/pages/node/SectionHierarchy.vue
@@ -5,8 +5,9 @@
 <template>
   <AppSection
     v-if="node.category !== 'biolink:Gene'"
+    width="full"
     alignment="left"
-    class="node inset"
+    class="inset"
   >
     <AppHeading icon="sitemap">Hierarchy</AppHeading>
 

diff --git a/frontend/src/pages/node/SectionOverview.vue b/frontend/src/pages/node/SectionOverview.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection design="bare" alignment="left" class="node">
+  <AppSection design="bare" width="full" alignment="left">
     <AppDetails>
       <!-- symbol (gene specific) -->
       <AppDetail

diff --git a/frontend/src/pages/node/SectionTitle.vue b/frontend/src/pages/node/SectionTitle.vue
@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <AppSection design="bare" alignment="left" class="section node">
+  <AppSection design="bare" width="full" alignment="left" class="section">
     <AppFlex direction="col">
       <AppFlex align-h="right">
         <span>

diff --git a/frontend/src/pages/node/SectionVisualization.vue b/frontend/src/pages/node/SectionVisualization.vue
@@ -7,7 +7,8 @@
     v-if="
       node.category === 'biolink:Disease' || node.category === 'biolink:Gene'
     "
-    class="inset node"
+    width="full"
+    class="inset"
     alignment="left"
   >
     <AppHeading icon="chart-bar">HistoPheno</AppHeading>