merge: Merge pull request #87 from ArunaStorage/refactor/design-layout

Consistent design/layout and various bug fixes
arunaengine · Jun 27, 2024 · cf724f5 · cf724f5
2 parents 607d289 + 6c35c77
commit cf724f5
Show file tree

Hide file tree

Showing 18 changed files with 558 additions and 624 deletions.
diff --git a/assets/imgs/hero_person_dark.png b/assets/imgs/hero_person_dark.png
diff --git a/assets/imgs/hero_person_light.png b/assets/imgs/hero_person_light.png
diff --git a/assets/imgs/hero_screen_dummy.png b/assets/imgs/hero_screen_dummy.png
diff --git a/components/card/hooks.vue b/components/card/hooks.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { IconCheck } from "@tabler/icons-vue";
-import { IconWebhook } from "@tabler/icons-vue";
+import {IconCheck} from "@tabler/icons-vue";
 import {
   v2KeyValueVariant,
   type v2KeyValue,
@@ -13,12 +12,12 @@ const props = defineProps<{
 function getHooks(): v2KeyValue[] | undefined {
   return props.key_values?.filter((kv) => {
     if (kv.variant) {
-      [
+      return [
         v2KeyValueVariant.KEY_VALUE_VARIANT_HOOK,
         v2KeyValueVariant.KEY_VALUE_VARIANT_HOOK_STATUS,
-      ].includes(kv.variant);
+      ].includes(kv.variant)
     } else {
-      false;
+      return false
     }
   });
 }
@@ -30,30 +29,30 @@ function getHooks(): v2KeyValue[] | undefined {
       <div class="overflow-hidden">
         <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
           <thead>
-            <tr>
-              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Key</th>
-              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Value</th>
-              <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Status
-              </th>
-            </tr>
+          <tr>
+            <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Key</th>
+            <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Value</th>
+            <th scope="col" class="px-6 py-3 text-start text-sm font-medium text-gray-500 uppercase">Status
+            </th>
+          </tr>
           </thead>
           <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-            <tr v-for="hook in getHooks()" class="hover:bg-gray-100 dark:hover:bg-gray-700">
-              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
-                <!-- <a href=format!( "/search?filter_key={}&filter_value={}" , key.clone(), value.clone(), ) exact=true class=""></a> -->
-                 {{ hook.key }}
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
-                <!-- <a href=format!( "/search?filter_key={}&filter_value={}" , key.clone(), value.clone(), ) exact=true class=""></a> -->
-                {{ hook.value }}
-              </td>
-              <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
+          <tr v-for="hook in getHooks()" class="hover:bg-gray-100 dark:hover:bg-gray-700">
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 dark:text-gray-200">
+              <!-- <a href=format!( "/search?filter_key={}&filter_value={}" , key.clone(), value.clone(), ) exact=true class=""></a> -->
+              {{ hook.key }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 dark:text-gray-200">
+              <!-- <a href=format!( "/search?filter_key={}&filter_value={}" , key.clone(), value.clone(), ) exact=true class=""></a> -->
+              {{ hook.value }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
                 <span v-if="hook.variant === v2KeyValueVariant.KEY_VALUE_VARIANT_HOOK_STATUS"
-                  class="status status-green">
-                  <IconCheck :size="24" />
+                      class="status status-green">
+                  <IconCheck :size="24"/>
                 </span>
-              </td>
-            </tr>
+            </td>
+          </tr>
           </tbody>
         </table>
       </div>

diff --git a/components/card/relations.vue b/components/card/relations.vue
@@ -117,11 +117,11 @@ function splitRelations(): [v2InternalRelation[], v2InternalRelation[], v2Extern
             </td>
             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
                 <span v-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO &&
-              relation.direction === v2RelationDirection.RELATION_DIRECTION_INBOUND">
+                            relation.direction === v2RelationDirection.RELATION_DIRECTION_INBOUND">
                   Parent
                 </span>
               <span v-else-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO &&
-              relation.direction === v2RelationDirection.RELATION_DIRECTION_OUTBOUND">
+                               relation.direction === v2RelationDirection.RELATION_DIRECTION_OUTBOUND">
                   Child
                 </span>
               <span
@@ -164,26 +164,21 @@ function splitRelations(): [v2InternalRelation[], v2InternalRelation[], v2Extern
               </NuxtLink>
             </td>
             <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
-                <span v-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO &&
-              relation.direction === v2RelationDirection.RELATION_DIRECTION_INBOUND">
+              {{ toResourceTypeStr(relation.resourceVariant) }}
+            </td>
+            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
+              <span v-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO &&
+                            relation.direction === v2RelationDirection.RELATION_DIRECTION_INBOUND">
                   Parent
-                </span>
+              </span>
               <span v-else-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO &&
-              relation.direction === v2RelationDirection.RELATION_DIRECTION_OUTBOUND">
+                               relation.direction === v2RelationDirection.RELATION_DIRECTION_OUTBOUND">
                   Child
-                </span>
-            </td>
-            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-200">
-              <span
-                  v-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO">
-                  Belongs To
-                </span>
-              <span
-                  v-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_ORIGIN">
+              </span>
+              <span v-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_ORIGIN">
                   Origin
                 </span>
-              <span
-                  v-else-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_VERSION">
+              <span v-else-if="relation.definedVariant === v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_VERSION">
                   Version
                 </span>
               <span

diff --git a/components/card/resource.vue b/components/card/resource.vue
@@ -16,7 +16,7 @@ function displayDescription(description: string): string {
 
 <template>
   <div v-if="entry"
-    class="flex flex-auto my-3 p-4 gap-x-4 bg-white border border-l-4 border-l-aruna-700 shadow-sm rounded-xl dark:bg-slate-900 dark:border-gray-700 dark:border-t-blue-500 dark:shadow-slate-700/[.7]"
+    class="flex flex-auto my-3 p-4 gap-x-4 bg-white border border-l-4 border-l-aruna-700 shadow-sm rounded-md dark:bg-slate-900 dark:border-gray-700 dark:border-t-blue-500 dark:shadow-slate-700/[.7]"
     :class="{'border-l-red-500': entry.object_status === modelsv2Status.STATUS_DELETED}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-e-gray-600">
       <!-- Start Name and ID display with links -->

diff --git a/components/section/faq.vue b/components/section/faq.vue
@@ -1,22 +1,20 @@
 <template>
   <!-- FAQ -->
   <div
-    class="max-w-[85rem] w-full px-2 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto border-2 shadow-lg rounded-3xl border-gray-300"
-  >
+    class="container w-full mt-6 px-2 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto border-2 rounded-md border-gray-400">
     <!-- Title -->
     <div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
-      <h2
-        class="text-2xl font-bold md:text-3xl md:leading-tight text-gray-800 dark:text-gray-200"
-      >
+      <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-gray-800 dark:text-gray-200">
         Frequently Asked Questions
       </h2>
     </div>
     <!-- End Title -->
 
-    <div class="max-w-5xl mx-auto">
+    <div class="mx-auto">
       <!-- Grid -->
-      <div class="grid sm:grid-cols-2 gap-6 md:gap-12">
-        <div>
+<!--      <div class="grid sm:grid-cols-2 gap-6 md:gap-12">-->
+      <div class="md:columns-2 lg:columns-3 space-y-6 px-12">
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             What is ARUNA?
           </h3>
@@ -32,19 +30,19 @@
         </div>
         <!-- End Col -->
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             Who develops ARUNA ?
           </h3>
           <p class="mt-2 text-gray-600 dark:text-gray-400">
             ARUNA is developed by a small team at Justus-Liebig-University
             Giessen for the NFDI4Biodiversity and NFDI4Microbiota projects, as
-            well as the GAIA-X connector project FAIR-Dataspaces.
+            well as the GAIA-X connector project FAIR Data Spaces.
           </p>
         </div>
         <!-- End Col -->
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             Why should i use ARUNA for my project ?
           </h3>
@@ -58,7 +56,7 @@
         </div>
         <!-- End Col -->
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             How can I log in ?
           </h3>
@@ -70,7 +68,7 @@
         </div>
         <!-- End Col -->
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             Is there a maximum storage capacity ?
           </h3>
@@ -82,7 +80,7 @@
           </p>
         </div>
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             Who can see my data ?
           </h3>
@@ -96,7 +94,7 @@
           </p>
         </div>
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             Is my data secure ?
           </h3>
@@ -108,7 +106,7 @@
           </p>
         </div>
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             What is a data proxy ?
           </h3>
@@ -122,7 +120,7 @@
           </p>
         </div>
 
-        <div>
+        <div class="break-inside-avoid-column p-4">
           <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
             How many projects can I create ?
           </h3>
@@ -137,3 +135,5 @@
   </div>
   <!-- End FAQ -->
 </template>
+<script setup lang="ts">
+</script>