Merge pull request #405 from cns-iu/update-spacing

update spacing
cns-iu · Mar 7, 2024 · 01d5823 · 01d5823
2 parents 00e6730 + f3cb659
commit 01d5823
Show file tree

Hide file tree

Showing 36 changed files with 208 additions and 131 deletions.
diff --git a/apps/ccf/src/app/components/card-with-header/card-with-header.component.scss b/apps/ccf/src/app/components/card-with-header/card-with-header.component.scss
@@ -4,6 +4,6 @@
     font-size: 2.25rem;
     line-height: 2.75rem;
     letter-spacing: 0.005rem;
-    padding-bottom: 1rem;
+    padding-bottom: 2rem;
   }
 }
diff --git a/apps/ccf/src/app/components/download-ftu/download-ftu.component.html b/apps/ccf/src/app/components/download-ftu/download-ftu.component.html
@@ -2,7 +2,7 @@
   [releaseDate]="versions"
   (selectedVersion)="updateSelection($event)"
   [selectedDate]="selectedVersion"
-  class="description"
+  class="mb-2r"
 >
 </ccf-choose-version>
 <table

diff --git a/apps/ccf/src/app/components/organ-version/organ-version.component.html b/apps/ccf/src/app/components/organ-version/organ-version.component.html
@@ -2,7 +2,7 @@
   [releaseDate]="versionData"
   [selectedDate]="version"
   (selectedVersion)="setVersion($event.version)"
-  class="description"
+  class="mb-2r"
 ></ccf-choose-version>
 <ccf-organ-tabs
   [tabs]="filterImages"

diff --git a/apps/ccf/src/app/components/page-data/page-data.component.scss b/apps/ccf/src/app/components/page-data/page-data.component.scss
@@ -6,7 +6,7 @@
     font-size: 1.5rem;
     line-height: 2.125rem;
     color: #000000;
-    padding-bottom: 1rem;
+    padding-bottom: 2rem;
   }
 
   .body-description {

diff --git a/apps/ccf/src/app/components/page-element/page-element.component.scss b/apps/ccf/src/app/components/page-element/page-element.component.scss
@@ -8,16 +8,18 @@
     padding-bottom: 1rem;
   }
 
