From 12b53980e80d33ab50b8238fb59384ce4b124698 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 25 Aug 2023 16:11:25 +0000
Subject: [PATCH 01/19] Create a Wikibase discovery page

---
 src/App.vue                                   |  17 +-
 src/backend/api.js                            |  11 +
 src/components/Layout/Foot.vue                |  10 +-
 src/components/Layout/Navbar.vue              |   3 +
 src/components/Pages/Discovery/Cards/Wiki.vue |  74 ++++++
 src/components/Pages/Discovery/Discovery.vue  | 227 ++++++++++++++++++
 src/router/index.js                           |  11 +-
 7 files changed, 345 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Pages/Discovery/Cards/Wiki.vue
 create mode 100644 src/components/Pages/Discovery/Discovery.vue

diff --git a/src/App.vue b/src/App.vue
index 8d1816ed..359aa25b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <v-app id="app">
       <Navbar></Navbar>
-
-      <v-container class="full-height-content">
+      <router-view v-if="customLayout"/>
+      <v-container v-else class="full-height-content">
         <v-row >
           <v-col cols="1"></v-col>
           <v-col cols="10">
@@ -11,9 +11,7 @@
           <v-col cols="1"></v-col>
         </v-row>
       </v-container>
-
-      <Foot></Foot>
-
+      <Foot :class="{'tall-footer': customLayout}"></Foot>
       <Interval
         v-if="this.$store.getters.isLoggedIn && !this.$store.getters.currentUser.verified"
         :callback="checkVerified"
@@ -34,6 +32,11 @@ export default {
     Foot,
     Interval
   },
