vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Improved calendar on small screens

pull/345/head
cagataycivici 2020-05-28 16:59:17 +03:00
parent 052673668e
commit 98f8d522c1
17 changed files with 97 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/themes/luna-amber/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #ffe8b3;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

5
public/themes/luna-green/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #88e9aa;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

5
public/themes/luna-pink/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #f1b6c8;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

5
public/themes/nova-accent/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #8dcdff;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0.25rem;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

5
public/themes/nova-alt/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #8dcdff;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0.25rem;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

5
public/themes/nova-vue/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #c2e9d8;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0.25rem;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

5
public/themes/nova/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #8dcdff;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0.25rem;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

5
public/themes/rhea/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #e4e9ec;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0.25rem;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;

9
public/themes/saga-blue/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #BBDEFB;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

9
public/themes/saga-cyan/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #B2EBF2;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

9
public/themes/saga-deeppurple/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #D1C4E9;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

9
public/themes/saga-green/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #C8E6C9;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

9
public/themes/saga-indigo/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #C5CAE9;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

9
public/themes/saga-orange/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #FFECB3;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #212529;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #212529;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

9
public/themes/saga-purple/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #E1BEE7;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

9
public/themes/saga-teal/theme.css
View File

@ -312,6 +312,11 @@
box-shadow: 0 0 0 0.2rem #B2DFDB;
}
@media screen and (max-width: 769px) {
.p-datepicker table th, .p-datepicker table td {
padding: 0;
}
}
.p-checkbox {
width: 1.5rem;
height: 1.5rem;
@ -1645,7 +1650,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-orderlist {
flex-direction: column;
}
@ -1806,7 +1811,7 @@
color: #ffffff;
}
@media screen and (max-width: 960px) {
@media screen and (max-width: 769px) {
.p-picklist {
flex-direction: column;
}

2
src/components/calendar/Calendar.vue
View File

@ -3,7 +3,7 @@
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy" inputmode="none" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
<transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : dialog" :aria-labelledby="ariaLabelledBy">
<div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
<template v-if="!timeOnly">
<div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
<div class="p-datepicker-header">