-  .description,
+  .description {
+    margin-bottom: 5rem;
+  }
+
   .button-container {
     margin-bottom: 2.5rem;
     width: fit-content;
   }
 
   .page-header {
     display: block;
-    margin-top: 3.5rem;
-    margin-bottom: 1.5rem;
+    margin: 3.5rem 0;
   }
 
   a:hover {

diff --git a/apps/ccf/src/app/components/sop-links/sop-links.component.scss b/apps/ccf/src/app/components/sop-links/sop-links.component.scss
@@ -6,6 +6,7 @@
     line-height: 1.5rem;
     letter-spacing: 0.005rem;
     color: #000000;
+    margin-bottom: 2rem;
   }
 
   .sop-items {

diff --git a/apps/ccf/src/app/components/table-version/table-version.component.html b/apps/ccf/src/app/components/table-version/table-version.component.html
@@ -4,7 +4,7 @@
     [releaseDate]="versionData"
     [selectedDate]="release"
     (selectedVersion)="setData($event)"
-    class="version"
+    class="mb-2r"
   ></ccf-choose-version>
   <div style="flex-grow: 1"></div>
   <a

diff --git a/apps/ccf/src/app/components/table-version/table-version.component.scss b/apps/ccf/src/app/components/table-version/table-version.component.scss
@@ -3,7 +3,7 @@
 
   .version,
   .table {
-    margin-bottom: 2.5rem;
+    margin-bottom: 5rem;
   }
 
   &:not(.scroll-end)::after {

diff --git a/apps/ccf/src/app/components/two-dim-image/two-dim-image.component.scss b/apps/ccf/src/app/components/two-dim-image/two-dim-image.component.scss
@@ -1,6 +1,6 @@
 :host {
   .mat-mdc-card {
-    margin-bottom: 2rem;
+    margin-bottom: 5rem;
     padding: unset;
   }
 

diff --git a/apps/ccf/src/assets/content/pages/2d-ftu-illustrations.yaml b/apps/ccf/src/assets/content/pages/2d-ftu-illustrations.yaml
@@ -15,7 +15,7 @@
       emoji: '🎉'
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 3.5rem
 
 - type: page-data
   pageData:
@@ -47,7 +47,7 @@
         href: https://zenodo.org/record/6703377
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 5rem
 
 - type: title
   title: Functional Tissue Units
@@ -804,6 +804,9 @@
         SVG files may not display correctly until viewed in a browser window. 
         AI files may be edited in Adobe Illustrator, where users can change labels, colors, and illustration components as desired.
 
+- type: margin
+  top: -3rem
+
 - type: download-ftu
   versions:
     - release: '5th HRA Release (v1.4), June 2023'
@@ -832,20 +835,24 @@
           links:
             - link: https://cdn.humanatlas.io/hra-releases/v1.4/2d-ftu/asct-b-2d-models-crosswalk.csv
               label: CSV
+
 - type: margin
-  bottom: 3.5rem
+  bottom: 5rem
 
 - type: page-data
   pageData:
     - heading: Organ Icon Downloads
       descriptions: Human Reference Atlas organ icons are available freely on GitHub.
   styles:
-    margin-bottom: 1rem
+    margin-bottom: 2rem
 
 - type: button
   text: HRA Organ Icons GitHub Repository
   url: https://github.com/cns-iu/md-icons/tree/main/other-icons/organs
 
+- type: margin
+  bottom: 5rem
+
 - type: page-data
   pageData:
     - heading: Terms of Use

diff --git a/apps/ccf/src/assets/content/pages/3d-reference-library.yaml b/apps/ccf/src/assets/content/pages/3d-reference-library.yaml
@@ -15,7 +15,7 @@
       emoji: '🎉'
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 3.5rem
 
 - type: page-data
   pageData:
@@ -43,7 +43,7 @@
         href: https://doi.org/10.5281/zenodo.5746143
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 5rem
 
 - type: organ-version
   tableRequired: false
@@ -2062,7 +2062,7 @@
     font-weight: 300
     font-size: 1.5rem
     line-height: 34px
-    padding-bottom: 1rem
+    padding-bottom: 2.125rem
     padding-top: 1.5rem
 
 - type: download-ftu
@@ -2205,19 +2205,22 @@
               link: https://github.com/hubmapconsortium/ccf-releases/tree/main/v1.4/models
 
 - type: margin
-  bottom: 3.5rem
+  bottom: 5rem
 
 - type: page-data
   pageData:
     - heading: Organ Icon Downloads
       descriptions: Human Reference Atlas organ icons are available freely on GitHub.
   styles:
-    margin-bottom: 1rem
+    margin-bottom: 2rem
 
 - type: button
   text: HRA Organ Icons GitHub Repository
   url: https://github.com/cns-iu/md-icons/tree/main/other-icons/organs
 
+- type: margin
+  bottom: 5rem
+
 - type: page-data
   pageData:
     - heading: References

diff --git a/apps/ccf/src/assets/content/pages/api.yaml b/apps/ccf/src/assets/content/pages/api.yaml
@@ -17,7 +17,7 @@
       emoji: '🎉'
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 3.5rem
 
 - type: page-data
   pageData:
@@ -61,6 +61,8 @@
 - type: button
   text: Use the Human Reference Atlas APIs
   url: https://apps.humanatlas.io/hra-api/
+  styles:
+    margin-bottom: 5rem
 
 - type: image
   imageSource: assets/images/api-interface.png

diff --git a/apps/ccf/src/assets/content/pages/asctb-azimuth.yaml b/apps/ccf/src/assets/content/pages/asctb-azimuth.yaml
@@ -15,7 +15,7 @@
       emoji: '🎉'
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 3.5rem
 
 - type: page-data
   pageData:

diff --git a/apps/ccf/src/assets/content/pages/asctb-reporter.yaml b/apps/ccf/src/assets/content/pages/asctb-reporter.yaml
@@ -15,7 +15,7 @@
       emoji: '🎉'
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 3.5rem
 
 - type: page-data
   pageData:
@@ -26,9 +26,14 @@
 
         The CCF ASCT+B Reporter is a visualization tool for inspecting and exploring the tables. It includes a partonomy tree that presents relationships between various anatomical structures and substructures, that are linked to their respective cell types and biomarkers via bimodal networks. The Reporter also presents an indented list view of the partonomy tree. In addition to the network visualizations, the Reporter lists statistics for various metadata (e.g., counts of ASCT table entity types and relationship types) which are downloadable. The debug logger lists any issues related to the data provided in the table. The Reporter has a backend server, the ASCT+B API, to retrieve the data from Google Sheets and convert it to a machine-readable format.
 
+- type: margin
+  top: -3rem
+
 - type: button
   text: Use the ASCT+B Table Reporter
   url: https://hubmapconsortium.github.io/ccf-asct-reporter/
+  styles:
+    margin-bottom: 5rem
 
 - type: player
   youtubePlayer:

diff --git a/apps/ccf/src/assets/content/pages/asctb-tables.yaml b/apps/ccf/src/assets/content/pages/asctb-tables.yaml
@@ -15,7 +15,7 @@
       emoji: '🎉'
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 3.5rem
 
 - type: page-data
   pageData:
@@ -32,14 +32,17 @@
         href: https://doi.org/10.5281/zenodo.5639622
 
 - type: margin
-  bottom: 2rem
+  bottom: 5rem
 
 - type: page-data
   pageData:
     - heading: Existing Tables
       descriptions: |
         The below table lists for each organ the number of anatomical structures (#AS), the number of cell types (#CT), the number of biomarkers (#B), the number of <i>part_of</i> relationships between AS, the number of <i>located_in</i> links between CT and AS, and the number of CT and B (i.e., which B <i>characterize</i> a CT). Biomarker abbreviations: genes (BG), proteins (BP), metabolites (BM), proteoforms (BF), and lipids (BL).
 
+- type: margin
+  top: -3rem
+
 - type: table-version
   versionChooserDisabled: false
   versionData:
@@ -145,12 +148,15 @@
       descriptions: ASCT+B table drafts are run through a Python script called <a href="https://github.com/hubmapconsortium/ccf-validation-tools" target="_blank">CCF_Tools</a> each week. The script reads them in, compares them against the Resource Description Framework (RDF) triple store database called Ubergraph (Uberon and Cell Ontology), and outputs a validation report that can be used to improve tables during creation or revision cycles.
 
 - type: margin
-  bottom: -1.5rem
+  bottom: -3rem
 
 - type: button
   text: ASCT+B Ontology Validation Reports
   url: https://hubmapconsortium.github.io/ccf-validation-tools/
 
+- type: margin
+  bottom: 5rem
+
 - type: page-data
   pageData:
     - heading: Tables Under Development

diff --git a/apps/ccf/src/assets/content/pages/ccf-ontology.yaml b/apps/ccf/src/assets/content/pages/ccf-ontology.yaml
@@ -27,6 +27,9 @@
         (see **Figure 1**). Collectively, the three ontologies make up the CCF Ontology (also called union ontology) 
         that supports spatially and semantically explicit search, filter, and browsing in the HuBMAP Portal.
 
+- type: margin
+  top: -2.5rem
+
 - type: simple-image
   imageData:
     - title: Common Coordinate Framework Knowledge Architecture
@@ -50,6 +53,9 @@
         single-cell level—in correspondence to the HuBMAP Atlas reference system, shown below in **Figure 2.**
         Note that all anatomical structures are semantically annotated using terms from the Semantic Ontology.
 
+- type: margin
+  top: -2.5rem
+
 - type: simple-image
   imageData:
     - title: Spatial Ontology
@@ -89,9 +95,10 @@
           alt: BioPortal Icon
       headerSize:
         font-size: 1.5rem
+        margin-top: 4rem
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 4rem
 
 - type: page-data
   pageData:

diff --git a/apps/ccf/src/assets/content/pages/cell-population-graphs.yaml b/apps/ccf/src/assets/content/pages/cell-population-graphs.yaml
@@ -15,17 +15,22 @@
       emoji: '🎉'
 
 - type: margin
-  bottom: 2.5rem
+  bottom: 3.5rem
 
 - type: page-data
   pageData:
     - heading: Overview
       descriptions: |
         Visualization tool for comparing cell-type distributions from single-cell RNA sequencing datasets from HuBMAP and other public data portals. The number of cells per cell type in a dataset (e.g., derived from a tissue block, tissue section, or biopsy) is visualized as count or percentage in a bar graph. Datasets can be sorted by total cell count or tissue block location (for blocks that were registered via the tissue registration user interface [RUI] into a 3D reference organ model), and they can be grouped by dataset-specific properties (e.g., age, ethnicity, sex, or UV exposure).
 
+- type: margin
+  top: -3rem
+
 - type: button
   text: Use the Cell Population Graphs
   url: https://hubmapconsortium.github.io/tissue-bar-graphs/
+  styles:
+    margin-bottom: 5rem
 
 - type: image
   imageSource: assets/images/cell_pop_body_image.svg