Improved calendar on small screens

public/themes/luna-amber/theme.css

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

public/themes/luna-green/theme.css

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

public/themes/luna-pink/theme.css

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

public/themes/nova-accent/theme.css

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

public/themes/nova-alt/theme.css

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

public/themes/nova-vue/theme.css

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

public/themes/nova/theme.css

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

public/themes/rhea/theme.css

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

public/themes/saga-blue/theme.css

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

public/themes/saga-cyan/theme.css

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

public/themes/saga-deeppurple/theme.css

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

public/themes/saga-green/theme.css

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

public/themes/saga-indigo/theme.css

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

public/themes/saga-orange/theme.css

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

public/themes/saga-purple/theme.css

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

public/themes/saga-teal/theme.css

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

src/components/calendar/Calendar.vue

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