Set mobile/desktop responsive behaviors for Date and Time pickers (CF…

…M-107)
COmanage · Mar 31, 2022 · ec26862 · ec26862
1 parent 7e472d8
commit ec26862
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css
@@ -1085,9 +1085,6 @@ ul.form-list li.field-stack textarea {
   border: 1px dotted var(--cmg-color-black);
   box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); /* override Duet to be same as Bootstrap */
 }
-.duet-date__dialog {
-  left: -3em;
-}
 table.duet-date__table tr th:first-child,
 table.duet-date__table tr td:first-child,
 table.duet-date__table th,
@@ -1121,8 +1118,7 @@ ul.fields li.fields-datepicker .field-info {
 .cm-time-picker-panel {
   position: absolute;
   z-index: 100;
-  right: -100%;
-  display: flex;
+  right: 0;
   width: auto;
   background-color: white;
   border: 1px solid var(--cmg-color-lightgray-006);
@@ -1138,13 +1134,15 @@ ul.fields li.fields-datepicker .field-info {
 }
 .cm-time-picker-vals ul {
   display: grid;
-  grid-template-columns: repeat(12,40px);
-  grid-template-rows: repeat(2,40px);
+  /* Mobile view is long. The grid templates are reversed for desktop. */
+  grid-template-columns: repeat(6,40px);
+  grid-template-rows: repeat(4,40px);
   padding: 0;
   align-content: center;
 }
 .cm-time-picker-minutes .cm-time-picker-vals ul {
-  grid-template-columns: repeat(2,40px);
+  grid-template-columns: repeat(4,40px);
+  grid-template-rows: repeat(1,40px);
 }
 ul.form-list .cm-time-picker-vals li {
   display: block;

diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css
@@ -116,6 +116,10 @@
   #pagination.with-pagination-elements .paginationCounter {
     margin-top: 2px;
   }
+  /* DATE / TIME PICKER */
+  .duet-date__dialog {
+    left: -20em;
+  }
 }
 
 /* MEDIUM - Primary breakpoint */
@@ -276,7 +280,19 @@
 /**************************************************************************************************************/
 /* Medium devices (desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
-
+  /* DATE / TIME PICKER */
+  .cm-time-picker-panel {
+    right: -100%;
+    display: flex;
+  }
+  .cm-time-picker-vals ul {
+    grid-template-columns: repeat(12, 40px);
+    grid-template-rows: repeat(2, 40px);
+  }
+  .cm-time-picker-minutes .cm-time-picker-vals ul {
+    grid-template-columns: repeat(2,40px);
+    grid-template-rows: repeat(2,40px);
+  }
 }
 
 /* EXTRA LARGE */