Using bootstrap 4 and related UI refresh

app/components/form-navigation-buttons.js

@@ -41,7 +41,7 @@ export default Component.extend({
     let renderPrevButton = this.renderPrevButton;
 
     if (renderPrevButton) {
-      return ['col-xs-6', 'col-md-8'];
+      return ['col-6', 'col-md-8'];
     } else {
       return ['col-md-8', 'col-md-offset-4'];
     }

app/index.html

@@ -24,18 +24,18 @@
     {{content-for "body-footer"}}
 
     <noscript>
-      <div class="container-fluid">
-        <div id="header">
-          <h1 class="logo">Croodle</h1>
-        </div>
-        <div id="content">
-          <div class="box">
-            <h1>Please enable JavaScript</h1>
-            <p>Croodle requires JavaScript. But JavaScript is currently disabled in your browser settings or your browser does not support JavaScript. Therefore you can't use Croodle.</p>
-            <h2><a href="http://www.enable-javascript.com/">Click here for instructions on how to enable JavaScript.</a></h2>
-          </div>
+      <nav class="cr-navbar navbar navbar-dark">
+        <h1 class="cr-logo">Croodle</h1>
+      </nav>
+
+      <main role="main" class="container cr-main">
+        <div class="alert alert-danger" role="alert">
+          <h2>Please enable JavaScript!</h2>
+          <p>JavaScript is currently disabled in your browser settings or your browser does not support JavaScript.</p>
+          <p>Croodle requires JavaScript. Therefore to use Croodle, you must first enable JavaScript.</p>
+          <a class="btn btn-outline-dark btn-lg" href="http://www.enable-javascript.com/">Click here for instructions on how to enable JavaScript.</a></h2>
         </div>
-      </div>
+      </main>
     </noscript>
   </body>
 </html>

app/locales/de/translations.js

@@ -98,6 +98,7 @@ export default {
   'poll.input.newUserName.label': 'Name',
   'poll.input.newUserName.placeholder': 'Dein Name',
   'poll.link.copied': 'Link in die Zwischenablage kopiert.',
+  'poll.link.copy-label': 'Copy link to clipboard',
   'poll.link.selected': 'Link markiert. Drücke Steuerung + C zum Kopieren.',
   'poll.modal.timezoneDiffers.title': 'In welcher Zeitzone sollen die Daten angezeigt werden?',
   'poll.modal.timezoneDiffers.body': 'Die Umfrage wurde für eine Zeitzone angelegt, die von deiner lokalen Zeit abweicht. In welcher Zeitzone sollen die Daten angezeigt werden?',

app/locales/en/translations.js

@@ -98,6 +98,7 @@ export default {
   'poll.input.newUserName.label': 'Name',
   'poll.input.newUserName.placeholder': 'Your Name',
   'poll.link.copied': 'Link copied to clipboard.',
+  'poll.link.copy-label': 'Copy link to clipboard',
   'poll.link.selected': 'Link selected. Press Command+C to copy.',
   'poll.modal.timezoneDiffers.title': 'In which time zones should the dates be presented?',
   'poll.modal.timezoneDiffers.body': 'The poll was created for a time zone which differs from your local time. In which time zones should the dates be presented?',

app/styles/_bootstrap-tweaking.scss

@@ -0,0 +1,24 @@
+// We don't want the extra space added to jumbotron at larger screen sizes.
+.jumbotron {
+  @include media-breakpoint-up(sm) {
+    padding: $jumbotron-padding $jumbotron-padding;
+  }
+}
+
+.sr-only {
+  padding: 0 !important;
+}
+
+.tab-pane {
+  padding-top: map-get($spacers, 4);
+}
+
+.navbar-dark .custom-select {
+  background-color: gray("900");
+  color: gray("500");
+  border: $custom-select-border-width solid gray("500");
+}
+
+h3, .h3 {
+  margin-top: map-get($spacers, 5);
+}

app/styles/_calendar.scss

@@ -1,16 +1,28 @@
 @import "ember-power-calendar";
 
-@media only screen and (max-width: $screen-sm-min) {
+@include media-breakpoint-down(sm) {
   .ember-power-calendar {
-    @include ember-power-calendar($cell-size: 63px);
+    @include ember-power-calendar(30px);
+    width: 100%;
+  }
+  .ember-power-calendar .ember-power-calendar-day,
+  .ember-power-calendar .ember-power-calendar-weekday {
+    max-width: none;
+    width: auto;
+    max-height: none;
+    height: 10vw;
+  }
+  .ember-power-calendar .ember-power-calendar-weekdays,
+  .ember-power-calendar .ember-power-calendar-week {
+    height: calc(10vw + 2px);
   }
 }
 
-@media only screen and (min-width: $screen-sm-min) {
+@include media-breakpoint-up(sm) {
   .ember-power-calendar {
     @include ember-power-calendar($cell-size: 47px);
 
-    float:left;
+    float: left;
 
     &:first-child {
       margin-right: 10px;
@@ -22,13 +34,13 @@
   }
 }
 
-@media only screen and (min-width: $screen-md-min) {
+@include media-breakpoint-up(md) {
   .ember-power-calendar {
     @include ember-power-calendar($cell-size: 40px);
   }
 }
 
-@media only screen and (min-width: $screen-lg-min) {
+@include media-breakpoint-up(lg) {
   .ember-power-calendar {
     @include ember-power-calendar($cell-size: 50px);
   }

app/styles/_generic-croodle-styles.scss

@@ -0,0 +1,19 @@
+.cr-navbar {
+  background: map-get($theme-colors, dark);
+}
+
+.cr-logo {
+  font-size: $font-size-base;
+  margin-bottom: 0;
+  // This is needed for cases when the h1 does not contain a link, like when JS
+  // is disabled.
+  color: $body-bg;
+}
+
+.cr-main {
+  padding-top: map-get($spacers, 5);
+}
+
+.cr-claim {
+  margin-bottom: map-get($spacers, 4);
+}

app/styles/_option-menu.scss

@@ -0,0 +1,7 @@
+.cr-option-menu {
+  margin-top: map-get($spacers, 2);
+
+  &__button {
+    margin-right: map-get($spacers, 2);
+  }
+}

app/styles/_poll-link.scss

@@ -0,0 +1,14 @@
+.cr-poll-link {
+  &__link {
+    position: relative;
+    overflow-x: scroll;
+    background: gray("200");
+    padding: map-get($spacers, 3) map-get($spacers, 3) 3em map-get($spacers, 3);
+  }
+
+  &__copy-btn {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}

app/styles/_steps.scss

@@ -0,0 +1,98 @@
+$steps-border-width: 5px;
+
+.cr-steps-top-nav {
+  margin-bottom: map-get($spacers, 5);
+
+  flex-direction: column;
+  width: 100%;
+
+  @include media-breakpoint-up(md) {
+    flex-direction: row;
+    width: auto;
+  }
+
+  &__button {
+    text-align: left;
+    border-width: 0;
+    border-left-width: $steps-border-width;
+
+    &:not(:first-child) {
+      margin-left: 0 !important;
+    }
+
+    @include media-breakpoint-up(md) {
+      text-align: inherit;
+      border-left: 0;
+      border-right: 0;
+    }
+    &:not(:disabled) {
+      border-left-color: gray("300");
+      @include media-breakpoint-up(md) {
+        border-bottom: $steps-border-width solid gray("300");
+      }
+    }
+    &.is-active {
+      border-left-color: theme-color-level("primary", 2);
+      @include media-breakpoint-up(md) {
+        border-bottom: $steps-border-width solid theme-color-level("primary", 2);
+      }
+    }
+  }
+}
+
+$bottom-nav-height: 5.5em;
+
+.cr-form-wrapper {
+  padding-bottom: $bottom-nav-height;
+  @include media-breakpoint-up(md) {
+    padding-bottom: 0;
+  }
+}
+
+.cr-steps-bottom-nav {
+  margin-top: map-get($spacers, 4);
+  padding-top: map-get($spacers, 4);
+  padding-bottom: map-get($spacers, 4);
+  border-top: 2px solid gray("100");
+  background: $body-bg;
+  height: $bottom-nav-height;
+  z-index: 9;
+  position: fixed;
+  bottom: 0;
+  left: $grid-gutter-width / 2;
+  right: $grid-gutter-width / 2;
+
+  @include media-breakpoint-up(md) {
+    margin-top: map-get($spacers, 5);
+    padding-top: map-get($spacers, 5);
+    padding-bottom: map-get($spacers, 5);
+    background: transparent;
+    position: static;
+    bottom: auto;
+    left: auto;
+    right: 0;
+  }
+
+  &__button {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    @include media-breakpoint-up(md) {
+      width: auto;
+    }
+  }
+  &__prev-button .cr-steps-bottom-nav__label {
+    margin-left: map-get($spacers, 3);
+  }
+  &__next-button .cr-steps-bottom-nav__label {
+    margin-right: map-get($spacers, 3);
+  }
+
+  &__next-button {
+    justify-content: flex-end;
+    @include media-breakpoint-up(md) {
+      justify-content: normal;
+    }
+  }
+}

app/styles/_variable-overrides.scss

@@ -0,0 +1,9 @@
+$icon-font-path: '../open-iconic/font/fonts/';
+
+$enable-rounded: false;
+
+$font-family-base: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+
+$jumbotron-padding: 2rem;
+
+$btn-disabled-opacity: 0.45;