mvpkit 0.8.1 → 1.0.0

data/project/app/helpers/application_helper.rb

@@ -1,4 +1,15 @@
 module ApplicationHelper
+  def body_id
+    "#{controller_name}-#{action_name}-page"
+  end
+
+  def body_classes
+    klass = []
+    klass << "#{controller_name}-pages"
+    klass << page.classes if page.classes.present?
+    klass.join(' ')
+  end
+
   def render_partial(partial, locals={}, &block)
     render(
       partial: partial,
@@ -9,10 +20,8 @@ module ApplicationHelper
   def render_mustache(template, object)
     mustache = Mustache.new
     mustache.template_extension = 'mustache'
-    # mustache.template_path = Rails.root.join("assets/templates")
-    # mustache.template_file = Rails.root.join("assets/templates/#{template}.mustache")
-    mustache.template_path = Rails.root.join("app/views")
-    mustache.template_file = Rails.root.join("app/views/#{template}.mustache")
+    mustache.template_path = Rails.root.join("app/templates")
+    mustache.template_file = Rails.root.join("app/templates/#{template}.mustache")
     mustache.instance_eval %%
       def logged_in
         #{!!current_user}
@@ -21,4 +30,8 @@ module ApplicationHelper
     # mustache.template_extension = 'mustache'
     mustache.render(object).html_safe
   end
+
+  def store_and_redirect_path(path)
+    url_for(:only_path => false, :trailing_slash => true) + "r/" + path
+  end
 end

data/project/app/mailers/application_mailer.rb

@@ -0,0 +1,5 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: "admin@example.com"
+
+  layout 'mailer'
+end

data/project/app/templates/README.txt

@@ -0,0 +1 @@
+Put mustache templates in here, and they'll be shared across Rails and JavaScript

data/project/app/templates/examples/template.mustache

@@ -0,0 +1 @@
+This is <code>template.mustache</code>

data/project/app/views/examples/mustache.html.erb

@@ -2,17 +2,39 @@
   <div class="col-md-9">
     <h1>Mustache Rendering</h1>
     <p>
-      You can render mustache files by using <code>&lt;<%= "%= render_mustache 'examples/mustache/template', { some: 'value' } %" %>&gt;</code>.
+      You can render mustache files by using <code>&lt;<%= "%= render_mustache 'examples/template', { some: 'value' } %" %>&gt;</code>.
     </p>
     <p>
       Place your files into <code>app/views</code> and reference it relatively.  You don't need the <code>.mustache</code> file suffix.
     </p>
+
+    <hr>
+
+    <h2>Via Ruby</h2>
     <p>
-      Here we render <code>examples/mustache/template</code>:
+      <code><%%= render_mustache 'examples/template', { some: 'value' } %></code>
+      <br>
+      will render:
     </p>
 
     <div class="well">
-      <%= render_mustache 'examples/mustache/template', { some: 'value' } %>
+      <%= render_mustache 'examples/template', { some: 'value' } %>
     </div>
+
+    <hr>
+
+    <h2>Via JavaScript</h2>
+    <p>
+      <pre>
+        <code>&lt;script type="text/javascript">
+          document.write(Templates['examples/template']())
+        &lt;/script></code>
+      </pre>
+      <br>
+      will render:
+      <script type="text/javascript">
+        document.write(Templates['examples/template']())
+      </script>
+    </p>
   </div>
 </div>

data/project/app/views/layouts/_header.html.erb

@@ -1,16 +1,24 @@
-<nav class="navbar navbar-light bg-faded mt50">
+<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
+  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
   <a class="navbar-brand" href="/">__PROJECT_NAME__</a>
-  <ul class="nav navbar-nav float-lg-right">
-    <li class="nav-item active">
-      <%= link_to 'Examples', examples_path, class: 'nav-link' %>
-    </li>
-    <li class="nav-item dropdown">
-      <a class="nav-link dropdown-toggle" href="http://example.com" id="supportedContentDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-      <div class="dropdown-menu" aria-labelledby="supportedContentDropdown">
-        <a class="dropdown-item" href="#">Action</a>
-        <a class="dropdown-item" href="#">Another action</a>
-        <a class="dropdown-item" href="#">Something else here</a>
-      </div>
-    </li>
-  </ul>
+
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <%= link_to 'Examples', examples_path, class: 'nav-link' %>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#">Link</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
+    </ul>
+    <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="text" placeholder="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form>
+  </div>
 </nav>

data/project/app/views/layouts/_notifications.html.erb

@@ -0,0 +1,10 @@
+<% flash.each do |key, value| %>
+  <% next if ['__analytics_identify_events','__analytics_track_events'].include?(key) %>
+  <% klass = ['success','warning','danger','info'].include?(key) ? key : 'info' %>
+  <div class="fadeout alert alert-<%= klass %>">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+    <%= value %>
+  </div>
+<% end %>

data/project/app/views/layouts/application.html.erb

@@ -1,17 +1,28 @@
-<% page.classes = "body-basic" %>
-<%= render 'layouts/includes' %>
+<%- content_for :javascripts do %>
+  <%= javascript_include_tag 'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js' %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js' %>
+<% end %>
+
+<%- content_for :stylesheets do %>
+  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+<% end %>
 
 <%- content_for :body do %>
-<% if content_for :header %>
-  <%= yield :header %>
-<% else %>
-  <div class="container">
-    <%= render 'layouts/header' %>
+  <% unless page.hide_header == true %>
+    <% if content_for :header %>
+      <%= yield :header %>
+    <% else %>
+      <%= render 'layouts/header' %>
+    <% end %>
+  <% end %>
+
+  <%= yield :pre %>
+
+  <div class="container <%= page.container_class %>">
+    <%= render 'layouts/notifications' %>
+    <%= yield %>
   </div>
 <% end %>
-<div class="container">
-  <%= yield %>
-</div>
-<% end %>
 
 <%= render template: "layouts/minimum_viable_product/application" %>

data/project/app/views/layouts/mailer.html.erb

@@ -0,0 +1,5 @@
+<html>
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/project/app/views/layouts/mailer.text.erb

@@ -0,0 +1 @@
+<%= yield %>

data/project/app/webpack/javascripts/behaviors/example.js

@@ -0,0 +1,21 @@
+// Behaviors are a way of specifying a behavior attribute on an HTML tag and having it always *work*
+//
+// For example, we'd specify:
+//
+// <div behavior="example">
+//   ...
+// </div>
+//
+// And we would automatically have the behavior setup ...
+
+document.addEventListener("turbolinks:load", function(){
+  _.each( $('*[behavior=example]'), function(obj){
+    obj.controller = new Example(obj)
+  })
+})
+
+class Example {
+  constructor(obj, opts={}){
+    // do something
+  }
+}

data/project/app/webpack/javascripts/controllers/home.js

@@ -0,0 +1,15 @@
+class Controller {
+  init() {
+    const self = this
+
+    $('#new_conversion').on('submit', function(e){
+      window.track("Conversion Submit", { source: "Registration Form" })
+    })
+
+    $('#new_conversion').on('ajax:success', function(){
+      top.location = "/conversion"
+    })
+  }
+}
+
+window.controllers['home'] = new Controller()

data/project/app/webpack/javascripts/lib/clientsidevalidations.js

@@ -0,0 +1,3 @@
+$(document).on('shown.bs.modal', function () {
+  $(ClientSideValidations.selectors.forms).validate();
+});

data/project/app/webpack/javascripts/lib/selectize.js

@@ -0,0 +1 @@
+const Selectize = require('selectize')

data/project/app/webpack/javascripts/pack.js

@@ -0,0 +1,47 @@
+// Courtesy of https://medium.com/@chrismnicola/leaving-sprockets-for-webpack-ccf7c6993ffa
+function requireAll(r) { r.keys().forEach(r); }
+function requireTree(path) { requireAll(require.context('./', true, /\.(js|coffee)$/)) }
+
+window.$        = window.jQuery = require('jquery')
+window._        = require('lodash')
+window.is       = require('is')
+window.Mustache = require('mustache/mustache')
+
+require('mvpkit/assets/js/application')
+require('bootstrap/dist/js/bootstrap')
+require('selectize/dist/js/selectize')
+require('mustache')
+
+requireTree('lib')
+requireTree('behaviors')
+requireTree('controllers')
+
+document.addEventListener("turbolinks:load", function(){
+  // $('*[data-toggle="popover"]').popover()
+  // $('select').selectize()
+  $('[data-toggle="tooltip"]').tooltip()
+  $('[data-toggle="popover"]').popover()
+
+  // Redirect to hash after page is loaded since the conversation is injected
+  if (!is.empty(window.location.hash.substring(1)) ) {
+    location.href = "#" + window.location.hash.substring(1);
+  }
+
+  setTimeout(function(){
+    $('.fadeout.alert').fadeOut('slow')
+  }, 2000);
+
+  $(document).on('turbolinks:click', function (event) {
+    if (event.target.getAttribute('href').charAt(0) === '#') {
+      return event.preventDefault()
+    }
+  })
+})
+
+jQuery.fn.extend({
+  disable: function(state) {
+    return this.each(function() {
+        this.disabled = state;
+    });
+  }
+})

data/project/app/webpack/stylesheets/config/variables.scss

@@ -0,0 +1,41 @@
+$color-orange:              #F65314 !default;
+$color-yellow:              #FFBB00 !default;
+$color-green:               #7CBB00 !default;
+// $color-blue:                #00A1F1 !default;
+$color-blue:                #30B4FF !default;
+$color-light-blue:          #63A6FF !default;
+
+$color-grey:                #333 !default;
+$color-grey2:               #4B5C72 !default;
+$color-grey3:               #98A8BB !default;
+$color-grey4:               #D6D6D6 !default;
+$color-grey5:               #ECECEC !default;
+$color-grey6:               #F6F6F6 !default;
+
+$brand-primary:             $color-blue;
+$brand-success:             $color-green;
+$brand-info:                #fff !default;
+$brand-warning:             $color-yellow;
+$brand-danger:              $color-orange;
+
+$gray-dark:                 #001837 !default;
+$gray:                      #55595c !default;
+$gray-light:                #818a91 !default;
+$gray-lighter:              #eceeef !default;
+$gray-lightest:             #f7f7f9 !default;
+
+$state-success-text:        darken($brand-success, 10%) !default;
+$state-success-bg:          lighten($brand-success, 50%) !default;
+$state-success-border:      lighten($state-success-text, 20%) !default;
+
+$state-info-text:           darken($brand-primary, 10%) !default;
+$state-info-bg:             lighten($brand-primary, 40%) !default;
+$state-info-border:         lighten($state-info-text, 20%) !default;
+
+$state-warning-text:        darken($brand-warning, 10%) !default;
+$state-warning-bg:          lighten($brand-warning, 40%) !default;
+$state-warning-border:      lighten($state-warning-text, 20%) !default;
+
+$state-danger-text:         darken($brand-danger, 10%) !default;
+$state-danger-bg:           lighten($brand-danger, 40%) !default;
+$state-danger-border:       lighten($state-danger-text, 20%) !default;

data/project/app/webpack/stylesheets/init/reset.scss

@@ -0,0 +1,48 @@
+// Fuck you outlines
+* {
+  outline: none !important;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	// font-size: 100%;
+	// font: inherit;
+	// vertical-align: baseline;
+}
+// /* HTML5 display-role reset for older browsers */
+// article, aside, details, figcaption, figure,
+// footer, header, hgroup, menu, nav, section {
+// 	display: block;
+// }
+// body {
+// 	line-height: 1;
+// }
+ol, ul {
+	list-style: none;
+}
+// blockquote, q {
+// 	quotes: none;
+// }
+// blockquote:before, blockquote:after,
+// q:before, q:after {
+// 	content: '';
+// 	content: none;
+// }
+// table {
+// 	border-collapse: collapse;
+// 	border-spacing: 0;
+// }

data/project/app/webpack/stylesheets/layout/main.scss

@@ -0,0 +1,7 @@
+html {
+  height: 100%;
+}
+
+body {
+  background-color: #FFF;
+}

data/project/app/webpack/stylesheets/pack.scss

@@ -0,0 +1,20 @@
+@import 'config/variables';
+@import '~bootstrap/scss/bootstrap';
+@import '~selectize/dist/css/selectize';
+@import '~selectize/dist/css/selectize.bootstrap3';
+
+@import 'init/reset';
+
+@import 'skin/alerts';
+@import 'skin/buttons';
+@import 'skin/hero';
+@import 'skin/images';
+@import 'skin/progress';
+@import 'skin/selectize';
+@import 'skin/spacing';
+@import 'skin/tables';
+@import 'skin/treatments';
+@import 'skin/turbolinks';
+@import 'skin/typography';
+
+@import 'layout/main';

data/project/app/webpack/stylesheets/skin/alerts.scss

@@ -0,0 +1,3 @@
+.alert-default {
+  @include alert-variant(#FFF, $color-grey4, $color-grey);
+}

data/project/app/webpack/stylesheets/skin/buttons.scss

@@ -0,0 +1,38 @@
+.btn {
+  font-family: 'Lato', sans-serif;
+  font-weight: 700;
+  white-space: normal;
+
+  .cell {
+    float: left;
+    padding: 0.25rem 0.5rem;
+    border-right: 1px solid $color-grey4;
+
+    &:last-child {
+      border-right: 0;
+    }
+  }
+}
+
+.btn-secondary {
+  color: $color-grey2;
+}
+
+.btn-faded {
+  opacity: 0.3;
+}
+
+.btn-wide {
+  @extend .pl-2;
+  @extend .pr-2;
+}
+
+@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 }
+  }
+}

