Merge pull request #991 from City-of-Helsinki/hotfix/VAR-159-fix-date…

…-picker �[Hotfix] VAR-159 | Datepicker width getting too small
City-of-Helsinki · Aug 28, 2019 · 5190d6d · 5190d6d
2 parents 63688d1 + a7e5d34
commit 5190d6d
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 0.4.2
+  **HOTFIX**
+  ```
+  - Fix various styling issue for date-picker [#991](https://github.com/City-of-Helsinki/varaamo/pull/991)
+  ```
+
 # 0.4.1
   **HOTFIX**
   ```

diff --git a/app/shared/availability-view/_availability-view.scss b/app/shared/availability-view/_availability-view.scss
@@ -83,6 +83,7 @@
     input {
       background: none;
       color: white;
+      border: none;
       cursor: pointer;
       text-align: left;
       width: 110px;

diff --git a/app/shared/date-picker/_date-picker.scss b/app/shared/date-picker/_date-picker.scss
@@ -17,17 +17,17 @@
 
   input {
     width: 100%;
-    border: 1px solid $input-border;
-    padding: 5px;
   }
-  
+
   .date-picker-overlay {
     background-color: white;
     position: absolute;
     z-index: 100;
     border: solid 2px $brand-primary;;
     padding: 10px;
-    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .DayPicker {
@@ -36,19 +36,15 @@
     max-width: 400px;
     margin: 0 auto;
     width: 100%;
-
-    &:focus {
-      outline: none;
-    }
   }
-  
+
   .DayPicker-NavBar {
     position: absolute;
     display: flex;
     width: 100%;
     justify-content: space-between;
   }
-  
+
   .DayPicker-Caption {
     height: auto;
     font-weight: 600;
@@ -57,28 +53,28 @@
     text-transform: capitalize;
     text-align: center;
   }
-  
+
   .DayPicker-NavButton--prev {
     @include icon-angle-left($black);
     width: $line-height-computed;
     height: $line-height-computed;
     position: static;
     margin-right: 0;
   }
-  
+
   .DayPicker-NavButton--next {
     @include icon-angle-right($black);
     width: $line-height-computed;
     height: $line-height-computed;
     position: static;
   }
-  
+
   .DayPicker-Month {
     margin: 0;
     border-collapse: separate;
     width: 100%;
   }
-  
+
   .DayPicker-Day {
     border: 2px solid $white;
     margin: 1px;
@@ -87,10 +83,7 @@
     background-color: $light-gray;
     border-radius: 0;
     font-size: 1.6rem;
-
-    &:focus {
-      outline: none;
-    }
+
     &--available:not(.DayPicker-Day--disabled) {
       background-color: $light-gray;
       &.DayPicker-Day--selected {
@@ -111,16 +104,16 @@
       background-color: $dark-gray;
     }
   }
-  
+
   .DayPicker-Day--today {
     border: 2px solid $black;
   }
-  
+
   .DayPicker-WeekdaysRow {
     padding: 0.2rem;
     font-size: 1.4rem;
   }
-  
+
   .DayPicker-Weekdays {
     text-transform: uppercase;
     font-weight: normal;
@@ -130,11 +123,11 @@
       vertical-align: text-top;
     }
   }
-  
+
   .DayPicker-Weekday {
     color: $black;
   }
-  
+
   .DayPicker-WeekNumber {
     font-size: 14px;
   }

diff --git a/app/shared/recurring-reservation-controls/_recurring-reservation-controls.scss b/app/shared/recurring-reservation-controls/_recurring-reservation-controls.scss
@@ -6,4 +6,23 @@
     white-space: nowrap;
     overflow: hidden;
   }
+
+  .date-picker {
+    height: $input-height-base;
+    display: flex;
+    justify-items: center;
+    flex-direction: column;
+    border: none;
+
+    input {
+      border: 2px solid $black;
+      flex-grow: 1;
+      padding: 0 5px;
+    }
+  }
+
+  .date-picker-overlay {
+    border-top: none;
+    width: 100%;
+  }
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "varaamo",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "repository": {
     "type": "git",
     "url": "https://github.com/City-of-Helsinki/varaamo"