feat: add layout selection

Vanilla-OS · Jan 21, 2024 · 7ddd2a3 · 7ddd2a3
1 parent 4622b2b
commit 7ddd2a3
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 24 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,25 +1,27 @@
 <template>
-  <div class="container">
-    <nav class="navbar" role="navigation" aria-label="main navigation">
-      <div class="navbar-brand">
-        <router-link to="/" class="navbar-item">
-          <img src="/atlas-logo.svg" width="112" height="28">
-        </router-link>
-      </div>
-      <div class="navbar-menu">
-        <div class="navbar-end">
-          <div class="navbar-item">
-            <div class="buttons">
-              <button class="button is-light" @click="updateCache" title="Refresh">
-                <span class="icon is-small">
-                  <i class="mdi material-icons">refresh</i>
-                </span>
-              </button>
+  <div class="topbar">
+    <div class="container">
+      <nav class="navbar" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+          <router-link to="/" class="navbar-item">
+            <img src="/atlas-logo.svg" width="112" height="28">
+          </router-link>
+        </div>
+        <div class="navbar-menu">
+          <div class="navbar-end">
+            <div class="navbar-item">
+              <div class="buttons">
+                <button class="button is-light" @click="updateCache" title="Refresh">
+                  <span class="icon is-small">
+                    <i class="mdi material-icons">refresh</i>
+                  </span>
+                </button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </nav>
+      </nav>
+    </div>
   </div>
 
   <div class="container">

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -88,8 +88,14 @@ p span.badge {
 .flex-list {
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
     gap: 5px;
+    align-items: stretch;
+}
+
+.flex-list-item.recipe-card .card {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 
 .badges {
@@ -144,4 +150,13 @@ p span.badge {
 
 .bar-segment.bar-segment--very-low {
     background-color: #768ffb;
+}
+
+.topbar {
+    background-color: #fff;
+    border-bottom: 1px solid #dddddd;
+    margin: 0 0 18px;
+    position: sticky;
+    top: 0;
+    z-index: 99
 }
diff --git a/src/core/store.ts b/src/core/store.ts
@@ -5,6 +5,7 @@ export const useAtlasStore = defineStore('atlas', {
     state: () => ({
         vibRecipes: [] as VibRecipe[],
         lastFetchDate: Date.now(),
+        layout: 'grid',
     }),
     persist: {
         storage: window.localStorage,

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,5 +1,16 @@
 <template>
   <div v-if="atlasStore.vibRecipes">
+    <nav class="navbar">
+      <div class="navbar-brand">
+        <button class="button navbar-item" @click="toggleView">
+          <span class="icon is-small">
+            <i class="mdi material-icons" v-if="isGridView">view_list</i>
+            <i class="mdi material-icons" v-else>view_module</i>
+          </span>
+        </button>
+      </div>
+    </nav>
+
     <section class="hero">
       <div class="hero-body">
         <p class="title">Vib Images</p>
@@ -13,16 +24,17 @@
         <button class="delete" aria-label="delete" @click="hideWarning"></button>
       </div>
       <div class="message-body">
-        Your local data is old than <u>12 hours</u>, which means that you may not see
+        Your local data is older than <u>12 hours</u>, which means that you may not see
         the latest recipes. Do you want to update it now?
         <br />
         <br />
         <button class="button is-warning" @click="updateCache">Update cache</button>
       </div>
     </article>
 
-    <div class="flex-grid">
-      <div class="flex-grid-item" v-for="(recipe, index) in atlasStore.vibRecipes" :key="index">
+    <div :class="{ 'flex-list': !isGridView, 'flex-grid': isGridView }">
+      <div v-for="(recipe, index) in atlasStore.vibRecipes" :key="index"
+        :class="{ 'flex-list-item': !isGridView, 'flex-grid-item': isGridView }" class="recipe-card">
         <router-link :to="{ name: 'recipe', params: { id: recipe.id } }">
           <div class="card">
             <header class="card-header">
@@ -69,17 +81,23 @@ export default defineComponent({
       cacheIsOld: false,
       refreshCacheTimer: 0,
       messageHidden: false,
+      isGridView: true,
     };
   },
   setup() {
     const atlasStore = useAtlasStore();
     return { atlasStore };
   },
   async beforeMount() {
+    this.setLayout();
     this.fetchRecipes();
     this.setCacheRefreshTimer();
   },
   methods: {
+    setLayout() {
+      const layout = this.atlasStore.layout;
+      this.isGridView = layout === "grid";
+    },
     async fetchRecipes() {
       try {
         // @ts-ignore
@@ -92,7 +110,7 @@ export default defineComponent({
       console.log("Checking cache status..");
       const lastFetchTimestamp = this.atlasStore.lastFetchDate;
       if (lastFetchTimestamp) {
-        const lastFetchDate = new Date(lastFetchTimestamp); // Convert timestamp to Date object
+        const lastFetchDate = new Date(lastFetchTimestamp);
         const now = new Date();
         const diff = now.getTime() - lastFetchDate.getTime();
         this.cacheIsOld = diff > 1000 * 60 * 60 * 12;
@@ -127,6 +145,12 @@ export default defineComponent({
     hideWarning() {
       this.messageHidden = true;
     },
+    toggleView() {
+      this.isGridView = !this.isGridView;
+      this.atlasStore.$patch((state) => {
+        state.layout = this.isGridView ? "grid" : "list";
+      });
+    },
   },
 });
-</script>
+</script>