From 68f6897a5c43aa8df94bba20ef8ef979d2f6e648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 24 Oct 2024 15:12:01 +0200
Subject: [PATCH] Fix application and namespace list styles to be the same

---
 .../components/Namespaces/NamespaceItem.vue   | 122 +++++++++---------
 .../web/compose/src/views/Namespace/List.vue  | 112 +++++++++-------
 .../web/one/src/components/CAppSelector.vue   |  69 +++-------
 lib/vue/src/components/navigation/CTopbar.vue |   1 -
 locale/en/corteza-webapp-one/layout.yaml      |   2 +-
 5 files changed, 147 insertions(+), 159 deletions(-)

diff --git a/client/web/compose/src/components/Namespaces/NamespaceItem.vue b/client/web/compose/src/components/Namespaces/NamespaceItem.vue
index 67ff80803..318deccb7 100644
--- a/client/web/compose/src/components/Namespaces/NamespaceItem.vue
+++ b/client/web/compose/src/components/Namespaces/NamespaceItem.vue
@@ -1,75 +1,69 @@
 <template>
-  <b-col
-    class="my-2"
-    sm="6"
-    md="4"
-    lg="3"
+  <b-card
+    no-body
+    footer-class="text-center pt-0"
+    class="shadow-sm pt-3 h-100"
+    :class="{ 'shadow': hovered && isEnabled, 'namespace-item' : isEnabled, 'disabled' : !isEnabled}"
+    @mouseover="hovered = true"
+    @mouseleave="hovered = false"
   >
-    <b-card
-      no-body
-      class="h-100 shadow-sm pt-3 mx-2"
-      footer-class="text-center pt-0"
-      :class="{ 'shadow': hovered && isEnabled, 'namespace-item' : isEnabled, 'disabled' : !isEnabled}"
-      @mouseover="hovered = true"
-      @mouseleave="hovered = false"
+    <div
+      class="circled-avatar d-flex align-items-center justify-content-center m-auto"
+      :class="[namespace.meta.logoEnabled ? 'p-2' : 'bg-light p-3']"
+    >
+      <b-img
+        v-if="namespace.meta.logoEnabled"
+        :src="logo"
+        :alt="namespace.name"
+        class="mw-100 mh-100"
+      />
+      <h1
+        v-else
+        class="ns-initial m-auto text-uppercase text-secondary"
+      >
+        {{ namespace.initials }}
+      </h1>
+    </div>
+    <b-card-body
+      class="mw-100 text-center pb-3"
     >
       <div
-        class="circled-avatar d-flex align-items-center justify-content-center m-auto"
-        :class="[namespace.meta.logoEnabled ? 'p-2' : 'bg-light p-3']"
-      >
-        <b-img
-          v-if="namespace.meta.logoEnabled"
-          :src="logo"
-          :alt="namespace.name"
-          class="mw-100 mh-100"
-        />
-        <h1
-          v-else
-          class="ns-initial m-auto text-uppercase text-secondary"
-        >
-          {{ namespace.initials }}
-        </h1>
-      </div>
-      <b-card-body
-        class="mw-100 text-center pb-3"
+        class="d-flex align-items-baseline"
+        :class="{ 'h-100': !namespace.meta.description }"
       >
         <div
-          class="d-flex align-items-baseline"
-          :class="{ 'h-100': !namespace.meta.description }"
+          class="d-flex flex-column justify-content-center w-100"
         >
-          <div
-            class="d-flex flex-column justify-content-center w-100"
+          <h5
+            :data-test-id="namespace.name"
+            class="mt-2"
           >
-            <h5
-              :data-test-id="namespace.name"
-            >
-              {{ namespace.name }}
-            </h5>
-            <p
-              v-if="namespace.meta.subtitle"
-              class="d-inline-block my-1 text-secondary"
-            >
-              {{ namespace.meta.subtitle }}
-            </p>
-          </div>
+            {{ namespace.name }}
+          </h5>
+          <p
+            v-if="namespace.meta.subtitle"
+            class="d-inline-block my-1 text-secondary"
+          >
+            {{ namespace.meta.subtitle }}
+          </p>
         </div>
+      </div>
 
