jelhan · jelhan · Jun 7, 2019 · Jun 4, 2019 · Jun 4, 2019 · Jun 4, 2019
diff --git a/app/components/form-navigation-buttons.js b/app/components/form-navigation-buttons.js
@@ -41,9 +41,9 @@ 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'];
+      return ['col-md-8', 'offset-md-4'];
     }
   }),
 

diff --git a/app/index.html b/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>
         </div>
-      </div>
+      </main>
     </noscript>
   </body>
 </html>
diff --git a/app/locales/ca/translations.js b/app/locales/ca/translations.js
@@ -98,6 +98,7 @@ export default {
   'poll.input.newUserName.label': 'Nom',
   'poll.input.newUserName.placeholder': 'El teu nom',
   'poll.link.copied': 'Enllaç copiat al porta-retalls.',
+  'poll.link.copy-label': 'Copia l\'enllaç al porta-retalls',
   'poll.link.selected': 'Enllaç seleccionat. Premeu Command + C per copiar.',
   'poll.modal.timezoneDiffers.title': 'En quines zones horàries s\'han de presentar les dates?',
   'poll.modal.timezoneDiffers.body': 'L\'enquesta es va crear per a una zona horària diferent de la vostra hora local. En quines zones horàries s\'han de presentar les dates?',

diff --git a/app/locales/de/translations.js b/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': 'Kopiere Link in die Zwischenablage',
   '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?',

diff --git a/app/locales/en/translations.js b/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?',

diff --git a/app/locales/es/translations.js b/app/locales/es/translations.js
@@ -98,6 +98,7 @@ export default {
   'poll.input.newUserName.label': 'Nombre',
   'poll.input.newUserName.placeholder': 'Tu nombre',
   'poll.link.copied': 'Enlace copiado al portapapeles.',
+  'poll.link.copy-label': 'Copiar enlace al portapapeles',
   'poll.link.selected': 'Enlace seleccionado. Presiona Comando+C para copiarlo.',
   'poll.modal.timezoneDiffers.title': '¿Que zona horaria deseas utilizar para mostrar los datos?',
   'poll.modal.timezoneDiffers.body': 'La encuesta ha sido configurada para una zona horaria distinta de tu hora local. ¿Con qué zona horaria debería mostrarse la información?',

diff --git a/app/locales/it/translations.js b/app/locales/it/translations.js
@@ -98,6 +98,7 @@ export default {
   'poll.input.newUserName.label': 'Nome',
   'poll.input.newUserName.placeholder': 'Il tuo nome',
   'poll.link.copied': 'Il link è stato copiato.',
+  'poll.link.copy-label': 'Copia il link negli appunti',
   'poll.link.selected': 'Link selezionato. Preme Command+C per copiarlo.',
   'poll.modal.timezoneDiffers.title': 'In quale fuso orario devono essere presentate le date?',
   'poll.modal.timezoneDiffers.body': 'Il sondaggio è stato creato per un fuso orario diverso dal tuo. In quali orari devono essere presentate le date?',

diff --git a/app/styles/_bootstrap-tweaking.scss b/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);
+}
diff --git a/app/styles/_calendar.scss b/app/styles/_calendar.scss
@@ -1,35 +1,20 @@
 @import "ember-power-calendar";
 
-@media only screen and (max-width: $screen-sm-min) {
-  .ember-power-calendar {
-    @include ember-power-calendar($cell-size: 63px);
-  }
+.ember-power-calendar {
+  @include ember-power-calendar(30px);
+  width: 100%;
 }
-
-@media only screen and (min-width: $screen-sm-min) {
-  .ember-power-calendar {
-    @include ember-power-calendar($cell-size: 47px);
-
-    float:left;
-
-    &:first-child {
-      margin-right: 10px;
-    }
-  }
-
-  .ember-power-calendar ~ .help-block {
-    clear: both;
-  }
+.ember-power-calendar .ember-power-calendar-day,
+.ember-power-calendar .ember-power-calendar-weekday {
+  max-width: none;
+  width: auto;
+  max-height: none;
+  height: auto;
+  margin: 1px;
 }
-
-@media only screen and (min-width: $screen-md-min) {
-  .ember-power-calendar {
-    @include ember-power-calendar($cell-size: 40px);
-  }
-}
-
-@media only screen and (min-width: $screen-lg-min) {
-  .ember-power-calendar {
-    @include ember-power-calendar($cell-size: 50px);
-  }
+.ember-power-calendar .ember-power-calendar-weekdays,
+.ember-power-calendar .ember-power-calendar-week {
+  height: 3em;
+  display: flex;
+  justify-content: space-around;
 }
diff --git a/app/styles/_generic-croodle-styles.scss b/app/styles/_generic-croodle-styles.scss
@@ -0,0 +1,26 @@
+.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);
+}
+
+.cr-hide-on-mobile {
+  display: none;
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
+}
diff --git a/app/styles/_option-menu.scss b/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);
+  }
+}
diff --git a/app/styles/_poll-link.scss b/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;
+  }
+}
diff --git a/app/styles/_steps.scss b/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;
+    }
+  }
+}
diff --git a/app/styles/_variable-overrides.scss b/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;