data/project/app/webpack/stylesheets/skin/hero.scss

@@ -0,0 +1,45 @@
+.hero {
+  // background-color: #F8FAFD;
+  background-color: #E7EEFE;
+
+  @include media-breakpoint-up(sm) {
+    height: 360px;
+  }
+
+  // @include media-breakpoint-up(sm) {
+  //   height: 380px;
+  // }
+
+  .intro {
+    .lead {
+      color: #4B5C72;
+    }
+  }
+}
+
+.hero-blue {
+  background-color: #30B4FF;
+}
+
+.hero-green {
+  background-color: #00b936;
+}
+
+.hero-small {
+  background-color: #E7EEFE;
+  border-bottom: 1px solid $color-grey4;
+
+  // @include media-breakpoint-up(xs) {
+  //   height: 320px;
+  // }
+  //
+  // @include media-breakpoint-up(lg) {
+  //   height: 300px;
+  // }
+
+  .intro {
+    .lead {
+      color: #4B5C72;
+    }
+  }
+}

data/project/app/webpack/stylesheets/skin/images.scss

@@ -0,0 +1,13 @@
+.img-block {
+  width: 100%;
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    .img-block-#{$breakpoint}-up { width: 100%; display: block }
+  }
+
+  @include media-breakpoint-down($breakpoint) {
+    .img-block-#{$breakpoint}-down { width: 100%; display: block }
+  }
+}

