visual updates at xs

Author: iimpulse

src/app/browser/pages/profile-search/profile-search.component.html

@@ -2,8 +2,7 @@
   <h1 class="center">Profile Search</h1>
   <h4 class="center">This tool will find diseases that share your profile of phenotypes.
   </h4>
-  <div>
-    <mat-horizontal-stepper labelPosition="bottom" #stepper>
+  <mat-horizontal-stepper labelPosition="bottom" #stepper>
       <mat-step [completed]="submittedTerms">
         <form class="discover-form">
           <ng-template matStepLabel>Build Phenotype List</ng-template>
@@ -97,6 +96,5 @@ <h3>Your Phenotype Profile</h3>
         <div>
         </div>
       </mat-step>
-    </mat-horizontal-stepper>
-  </div>
+  </mat-horizontal-stepper>
 </div>

src/app/browser/pages/profile-search/profile-search.component.scss

@@ -76,11 +76,7 @@
 .mat-form-field {
   font-size: 14px;
   width: 100%;
-}
-
-.profile-container {
-  margin: 0 10%;
-}
+};
 
 .tab-output-container {
   margin: 1rem 0 0 0;

src/app/shared/search/search/search.component.html

@@ -1,4 +1,4 @@
-<div class="search-wrapper flex flex-row flex-wrap align-items-center">
+<div class="search-wrapper flex flex-row flex-wrap align-items-center justify-center">
   <mat-select class="search-filter sm:flex-[0_0_20%] flex-[0_0_80%] h-[45px]" placeholder="All" [(value)]="navFilter">
     <mat-option value="all">All</mat-option>
     <mat-option value="term">Term</mat-option>

src/app/static/home/home.component.html

@@ -1,5 +1,5 @@
 <div class="flex flex-row">
-  <div class="home-search md:flex-[0_0_65%] md:ml-[17%] flex-[90%] ml-[5%]">
+  <div class="home-search md:flex-[0_0_65%] md:ml-[17%] flex-[100%]">
     <div class="search-container mat-elevation-z4">
       <img class="main-logo" src="assets/hpo-logo-white.png"/>
       <div class="searchbar-container">
@@ -52,7 +52,7 @@ <h2>News & Updates</h2>
   </div>
 </div>
 <div class="home-highlight-menu flex flex-row flex-wrap">
-  <div routerLink="/tools/exomiser" class="home-item dark md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[5%]">
+  <div routerLink="/tools/exomiser" class="home-item dark md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[2.5%] mr-[2.5%]">
     <div class="flex flex-row flex-1 items-center justify-between">
       <img class="tool-icon" src="assets/highlight-images/exomiser.png"/>
       <div class="home-body">
@@ -64,7 +64,7 @@ <h2 class="title">Exomiser</h2>
       </i>
     </div>
   </div>
-  <div routerLink="/tools/phenomizer" class="home-item light cursor-not-allowed md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[5%]">
+  <div routerLink="/tools/phenomizer" class="home-item light cursor-not-allowed md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[2.5%] mr-[2.5%]">
     <div class="flex flex-row flex-1 items-center justify-between">
       <img class="tool-icon" src="assets/highlight-images/phenomizer.png"/>
       <div class="home-body">
@@ -76,7 +76,7 @@ <h2 class="title">Phenomizer <span class="text-red">[Offline]</span></h2>
       </i>
     </div>
   </div>
-  <div routerLink="/tools/genomiser" class="home-item light md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[5%]">
+  <div routerLink="/tools/genomiser" class="home-item light md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[2.5%] mr-[2.5%]">
     <div class="flex flex-row flex-1 items-center justify-between">
       <img class="tool-icon" src="assets/highlight-images/genomiser.png"/>
       <div class="home-body">
@@ -88,7 +88,7 @@ <h2 class="title">Genomiser</h2>
       </i>
     </div>
   </div>
-  <div routerLink="/browse/profile-search" class="home-item dark md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[5%]">
+  <div routerLink="/browse/profile-search" class="home-item dark md:flex-[0_0_35%] md:ml-[10%] flex-[90%] ml-[2.5%] mr-[2.5%]">
     <div class="flex flex-row flex-1 items-center justify-between">
       <img class="tool-icon" src="assets/highlight-images/patientarchive.png"/>
       <div class="home-body">
@@ -105,7 +105,7 @@ <h2 class="title">Profile Search</h2>
 <div class="flex flex-row items-center justify-between">
   <div class="phenopacket-banner mat-elevation-z1 flex-[1_1_80%] ml-[10%] max-w-[80%]" (click)="this.utilityService.openExternalUrl('https://www.ga4gh.org/product/phenopackets/')">
     <img class="phenopacket-logo" src="assets/phenopackets.png"/>
-    <div class="description xs:hidden sm:block">
+    <div class="description hidden sm:block">
       <h1>Phenopackets</h1>
       <span class="text-base">A Global Alliance for Genomics and Health (GA4GH) international standard for phenotypic data exchange.</span>
     </div>

src/app/static/home/home.component.scss

@@ -238,7 +238,7 @@ a .irdirc {
     }
 
     & .description {
-      margin-top: 0;
+      margin-top: .5rem;
     }
 
     & .material-icons {

src/app/static/resources/faq/faq.component.html

@@ -8,26 +8,9 @@ <h1 class="center pageTitle">Frequently Asked Questions</h1>
   </div>
   <br>
   <div class="center">
-    <a mat-button href="https://obophenotype.github.io/human-phenotype-ontology/documentation/FAQs/" target="__blank" class="faq-btn normal">Ontology FAQ</a>
+    <a mat-button href="https://obophenotype.github.io/human-phenotype-ontology/clinicians/FAQs/" target="__blank" class="faq-btn normal">Ontology FAQ</a>
   </div>
   <div class="center mt-2">
-      <h3>This page is under construction. Please check back later.</h3>
-  </div>
-  <div class="faq-container flex flex-row flex-wrap">
-    <div class="w-full sm:w-1/2 sm:ml-[25%]">
-
-      <!-- <mat-accordion>
-        <mat-expansion-panel [expanded]="openPanel === 1" id="hpo-relation">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              <strong>What are the different ways to work with HPO data?</strong>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <p>
-            The HPO comes in native formats such as OWL and OBO, and can also be accessed via REST APIs for JSON. To use any of these formats we 
-          </p>
-        </mat-expansion-panel>
-      </mat-accordion> -->
-    </div>
+      <h3>This page is under construction and being reviewed.</h3>
   </div>
 </div>

src/styles.scss

@@ -649,3 +649,7 @@ a.mat-mdc-button-base {
 .nav-hover:hover {
   color: lightgray !important;
 }
+
+.mat-stepper-horizontal {
+   background: unset !important;
+}