From 70d55493e955a94543df2f305712f3761be690e5 Mon Sep 17 00:00:00 2001
From: lesion <lesion@autistici.org>
Date: Fri, 4 Feb 2022 22:35:15 +0100
Subject: [PATCH] avoid content jumping , improve mobile ux

---
 assets/style.less    |  4 ++++
 components/Event.vue |  6 ++++--
 components/Nav.vue   | 37 +++++++++++++++++++++++++------------
 pages/Admin.vue      |  4 ++--
 pages/add/_edit.vue  |  2 +-
 pages/export.vue     |  6 +++---
 pages/index.vue      |  5 ++---
 7 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/assets/style.less b/assets/style.less
index 8d65d218..b1232925 100644
--- a/assets/style.less
+++ b/assets/style.less
@@ -30,6 +30,10 @@ li {
   justify-content: center;
 }
 
+#calh {
+  height: 292px;
+}
+
 .container {
   max-width: 1400px;
 }
diff --git a/components/Event.vue b/components/Event.vue
index 1849a4a5..ccfa61db 100644
--- a/components/Event.vue
+++ b/components/Event.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
   v-card.h-event.event.d-flex(itemscope itemtype="https://schema.org/Event")
     nuxt-link(:to='`/event/${event.slug || event.id}`' itemprop="url")
-      img.img.u-featured(:src='thumbnail' :alt='alt' loading='lazy' itemprop="image" :style="{ 'object-position': thumbnailPosition }")
+      img.img.u-featured(:src='thumbnail' :alt='alt' :loading='this.lazy?"lazy":"eager"' itemprop="image" :style="{ 'object-position': thumbnailPosition }")
       v-icon.float-right.mr-1(v-if='event.parentId' color='success') mdi-repeat
       .title.p-name(itemprop="name") {{event.title}}
 
@@ -9,6 +9,7 @@
       time.dt-start.subtitle-1(:datetime='event.start_datetime|unixFormat("YYYY-MM-DD HH:mm")' itemprop="startDate" :content="event.start_datetime|unixFormat('YYYY-MM-DDTHH:mm')")  <v-icon>mdi-calendar</v-icon> {{ event|when }}
       .d-none.dt-end(itemprop="endDate" :content="event.end_datetime|unixFormat('YYYY-MM-DDTHH:mm')") {{event.end_datetime|unixFormat('YYYY-MM-DD HH:mm')}}
       a.place.d-block.p-location.pl-0(text color='primary' @click="$emit('placeclick', event.place.id)" itemprop="location" :content="event.place.name") <v-icon>mdi-map-marker</v-icon> {{event.place.name}}
+      .d-none(itemprop='location.address') {{event.place.address}}
 
     v-card-actions.pt-0.actions.justify-space-between
       .tags
