Merge pull request #41 from timekit-io/today-button-mobile-fix

New positions for today button and displayname in small size mode
timekit-io · Dec 2, 2015 · a15b361 · a15b361
2 parents f6e0e7d + 911d5e6
commit a15b361
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 6 deletions.
diff --git a/src/main.js b/src/main.js
@@ -154,6 +154,7 @@ function TimekitBooking() {
       loading: true
     }));
 
+    rootTarget.addClass('has-timezonehelper');
     rootTarget.append(timezoneHelperTarget);
 
     var args = {
@@ -225,9 +226,9 @@ function TimekitBooking() {
     if (rootWidth < 480) {
       view = 'basicDay';
       height = 346;
-      rootTarget.addClass('bookingjs-small');
+      rootTarget.addClass('is-small');
     } else {
-      rootTarget.removeClass('bookingjs-small');
+      rootTarget.removeClass('is-small');
     }
 
     if (config.bookingFields.comment.enabled) {  height += 84; }
@@ -261,6 +262,7 @@ function TimekitBooking() {
       image: config.avatar
     }));
 
+    rootTarget.addClass('has-avatar');
     rootTarget.append(avatarTarget);
 
   };
@@ -273,6 +275,7 @@ function TimekitBooking() {
       name: config.name
     }));
 
+    rootTarget.addClass('has-displayname');
     rootTarget.append(displayNameTarget);
 
   };

diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -37,6 +37,23 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     opacity: 1;
   }
 
+  &-calendar {
+
+    .fc-toolbar {
+
+      .is-small.has-avatar.has-displayname & {
+        padding-bottom: 24px;
+      }
+
+      > .fc-right > button.fc-today-button {
+        .is-small & {
+          position: absolute;
+          left: 15px;
+        }
+      }
+    }
+  }
+
   // Timezone Helper
 
   &-timezonehelper {
@@ -69,12 +86,21 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     z-index: 40;
     background-color: white;
 
+    .is-small & {
+      top: -40px;
+    }
+
     img {
       max-width: 100%;
       vertical-align: middle;
       display: inline-block;
       width: 80px;
       height: 80px;
+
+      .is-small & {
+        width: 70px;
+        height: 70px;
+      }
     }
   }
 
@@ -85,6 +111,15 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     padding: 15px 20px;
     color: $textColor;
     font-weight: 600;
+
+    .is-small & {
+      text-align: center;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .is-small.has-avatar & {
+      top: 28px;
+    }
   }
 
   // Book page
@@ -125,7 +160,7 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
       margin-top: 90px;
       margin-bottom: 20px;
 
-      .bookingjs-small & {
+      .is-small & {
         font-size: 24px;
         margin-top: 60px;
         margin-bottom: 15px;
@@ -138,7 +173,7 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
       font-weight: 400;
       margin-bottom: 70px;
 
-      .bookingjs-small & {
+      .is-small & {
         font-size: 15px;
         margin-bottom: 30px;
       }
@@ -157,7 +192,7 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     margin: 0 auto;
     text-align: center;
 
-    .bookingjs-small & {
+    .is-small & {
       width: 90%;
     }
 
@@ -181,7 +216,7 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
       transition: opacity 0.3s ease;
       line-height: normal;
 
-      .bookingjs-small & {
+      .is-small & {
         padding: 22px 10px;
       }