feat: make home page work on mobile (360x800) resolution (#304) (#457)

bihealth · Feb 7, 2024 · 23109be · 23109be
1 parent 2f3ea9d
commit 23109be
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 46 deletions.
diff --git a/frontend/src/components/PageHeader/PageHeader.vue b/frontend/src/components/PageHeader/PageHeader.vue
@@ -56,7 +56,7 @@ function toggleTheme() {
 <template>
   <v-app-bar flat>
     <v-container class="mx-auto d-flex align-center justify-center">
-      <router-link to="/">
+      <router-link to="/" class="text-no-wrap">
         <img
           id="logo"
           class="ml-4 mr-3"
@@ -65,7 +65,7 @@ function toggleTheme() {
           alt="logo"
           width="50"
         />
-        <span class="text-h6"> REEV </span>
+        <span class="text-h6 d-none d-sm-inline"> REEV </span>
       </router-link>
 
       <v-spacer></v-spacer>
@@ -79,12 +79,17 @@ function toggleTheme() {
       </template>
       <v-spacer></v-spacer>
 
-      <v-btn variant="text" title="Toggle between dark and light theme." @click="toggleTheme">
+      <v-btn
+        variant="text"
+        title="Toggle between dark and light theme."
+        class="d-none d-sm-inline-block"
+        @click="toggleTheme"
+      >
         <v-icon>mdi-theme-light-dark</v-icon>
       </v-btn>
 
-      <v-btn class="mr-4" prepend-icon="mdi-account-group" @click="showCaseInfo = true">
-        Case Info
+      <v-btn class="mr-2" prepend-icon="mdi-account-group" @click="showCaseInfo = true">
+        <span class="d-none d-sm-inline"> Case Info </span>
       </v-btn>
 
       <UserProfileButton />

diff --git a/frontend/src/components/SearchBar/SearchBar.vue b/frontend/src/components/SearchBar/SearchBar.vue
@@ -17,13 +17,15 @@ interface Props {
   searchTerm?: string
   genomeRelease?: GenomeBuild
   density?: 'default' | 'comfortable' | 'compact'
+  minWidth?: string
 }
 
 /** Define the component's props. */
 const props = withDefaults(defineProps<Props>(), {
   searchTerm: '',
   genomeRelease: 'grch37',
-  density: 'default'
+  density: 'default',
+  minWidth: '300px'
 })
 
 /** Define the emits. */
@@ -48,7 +50,7 @@ const fontColor = computed(() => {
 </script>
 
 <template>
-  <div class="d-flex d-flex-row flex-grow-0" style="min-width: 400px">
+  <div class="d-flex d-flex-row flex-grow-0" style="min-width: 300px">
     <v-text-field
       class="my-3 search-term"
       :label="props.density != 'compact' ? 'Search for variant or gene' : undefined"

diff --git a/frontend/src/components/UserProfileButton/UserProfileButton.vue b/frontend/src/components/UserProfileButton/UserProfileButton.vue
@@ -15,7 +15,9 @@ onMounted(() => {
 
 <template>
   <template v-if="!userStore.isAuthenticated">
-    <v-btn id="login" prepend-icon="mdi-key-variant" to="/login"> Login </v-btn>
+    <v-btn id="login" prepend-icon="mdi-key-variant" to="/login">
+      <span class="d-none d-sm-inline"> Login </span>
+    </v-btn>
   </template>
   <template v-else>
     <v-btn
@@ -25,7 +27,7 @@ onMounted(() => {
       variant="flat"
       :color="userStore.currentUser?.is_superuser ? 'red-darken-4' : ''"
     >
-      Profile
+      <span class="d-none d-sm-inline"> Profile </span>
     </v-btn>
   </template>
 </template>
diff --git a/frontend/src/views/HomeView/HomeView.spec.ts b/frontend/src/views/HomeView/HomeView.spec.ts
@@ -137,9 +137,9 @@ describe.concurrent('HomeView with mocked router', async () => {
     // act: nothing, only test rendering
 
     // assert:
-    const exampleTermsCard = wrapper.find('#examples')
-    expect(exampleTermsCard.exists()).toBe(true)
-    const exampleTerms = exampleTermsCard.findAll('.v-btn')
+    const exampleTermsSheet = wrapper.find('#examples')
+    expect(exampleTermsSheet.exists()).toBe(true)
+    const exampleTerms = exampleTermsSheet.findAll('.router-link')
     expect(exampleTerms.length).toBe(13)
   })
 
@@ -169,9 +169,9 @@ describe.concurrent('HomeView with mocked router', async () => {
     // act: nothing, only test rendering
 
     // assert:
-    const exampleTermsCard = wrapper.find('#examples')
-    expect(exampleTermsCard.exists()).toBe(true)
-    const exampleTerm = exampleTermsCard.find('.example')
+    const exampleTermsSheet = wrapper.find('#examples')
+    expect(exampleTermsSheet.exists()).toBe(true)
+    const exampleTerm = exampleTermsSheet.find('.example')
     expect(exampleTerm.attributes().href).toEqual('/query?q=BRCA1&genomeBuild=grch37')
   })
 })
diff --git a/frontend/src/views/HomeView/HomeView.vue b/frontend/src/views/HomeView/HomeView.vue
@@ -45,10 +45,9 @@ const mainBackgroundColor = computed(() => {
     <PageHeader :hide-search-bar="true" />
     <v-main :class="mainBackgroundColor">
       <v-container>
-        <v-row>
-          <v-spacer></v-spacer>
-          <v-col cols="12" lg="6" class="py-2">
-            <v-sheet class="px-6 py-3">
+        <v-row class="justify-center align-center">
+          <v-col cols="12" md="12" lg="10" xl="6" class="py-2">
+            <v-sheet class="px-4 py-3 mx-auto">
               <p>
                 <span class="font-weight-bold"> REEV evaluates and explains variants. </span>
               </p>
@@ -76,14 +75,12 @@ const mainBackgroundColor = computed(() => {
               </p>
             </v-sheet>
           </v-col>
-          <v-spacer></v-spacer>
         </v-row>
 
-        <v-row>
-          <v-spacer></v-spacer>
-          <v-col cols="12" lg="6" class="py-2">
-            <v-sheet class="px-6 py-3">
-              <div class="text-h6">Enter a variant or gene to query for</div>
+        <v-row class="justify-center align-center">
+          <v-col cols="12" md="12" lg="10" xl="6" class="py-2">
+            <v-sheet class="px-4 py-3 mx-auto">
+              <div class="text-h6">Enter variant/gene to query for</div>
 
               <SearchBar
                 v-model:search-term="searchTerm"
@@ -92,41 +89,41 @@ const mainBackgroundColor = computed(() => {
               />
             </v-sheet>
           </v-col>
-          <v-spacer></v-spacer>
         </v-row>
 
-        <v-row>
-          <v-spacer></v-spacer>
-          <v-col cols="12" lg="6" class="py-2">
-            <v-card id="examples" class="px-3 py-3">
-              <v-card-title> Need some inspiration? </v-card-title>
-              <v-card-text>
-                <div v-for="section in EXAMPLES" :key="section.title">
-                  <div class="text-overline mt-3">
+        <v-row class="justify-center align-center">
+          <v-col cols="12" lg="10" xl="6" class="py-2">
+            <v-sheet id="examples" class="px-3 py-3 mx-auto">
+              <v-card-title class="px-1 pb-0"> Need some inspiration? </v-card-title>
+              <v-card-text class="px-1">
+                <div v-for="(section, idx) in EXAMPLES" :key="section.title">
+                  <div class="text-overline" :class="{ 'mt-0': idx === 0, 'mt-3': idx !== 0 }">
                     {{ section.title }}
                   </div>
                   <div v-if="section.text">
                     {{ section.text }}
                   </div>
                   <div class="mt-2">
-                    <template v-for="(example, idx) in section.examples" :key="`example-${idx}`">
-                      <v-btn
-                        class="mx-1 mb-1 example text-none px-2"
-                        variant="text"
-                        :rounded="false"
-                        prepend-icon="mdi-arrow-right-circle-outline"
+                    <template
+                      v-for="(example, idxInner) in section.examples"
+                      :key="`example-${idxInner}`"
+                    >
+                      <router-link
                         :to="exampleSearchTo(example)"
+                        class="mr-2 px-2 py-1 d-block d-sm-inline-block router-link example"
                       >
-                        {{ example.query }}
-                        <template v-if="example.hint">({{ example.hint }})</template>
-                      </v-btn>
+                        <v-icon class="pr-2">mdi-arrow-right-circle-outline</v-icon>
+                        <span style="text-wrap: wrap !important">{{ example.query }}</span>
+                        <span v-if="example.hint" class="d-none d-md-inline"
+                          >({{ example.hint }})</span
+                        >
+                      </router-link>
                     </template>
                   </div>
                 </div>
               </v-card-text>
-            </v-card>
+            </v-sheet>
           </v-col>
-          <v-spacer></v-spacer>
         </v-row>
         <FooterDefault />
       </v-container>

diff --git a/frontend/src/views/HomeView/constants.ts b/frontend/src/views/HomeView/constants.ts
@@ -95,7 +95,7 @@ const STRUCVARS_PROD: Example[] = [
 export const EXAMPLES: Section[] = [
   {
     title: 'Genes',
-    text: 'Search by HGNC symbol or NCBI/ENSEMBL/HGNC ID',
+    text: 'Search by HGNC symbol or NCBI / ENSEMBL / HGNC ID',
     examples: [
       {
         query: 'BRCA1'