refactor(about): [WIP] add 2-up and 3-up card layouts

front/src/components/About.vue

@@ -12,6 +12,8 @@ import useMarkdown from '~/composables/useMarkdown'
 
 import Link from './ui/Link.vue'
 import Card from './ui/Card.vue'
+import Button from './ui/Button.vue'
+import Layout from './ui/Layout.vue'
 
 const store = useStore()
 const nodeinfo = computed(() => store.state.instance.nodeinfo)
@@ -21,7 +23,10 @@ const labels = computed(() => ({
   title: t('components.About.title')
 }))
 
-const podName = computed(() => get(nodeinfo.value, 'metadata.nodeName') ?? 'Funkwhale')
+const podName = computed(() => (n => n === "" ? "No name" : n ?? 'Funkwhale')(get(nodeinfo.value, 'metadata.nodeName')))
+
+console.log(podName)
+
 const banner = computed(() => get(nodeinfo.value, 'metadata.banner'))
 const shortDescription = computed(() => get(nodeinfo.value, 'metadata.shortDescription'))
 
@@ -80,14 +85,14 @@ const federationEnabled = computed(() => {
 </script>
 
 <template>
-  <main
+  <Layout stack main
     v-title="labels.title"
-    class="main pusher page-about"
+    style="align-items: center;"
   >
     <!-- About funkwhale -->
 
-    <Link to="/">
-      <logo-text />
+    <Link to="/" width="full" alignText="stretch" style="width:min(480px, 100%)">
+      <logo-text/>
     </Link>
 
     <h2 class="header">
@@ -98,9 +103,12 @@ const federationEnabled = computed(() => {
       {{ t('components.About.description.funkwhale') }}
     </p>
 
-    <Layout flex>
+    <Layout flex style="justify-content: center;">
 
-      <Card :title="t('components.About.header.signup')" v-if="!store.state.auth.authenticated">
+      <Card :title="t('components.About.header.signup')"
+        v-if="!store.state.auth.authenticated"
+        style="--width:256px"
+      >
 
         <template v-if="openRegistrations">
           <p>
@@ -148,7 +156,25 @@ const federationEnabled = computed(() => {
         </div>
       </Card>
 
-      <Card title="{{ podName }}">
+      <Card :title="t('components.About.message.greeting', {username: store.state.auth.username})"
+        v-else
+        style="--width:256px"
+      >
+
+        <p v-if="defaultUploadQuota">
+          {{ t('components.About.description.quota', {quota: defaultUploadQuota}) }}
+        </p>
+
+        <template #action>
+          <Button disabled>
+            {{ t('components.About.message.loggedIn') }}
+          </Button>
+        </template>
+        </Card>
+
+      <Card :title="podName"
+        style="--width:256px"
+      >
         <section
           :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
           :style="headerStyle"
@@ -207,39 +233,30 @@ const federationEnabled = computed(() => {
     </Layout>
 
 
-    <Layout flex>
+    <Layout flex style="justify-content: center;">
 
-      <Card
+      <Card style="--width:256px"
         to="/"
         :title="t('components.About.header.publicContent')"
+        icon="bi-box-arrow-up-right"
       >
         <!-- TODO: Link to Explore page? -->
         {{ t('components.About.description.publicContent') }}
       </Card>
 
-      <Card
+      <Card style="--width:256px"
         :title="t('components.About.link.findOtherPod')"
         to="https://funkwhale.audio/#get-started"
+        icon="bi-box-arrow-up-right"
       >
-          <h3
-            id="description"
-            class="ui header"
-          >
-            <i class="external alternate icon" />
-          </h3>
           {{ t('components.About.description.publicContent') }}
       </Card>
 
-      <Card
+      <Card style="--width:256px"
         :title="t('components.About.header.findApp')"
         to="https://funkwhale.audio/apps"
+        icon="bi-box-arrow-up-right"
       >
-          <h3
-            id="description"
-            class="ui header"
-          >
-            <i class="external alternate icon" />
-          </h3>
           {{ t('components.About.description.findApp') }}
       </Card>
 
@@ -583,5 +600,5 @@ const federationEnabled = computed(() => {
         <div class="ui hidden divider" />
       </div>
     </div>
-  </main>
+  </Layout>
 </template>

front/src/style/colors.scss

@@ -539,7 +539,7 @@
     background-color: transparent;
     border: 1px solid transparent;
 
-    &.interactive{
+    &:is(button, .interactive) {
       &:hover {
         background-color: var(--hover-background-color);
         border-color: var(--hover-background-color);

front/src/ui/App.vue

@@ -17,9 +17,7 @@ onMounted(async () => {
 <template>
   <div class="funkwhale grid">
     <Sidebar/>
-    <main v-bind="color('default solid')">
-      <RouterView />
-    </main>
+    <RouterView v-bind="color('default solid')" />
     <LanguagesModal />
     <ShortcutsModal />
   </div>

front/src/ui/layouts/constrained.vue

@@ -3,9 +3,7 @@
 </script>
 
 <template>
-  <main class="main pusher">
-    <RouterView />
-  </main>
+  <RouterView />
 </template>
 
 <style scoped lang="scss">