+  computed: {
+    customLayout: function () {
+      return this.$route.meta.customLayout;
+    }
+  },
   methods: {
     checkVerified () {
       this.$api
@@ -51,4 +54,8 @@ export default {
   .full-height-content {
     height: 100%
   }
+
+.tall-footer.footer {
+  height: 100%;
+}
 </style>
diff --git a/src/backend/api.js b/src/backend/api.js
index 3b49ade2..5ef747c1 100644
--- a/src/backend/api.js
+++ b/src/backend/api.js
@@ -52,3 +52,14 @@ export const updateLogo = async ({ file, fileName, wikiId }) => {
 export const updateSetting = async (setting, payload) => axios.post(`/wiki/setting/${setting}/update`, { ...payload, setting })
 export const updateSkin = async payload => updateSetting('wgDefaultSkin', payload)
 export const wikiDetails = async payload => (await axios.post('/wiki/details', payload)).data.data
+export const wikiDiscovery = async ({ sort, direction, active, currentPage, resultsPerPage }) => {
+  return (await axios.get('/wiki', {
+    params: {
+      sort: sort,
+      direction: direction,
+      // is_active: active,
+      page: currentPage,
+      per_page: resultsPerPage,
+    }
+  })).data
+}
diff --git a/src/components/Layout/Foot.vue b/src/components/Layout/Foot.vue
index dd5ec791..a873fff0 100644
--- a/src/components/Layout/Foot.vue
+++ b/src/components/Layout/Foot.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer>
+  <footer class="footer">
   <v-footer color="primary lighten-1">
     <v-container>
     <v-row dense>
@@ -7,6 +7,7 @@
     <v-col cols="10">
       <ul class="footer-list">
           <li><a target="_blank" rel="noopener noreferrer" href="https://wikiba.se/about-us/">About</a></li>
+          <li><router-link to="/discovery">Discovery</router-link></li>
           <li><a target="_blank" rel="noopener noreferrer" href="https://www.mediawiki.org/wiki/Wikibase/Wikibase.cloud">Documentation</a></li>
           <li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wbstack">Github</a></li>
           <li><router-link to="/privacy-policy">Privacy Policy</router-link></li>
@@ -39,5 +40,10 @@ export default {
   .white-footer-links a{
     color: white !important;
   }
-
+  .footer {
+    height: auto;
+  }
+  .v-footer, .container {
+    height: 100%;
+  }
 </style>
diff --git a/src/components/Layout/Navbar.vue b/src/components/Layout/Navbar.vue
index d848ae41..b7d8e31f 100644
--- a/src/components/Layout/Navbar.vue
+++ b/src/components/Layout/Navbar.vue
@@ -49,4 +49,7 @@ text-decoration-line: underline;
 .logo{
   height: 64px;
 }
+.v-toolbar {
+  max-height: 64px;
+}
 </style>
diff --git a/src/components/Pages/Discovery/Cards/Wiki.vue b/src/components/Pages/Discovery/Cards/Wiki.vue
new file mode 100644
index 00000000..1cc5f412
--- /dev/null
+++ b/src/components/Pages/Discovery/Cards/Wiki.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-card @click="goToWiki">
+    <v-container class="content">
+      <v-row no-gutters>
+        <v-col class="flex-grow-0">
+          <v-avatar :color="color">
+            <img v-if="logo" :src="logo.href">
+            <span v-else class="white--text">{{character}}</span>
+          </v-avatar>
+        </v-col>
+        <v-col class="details">
+          <div class="text-h5 font-weight-regular">{{name}}</div>
+          <div v-if="stats" class="text-body-2 pages">No. of pages: {{pages}}</div>
+          <div v-else class="text-body-2 pages">No. of pages: <i>available in 24h</i></div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: 'Wiki',
+  props: {
+    name: {
+      type: String,
+      required: true
+    },
+    url: {
+      type: URL,
+      required: true
+    },
+    logo: {
+      type: URL,
+      required: false
+    },
+    stats: {
+      type: Boolean,
+      required: true
+    },
+    pages: {
+      type: Number,
+      required: false
+    }
+  },
+  computed: {
+    character: function () {
+      return this.name.substring(0, 1).toUpperCase();
+    },
+    color: function () {
+      const colors = ['red', 'blue', 'green', 'purple'];
+      return this.logo ? 'white' : colors[Math.floor(Math.random() * colors.length)];
+    }
+  },
+  methods: {
+    goToWiki () {
+      window.open(this.url.href, '_blank');
+    }
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  padding: 16px 16px;
+}
+.details.col {
+  padding-left: 16px !important;
+  word-wrap: anywhere;
+}
+.pages {
+  padding-top: 4px;
+}
+</style>
diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
new file mode 100644
index 00000000..dbd1102e
--- /dev/null
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="content">
+    <span class="text-h4 title">
+      Discover other Wikibases on Cloud
+    </span>
+    <div class="text-subtitle-1">
+      Quick text explaining what this does and what it's good for.
+    </div>
+    <v-container class="options">
+      <v-select
+        :items="sortOptions"
+        v-model="sortValue"
+        :disabled="inputDisabled"
+        label="Sort"
+        hide-details="auto"
+        outlined
+        dense
+      />
+      <v-checkbox
+        v-model="excludeEmpty"
+        :disabled="inputDisabled"
+        label="exclude empty Wikibases"
+        hide-details="auto"
+      />
+    </v-container>
+    <span class="text-body-2">
+      {{results}} results
+    </span>
+    <div class="wikis">
+      <div v-for="(wiki, index) in wikis" :key="index">
+        <Wiki
+          class="card"
+          :name="wiki.name"
+          :url="wiki.url"
+          :logo="wiki.logo"
+          :stats="wiki.stats"
+          :pages="wiki.pages"
+        />
+      </div>
+    </div>
+    <div v-if="paginate" class="pagination">
+      <v-pagination
+        v-model="currentPage"
+        :length="totalPages"
+        :disabled="inputDisabled"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import Wiki from './Cards/Wiki.vue'
+
+const SortOptions = {
+  alphaAsc: {
+    text: 'Alphabetically ↑',
+    value: {
+      direction: 'asc',
+      sort: 'sitename'
+    }
+  },
+  alphaDesc: {
+    text: 'Alphabetically ↓',
+    value: {
+      direction: 'desc',
+      sort: 'sitename'
+    }
+  },
+  pagesDesc: {
+    text: 'No. of pages ↓',
+    value: {
+      direction: 'desc',
+      sort: 'pages'
+    }
+  }
+}
+
+export default {
+  name: 'Discovery',
+  components: {
+    Wiki
+  },
+  data () {
+    return {
+      results: 0,
+      resultsPerPage: 24,
+      currentPage: 1,
+      totalPages: 1,
+      excludeEmpty: true,
+      sortValue: SortOptions.alphaAsc.value,
+      sortOptions: Object.values(SortOptions),
+      inputDisabled: false,
+      wikis: []
+    }
+  },
+  methods: {
+    async update () {
+      this.inputDisabled = true;
+
+      try {
+        const response = await this.$api.wikiDiscovery({
+          sort: this.sortValue.sort,
+          direction: this.sortValue.direction,
+          active: this.excludeEmpty,
+          currentPage: this.currentPage,
+          resultsPerPage: this.resultsPerPage
+        });
+
+        this.results = response.meta.total;
+        this.totalPages = response.meta.last_page;
+        this.wikis = response.data.map((wiki) => {
+          const stats = wiki.wiki_site_stats
+          return {
+            name: wiki.sitename,
+            url: new URL('https://' + wiki.domain),
+            logo: wiki.logo_url ? new URL(wiki.logo_url) : undefined,
+            stats: !!stats,
+            ...(stats && { pages: stats.pages })
+          }
+        });
+      } catch (error) {
+        console.log(error);
+        alert('Failed to collect Wikibase stats');
+      } finally {
+        this.inputDisabled = false;
+      }
+    }
+  },
+  computed: {
+    paginate: function () {
+      return this.results > this.resultsPerPage;
+    }
+  },
+  watch: {
+    sortValue: function () {
+      this.update();
+    },
+    excludeEmpty: function () {
+      this.update();
+    },
+    currentPage: function () {
+      this.update();
+    }
+  },
+  mounted () {
+    this.update();
+  }
+}
+</script>
+
+<style scoped>
+.content {
+  margin: 16px 16px 0 16px;
+}
+.pagination {
+  margin: 32px auto 16px auto;
+  max-width: 85%;
+}
+.card {
+  min-width: 288px;
+  max-width: 400px;
+}
+.title {
+  margin-bottom: 4px;
+}
+.wikis {
+  margin-top: 24px;
+  display: grid;
+  row-gap: 16px;
+  column-gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
+}
+.options {
+  padding: 0 !important;
+  margin: 56px 0 32px 0;
+}
+.options > .v-input {
+  display: inline-block;
+}
+.options > .v-text-field {
+  width: 185px;
+}
+.options > .v-input--checkbox {
+  margin-left: 24px;
+}
+@media screen and (max-width: 632px) {
+  /* 632 = 2 * 288 (card) + 2 * 16 (margin) + 24 (grid column gap) */
+  .wikis {
+    width: fit-content;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .options > .v-input {
+    display: block;
+  }
+  .options > .v-input--checkbox {
+    margin-left: 0;
+    margin-top: 16px;
+    padding: 0;
+  }
+}
+@media screen and (min-width: 640px) {
+  .content {
+    margin: 24px 24px 0 24px;
+  }
+  .pagination {
+    max-width: 50%;
+  }
+}
+@media screen and (min-width: 1120px) {
+  .content {
+    margin: 40px 32px 0 32px;
+  }
+  .pagination {
+    max-width: 50%;
+  }
+}
+@media screen and (min-width: 1680px) {
+  .content {
+    margin: 40px auto 0 auto;
+    width: 1680px;
+  }
+  .pagination {
+    max-width: 50%;
+  }
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index bc5aec60..d7dc20dc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@ import TabSettings from '@/components/Pages/ManageWiki/TabSettings'
 import TermsOfUse from '@/components/Pages/TermsOfUse'
 import Privacy from '@/components/Pages/Privacy/Privacy'
 import User from '@/components/Pages/User'
+import Discovery from '@/components/Pages/Discovery/Discovery'
 
 Vue.use(Router)
 
@@ -115,7 +116,15 @@ const router = new Router({
       meta: {
         requiresAuth: true
       }
-    }
+    },
+    {
+      path: '/discovery',
+      name: 'Discovery',
+      component: Discovery,
+      meta: {
+        customLayout: true
+      }
+    },
   ]
 })
 

From c866f2b8f53a3978556fefd0b9087453a2e3a499 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 28 Aug 2023 10:07:32 +0000
Subject: [PATCH 02/19] Show first page of results when modifying filters

---
 src/components/Pages/Discovery/Discovery.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index dbd1102e..3d88718d 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -124,6 +124,13 @@ export default {
       } finally {
         this.inputDisabled = false;
       }
+    },
+    filter () {
+      if (this.currentPage === 1) {
+        this.update();
+      } else {
+        this.currentPage = 1;
+      }
     }
   },
   computed: {
@@ -133,10 +140,10 @@ export default {
   },
   watch: {
     sortValue: function () {
-      this.update();
+      this.filter();
     },
     excludeEmpty: function () {
-      this.update();
+      this.filter();
     },
     currentPage: function () {
       this.update();

From 56162db6383481c3d46f3cec12a84afcff6829a0 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 28 Aug 2023 10:16:29 +0000
Subject: [PATCH 03/19] Enable empty Wikibase filter

---
 src/backend/api.js                           | 2 +-
 src/components/Pages/Discovery/Discovery.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/backend/api.js b/src/backend/api.js
index 5ef747c1..33ebba1f 100644
--- a/src/backend/api.js
+++ b/src/backend/api.js
@@ -57,7 +57,7 @@ export const wikiDiscovery = async ({ sort, direction, active, currentPage, resu
     params: {
       sort: sort,
       direction: direction,
-      // is_active: active,
+      is_active: active,
       page: currentPage,
       per_page: resultsPerPage,
     }
diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index 3d88718d..9dbf1c09 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -101,7 +101,7 @@ export default {
         const response = await this.$api.wikiDiscovery({
           sort: this.sortValue.sort,
           direction: this.sortValue.direction,
-          active: this.excludeEmpty,
+          active: this.excludeEmpty ? 1 : 0,
           currentPage: this.currentPage,
           resultsPerPage: this.resultsPerPage
         });

From 09f8b0324f9ad42cd23750c1c500589bbce2a9c8 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 28 Aug 2023 10:25:41 +0000
Subject: [PATCH 04/19] Adjust empty Wikibase filter positioning

---
 src/components/Pages/Discovery/Discovery.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index 9dbf1c09..c7e5fe17 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -188,7 +188,11 @@ export default {
   width: 185px;
 }
 .options > .v-input--checkbox {
+  margin-top: 0;
   margin-left: 24px;
+  padding-top: 0;
+  padding-bottom: 4px;
+  vertical-align: middle;
 }
 @media screen and (max-width: 632px) {
   /* 632 = 2 * 288 (card) + 2 * 16 (margin) + 24 (grid column gap) */

From 481b0b761230597165555891b9ea957406827025 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 28 Aug 2023 10:50:41 +0000
Subject: [PATCH 05/19] Fix content width for larger displays

---
 src/components/Pages/Discovery/Discovery.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index c7e5fe17..ab9f1911 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -229,7 +229,7 @@ export default {
 @media screen and (min-width: 1680px) {
   .content {
     margin: 40px auto 0 auto;
-    width: 1680px;
+    width: 1514px;
   }
   .pagination {
     max-width: 50%;

From ac0935bf646c6494065080f58e5f58abb1130fd6 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 28 Aug 2023 15:43:26 +0000
Subject: [PATCH 06/19] Update copy for when Wikibase stats are unavailable

---
 src/components/Pages/Discovery/Cards/Wiki.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/Discovery/Cards/Wiki.vue b/src/components/Pages/Discovery/Cards/Wiki.vue
index 1cc5f412..0fd518f4 100644
--- a/src/components/Pages/Discovery/Cards/Wiki.vue
+++ b/src/components/Pages/Discovery/Cards/Wiki.vue
@@ -11,7 +11,7 @@
         <v-col class="details">
           <div class="text-h5 font-weight-regular">{{name}}</div>
           <div v-if="stats" class="text-body-2 pages">No. of pages: {{pages}}</div>
-          <div v-else class="text-body-2 pages">No. of pages: <i>available in 24h</i></div>
+          <div v-else class="text-body-2 pages">No. of pages: <i>currently unavailable</i></div>
         </v-col>
       </v-row>
     </v-container>

From 3b3030329883f10d726daf7095cf45708cdaa5f1 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 1 Sep 2023 13:04:09 +0000
Subject: [PATCH 07/19] Switch to a masonry grid layout

---
 src/components/Pages/Discovery/Discovery.vue | 34 +++++------
 src/components/Pages/Discovery/Grid.vue      | 61 ++++++++++++++++++++
 2 files changed, 76 insertions(+), 19 deletions(-)
 create mode 100644 src/components/Pages/Discovery/Grid.vue

diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index ab9f1911..52139aea 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -26,18 +26,16 @@
     <span class="text-body-2">
       {{results}} results
     </span>
-    <div class="wikis">
-      <div v-for="(wiki, index) in wikis" :key="index">
-        <Wiki
-          class="card"
-          :name="wiki.name"
-          :url="wiki.url"
-          :logo="wiki.logo"
-          :stats="wiki.stats"
-          :pages="wiki.pages"
-        />
-      </div>
-    </div>
+    <Grid class="cards">
+      <Wiki v-for="(wiki, index) in wikis" :key="index"
+        class="card"
+        :name="wiki.name"
+        :url="wiki.url"
+        :logo="wiki.logo"
+        :stats="wiki.stats"
+        :pages="wiki.pages"
+      />
+    </Grid>
     <div v-if="paginate" class="pagination">
       <v-pagination
         v-model="currentPage"
@@ -50,6 +48,7 @@
 
 <script>
 import Wiki from './Cards/Wiki.vue'
+import Grid from './Grid.vue'
 
 const SortOptions = {
   alphaAsc: {
@@ -78,7 +77,8 @@ const SortOptions = {
 export default {
   name: 'Discovery',
   components: {
-    Wiki
+    Wiki,
+    Grid
   },
   data () {
     return {
@@ -170,12 +170,8 @@ export default {
 .title {
   margin-bottom: 4px;
 }
-.wikis {
+.cards {
   margin-top: 24px;
-  display: grid;
-  row-gap: 16px;
-  column-gap: 24px;
-  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
 }
 .options {
   padding: 0 !important;
@@ -196,7 +192,7 @@ export default {
 }
 @media screen and (max-width: 632px) {
   /* 632 = 2 * 288 (card) + 2 * 16 (margin) + 24 (grid column gap) */
-  .wikis {
+  .cards {
     width: fit-content;
     margin-left: auto;
     margin-right: auto;
diff --git a/src/components/Pages/Discovery/Grid.vue b/src/components/Pages/Discovery/Grid.vue
new file mode 100644
index 00000000..a8cfeb67
--- /dev/null
+++ b/src/components/Pages/Discovery/Grid.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="grid" ref="grid">
+    <slot/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Grid',
+  data () {
+    return {
+      timer: null
+    }
+  },
+  methods: {
+    resizeCards () {
+      const cards = this.$refs.grid.children,
+        style = window.getComputedStyle(this.$refs.grid),
+        rowGap = parseInt(style.getPropertyValue('row-gap')),
+        gridAutoRows = parseInt(style.getPropertyValue('grid-auto-rows')),
+        rowHeight = rowGap + gridAutoRows;
+
+      Array.from(cards).forEach((card) => {
+        const cardHeight = card.firstChild.getBoundingClientRect().height + rowGap,
+          numRows = Math.round(cardHeight / rowHeight);
+        card.style['grid-row'] = 'span ' + numRows;
+      });
+    },
+    debounceResize (time) {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => {
+        this.resizeCards();
+      }, time);
+    },
+    windowResized () {
+      this.debounceResize(50);
+    }
+  },
+  created () {
+    window.addEventListener('resize', this.windowResized);
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.windowResized);
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.resizeCards();
+    });
+  }
+}
+</script>
+
+<style scoped>
+.grid {
+  display: grid;
+  row-gap: 16px;
+  column-gap: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
+  grid-auto-rows: 1px;
+}
+</style>

From 3b3bc283b886ffe8ef8ef5a8a99201ec461494c0 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 1 Sep 2023 13:25:53 +0000
Subject: [PATCH 08/19] Rename components

---
 .../Wiki.vue => Components/DiscoveryCard.vue}      |  2 +-
 .../{Grid.vue => Components/MasonryGrid.vue}       |  2 +-
 src/components/Pages/Discovery/Discovery.vue       | 14 +++++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)
 rename src/components/Pages/Discovery/{Cards/Wiki.vue => Components/DiscoveryCard.vue} (98%)
 rename src/components/Pages/Discovery/{Grid.vue => Components/MasonryGrid.vue} (98%)

diff --git a/src/components/Pages/Discovery/Cards/Wiki.vue b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
similarity index 98%
rename from src/components/Pages/Discovery/Cards/Wiki.vue
rename to src/components/Pages/Discovery/Components/DiscoveryCard.vue
index 0fd518f4..0f3807de 100644
--- a/src/components/Pages/Discovery/Cards/Wiki.vue
+++ b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
@@ -20,7 +20,7 @@
 
 <script>
 export default {
-  name: 'Wiki',
+  name: 'DiscoveryCard',
   props: {
     name: {
       type: String,
diff --git a/src/components/Pages/Discovery/Grid.vue b/src/components/Pages/Discovery/Components/MasonryGrid.vue
similarity index 98%
rename from src/components/Pages/Discovery/Grid.vue
rename to src/components/Pages/Discovery/Components/MasonryGrid.vue
index a8cfeb67..a39bec04 100644
--- a/src/components/Pages/Discovery/Grid.vue
+++ b/src/components/Pages/Discovery/Components/MasonryGrid.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'Grid',
+  name: 'MasonryGrid',
   data () {
     return {
       timer: null
diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index 52139aea..1072e4e8 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -26,8 +26,8 @@
     <span class="text-body-2">
       {{results}} results
     </span>
-    <Grid class="cards">
-      <Wiki v-for="(wiki, index) in wikis" :key="index"
+    <MasonryGrid class="cards">
+      <DiscoveryCard v-for="(wiki, index) in wikis" :key="index"
         class="card"
         :name="wiki.name"
         :url="wiki.url"
@@ -35,7 +35,7 @@
         :stats="wiki.stats"
         :pages="wiki.pages"
       />
-    </Grid>
+    </MasonryGrid>
     <div v-if="paginate" class="pagination">
       <v-pagination
         v-model="currentPage"
@@ -47,8 +47,8 @@
 </template>
 
 <script>
-import Wiki from './Cards/Wiki.vue'
-import Grid from './Grid.vue'
+import DiscoveryCard from './Components/DiscoveryCard.vue'
+import MasonryGrid from './Components/MasonryGrid.vue'
 
 const SortOptions = {
   alphaAsc: {
@@ -77,8 +77,8 @@ const SortOptions = {
 export default {
   name: 'Discovery',
   components: {
-    Wiki,
-    Grid
+    DiscoveryCard,
+    MasonryGrid
   },
   data () {
     return {

From cff22bd1caefeed67ae91aa532d3a3e0e7e0870d Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Fri, 1 Sep 2023 13:36:12 +0000
Subject: [PATCH 09/19] Remove semicolons and trailing commas

---
 src/App.vue                                   |  2 +-
 src/backend/api.js                            |  2 +-
 .../Discovery/Components/DiscoveryCard.vue    |  8 ++---
 .../Discovery/Components/MasonryGrid.vue      | 24 +++++++-------
 src/components/Pages/Discovery/Discovery.vue  | 32 +++++++++----------
 src/router/index.js                           |  2 +-
 6 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 359aa25b..e02f4223 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -34,7 +34,7 @@ export default {
   },
   computed: {
     customLayout: function () {
-      return this.$route.meta.customLayout;
+      return this.$route.meta.customLayout
     }
   },
   methods: {
diff --git a/src/backend/api.js b/src/backend/api.js
index 33ebba1f..8efe1019 100644
--- a/src/backend/api.js
+++ b/src/backend/api.js
@@ -59,7 +59,7 @@ export const wikiDiscovery = async ({ sort, direction, active, currentPage, resu
       direction: direction,
       is_active: active,
       page: currentPage,
-      per_page: resultsPerPage,
+      per_page: resultsPerPage
     }
   })).data
 }
diff --git a/src/components/Pages/Discovery/Components/DiscoveryCard.vue b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
index 0f3807de..a36c7e1e 100644
--- a/src/components/Pages/Discovery/Components/DiscoveryCard.vue
+++ b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
@@ -45,16 +45,16 @@ export default {
   },
   computed: {
     character: function () {
-      return this.name.substring(0, 1).toUpperCase();
+      return this.name.substring(0, 1).toUpperCase()
     },
     color: function () {
-      const colors = ['red', 'blue', 'green', 'purple'];
-      return this.logo ? 'white' : colors[Math.floor(Math.random() * colors.length)];
+      const colors = ['red', 'blue', 'green', 'purple']
+      return this.logo ? 'white' : colors[Math.floor(Math.random() * colors.length)]
     }
   },
   methods: {
     goToWiki () {
-      window.open(this.url.href, '_blank');
+      window.open(this.url.href, '_blank')
     }
   }
 }
diff --git a/src/components/Pages/Discovery/Components/MasonryGrid.vue b/src/components/Pages/Discovery/Components/MasonryGrid.vue
index a39bec04..4c8d1ed8 100644
--- a/src/components/Pages/Discovery/Components/MasonryGrid.vue
+++ b/src/components/Pages/Discovery/Components/MasonryGrid.vue
@@ -18,34 +18,34 @@ export default {
         style = window.getComputedStyle(this.$refs.grid),
         rowGap = parseInt(style.getPropertyValue('row-gap')),
         gridAutoRows = parseInt(style.getPropertyValue('grid-auto-rows')),
-        rowHeight = rowGap + gridAutoRows;
+        rowHeight = rowGap + gridAutoRows
 
       Array.from(cards).forEach((card) => {
         const cardHeight = card.firstChild.getBoundingClientRect().height + rowGap,
-          numRows = Math.round(cardHeight / rowHeight);
-        card.style['grid-row'] = 'span ' + numRows;
-      });
+          numRows = Math.round(cardHeight / rowHeight)
+        card.style['grid-row'] = 'span ' + numRows
+      })
     },
     debounceResize (time) {
-      clearTimeout(this.timer);
+      clearTimeout(this.timer)
       this.timer = setTimeout(() => {
-        this.resizeCards();
-      }, time);
+        this.resizeCards()
+      }, time)
     },
     windowResized () {
-      this.debounceResize(50);
+      this.debounceResize(50)
     }
   },
   created () {
-    window.addEventListener('resize', this.windowResized);
+    window.addEventListener('resize', this.windowResized)
   },
   destroyed () {
-    window.removeEventListener('resize', this.windowResized);
+    window.removeEventListener('resize', this.windowResized)
   },
   updated () {
     this.$nextTick(() => {
-      this.resizeCards();
-    });
+      this.resizeCards()
+    })
   }
 }
 </script>
diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index 1072e4e8..284d73f3 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -95,7 +95,7 @@ export default {
   },
   methods: {
     async update () {
-      this.inputDisabled = true;
+      this.inputDisabled = true
 
       try {
         const response = await this.$api.wikiDiscovery({
@@ -104,11 +104,11 @@ export default {
           active: this.excludeEmpty ? 1 : 0,
           currentPage: this.currentPage,
           resultsPerPage: this.resultsPerPage
-        });
+        })
 
-        this.results = response.meta.total;
-        this.totalPages = response.meta.last_page;
-        this.wikis = response.data.map((wiki) => {
+        this.results = response.meta.total
+        this.totalPages = response.meta.last_page
+        this.wikis = await response.data.map((wiki) => {
           const stats = wiki.wiki_site_stats
           return {
             name: wiki.sitename,
@@ -117,40 +117,40 @@ export default {
             stats: !!stats,
             ...(stats && { pages: stats.pages })
           }
-        });
+        })
       } catch (error) {
-        console.log(error);
-        alert('Failed to collect Wikibase stats');
+        console.log(error)
+        alert('Failed to collect Wikibase stats')
       } finally {
-        this.inputDisabled = false;
+        this.inputDisabled = false
       }
     },
     filter () {
       if (this.currentPage === 1) {
-        this.update();
+        this.update()
       } else {
-        this.currentPage = 1;
+        this.currentPage = 1
       }
     }
   },
   computed: {
     paginate: function () {
-      return this.results > this.resultsPerPage;
+      return this.results > this.resultsPerPage
     }
   },
   watch: {
     sortValue: function () {
-      this.filter();
+      this.filter()
     },
     excludeEmpty: function () {
-      this.filter();
+      this.filter()
     },
     currentPage: function () {
-      this.update();
+      this.update()
     }
   },
   mounted () {
-    this.update();
+    this.update()
   }
 }
 </script>
diff --git a/src/router/index.js b/src/router/index.js
index d7dc20dc..77ea9b48 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -124,7 +124,7 @@ const router = new Router({
       meta: {
         customLayout: true
       }
-    },
+    }
   ]
 })
 

From c3d65c7a0f38b1a85e5d1cb6f7d2c3ac37c08e47 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 5 Sep 2023 13:35:07 +0000
Subject: [PATCH 10/19] Add mock data

---
 src/backend/mocks/default_handlers.js | 80 +++++++++++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/src/backend/mocks/default_handlers.js b/src/backend/mocks/default_handlers.js
index 1b94e12f..9504356d 100644
--- a/src/backend/mocks/default_handlers.js
+++ b/src/backend/mocks/default_handlers.js
@@ -50,6 +50,83 @@ const removeWiki = wikiIndex => {
   localStorage.setItem('msw-myWikis', JSON.stringify(myWikis))
 }
 
+const wikiDiscovery = (referrer, params) => {
+  const pseudorandom = {
+    seed: 1,
+    next: function() {
+      const x = Math.sin(this.seed++) * 10000
+      return x - Math.floor(x)
+    }
+  }
+
+  const names = [
+    'Wikibase Name',
+    'A Very Long Wikibase Name'
+  ]
+
+  let wikis = [...Array(75).keys()].map((id) => {
+    const wiki = {
+      id: id,
+      domain: id + '-wikibase.wbaas.localhost',
+      sitename: id + ' - ' + names[id % names.length],
+      wiki_site_stats: null,
+      logo_url: null
+    }
+
+    if (pseudorandom.next() >= 0.1) {
+      wiki.wiki_site_stats = {
+        pages: Math.ceil(pseudorandom.next() * 250)
+      }
+    }
+
+    if (pseudorandom.next() >= 0.5) {
+      wiki.logo_url = referrer + 'favicon.ico'
+    }
+    return wiki
+  })
+
+  if (parseInt(params.get('is_active'))) {
+    wikis = wikis.filter((wiki) => {
+      const stats = wiki.wiki_site_stats
+      return stats && stats.pages > 1
+    })
+  }
+
+  if (params.get('sort') === 'sitename') {
+    wikis = wikis.sort((a, b) => {
+      let sort = a.sitename.localeCompare(b.sitename, 'en', { numeric: true })
+      if (params.get('direction') === 'desc') {
+        sort *= -1
+      }
+      return sort
+    })
+  }
+
+  if (params.get('sort') === 'pages') {
+    wikis = wikis.sort((a, b) => {
+      const aPages = a.wiki_site_stats ? a.wiki_site_stats.pages : 0
+      const bPages = b.wiki_site_stats ? b.wiki_site_stats.pages : 0
+      if (params.get('direction') === 'desc') {
+        return bPages - aPages
+      }
+      return aPages - bPages
+    })
+  }
+
+  const currentPage = parseInt(params.get('page'))
+  const resultsPerPage = parseInt(params.get('per_page'))
+  const start = (currentPage - 1) * resultsPerPage
+  const end = start + resultsPerPage
+
+  return {
+    data: wikis.slice(start, end),
+    meta: {
+      last_page: Math.ceil(wikis.length / resultsPerPage),
+      total: wikis.length
+    }
+  }
+}
+
 export const handlers = [
   /* User endpoints */
   rest.post(/\/auth\/login$/, (req, res, ctx) => {
@@ -108,5 +185,8 @@ export const handlers = [
       return res(ctx.status(404))
     }
     return res(ctx.json({ data: wikiDetails }), ctx.status(200))
+  }),
+  rest.get(/\/wiki$/, (req, res, ctx) => {
+    return res(ctx.json(wikiDiscovery(req.referrer, req.url.searchParams)))
   })
 ]

From e29e0385bbce99871d4aad204956d31d2a5250f4 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Tue, 5 Sep 2023 13:49:22 +0000
Subject: [PATCH 11/19] Fix logo url for mock data

---
 src/backend/mocks/default_handlers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/backend/mocks/default_handlers.js b/src/backend/mocks/default_handlers.js
index 9504356d..5b2d5024 100644
--- a/src/backend/mocks/default_handlers.js
+++ b/src/backend/mocks/default_handlers.js
@@ -80,7 +80,7 @@ const wikiDiscovery = (referrer, params) => {
     }
 
     if (pseudorandom.next() >= 0.5) {
-      wiki.logo_url = referrer + 'favicon.ico'
+      wiki.logo_url = new URL(referrer).origin + '/favicon.ico'
     }
     return wiki
   })

From b2e321ff8d872850064719559d890d80b8e7215a Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 6 Sep 2023 13:15:28 +0000
Subject: [PATCH 12/19] Set page count as the default sort order

---
 src/components/Pages/Discovery/Discovery.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index 284d73f3..1771e2bf 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -87,7 +87,7 @@ export default {
       currentPage: 1,
       totalPages: 1,
       excludeEmpty: true,
-      sortValue: SortOptions.alphaAsc.value,
+      sortValue: SortOptions.pagesDesc.value,
       sortOptions: Object.values(SortOptions),
       inputDisabled: false,
       wikis: []

From 94f28f1d1d9f43ab1e8e4060991a8761d36172d9 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Wed, 6 Sep 2023 13:20:55 +0000
Subject: [PATCH 13/19] Enter key should open Wikibase

---
 src/components/Pages/Discovery/Components/DiscoveryCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/Discovery/Components/DiscoveryCard.vue b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
index a36c7e1e..511f3f9a 100644
--- a/src/components/Pages/Discovery/Components/DiscoveryCard.vue
+++ b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-card @click="goToWiki">
+  <v-card @click="goToWiki" @keyup.enter="goToWiki">
     <v-container class="content">
       <v-row no-gutters>
         <v-col class="flex-grow-0">

From 75ba29f5a3154878f6a78d5107e5634c472d7c58 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Thu, 7 Sep 2023 12:29:12 +0000
Subject: [PATCH 14/19] Update copy for discovery page

---
 src/components/Pages/Discovery/Discovery.vue | 21 ++++++++++++--------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index 1771e2bf..d09774b0 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="content">
-    <span class="text-h4 title">
-      Discover other Wikibases on Cloud
-    </span>
-    <div class="text-subtitle-1">
-      Quick text explaining what this does and what it's good for.
+    <div class="intro">
+      <div class="text-h4 title">
+        A tour of Wikibases in the cloud
+      </div>
+      <div class="text-subtitle-1">
+        Have you ever wanted to take a look at other Wikibases, so you can see how other folks have set them up? Here's a list of other instances on Wikibase Cloud for your information and inspiration.
+      </div>
     </div>
     <v-container class="options">
       <v-select
@@ -159,6 +161,12 @@ export default {
 .content {
   margin: 16px 16px 0 16px;
 }
+.intro {
+  max-width: 601px;
+}
+.title {
+  margin-bottom: 4px;
+}
 .pagination {
   margin: 32px auto 16px auto;
   max-width: 85%;
@@ -167,9 +175,6 @@ export default {
   min-width: 288px;
   max-width: 400px;
 }
-.title {
-  margin-bottom: 4px;
-}
 .cards {
   margin-top: 24px;
 }

From 5ed7678848a352f27b5913a59640a7e0ecf78194 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Thu, 7 Sep 2023 12:40:08 +0000
Subject: [PATCH 15/19] Scroll to top after list is updated

---
 src/components/Pages/Discovery/Discovery.vue | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index d09774b0..11b617f0 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -149,6 +149,13 @@ export default {
     },
     currentPage: function () {
       this.update()
+    },
+    wikis: function () {
+      this.$nextTick(() => {
+        this.$nextTick(() => {
+          document.documentElement.scrollIntoView({ behavior: 'smooth' })
+        })
+      })
     }
   },
   mounted () {

From 44ba2003697d2a525f302a0352f437a42972190a Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Thu, 7 Sep 2023 13:38:28 +0000
Subject: [PATCH 16/19] Adjust content margins and breakpoints

---
 .../Pages/Discovery/Components/MasonryGrid.vue  |  1 -
 src/components/Pages/Discovery/Discovery.vue    | 17 ++++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/Pages/Discovery/Components/MasonryGrid.vue b/src/components/Pages/Discovery/Components/MasonryGrid.vue
index 4c8d1ed8..ed37aefc 100644
--- a/src/components/Pages/Discovery/Components/MasonryGrid.vue
+++ b/src/components/Pages/Discovery/Components/MasonryGrid.vue
@@ -54,7 +54,6 @@ export default {
 .grid {
   display: grid;
   row-gap: 16px;
-  column-gap: 24px;
   grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
   grid-auto-rows: 1px;
 }
diff --git a/src/components/Pages/Discovery/Discovery.vue b/src/components/Pages/Discovery/Discovery.vue
index 11b617f0..ba44be1a 100644
--- a/src/components/Pages/Discovery/Discovery.vue
+++ b/src/components/Pages/Discovery/Discovery.vue
@@ -185,6 +185,9 @@ export default {
 .cards {
   margin-top: 24px;
 }
+>>> .cards.grid {
+  column-gap: 24px;
+}
 .options {
   padding: 0 !important;
   margin: 56px 0 32px 0;
@@ -202,8 +205,12 @@ export default {
   padding-bottom: 4px;
   vertical-align: middle;
 }
-@media screen and (max-width: 632px) {
-  /* 632 = 2 * 288 (card) + 2 * 16 (margin) + 24 (grid column gap) */
+@media screen and (max-width: 648px) {
+  /*
+    648px = 2 * 288px (.card min-width)
+      + 2 * 24px (.content left/right margin at >= 640px)
+      + 24px (.grid column-gap)
+  */
   .cards {
     width: fit-content;
     margin-left: auto;
@@ -234,7 +241,11 @@ export default {
     max-width: 50%;
   }
 }
-@media screen and (min-width: 1680px) {
+@media screen and (min-width: 1578px) {
+  /*
+    1578px = 1514px (.content max-width)
+      + 2 * 32px (.content left/right margin at >= 1120px)
+  */
   .content {
     margin: 40px auto 0 auto;
     width: 1514px;

From 903b78777c6533f160f81300feb5242dfbc17bee Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Thu, 7 Sep 2023 13:46:00 +0000
Subject: [PATCH 17/19] Fix linting errors

---
 src/backend/mocks/default_handlers.js              |  2 +-
 .../Pages/Discovery/Components/MasonryGrid.vue     | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/backend/mocks/default_handlers.js b/src/backend/mocks/default_handlers.js
index 5b2d5024..bd09c90a 100644
--- a/src/backend/mocks/default_handlers.js
+++ b/src/backend/mocks/default_handlers.js
@@ -53,7 +53,7 @@ const removeWiki = wikiIndex => {
 const wikiDiscovery = (referrer, params) => {
   const pseudorandom = {
     seed: 1,
-    next: function() {
+    next: function () {
       const x = Math.sin(this.seed++) * 10000
       return x - Math.floor(x)
     }
diff --git a/src/components/Pages/Discovery/Components/MasonryGrid.vue b/src/components/Pages/Discovery/Components/MasonryGrid.vue
index ed37aefc..0cf5e6f8 100644
--- a/src/components/Pages/Discovery/Components/MasonryGrid.vue
+++ b/src/components/Pages/Discovery/Components/MasonryGrid.vue
@@ -14,15 +14,15 @@ export default {
   },
   methods: {
     resizeCards () {
-      const cards = this.$refs.grid.children,
-        style = window.getComputedStyle(this.$refs.grid),
-        rowGap = parseInt(style.getPropertyValue('row-gap')),
-        gridAutoRows = parseInt(style.getPropertyValue('grid-auto-rows')),
-        rowHeight = rowGap + gridAutoRows
+      const cards = this.$refs.grid.children
+      const style = window.getComputedStyle(this.$refs.grid)
+      const rowGap = parseInt(style.getPropertyValue('row-gap'))
+      const gridAutoRows = parseInt(style.getPropertyValue('grid-auto-rows'))
+      const rowHeight = rowGap + gridAutoRows
 
       Array.from(cards).forEach((card) => {
-        const cardHeight = card.firstChild.getBoundingClientRect().height + rowGap,
-          numRows = Math.round(cardHeight / rowHeight)
+        const cardHeight = card.firstChild.getBoundingClientRect().height + rowGap
+        const numRows = Math.round(cardHeight / rowHeight)
         card.style['grid-row'] = 'span ' + numRows
       })
     },

From b82b212c236b251a4bdd513c9fa3ea8fc1ce9d6e Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 11 Sep 2023 10:47:36 +0000
Subject: [PATCH 18/19] Switch to a rounded avatar for Wikibase logos

---
 src/components/Pages/Discovery/Components/DiscoveryCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pages/Discovery/Components/DiscoveryCard.vue b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
index 511f3f9a..7b8c0aa4 100644
--- a/src/components/Pages/Discovery/Components/DiscoveryCard.vue
+++ b/src/components/Pages/Discovery/Components/DiscoveryCard.vue
@@ -3,7 +3,7 @@
     <v-container class="content">
       <v-row no-gutters>
         <v-col class="flex-grow-0">
-          <v-avatar :color="color">
+          <v-avatar rounded :color="color">
             <img v-if="logo" :src="logo.href">
             <span v-else class="white--text">{{character}}</span>
           </v-avatar>

From c769dce8d95fa6053c4ae2dcc7557e29b04f4e89 Mon Sep 17 00:00:00 2001
From: Andrew Kostka <andrew.kostka@wikimedia.de>
Date: Mon, 11 Sep 2023 10:59:44 +0000
Subject: [PATCH 19/19] Simplify diff for merge

---
 src/components/Layout/Navbar.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Layout/Navbar.vue b/src/components/Layout/Navbar.vue
index b7d8e31f..f3ab44ab 100644
--- a/src/components/Layout/Navbar.vue
+++ b/src/components/Layout/Navbar.vue
@@ -34,6 +34,9 @@ export default {
 </script>
 
 <style scoped>
+.v-toolbar {
+  max-height: 64px;
+}
 .no-button-pointer-events{
   pointer-events: none
 }
@@ -49,7 +52,4 @@ text-decoration-line: underline;
 .logo{
   height: 64px;
 }
-.v-toolbar {
-  max-height: 64px;
-}
 </style>