@@ -48,7 +49,8 @@ import clipboard from '../assets/clipboard'
 
 export default {
   props: {
-    event: { type: Object, default: () => ({}) }
+    event: { type: Object, default: () => ({}) },
+    lazy: Boolean
   },
   mixins: [clipboard],
   computed: {
diff --git a/components/Nav.vue b/components/Nav.vue
index 5bea5118..9bf57cac 100644
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-app-bar(app aria-label='Menu')
+  v-app-bar(app aria-label='Menu' height=64)
 
     //- logo, title and description
     v-list-item(:to='$route.name==="index"?"/about":"/"')
@@ -12,23 +12,36 @@
 
     v-spacer
 
-    v-tooltip(bottom) {{$t('common.add_event')}}
-      template(v-slot:activator='{ on }')
-        v-btn(v-if='could_add' icon nuxt to='/add' v-on='on' :aria-label='$t("common.add_event")')
+    client-only(v-if='could_add')
+      v-tooltip(bottom) {{$t('common.add_event')}}
+        template(v-slot:activator='{ on }')
+          v-btn(icon nuxt to='/add' v-on='on' :aria-label='$t("common.add_event")')
+            v-icon(large color='primary') mdi-plus
+      template(#placeholder)
+        v-btn(icon nuxt to='/add' :aria-label='$t("common.add_event")')
           v-icon(large color='primary') mdi-plus
 
-    v-tooltip(bottom) {{$t('common.share')}}
-      template(v-slot:activator='{ on }')
-        v-btn(icon nuxt to='/export' v-on='on' :aria-label='$t("common.share")')
+
+    client-only
+      v-tooltip(bottom) {{$t('common.share')}}
+        template(v-slot:activator='{ on }')
+          v-btn(icon nuxt to='/export' v-on='on' :aria-label='$t("common.share")')
+            v-icon mdi-share-variant
+      template(#placeholder)
+        v-btn(icon nuxt to='/export' :aria-label='$t("common.share")')
           v-icon mdi-share-variant
 
-    v-tooltip(v-if='!$auth.loggedIn' bottom) {{$t('common.login')}}
-      template(v-slot:activator='{ on }')
-        v-btn(icon nuxt to='/login' v-on='on' :aria-label='$t("common.login")')
+    client-only
+      v-tooltip(v-if='!$auth.loggedIn' bottom) {{$t('common.login')}}
+        template(v-slot:activator='{ on }')
+          v-btn(icon nuxt to='/login' v-on='on' :aria-label='$t("common.login")')
+            v-icon mdi-login
+      template(#placeholder)
+        v-btn(icon nuxt to='/login' :aria-label='$t("common.login")')
           v-icon mdi-login
 
-    v-menu(v-else
-      offset-y bottom open-on-hover transition="slide-y-transition")
+    v-menu(v-if='$auth.loggedIn')
+      offset-y(bottom open-on-hover transition="slide-y-transition")
       template(v-slot:activator="{ on, attrs }")
         v-btn(icon v-bind='attrs' v-on='on' aria-label='Menu')
           v-icon mdi-dots-vertical
diff --git a/pages/Admin.vue b/pages/Admin.vue
index 32edff64..50abc0cb 100644
--- a/pages/Admin.vue
+++ b/pages/Admin.vue
@@ -1,7 +1,7 @@
 <template lang="pug">
-  v-container
+  v-container.container.pa-0.pa-md-3
     v-card
-      v-tabs(v-model='selectedTab')
+      v-tabs(v-model='selectedTab' show-arrows)
 
         //- SETTINGS
         v-tab {{$t('common.settings')}}
diff --git a/pages/add/_edit.vue b/pages/add/_edit.vue
index f004340c..d8e24e77 100644
--- a/pages/add/_edit.vue
+++ b/pages/add/_edit.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-  v-container.container.px-0.px-md-3
+  v-container.container.pa-0.pa-md-3
     v-card
       v-card-title
         h4 {{edit?$t('common.edit_event'):$t('common.add_event')}}
diff --git a/pages/export.vue b/pages/export.vue
index 30e64b50..7b8ca2ca 100644
--- a/pages/export.vue
+++ b/pages/export.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  v-container
-    v-card(outlined)
+  v-container.pa-0.pa-md-3
+    v-card
       v-card-title {{$t('common.share')}}
       v-card-text
         p.text-body-1 {{$t('export.intro')}}
@@ -11,7 +11,7 @@
             Search(
               :filters='filters'
               @update='f => filters = f')
-      v-tabs(v-model='type')
+      v-tabs(v-model='type' show-arrows)
 
         //- TOFIX
         //- v-tab {{$t('common.email')}}
diff --git a/pages/index.vue b/pages/index.vue
index ca59afcd..a0d592b9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,7 +7,7 @@
 
     //- Calendar and search bar
     v-row.pt-0.pt-sm-2.pl-0.pl-sm-2
-      .col-xl-5.col-lg-5.col-md-7.col-sm-12.col-xs-12.pa-4.pa-sm-3
+      #calh.col-xl-5.col-lg-5.col-md-7.col-sm-12.col-xs-12.pa-4.pa-sm-3
         //- this is needed as v-calendar does not support SSR
         //- https://github.com/nathanreyes/v-calendar/issues/336
         client-only(placeholder='Calendar unavailable without js')
@@ -19,8 +19,7 @@
 
     //- Events
     #events.mb-2.mt-1.pl-1.pl-sm-2
-      //- div.event(v-for='(event, idx) in events' :key='event.id' v-intersect="(entries, observer, isIntersecting) => intersecting[event.id] = isIntersecting")
-      Event(:event='event' @destroy='destroy' v-for='(event, idx) in visibleEvents' :key='event.id' @tagclick='tagClick' @placeclick='placeClick')
+      Event(:event='event' @destroy='destroy' v-for='(event, idx) in visibleEvents' :lazy='idx>2' :key='event.id' @tagclick='tagClick' @placeclick='placeClick')
 
 </template>