data/project/app/webpack/stylesheets/skin/progress.scss

@@ -0,0 +1,3 @@
+.progress.small {
+  height: 0.4rem;
+}

data/project/app/webpack/stylesheets/skin/selectize.scss

@@ -0,0 +1,30 @@
+.selectize-input, .selectize-input.has-items {
+  padding: 0.5rem 0.75rem;
+}
+
+.selectize-control.multi .selectize-input > div {
+  background: #98A8BB;
+  color: #FFF;
+  font-size: 0.9em;
+}
+
+.selectize-control::before {
+  -moz-transition: opacity 0.2s;
+  -webkit-transition: opacity 0.2s;
+  transition: opacity 0.2s;
+  content: ' ';
+  z-index: 2;
+  position: absolute;
+  display: block;
+  top: 12px;
+  right: 34px;
+  width: 16px;
+  height: 16px;
+  background: url(/images/spinner.gif);
+  background-size: 16px 16px;
+  opacity: 0;
+}
+
+.selectize-control.loading::before {
+  opacity: 1.0;
+}

data/project/{assets/stylesheets/lib → app/webpack/stylesheets/skin}/spacing.scss

@@ -1,5 +1,3 @@
-@import 'bootstrap/scss/bootstrap';
-
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     .block-#{$breakpoint}-up { display: block; width: 100% }

data/project/app/webpack/stylesheets/skin/tables.scss

@@ -0,0 +1,10 @@
+.table th {
+  border-top: 0;
+  margin-bottom: 0;
+}
+
+.table.no-top-border {
+  tr:first-child td {
+    border-top: 0;
+  }
+}

data/project/app/webpack/stylesheets/skin/treatments.scss

@@ -0,0 +1,3 @@
+.shadowed {
+  box-shadow: 0 0 3px lighten($color-grey2, 50%);
+}

data/project/app/webpack/stylesheets/skin/turbolinks.scss

@@ -0,0 +1,4 @@
+.turbolinks-progress-bar {
+  height: 2px;
+  background-color: $brand-primary;
+}