-        <p
-          v-if="namespace.meta.description"
-          class="overflow-auto"
-        >
-          <small>{{ namespace.meta.description }}</small>
-        </p>
-        <b-link
-          v-if="isEnabled"
-          :to="{ name: 'pages', params: { slug: (namespace.slug || namespace.namespaceID) } }"
-          :data-test-id="`link-visit-namespace-${namespace.slug}`"
-          :aria-label="$t('visit') + ' ' + namespace.name"
-          class="stretched-link"
-        />
-      </b-card-body>
-    </b-card>
-  </b-col>
+      <p
+        v-if="namespace.meta.description"
+        class="overflow-auto"
+      >
+        <small>{{ namespace.meta.description }}</small>
+      </p>
+      <b-link
+        v-if="isEnabled"
+        :to="{ name: 'pages', params: { slug: (namespace.slug || namespace.namespaceID) } }"
+        :data-test-id="`link-visit-namespace-${namespace.slug}`"
+        :aria-label="$t('visit') + ' ' + namespace.name"
+        class="stretched-link"
+      />
+    </b-card-body>
+  </b-card>
 </template>
 <script>
 
@@ -114,10 +108,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$avatar-size: 110px;
+$avatar-size: 120px;
 $disabled-opacity: 0.6;
 
 .namespace-item {
+  min-height: 13rem;
+
   &:hover {
     transition: all 0.2s ease;
     top: -1px;
diff --git a/client/web/compose/src/views/Namespace/List.vue b/client/web/compose/src/views/Namespace/List.vue
index b65687ad7..a0c99aed1 100644
--- a/client/web/compose/src/views/Namespace/List.vue
+++ b/client/web/compose/src/views/Namespace/List.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="d-flex w-100 overflow-auto"
-  >
+  <div class="d-flex flex-column w-100 py-2 overflow-hidden h-100 py-2">
     <portal to="topbar-title">
       {{ $t('title') }}
     </portal>
@@ -23,52 +21,52 @@
       </b-btn>
     </portal>
 
-    <b-container
-      class="ns-wrapper"
-      fluid="xl"
-    >
-      <b-row
-        class="my-3"
-        no-gutters
-      >
-        <b-col
-          offset-md="2"
-          offset-lg="3"
-          md="8"
-          lg="6"
-        >
-          <c-input-search
-            v-model.trim="query"
-            :placeholder="$t('searchPlaceholder')"
-          />
-        </b-col>
-      </b-row>
+    <div class="d-flex flex-column justify-content-center align-items-center mx-4 my-2">
+      <b-img
+        :src="logo"
+        class="logo px-2"
+      />
 
-      <transition-group
-        v-if="filtered && filtered.length"
-        name="namespace-list"
-        tag="div"
-        class="row my-3 card-deck no-gutters"
-      >
-        <namespace-item
-          v-for="n in filtered"
-          :key="n.namespaceID"
-          :namespace="n"
+      <div class="search w-100 mx-auto my-4">
+        <c-input-search
+          v-model.trim="query"
+          :placeholder="$t('searchPlaceholder')"
+          :debounce="200"
         />
-      </transition-group>
-
-      <div
-        v-else
-        class="d-flex justify-content-center align-items-center h-50 w-100"
-      >
-        <h3
-          data-test-id="no-namespaces-found"
-          class="text-left"
-        >
-          {{ $t('noResults') }}
-        </h3>
       </div>
-    </b-container>
+    </div>
+
+    <div class="flex-fill overflow-auto">
+      <b-container class="ns-wrapper h-100">
+        <transition-group
+          v-if="filtered && filtered.length"
+          name="namespace-list"
+          tag="b-row"
+          class="d-flex flex-wrap align-items-stretch justify-content-center mx-2"
+        >
+          <b-col
+            v-for="n in filtered"
+            :key="n.namespaceID"
+            cols="12"
+            md="6"
+            lg="4"
+            xl="3"
+            class="p-2"
+          >
+            <namespace-item :namespace="n" />
+          </b-col>
+        </transition-group>
+
+        <div
+          v-else
+          class="d-flex justify-content-center align-items-center mt-5 w-100"
+        >
+          <h3 data-test-id="no-namespaces-found">
+            {{ $t('noResults') }}
+          </h3>
+        </div>
+      </b-container>
+    </div>
   </div>
 </template>
 <script>
@@ -109,6 +107,10 @@ export default {
       }, false)
     },
 
+    logo () {
+      return this.$Settings.attachment('ui.mainLogo')
+    },
+
     importNamespaceEndpoint () {
       return this.$ComposeAPI.namespaceImportEndpoint({})
     },
@@ -145,3 +147,21 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.logo {
+  max-height: 20vh;
+  max-width: 500px;
+  width: auto;
+}
+
+.search {
+  max-width: 600px;
+}
+
+@media only screen and (max-width: 576px) {
+  .logo {
+    max-width: 100%;
+  }
+}
+</style>
diff --git a/client/web/one/src/components/CAppSelector.vue b/client/web/one/src/components/CAppSelector.vue
index f42d5a91a..11a4ae2da 100644
--- a/client/web/one/src/components/CAppSelector.vue
+++ b/client/web/one/src/components/CAppSelector.vue
@@ -1,28 +1,23 @@
 <template>
