From 3fa5dfb1dc4e6076d46ee6ae52b0f756fc2be51d Mon Sep 17 00:00:00 2001
From: Marco Cano <artofmarco@gmail.com>
Date: Wed, 6 Mar 2024 13:48:13 -0800
Subject: [PATCH] fix: :hammer: mobile friendly layout

---
 web-app/src/components/RegistryItem.vue       |  38 +++---
 web-app/src/components/RegistryMetaKG.vue     | 121 +++++++++---------
 web-app/src/components/SimpleNetworkCosmo.vue |  22 ++--
 3 files changed, 98 insertions(+), 83 deletions(-)

diff --git a/web-app/src/components/RegistryItem.vue b/web-app/src/components/RegistryItem.vue
index 5da2d9d6..7454e9fc 100644
--- a/web-app/src/components/RegistryItem.vue
+++ b/web-app/src/components/RegistryItem.vue
@@ -84,27 +84,31 @@
       </div>
     </div>
     <div>
-      <div class="d-flex justify-content-start grey lighten-3" style="padding: 10px 20px; ">
-        <button 
-        class="btn btn-small mr-1" 
-        :class="[selection == 'details' ? 'indigo' : 'indigo lighten-2']"
-        @click="selection = selection == 'details' ? '' : 'details'"><small>Details</small></button>
-        <button 
-        v-if="api._meta?.has_metakg"
-        class="btn btn-small mr-1" 
-        :class="[selection == 'metakg' ? 'purple' : 'purple lighten-2']"
-        @click="selection = selection == 'metakg' ? '' : 'metakg'"><small>MetaKG</small>
+      <div class="d-flex justify-content-start grey lighten-3" style="padding: 10px 20px">
+        <button
+          class="btn btn-small mr-1"
+          :class="[selection == 'details' ? 'indigo' : 'indigo lighten-2']"
+          @click="selection = selection == 'details' ? '' : 'details'"
+        >
+          <small>Details</small>
+        </button>
+        <button
+          v-if="api._meta?.has_metakg"
+          class="btn btn-small mr-1"
+          :class="[selection == 'metakg' ? 'purple' : 'purple lighten-2']"
+          @click="selection = selection == 'metakg' ? '' : 'metakg'"
+        >
+          <small>MetaKG</small>
         </button>
       </div>
       <div v-if="selection == 'details'">
-        <div
-          class="card-content detailsBack"
-          style="padding: 5px 20px"
-        >
+        <div class="card-content detailsBack" style="padding: 5px 20px">
           <div class="row">
             <div class="col s12 right-align">
               <small class="grey-text">Updated: </small
-              ><small class="white-text"><span v-text="getDate(api._meta.last_updated)"></span></small>
+              ><small class="white-text"
+                ><span v-text="getDate(api._meta.last_updated)"></span
+              ></small>
             </div>
             <div class="col s12 left">
               <h4
@@ -199,7 +203,9 @@
                         style="margin-left: 5px"
                         title="Edit metadata source on GitHub"
                         v-if="
-                          user && api._meta.username === user.login && api._meta.url.includes('github')
+                          user &&
+                          api._meta.username === user.login &&
+                          api._meta.url.includes('github')
                         "
                         v-bind:href="buildEditURL(api._meta.url)"
                         target="_blank"
diff --git a/web-app/src/components/RegistryMetaKG.vue b/web-app/src/components/RegistryMetaKG.vue
index 1132dc1b..7b61f030 100644
--- a/web-app/src/components/RegistryMetaKG.vue
+++ b/web-app/src/components/RegistryMetaKG.vue
@@ -1,66 +1,71 @@
 <template>
-  <div>
-    <div class="grey lighten-2 metakg-card p-0 row d-flex align-items-stretch m-0">
-      <h3 class="p-2 grey-text" v-if="loading">Loading...</h3>
-      <template v-if="!loading && !noHits">
-        <div class="col s12 m8">
-          <h5 style="font-weight: lighter">
-            MetaKG Entity Overview
-            <small class="right"
-              >Edges ({{ numberWithCommas(total) }}) | Objects ({{ objects.length }}) | Subjects ({{
-                subjects.length
-              }})</small
-            >
-          </h5>
-          <p v-if="total && total > size" class="center yellow lighten-4 orange-text rounded">
-            This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
-              numberWithCommas(total)
-            }})
-          </p>
-          <div v-if="graphData" style="max-height: 500px; overflow-y: scroll">
-            <div class="d-flex flex-wrap align-items-start">
-              <template v-for="(subjects, object) in graphData" :key="object">
-                <EntityPill :object="object" :subjects="subjects"></EntityPill>
-              </template>
-            </div>
+  <div class="grey lighten-2 metakg-card p-0 m-0 row">
+    <h3 class="p-2 purple-text" v-if="loading">Loading...</h3>
+    <template v-if="!loading && !noHits">
+      <div class="col s12 m8">
+        <h5 style="font-weight: lighter">
+          MetaKG Entity Overview
+          <small class="right"
+            >Edges ({{ numberWithCommas(total) }}) | Objects ({{ objects.length }}) | Subjects ({{
+              subjects.length
+            }})</small
+          >
+        </h5>
+        <p v-if="total && total > size" class="center yellow lighten-4 orange-text rounded">
+          This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
+            numberWithCommas(total)
+          }})
+        </p>
+        <div
+          v-if="graphData"
+          class="hide-on-small-only"
+          style="max-height: 500px; overflow-y: scroll"
+        >
+          <div class="d-flex flex-wrap align-items-start">
+            <template v-for="(subjects, object) in graphData" :key="object">
+              <EntityPill :object="object" :subjects="subjects"></EntityPill>
+            </template>
           </div>
         </div>
