mvpkit 1.1.2 → 2.0.0

data/project/Procfile

@@ -1,3 +1,3 @@
 web:    bundle exec puma -C config/puma.rb
-assets: node_modules/.bin/webpack --progress --colors --watch
+webpack: bin/webpack-dev-server
 worker: bundle exec sidekiq

data/project/README.md

@@ -1,116 +1,2 @@
-# Installation
-
-Install the mvp gem:
-
-```
-gem install mvpkit
-```
-
-Then setup your project:
-
-```
-mvp new PROJECT
-```
-
-# Setup
-
-## `.env`
-
-Set your `.env` file up with your own variables
-
-```
-ROLLBAR_CLIENT_ACCESS_TOKEN=
-ROLLBAR_SERVER_ACCESS_TOKEN=
-SEGMENT_WRITE_KEY=
-FACEBOOK_TRACKING_ID=
-CANONICAL_HOST=
-GOOGLE_ANALYTICS_ID=
-HOTJAR_ID=
-AWS_ACCESS_KEY_ID=
-AWS_SECRET_ACCESS_KEY=
-AWS_S3_BUCKET=
-SPOOF_IP=true
-```
-
-## Heroku
-
-To setup deployment for heroku, first create the project:
-
-```
-heroku create PROJECT
-```
-
-You're probably going to want Database backups.  This will let you use `rake db:import`
-
-```
-heroku pg:backups capture
-```
-
-You're also going to need to setup the buildpacks
-
-```
-heroku buildpacks:set heroku/ruby
-heroku buildpacks:add --index 1 heroku/nodejs
-```
-
-Add a scheduled task to update your sitemaps: `rake sitemap:create_upload_and_ping`
-
-# SEO
-
-## Meta Properties
-
-All meta fields are controlled via the `page` object.  Set attributes on this in order to get meta properties populated.  This is best done at the controller level.
-
-### Available Properties
-
-|Property|Description|Inheritance|
-|---|---|---|
-|`page.title`|   |   |
-|`page.description`|   |   |
-|`page.author`|   |   |
-|`page.og_url`|   |   |
-|`page.og_type`|   |   |
-|`page.og_title`|   |`page.title`|
-|`page.og_description`|   |`page.description`|
-|`page.og_image`|   |   |
-|`page.twitter_card`|   |   |   |
-
-## Sitemaps
-
-### Setup
-
-Edit `config/sitemap.rb` with your own custom routes.
-
-### Updating
-
-Run `sitemap:refresh` in production to update Bing/Google with changes to the sitemap.  
-
-Put this in a `cron` task or in Heroku Scheduler.
-
-# Helpers
-
-## Geolocation
-
-By default, Geolocation of the session will automatically happen.  
-
-You can access the session's geolocation in `request.location`.  
-
-To test geolocation locally, set `SPOOF_IP=true` in your `.env`.
-
-For more info see [Geocoder](https://github.com/alexreisner/geocoder).
-
-## Bootstrap
-
-### `row_groups_of`
-
-Makes a series of row/col `div` elements based in group count.
-
-```
-<% row_groups_of(3, [1,2,3,4,5,6,7,8,9]) do |i| %>
-  <div class="panel panel-default">
-    <div class="panel-heading">
-      <h2 class="text-center"><%= i %></h2>
-    </div>
-  </div>
-<% end %>
-```
+Automatically generated file,
+see [mvpkit](http:github.com/ian/mvpkit) for more information.

data/project/app/assets/javascripts/application.js

@@ -1,9 +1 @@
 //= require cable
-//= require pack-compiled
-//  require jquery_ujs
-//= require rails.validations
-//= require rails.validations.simple_form
-//= require templates
-//
-//  require jquery.turbolinks
-//= require turbolinks

data/project/app/assets/stylesheets/application.scss

@@ -1,4 +1,10 @@
-//= require pack-compiled
+@import "init/variables";
 
-@import "font-awesome-sprockets";
-@import "font-awesome";
+@import 'font-awesome/scss/font-awesome';
+@import "init/bootstrap";
+@import "bootstrap/scss/bootstrap";
+
+@import "init/reset";
+
+@import "elements/*";
+@import "treatments/*";

data/project/app/assets/stylesheets/elements/alerts.scss

@@ -0,0 +1,10 @@
+.alert {
+  text-align: center;
+  font-family: 'Adelle-Sans-Bold', sans-serif;
+  font-weight: bold;
+  color: $color-black;
+  a {
+    color: $color-black !important;
+    text-decoration: underline;
+  }
+}

data/project/app/assets/stylesheets/elements/badges.scss

@@ -0,0 +1,16 @@
+.badge {
+  padding: 0.5em 0.6em 0.25em 0.6em;
+
+  &.badge-outline-success {
+    color: $brand-success;
+    border: 1px solid $brand-success;
+  }
+  &.badge-outline-warning {
+    color: $brand-warning;
+    border: 1px solid $brand-warning;
+  }
+  &.badge-outline-danger {
+    color: $brand-danger;
+    border: 1px solid $brand-danger;
+  }
+}

data/project/app/assets/stylesheets/elements/buttons.scss

@@ -0,0 +1,107 @@
+@import 'init/variables';
+
+.btn {
+  box-shadow: 0 1px 2px 0 rgba(106, 116, 135, 0.1);
+  padding: 8px 15px 5px 15px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.btn-lg {
+    padding: 9px 15px 5px 15px
+  }
+
+  &.btn-sm {
+    padding: 5px 5px 3px 5px
+  }
+
+  &.btn-wite {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+  &.btn-secondary {
+    border: solid 1px $color-grey;
+    color: $color-grey-dark;
+    background-color: $color-grey-lightest;
+
+    .fa {
+      color: $color-grey;
+    }
+
+    &:hover {
+      background-color: darken($color-grey-lightest, 5%);
+    }
+
+    &:focus,
+    &:active {
+     outline: none !important;
+     box-shadow: 0 1px 2px 0 rgba(106, 116, 135, 0.1);
+    }
+
+    &.selected {
+      color: $color-grey-lightest;
+      background-color: $color-grey;
+    }
+  }
+
+  &.has-error {
+    border: 1px solid $color-red !important;
+    color:  $color-red !important;
+    background-color: #ffebeb !important;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba($color-red, 0.5) !important;
+    }
+
+    .fa {
+      color: $color-red !important;
+    }
+  }
+
+  @each $name, $val in $colors {
+    &.btn-#{"" + $name} {
+      @include button-variant(#FFF, $val, $color-grey-light);
+      .fa { color: #fff; }
+    }
+
+    &.btn-outline-#{"" + $name} {
+      @include button-outline-variant($val);
+      border: 1px solid $val;
+    }
+
+    &:active,
+    &.active {
+      &.btn-active-#{"" + $name} {
+        color: #fff;
+        background-color: $val;
+        background-image: none;
+        // border-color: $active-border;
+        // @include box-shadow($btn-active-box-shadow);
+
+        .fa { color: #fff; }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: default;
+  }
+
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    @include media-breakpoint-up($breakpoint) {
+      &.btn-block-#{$breakpoint}-up { width: 100%; display: block }
+    }
+
+    @include media-breakpoint-down($breakpoint) {
+      &.btn-block-#{$breakpoint}-down { width: 100%; display: block }
+    }
+  }
+}
+
+.btn-group {
+  .btn {
+    padding: 8px 10px 5px 10px;
+  }
+}

data/project/app/assets/stylesheets/elements/cards.scss

@@ -0,0 +1,68 @@
+@import 'init/variables';
+
+.card {
+  border-radius: $border-radius;
+  background-color: #ffffff;
+	box-shadow: 0 1px 7px 0 rgba(180, 189, 195, 0.27);
+	border: 1px solid $color-grey;
+
+  .card-title {
+    margin-bottom: 0;
+  }
+
+  &.card-hover {
+    &:hover {
+      cursor: pointer;
+      background-color: $color-grey-lightest;
+    }
+  }
+
+  .card-block {
+    padding: 20px;
+  }
+
+  &.card-success {
+    box-shadow: 0 1px 7px 0 rgba($color-green, 0.27);
+  	border: 1px solid $color-green;
+    background-color: $color-success-highlight;
+
+    a {
+      color: $color-green;
+      font-weight: bold;
+    }
+
+    &.card-hover:hover {
+      background-color: $color-success-highlight-hover;
+    }
+  }
+
+  &.card-warning {
+    box-shadow: 0 1px 7px 0 rgba($color-red, 0.27);
+  	border: 1px solid $color-yellow;
+    background-color: lighten($color-yellow, 40%);
+
+    a {
+      color: $color-yellow;
+      font-weight: bold;
+    }
+
+    &.card-hover:hover {
+      background-color: lighten($color-yellow, 42%);
+    }
+  }
+
+  &.card-danger {
+    box-shadow: 0 1px 7px 0 rgba($color-red, 0.27);
+  	border: 1px solid $color-red;
+    background-color: #ffebeb;;
+
+    a {
+      color: $color-red;
+      font-weight: bold;
+    }
+
+    &.card-hover:hover {
+      background-color: lighten(#ffebeb, 2%);
+    }
+  }
+}

data/project/app/assets/stylesheets/elements/drawer.scss

@@ -0,0 +1,66 @@
+.drawer {
+  .icon {
+    position: absolute;
+    left: -43px;
+
+    &.prev {
+      top: 65px;
+    }
+
+    &.next {
+      top: 115px;
+    }
+
+    &.disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .modal-dialog {
+    animation-duration: 0.3s;
+    animation-delay: 0s;
+
+    position: absolute;
+    margin: 0;
+    right: 0;
+    width: 100%;
+		height: 100vh;
+
+    @include media-breakpoint-up(md) {
+      width: 40vw;
+    }
+
+    max-width: 100%;
+
+    .modal-content {
+      border-radius: 0;
+      min-height: 100vh;
+    }
+  }
+
+  .modal-container {
+    @include media-breakpoint-up(md) {
+      height: 100vh;
+      overflow: hidden;
+    }
+  }
+
+  &.drawer-wide {
+    .modal-dialog {
+      @include media-breakpoint-up(md) {
+        width: 80vw;
+      }
+    }
+  }
+
+  .modal-content {
+    .row {
+      @each $breakpoint in map-keys($grid-breakpoints) {
+        @include media-breakpoint-up($breakpoint) {
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}

data/project/app/assets/stylesheets/elements/forms.scss

@@ -0,0 +1,64 @@
+.form-group {
+  margin-bottom: 0;
+  position: relative;
+}
+
+.form-control {
+  padding: 8px 10px 5px 10px;
+  box-shadow: 0 1px 2px 0 rgba(106, 116, 135, 0.1);
+  border-color: $color-grey;
+  border-radius: $border-radius;
+
+  &:focus {
+    border-color: $color-green;
+    box-shadow: none !important;
+  }
+
+  // text areas are diff color for some reason
+  &textarea {
+    color: $color-grey-dark;
+    &:focus {
+      color: $color-grey-dark;
+    }
+  }
+
+  &.has-error {
+    border: 1px solid $color-red !important;
+    color:  $color-red !important;
+    background-color: #ffebeb;
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}
+
+.custom-control {
+  padding-left: 25px;
+  top: -5px;
+  .custom-control-indicator {
+    width: 1.25rem;
+    height: 1.25rem;
+    top: 0;
+  }
+}
+
+.has-feedback {
+  .form-control-feedback-left {
+    position: absolute;
+    line-height: 24px;
+    left: 10px;
+  }
+
+  .form-control-feedback-right {
+    position: absolute;
+    line-height: 24px;
+    right: 10px;
+  }
+}
+
+input[type=radio], input[type=checkbox] {
+  transform: scale(1.25);
+  margin: 0;
+  background-color: #990000;
+  border-color: #990000;
+}