-  <div
-    class="app-selector d-flex flex-column h-100 py-2"
-  >
-    <div class="d-flex justify-content-center align-items-center">
+  <div class="app-selector d-flex flex-column h-100 py-2">
+    <div class="d-flex flex-column justify-content-center align-items-center mx-4 my-2">
       <b-img
         :src="logo"
-        class="logo px-3"
+        class="logo px-2"
       />
-    </div>
 
-    <div class="search w-100 mx-auto my-4 px-5">
-      <c-input-search
-        v-model.trim="query"
-        data-v-onboarding="app-list"
-        :aria-label="$t('search')"
-        :placeholder="$t('search')"
-        :debounce="200"
-      />
+      <div class="search w-100 mx-auto my-4">
+        <c-input-search
+          v-model.trim="query"
+          :aria-label="$t('search')"
+          :placeholder="$t('search')"
+          :debounce="200"
+        />
+      </div>
     </div>
 
     <div class="flex-fill overflow-auto">
-      <b-container
-        class="h-100"
-      >
+      <b-container class="h-100">
         <draggable
           v-if="filteredApps.length"
           v-model="appList"
@@ -40,11 +35,10 @@
               v-for="app in filteredApps"
               :key="app.applicationID"
               cols="12"
-              sm="6"
-              md="4"
-              lg="3"
-              class="p-0 mb-3 mt-1"
-              :data-v-onboarding="getStepName(app.unify.url)"
+              md="6"
+              lg="4"
+              xl="3"
+              class="p-2"
             >
               <b-card
                 no-body
@@ -53,9 +47,7 @@
                 @mouseover="hovered = app.applicationID"
                 @mouseleave="hovered = undefined"
               >
-                <div
-                  class="align-content-center d-flex flex-grow-1 flex-wrap"
-                >
+                <div class="align-content-center d-flex flex-grow-1 flex-wrap">
                   <b-card-img
                     class="rounded-bottom thumbnail"
                     :src="logoUrl(app)"
@@ -63,11 +55,9 @@
                   />
                 </div>
 
-                <b-card-text
-                  class="text-center my-4 h6"
-                >
+                <h6 class="text-center my-4">
                   {{ app.unify.name || app.name }}
-                </b-card-text>
+                </h6>
 
                 <b-link
                   :data-test-id="app.name"
@@ -84,12 +74,9 @@
 
         <div
           v-else
-          class="d-flex justify-content-center w-100"
+          class="d-flex justify-content-center align-items-center mt-5 w-100"
         >
-          <h4
-            data-test-id="heading-no-apps"
-            class="mt-5"
-          >
+          <h4 data-test-id="heading-no-apps">
             {{ query ? $t('no-applications-found') : $t('no-applications') }}
           </h4>
         </div>
@@ -181,19 +168,6 @@ export default {
       unpinApp: 'applications/unpin',
     }),
 
-    getStepName (url) {
-      switch (url) {
-        case 'compose/':
-          return 'low-code'
-        case 'compose/ns/crm/pages':
-          return 'crm'
-        case 'reporter/':
-          return 'reporter'
-        case 'workflow/':
-          return 'workflow'
-      }
-    },
-
     fetchEffective () {
       this.$SystemAPI.permissionsEffective({ resource: 'application' })
         .then(p => {
@@ -263,7 +237,6 @@ export default {
     transition: all 0.2s ease;
     box-shadow: 0;
     top: 0;
-    margin: 0 0.625rem;
 
     .thumbnail {
       max-width: 100%;
diff --git a/lib/vue/src/components/navigation/CTopbar.vue b/lib/vue/src/components/navigation/CTopbar.vue
index 760bedf35..19f560ffb 100644
--- a/lib/vue/src/components/navigation/CTopbar.vue
+++ b/lib/vue/src/components/navigation/CTopbar.vue
@@ -101,7 +101,6 @@
       <b-dropdown
         v-if="!settings.hideProfile"
         data-test-id="dropdown-profile"
-        data-v-onboarding="profile"
         :variant="avatarExists ? 'link' : 'outline-extra-light'"
         :toggle-class="`nav-icon text-decoration-none text-dark rounded-circle border ${avatarExists ? 'p-0' : ''}`"
         size="lg"
diff --git a/locale/en/corteza-webapp-one/layout.yaml b/locale/en/corteza-webapp-one/layout.yaml
index 51447474c..dfb2fee32 100644
--- a/locale/en/corteza-webapp-one/layout.yaml
+++ b/locale/en/corteza-webapp-one/layout.yaml
@@ -1,3 +1,3 @@
 no-applications: No applications
-no-applications-found: No applications with this name found
+no-applications-found: No applications found
 search: Type here to search