Merge pull request #23 from sharetribe/fix-ui-booking-time-form

Fix ui booking time form
sharetribe · Oct 24, 2019 · febb760 · febb760
2 parents 5be0005 + 0d16997
commit febb760
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,8 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2019-XX-XX
 
+- [fix] BookingTimeForm: UI improvements to date and time pickers.
+  [#23](https://github.com/sharetribe/ftw-time/pull/23)
 - [fix] Make the time selects fixed with on `EditListingPage` and add hover color to remove entry
   icon. [#22](https://github.com/sharetribe/ftw-time/pull/22)
 - [fix] BookingTimeForm: do not pick exclusive end date from selected timeslot

diff --git a/src/components/FieldDateInput/DateInput.css b/src/components/FieldDateInput/DateInput.css
@@ -260,6 +260,10 @@
     background-position: 0 8px;
     padding-left: 24px;
 
+    &:hover {
+      border-bottom-color: var(--matterColorNegative);
+    }
+
     @media (--viewportMedium) {
       padding: 4px 0 9px 24px;
       border-bottom-width: 3px;

diff --git a/src/components/FieldSelect/FieldSelect.css b/src/components/FieldSelect/FieldSelect.css
@@ -17,6 +17,8 @@
 
   &:disabled {
     border-bottom-color: var(--matterColorNegative);
+    color: var(--matterColorNegative);
+    cursor: default;
   }
 }
 

diff --git a/src/forms/BookingTimeForm/FieldDateAndTimeInput.css b/src/forms/BookingTimeForm/FieldDateAndTimeInput.css
@@ -6,19 +6,22 @@
 }
 
 .formRow {
-  /* This container uses flexbox layout */
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-
   /* parent aka root is flexbox, this container takes all available space */
   flex-grow: 1;
   flex-shrink: 0;
+
+  /* This container uses flexbox layout */
+  display: flex;
+  justify-content: space-between;
   flex-wrap: wrap;
 
-  @media (--viewportMobile) {
+  width: 100%;
+  margin-top: 30px;
+
+  @media (--viewportMedium) {
     flex-wrap: nowrap;
     padding: 0;
+    margin-top: 24px;
   }
 }
 
@@ -27,10 +30,17 @@
   align-items: flex-end;
   position: relative;
   width: 100%;
-  margin-top: 24px;
+
+  &:nth-child(2n) {
+    margin-top: 12px;
+  }
 
   @media (--viewportMedium) {
     width: calc(50% - 12px);
+
+    &:nth-child(2n) {
+      margin-top: unset;
+    }
   }
 }
 
@@ -52,7 +62,7 @@
     content: '';
     display: block;
     position: absolute;
-    bottom: 17px;
+    bottom: 13px;
     left: 24px;
     background-image: url('data:image/svg+xml;utf8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 -3)" fill="none" fill-rule="evenodd"><circle stroke="%234A4A4A" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" cx="6" cy="10" r="6"/><g transform="translate(2 6)" fill="%234A4A4A"><rect x="3.5" width="1" height="5" rx=".5"/><rect transform="rotate(90 2.5 4.5)" x="2" y="2.5" width="1" height="4" rx=".5"/></g></g></svg>');
     background-size: 12px 12px;
@@ -66,6 +76,7 @@
 
     &::after {
       left: 0;
+      bottom: 17px;
     }
   }
 }
@@ -77,7 +88,7 @@
     content: '';
     display: block;
     position: absolute;
-    bottom: 17px;
+    bottom: 13px;
     left: 24px;
     background-image: url('data:image/svg+xml;utf8,<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><g transform="translate(1 -3)" fill="none" fill-rule="evenodd"><circle stroke="%23E6E6E6" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round" cx="6" cy="10" r="6"/><g transform="translate(2 6)" fill="%23E6E6E6"><rect x="3.5" width="1" height="5" rx=".5"/><rect transform="rotate(90 2.5 4.5)" x="2" y="2.5" width="1" height="4" rx=".5"/></g></g></svg>');
     background-size: 12px 12px;
@@ -87,6 +98,7 @@
   @media (--viewportMedium) {
     &::after {
       left: 0;
+      bottom: 17px;
     }
   }
 }