surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed height QCalendar based on the height of the device (screen.height)

Browse Source
This commit is contained in:
Paolo Arena
2019-10-30 17:36:10 +01:00
parent f288ace2a7
commit eea814fb43
8 changed files with 60 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/CEventsCalendar/CEventsCalendar.scss
View File

@@ -134,6 +134,14 @@ $graytext: #555;
height: 150px;
}
&__tdimg_small {
width: auto;
height: 50px !important;
@media (max-width: 800px) {
height: 40px !important;
}
}
&__table {
margin: 10px;
border: solid 1px #4198ef;

13
src/components/CEventsCalendar/CEventsCalendar.ts
View File

@@ -252,7 +252,14 @@ export default class CEventsCalendar extends Vue {
}
get dayHeight() {
return CalendarStore.state.dayHeight
if (Screen.height < 500)
return 100
if (Screen.height < 700)
return 110
else if (Screen.height < 800)
return 120
else
return 140
}
get theme() {
@@ -997,4 +1004,8 @@ export default class CEventsCalendar extends Vue {
return (new Date(myevent.dateTimeEnd) >= datenow)
}
public getTitleEv(event: IEvents) {
return (!!event.short_tit) ? event.short_tit : event.title
}
}

36
src/components/CEventsCalendar/CEventsCalendar.vue
View File

@@ -39,15 +39,15 @@
<span class="cal__teacher-content">
<q-chip>
<q-avatar>
<img :src="`../../statics/images/` + getImgByUsername(myevent.teacher)">
<img :src="getImgByUsername(myevent.teacher)">
</q-avatar>
<span class="cal__teacher-content">{{getUserByUsername(myevent.teacher)}}</span>
</q-chip>
<span v-if="getImgByUsername(myevent.teacher2) && myevent.teacher2"
<span v-if="getImgByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)"
class="margin_avatar2"></span>
<q-chip v-if="getImgByUsername(myevent.teacher2) && myevent.teacher2">
<q-chip v-if="getImgByUsername(myevent.teacher2) && isValidUsername(myevent.teacher2)">
<q-avatar>
<img :src="`../../statics/images/` + getImgByUsername(myevent.teacher2)">
<img :src="getImgByUsername(myevent.teacher2)">
</q-avatar>
<span class="cal__teacher-content">{{getUserByUsername(myevent.teacher2)}}</span>
</q-chip>
@@ -109,10 +109,15 @@
v-if="contextDay"
ref='myevent'
class="q-gutter-sm">
<q-input color="grey-1" v-model="eventForm.short_tit" autofocus
:input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
borderless rounded dense :label="$t('event.short_tit')"
></q-input>
<q-input color="grey-1" v-model="eventForm.title" autofocus
:input-style="`background-color: ${eventForm.bgcolor} !important; color: white !important; font-weight: bold; `"
borderless rounded dense :label="$t('event.title')"
:rules="[v => v && v.length > 0 || 'Field cannot be empty']"></q-input>
:rules="[v => v && v.length > 0 || $t('event.notempty')]"></q-input>
<CMyEditor :value.sync="eventForm.details">
@@ -425,7 +430,7 @@
<q-badge
:key="index"
style="width: 100%; cursor: pointer;"
class="ellipsis"
class=""
:class="badgeClasses(event, 'day')"
:style="badgeStyles(event, 'day')"
@click.stop.prevent="showEvent(event)"
@@ -435,9 +440,12 @@
@dragenter.native="(e) => onDragEnter(e, event)"
@touchmove.native="(e) => {}"
>
<q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>
<span class="ellipsis">{{ event.title }}</span>
<span class="">{{ getTitleEv(event) }}</span>
</q-badge>
<div class="text-center"><img :src="getImgEvent(event)"
class="text-center listaev__tdimg_small">
</div>
</template>
</template>
@@ -475,7 +483,7 @@
<template v-for="(event, index) in getEvents(date)">
<q-badge
:key="index"
class="my-event justify-center ellipsis"
class="my-event justify-center"
:class="badgeClasses(event, 'body')"
:style="badgeStyles(event, 'body', timeStartPos, timeDurationHeight)"
@click.stop.prevent="showEvent(event)"
@@ -486,7 +494,7 @@
@touchmove.native="(e) => {}"
>
<q-icon v-if="event.icon" :name="event.icon" class="q-mr-xs"></q-icon>
<span class="ellipsis">{{ event.title }}</span>
<span class="">{{ getTitleEv(event) }}</span>
</q-badge>
</template>
</template>
@@ -558,14 +566,14 @@
<q-chip>
<q-avatar>
<img :src="`../../statics/images/` + getImgByUsername(event.teacher)">
<img :src="getImgByUsername(event.teacher)">
</q-avatar>
<span class="cal__teacher-content">{{getUserByUsername(event.teacher)}}</span>
</q-chip>
<span v-if="getImgByUsername(event.teacher2)" class="margin_avatar2"></span>
<q-chip v-if="getImgByUsername(event.teacher2) && event.teacher2">
<span v-if="getImgByUsername(event.teacher2) && isValidUsername(event.teacher2)" class="margin_avatar2"></span>
<q-chip v-if="getImgByUsername(event.teacher2) && isValidUsername(event.teacher2)">
<q-avatar>
<img :src="`../../statics/images/` + getImgByUsername(event.teacher2)">
<img :src="getImgByUsername(event.teacher2)">
</q-avatar>
<span class="cal__teacher-content">{{getUserByUsername(event.teacher2)}}</span>
</q-chip>

8
src/components/Header/Header.vue
View File

@@ -92,8 +92,9 @@
</q-list>
</q-btn-dropdown>
<message-popover></message-popover>
<div v-if="static_data.functionality.SHOW_MESSAGES">
<message-popover></message-popover>
</div>
<!--
<div class="right-itens">
@@ -102,7 +103,8 @@
<!-- BUTTON USER BAR -->
<q-btn class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !isLogged" dense flat round icon="menu"
<q-btn class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && !isLogged" dense flat round
icon="menu"
@click="rightDrawerOpen = !rightDrawerOpen">
</q-btn>
<q-btn class="q-mx-xs" v-if="static_data.functionality.SHOW_USER_MENU && isLogged" round dense flat

4
src/mixins/mixin-users.ts
View File

@@ -30,6 +30,10 @@ export default class MixinUsers extends Vue {
return `statics/` + UserStore.getters.getImgByUsername(username)
}
public isValidUsername(username) {
return username && username !== 'nessuno' && username !== 'none'
}
public getMyUsername() {
return UserStore.state.my.username
}

1
src/model/GlobalStore.ts
View File

@@ -201,6 +201,7 @@ export interface IFunctionality {
ENABLE_PROJECTS_LOADING?: boolean
SHOW_NEWSLETTER?: boolean
SHOW_ONLY_POLICY?: boolean
SHOW_MESSAGES?: boolean
BOOKING_EVENTS?: boolean
}

5
src/statics/i18n.js
View File

@@ -275,6 +275,7 @@ const msgglobal = {
canceled: 'Cancellato',
deleted: 'Eliminato',
duplicate: 'Duplica',
notempty: 'Il campo non può essere vuoto',
modified: 'Modificato'
},
newsletter: {
@@ -559,6 +560,7 @@ const msgglobal = {
canceled: 'Cancelado',
deleted: 'Eliminado',
duplicate: 'Duplica',
notempty: 'El campo no puede estar vacío.',
modified: 'Modificado'
},
newsletter: {
@@ -842,6 +844,7 @@ const msgglobal = {
canceled: 'Annulé',
deleted: 'Supprimé',
duplicate: 'Duplique',
notempty: 'Le champ ne peut pas être vide',
modified: 'modifié'
},
newsletter: {
@@ -1124,6 +1127,7 @@ const msgglobal = {
canceled: 'Canceled',
deleted: 'Deleted',
duplicate: 'Duplicate',
notempty: 'Field cannot be empty',
modified: 'Modified'
},
newsletter: {
@@ -1408,6 +1412,7 @@ const msgglobal = {
canceled: 'Canceled',
deleted: 'Deleted',
duplicate: 'Duplicate',
notempty: 'Field cannot be empty',
modified: 'Modified'
},
newsletter: {

6
src/store/Modules/Store/calendar/CalendarStore.ts
View File

@@ -36,10 +36,10 @@ const state: ICalendarState = {
showWorkWeeks: false,
intervalRange: { min: 9, max: 23 },
intervalRangeStep: 1,
intervalHeight: 35,
resourceHeight: 60,
intervalHeight: 35, // 35
resourceHeight: 80, // 60
resourceWidth: 100,
dayHeight: 100,
dayHeight: 150,
enableThemes: false,
theme: {}
}