-        <div class="col s12 m4 grey darken-4">
-          <div class="d-flex justify-content-center">
-            <img class="scale-in-center" src="@/assets/img/metakg-01.png" width="80" />
-            <h5 class="white-text center" style="font-weight: lighter">MetaKG Explorer</h5>
-          </div>
-          <template v-if="networkData">
-            <SimpleNetwork :nodes="networkData.nodes" :edges="networkData.edges"></SimpleNetwork>
-          </template>
-          <p v-if="total && total > size" class="center yellow lighten-2 black-text rounded">
-            This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
-              numberWithCommas(total)
-            }})
-          </p>
-          <p class="center">
-            <span class="white-text caps">
-              Explore <b>the full</b> {{ api.info.title }}'s MetaKG
-            </span>
-          </p>
-          <div class="d-flex justify-content-center align-items-center p-1">
-            <router-link
-              class="btn btn-large purple white-text"
-              target="_blank"
-              :to="{
-                path: '/portal/translator/metakg',
-                query: {
-                  q: 'api.smartapi.id:' + api._id
-                }
-              }"
-              >Try It Now <i class="fa fa-external-link" aria-hidden="true"></i
-            ></router-link>
-          </div>
+      </div>
+      <div class="col s12 m4 grey darken-4">
+        <div class="d-flex justify-content-center">
+          <img class="scale-in-center" src="@/assets/img/metakg-01.png" width="80" />
+          <h5 class="white-text center" style="font-weight: lighter">MetaKG Explorer</h5>
+        </div>
+        <template v-if="networkData">
+          <SimpleNetwork :nodes="networkData.nodes" :edges="networkData.edges"></SimpleNetwork>
+        </template>
+        <p v-if="total && total > size" class="center yellow lighten-2 black-text rounded">
+          This is just a subset of the available MetaKG ({{ numberWithCommas(size) }}/{{
+            numberWithCommas(total)
+          }})
+        </p>
+        <p class="center">
+          <span class="white-text caps">
+            Explore <b>the full</b> {{ api.info.title }}'s MetaKG
+          </span>
+        </p>
+        <div class="d-flex justify-content-center align-items-center p-1">
+          <router-link
+            class="btn btn-large purple white-text"
+            target="_blank"
+            :to="{
+              path: '/portal/translator/metakg',
+              query: {
+                q: 'api.smartapi.id:' + api._id
+              }
+            }"
+            >Try It Now <i class="fa fa-external-link" aria-hidden="true"></i
+          ></router-link>
         </div>
-      </template>
-      <div v-if="!loading && noHits">
-        <p class="center grey-text p-2">Oops...Can't load this right now...</p>
+        <p class="center hide-on-med-and-up">
+          <span class="yellow-text caps"> Not recommended for use on small screens </span>
+        </p>
       </div>
+    </template>
+    <div v-if="!loading && noHits">
+      <p class="center grey-text p-2">Oops...Can't load this right now...</p>
     </div>
   </div>
 </template>
diff --git a/web-app/src/components/SimpleNetworkCosmo.vue b/web-app/src/components/SimpleNetworkCosmo.vue
index 0ff66fab..1ae14e47 100644
--- a/web-app/src/components/SimpleNetworkCosmo.vue
+++ b/web-app/src/components/SimpleNetworkCosmo.vue
@@ -1,13 +1,17 @@
 <template>
-  <div>
-    <div :id="'cosmo' + badgeID" class="cosmo"></div>
-    <div class="switch m-1">
-      <label>
-        <b :class="{ 'cyan-text': !curvedLinks }">Straight</b>
-        <input type="checkbox" v-model="curvedLinks" />
-        <span class="lever"></span>
-        <b :class="{ 'cyan-text': curvedLinks }">Curved</b>
-      </label>
+  <div class="d-flex justify-content-center">
+    <div>
+      <div :id="'cosmo' + badgeID" class="cosmo"></div>
+      <div class="d-flex justify-content-center">
+        <div class="switch m-1">
+          <label>
+            <b :class="{ 'cyan-text': !curvedLinks }">Straight</b>
+            <input type="checkbox" v-model="curvedLinks" />
+            <span class="lever"></span>
+            <b :class="{ 'cyan-text': curvedLinks }">Curved</b>
+          </label>
+        </div>
+      </div>
     </div>
   </div>
 </template>