NoLog.cz/gancio-upstream
6
0
Fork 0
mirror of https://framagit.org/les/gancio.git synced 2025-01-31 16:42:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

avoid content jumping , improve mobile ux

Browse source
This commit is contained in:
lesion 2022-02-04 22:35:15 +01:00
parent 99794c1619
commit 70d55493e9
No known key found for this signature in database
GPG key ID: 352918250B012177
7 changed files with 41 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
assets/style.less
View file

@ -30,6 +30,10 @@ li {
justify-content: center;
}
#calh {
height: 292px;
}
.container {
max-width: 1400px;
}

6
components/Event.vue
View file

@ -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: {

37
components/Nav.vue
View file

@ -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

4
pages/Admin.vue
View file

@ -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')}}

2
pages/add/_edit.vue
View file

@ -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')}}

6
pages/export.vue
View file

@ -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')}}

5
pages/index.vue
View file

@ -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>