Merge pull request #428 from fablabbcn/monolith-onboarding

Monolith onboarding

Author: timcowlishaw

Gemfile

@@ -68,7 +68,7 @@ gem 'sinatra'
 #gem 'skylight'
 gem 'stamp'
 gem "treetop"
-gem 'versionist', github: 'bploetz/versionist'
+gem 'versionist'
 gem 'webrick'
 gem 'workflow'
 gem 'workflow-activerecord'

Gemfile.lock

@@ -1,12 +1,3 @@
-GIT
-  remote: https://github.com/bploetz/versionist.git
-  revision: 80b09ce472c0661d3994eeede17b96feb636a17e
-  specs:
-    versionist (2.0.1)
-      activesupport (>= 3)
-      railties (>= 3)
-      yard (~> 0.9.20)
-
 GIT
   remote: https://github.com/presidentbeef/brakeman.git
   revision: 6af53c63feb909d19bab970aedb3b0c583073eb6
@@ -567,6 +558,10 @@ GEM
     unicode-display_width (1.8.0)
     vcr (6.1.0)
     version_gem (1.1.2)
+    versionist (2.0.1)
+      activesupport (>= 3)
+      railties (>= 3)
+      yard (~> 0.9.20)
     webmock (3.18.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
@@ -681,7 +676,7 @@ DEPENDENCIES
   turbolinks
   uglifier
   vcr
-  versionist!
+  versionist
   webmock
   webpacker
   webrick

app/assets/images/arrow_down.svg

@@ -32,3 +32,4 @@
 @import "components/devices_typeahead";
 @import "components/extra_info";
 @import "components/blurable";
+@import "components/onboarding_device";

app/assets/images/arrow_right.svg

@@ -1,6 +1,6 @@
 .devices-typeahead {
   .devices-list {
-    border-radius: 2rem !important;
+    border-radius: 0.5rem !important;
     .device-select-list-item:last-child {
       border-bottom: none !important;
     }

app/assets/images/sckit_1.png

@@ -0,0 +1,42 @@
+@keyframes blink {
+  0%, 100% { background-color: transparent; }
+  50%       { background-color: $black; }
+}
+
+.onboarding-device {
+  .progress-dot {
+    transition: border-color,background-color 0.15s ease-in-out;
+    border: $white 2px solid;
+    border-radius: 0.5rem;
+    height: 1rem;
+    &.dot-1 {
+      background-color: $white;
+    }
+    width: 1rem;
+  }
+  a:hover .progress-dot {
+    border-color: $black;
+  }
+
+  a:hover .progress-dot.dot-1 {
+    background-color: $black;
+  }
+
+  .step-2 {
+    .progress-dot {
+      border-color: $black;
+      &.dot-1 {
+        background-color: $black;
+      }
+      &.dot-2 {
+        animation: blink 2s ease-in-out infinite;
+      }
+    }
+
+  }
+  .step-3 .progress-dot {
+    background-color: $black !important;
+    animation: none !important;
+  }
+
+}

app/assets/images/sckit_2.png

@@ -1,6 +1,7 @@
 h1, h2, h3, h4, h5, h6 {
   text-transform: uppercase;
   letter-spacing: 0.0325rem;
+  text-decoration: none;
 }
 
 
@@ -26,10 +27,37 @@ body{
   color: $black;
 }
 
+.bg-primary {
+    ::selection {
+      background-color: $black !important;
+      color: $white !important;
+  }
+}
+
 body > .container {
   flex-grow: 1;
 }
 
+.bg-primary {
+  background-color: $yellow !important;
+}
+
+.bg-danger {
+  background-color: $red !important;
+}
+
+.bg-success {
+  background-color: $green !important;
+}
+
+.bg-optional {
+  background-color: $grey-200 !important;
+}
+
+code {
+  color: $black !important;
+}
+
 .border-medium {
   border-width: 2px !important;
 }
@@ -143,11 +171,11 @@ body > .container {
 }
 
 .form-control, .form-select {
-  border-radius: 2rem;
+  border-radius: 0.5rem;
   .input-group-lg & {
-    border-radius: 2rem;
+    border-radius: 0.5rem;
   }
-  padding: 0.75rem 1.5rem;
+  padding: 0.75rem 0.75rem;
   border-width: 2px;
   &:focus {
     outline: $primary solid 3px;
@@ -156,14 +184,14 @@ body > .container {
     box-shadow:inset 0px 0px 0px 1px $black
   }
   &.dropdown {
-    padding: 0.75rem 1.5rem 0.75rem 0.75rem;
+    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
   }
 }
 
 .form-check {
   padding-left: 0;
   .form-check-input {
-    margin-left: 1rem;
+    margin-left: 0;
     border-radius: 0.33rem;
     float: none;
     margin-right: 0.5rem;
@@ -209,11 +237,11 @@ input[type="file"] {
 }
 
 .form-label {
-  margin-left: 1rem;
+  margin-left: 0.5rem;
 }
 
 .form-text {
-  margin-left: 1rem;
+  margin-left: 0.5rem;
 }
 
 .form-check-label {
@@ -228,7 +256,7 @@ input[type="file"] {
   margin-left: 1rem;
 }
 
-.danger {
+.danger, .text-red {
   color: $red;
 }
 
@@ -259,6 +287,14 @@ input[type="file"] {
   }
 }
 
+.link-discreet {
+  color: $black !important;
+  text-decoration: none !important;
+  &:hover {
+    text-decoration: underline !important;
+  }
+}
+
 .inline-list {
   margin: 0;
   padding: 0;
@@ -365,3 +401,15 @@ a.subtle-link {
   }
 }
 
+
+textarea {
+  resize: none;
+}
+
+.focus-to-front:focus-within {
+  z-index: 10;
+}
+
+.no-hover-border:hover {
+  border: none !important;
+}