From 1e61eb3323d75ff82fa463ca5ab25285ddc8b3c4 Mon Sep 17 00:00:00 2001
From: Lasse Boisen Andersen <la@laander.com>
Date: Wed, 2 Dec 2015 12:43:48 +0100
Subject: [PATCH 1/2] new positions for today button and displayname in mobile
 mode

---
 src/main.js          |  7 +++++--
 src/styles/main.scss | 42 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/main.js b/src/main.js
index ff1dc1a2..1e8851c5 100644
--- a/src/main.js
+++ b/src/main.js
@@ -98,6 +98,7 @@ function TimekitBooking() {
       loading: true
     }));
 
+    rootTarget.addClass('has-timezonehelper');
     rootTarget.append(timezoneHelperTarget);
 
     var args = {
@@ -169,9 +170,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; }
@@ -205,6 +206,7 @@ function TimekitBooking() {
       image: config.avatar
     }));
 
+    rootTarget.addClass('has-avatar');
     rootTarget.append(avatarTarget);
 
   };
@@ -217,6 +219,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
index d6b68568..d6a78f2b 100644
--- 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,14 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     padding: 15px 20px;
     color: $textColor;
     font-weight: 600;
+
+    .is-small & {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .is-small.has-avatar & {
+      top: 28px;
+    }
   }
 
   // Book page
@@ -125,7 +159,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 +172,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 +191,7 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     margin: 0 auto;
     text-align: center;
 
-    .bookingjs-small & {
+    .is-small & {
       width: 90%;
     }
 
@@ -181,7 +215,7 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
       transition: opacity 0.3s ease;
       line-height: normal;
 
-      .bookingjs-small & {
+      .is-small & {
         padding: 22px 10px;
       }
 

From 911d5e63a64671be7af5854e55aadb8f9cc06e4c Mon Sep 17 00:00:00 2001
From: Lasse Boisen Andersen <la@laander.com>
Date: Wed, 2 Dec 2015 12:50:00 +0100
Subject: [PATCH 2/2] fixed edge-case with long displayname

---
 src/styles/main.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/styles/main.scss b/src/styles/main.scss
index d6a78f2b..26bd156c 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -113,8 +113,9 @@ $fontFamily:        'Open Sans', Helvetica, Tahoma, Arial, sans-serif;
     font-weight: 600;
 
     .is-small & {
-      left: 50%;
-      transform: translateX(-50%);
+      text-align: center;
+      width: 100%;
+      box-sizing: border-box;
     }
     .is-small.has-avatar & {
       top: 28px;