plotline 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 577a7ea7bd8201b064f7d5ebc977defbf30c49f2
+  data.tar.gz: 1f40464c36d3f229f6de123e04e9119c82c60f79
+SHA512:
+  metadata.gz: ebca46cb9f5d57ea81fbeedc382e1e83cccfe0a4c4957b212f86ce20e30d008eb08602f1bb91982e06cd80d3fa80b14716d9145aef50900327bbe24bdb59239a
+  data.tar.gz: 6f59f3e5093e1dea04409d3950edb794828b5464dacd23a1a410625d4c1bd88b8bfa206f05e1be826e51106101b72b4dd2adc3ebb71bb371acd06ab43304b620

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2015 Piotr Chmolowski
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Rakefile

@@ -0,0 +1,37 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Plotline'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.rdoc')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+load 'rails/tasks/engine.rake'
+
+
+load 'rails/tasks/statistics.rake'
+
+
+
+Bundler::GemHelper.install_tasks
+
+require 'rake/testtask'
+
+Rake::TestTask.new(:test) do |t|
+  t.libs << 'lib'
+  t.libs << 'test'
+  t.pattern = 'test/**/*_test.rb'
+  t.verbose = false
+end
+
+
+task default: :test

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

@@ -0,0 +1,9 @@
+//= require jquery
+//= require jquery_ujs
+//
+//= require ./plotline
+//= require ./plotline-utils
+//= require ./photosets
+//=
+//= require ./behaviors/alerts
+//= require ./behaviors/dropdown

data/app/assets/javascripts/plotline/behaviors/alerts.js

@@ -0,0 +1,20 @@
+Plotline.Behaviors.Alert = {
+  closeBtnClass: '.alert-close',
+
+  initialize: function() {
+    $(this.closeBtnClass).bind('click', (function(_this) {
+      return function(event) {
+        $(event.target).parent().hide();
+        return event.preventDefault();
+      };
+    })(this));
+
+    return setTimeout((function(_this) {
+      return function() {
+        return $(".flash").fadeOut(1000);
+      };
+    })(this), 3000);
+  }
+}
+
+Plotline.Behaviors.Alert.initialize();

data/app/assets/javascripts/plotline/behaviors/dropdown.js

@@ -0,0 +1,18 @@
+Plotline.Behaviors.Dropdown = {
+  initialize: function() {
+    $(document).ready(function() {
+      $('[data-behavior~=dropdown] .nav-item').click(function(e) {
+        $(this).siblings("ul").toggleClass("visible");
+        e.preventDefault();
+      });
+    });
+
+    $(window).click(function(event) {
+      if (!$('[data-behavior~=dropdown]').has(event.target).length) {
+        $('[data-behavior~=dropdown] ul').removeClass("visible");
+      }
+    });
+  }
+}
+
+Plotline.Behaviors.Dropdown.initialize();

data/app/assets/javascripts/plotline/photosets.js

@@ -0,0 +1,50 @@
+var Plotline = Plotline || {};
+
+// Responsive Photosets
+//
+// Based heavily on/stolen from: https://medium.com/coding-design/responsive-photosets-7742e6f93d9e
+Plotline.Photosets = {
+  initialize: function() {
+    window.addEventListener('resize', Plotline.Utils.debounce(this.align.bind(this), 100));
+
+    Plotline.Utils.ready(function() {
+      // trigger 'resize' event on window
+      var event = document.createEvent('HTMLEvents');
+      event.initEvent('resize', true, false);
+      window.dispatchEvent(event);
+    });
+  },
+
+  align: function(event) {
+    var rows = document.querySelectorAll('.photoset-row');
+    Array.prototype.forEach.call(rows, function(el, i){
+      var $pi    = el.querySelectorAll('.photoset-item'),
+          cWidth = parseInt(window.getComputedStyle(el.parentNode).width);
+
+      var ratios = Array.prototype.map.call($pi, function(el, index) {
+        return el.querySelector('img').getAttribute('data-ratio');
+      });
+
+      var sumRatios = 0, sumMargins = 0,
+          minRatio  = Math.min.apply(Math, ratios);
+
+      for (var i = 0; i < $pi.length; i++) {
+        sumRatios += ratios[i] / minRatio;
+      };
+
+      Array.prototype.forEach.call($pi, function(el) {
+        sumMargins += parseInt(getComputedStyle(el)['margin-left']) + parseInt(getComputedStyle(el)['margin-right']);
+      });
+
+      Array.prototype.forEach.call($pi, function(el, i) {
+        var minWidth = (cWidth - sumMargins) / sumRatios;
+        var img = el.querySelector('img');
+
+        img.style.width  = (Math.ceil(minWidth / minRatio) * ratios[i]) + 'px';
+        img.style.height = (Math.ceil(minWidth / minRatio)) + 'px';
+      });
+    });
+  }
+};
+
+Plotline.Photosets.initialize();

data/app/assets/javascripts/plotline/plotline-utils.js

@@ -0,0 +1,38 @@
+var Plotline = Plotline || {};
+Plotline.Utils = {
+  ready: function(callback) {
+    if (document.readyState != 'loading'){
+      callback();
+    } else {
+      document.addEventListener('DOMContentLoaded', callback);
+    }
+  },
+
+  // Source: https://remysharp.com/2010/07/21/throttling-function-calls
+  debounce: function(fn, delay) {
+    var timer = null;
+    return function () {
+      var context = this, args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    };
+  },
+
+  toggleClass: function(el, className) {
+    if (el.classList) {
+      el.classList.toggle(className);
+    } else {
+      var classes = el.className.split(' ');
+      var existingIndex = classes.indexOf(className);
+
+      if (existingIndex >= 0)
+        classes.splice(existingIndex, 1);
+      else
+        classes.push(className);
+
+      el.className = classes.join(' ');
+    }
+  }
+}

data/app/assets/javascripts/plotline/plotline.js

@@ -0,0 +1,5 @@
+var Plotline = Plotline || {};
+
+Plotline.Behaviors = Plotline.Behaviors || {};
+Plotline.initialize = function() {};
+Plotline.initialize();

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

@@ -0,0 +1,56 @@
+@import 'components/variables';
+
+$em-base: 14px;
+
+// Colors
+$blue: #328ad6;
+$dark-gray: #333;
+$medium-gray: #999;
+$light-gray: #DDD;
+$light-red: #FBE3E4;
+$light-yellow: #FFF6BF;
+$light-green: #8aba56;
+$yellow: #FDBD41;
+$red: #FC625D;
+$green: #34C849;
+$blue-gray: #F2F5F8;
+
+$base-background-color: #fff;
+$base-font-color: #262626;
+$base-font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+$form-font-family: "Fira Mono", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+$muted-text-color: #82888a;
+
+$base-font-size: $em-base;
+$base-line-height: 1.43;
+
+$base-border-color: #d4d4d4;
+
+// Links
+$base-link-color: $blue;
+$hover-link-color: darken($base-link-color, 20);
+
+// Navigation
+$nav-background-color: #fafafa;
+$nav-link-color: #262626;
+$nav-link-color-active: $blue;
+//$nav-link-color-active: #5b7a59;
+$nav-active-highlight-color: #cecfd1;
+
+$alert-color: $light-yellow;
+$error-color: $light-red;
+$notice-color: lighten(#12A5F4, 40);
+$success-color: $light-green;
+
+$nav-height: 55px;
+$form-title-height: 70px;
+$bottom-toolbar-height: 40px;
+
+@import "bourbon";
+@import "components/base";
+
+// Application-specific
+@import "shared";
+@import "navigation";
+@import "photosets";

data/app/assets/stylesheets/plotline/components/base.scss

@@ -0,0 +1,13 @@
+// Settings
+@import 'settings/prefixer';
+@import 'settings/px-to-em';
+
+@import '../components/normalize';
+@import '../components/helpers';
+@import '../components/typography';
+@import '../components/common';
+@import '../components/forms';
+@import '../components/tables';
+@import '../components/buttons';
+@import '../components/dropdowns';
+@import '../components/flashes';

data/app/assets/stylesheets/plotline/components/buttons.scss

@@ -0,0 +1,56 @@
+
+.btn {
+  display: inline-block;
+  margin-bottom: 0;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  position: relative;
+
+  border-radius: 5px;
+  border: none;
+  color: #fff;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 10px 21px;
+
+  @include clear-user-select;
+}
+
+.btn-primary.btn {
+  //background-image: linear-gradient(-1deg, #3494F7 0%, #40ABF9 100%);
+  background-color: #328ad6;
+  box-shadow: inset 0 0 0 1px #328ad6;
+}
+
+.btn:hover, .btn:focus { text-decoration: none }
+.btn:hover, .btn:focus { color:#fff }
+
+.btn-primary.btn:hover, .btn-primary.btn:focus {
+  background-color: li  ghten(#328ad6, 5);
+  color:#fff
+}
+
+.btn-primary.btn:active {
+  background-color: lighten(#3494F7, 8);
+}
+
+.btn.full-width {
+  width: 100%;
+}
+
+.btn.btn-secondary {
+  border: none;
+  background: #34C849;
+  color: #fff;
+}
+
+.btn.btn-secondary:hover {
+  background: darken(#34C849, 5);
+}
+
+.btn.btn-secondary:active {
+  background: darken(#34C849, 10);
+}

data/app/assets/stylesheets/plotline/components/common.scss

@@ -0,0 +1,4 @@
+*, *:before, *:after, hr, hr:before, hr:after, input[type="search"], input[type="search"]:before, input[type="search"]:after {
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}

data/app/assets/stylesheets/plotline/components/dropdowns.scss

@@ -0,0 +1,84 @@
+
+.dropdown {
+  position: relative;
+}
+
+.dropdown > a {
+  display: block;
+}
+
+.dropdown > a .caret {
+  font-size: 10px;
+}
+
+.dropdown ul {
+  background: $nav-background-color;
+  padding: 1px;
+  position: absolute;
+  left: 0px;
+  top: $nav-height;
+  width: 200px;
+  box-shadow: 0px 0px 5px 0px rgba(56,70,78,0.33);
+  display: none;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 999;
+
+  border-bottom-color: rgb(119, 119, 119);
+  border-bottom-left-radius: 3px;
+  border-bottom-right-radius: 3px;
+  border-bottom-style: none;
+  border-bottom-width: 0px;
+  border-left-color: rgb(119, 119, 119);
+  border-left-style: none;
+  border-left-width: 0px;
+  border-right-color: rgb(119, 119, 119);
+  border-right-style: none;
+  border-right-width: 0px;
+  border-top-color: rgb(119, 119, 119);
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+  border-top-style: none;
+  border-top-width: 0px;
+}
+
+.dropdown ul li {
+  display: block;
+  color: #fff;
+}
+
+.dropdown ul li.separate {
+  margin: 4px 0 0 0;
+  padding: 4px 0 0 0;
+  border-top: 1px solid rgba(255,255,255,0.15);
+}
+
+.dropdown ul li a {
+  display: block;
+  padding: 12px;
+}
+
+
+.dropdown ul.visible {
+  display: block;
+  opacity: 1;
+  visibility: visible;
+}
+
+.dropdown a {
+  color: $nav-link-color;
+}
+
+.dropdown a:hover {
+  color: $nav-link-color-active;
+}
+
+.dropdown ul li a:hover {
+  color: #fff;
+  background: $blue;
+}
+
+.dropdown ul li a:active {
+  color: #fff;
+  background: $blue;
+}

data/app/assets/stylesheets/plotline/components/flashes.scss

@@ -0,0 +1,45 @@
+@mixin flash($color) {
+  background: $color;
+  box-shadow: darken($color, 20) 0px 1px 1px 0px;
+
+  color: darken($color, 60);
+
+  a {
+    color: darken($color, 70);
+
+    &:hover {
+      color: darken($color, 90);
+    }
+
+    float: right;
+  }
+}
+
+%flash-base {
+  float: right;
+  margin-bottom: $base-line-height / 2;
+  margin-top: 10px;
+  padding: 10px 20px;
+  width: 50%;
+  border-radius: 2px;
+}
+
+.flash-alert {
+  @extend %flash-base;
+  @include flash($alert-color);
+}
+
+.flash-error {
+  @extend %flash-base;
+  @include flash($error-color);
+}
+
+.flash-notice {
+  @extend %flash-base;
+  @include flash($notice-color);
+}
+
+.flash-success {
+  @extend %flash-base;
+  @include flash($success-color);
+}

data/app/assets/stylesheets/plotline/components/forms.scss

@@ -0,0 +1,135 @@
+[type=text], [type=password], [type=search], [type=email],[type=number],
+[type=url], [type=tel], textarea, select, input[type=radio],
+input[type=checkbox] {
+  border:1px solid $base-border-color;
+  border-radius:2px;
+  background-color:#fff;
+  color: $base-font-color;
+}
+
+input, textarea {
+  font-family: $form-font-family;
+}
+
+[type=text],[type=password],[type=search],[type=email],[type=url],[type=tel],[type=number],textarea,select,input[type=radio],input[type=checkbox] {
+  -webkit-transition:border-color .2s;
+  transition:border-color .2s;
+}
+
+.invalid [type=text], .invalid [type=password], .invalid [type=email], .invalid [type=number], .invalid [type=url], .invalid [type=tel], .invalid textarea, .invalid select, .invalid [type=radio], .invalid [type=checkbox],[type=text]:invalid,[type=password]:invalid,[type=search]:invalid,[type=email]:invalid,[type=url]:invalid,[type=tel]:invalid,textarea:invalid,select:invalid,input[type=radio]:invalid,input[type=checkbox]:invalid {
+  background-color: lighten($light-red, 3);
+  border-color: darken($light-red, 20);
+}
+
+
+[type=text]:focus,[type=password]:focus,[type=search]:focus,[type=email]:focus,[type=url]:focus,[type=tel]:focus,[type=number]:focus,textarea:focus,select:focus,input[type=radio]:focus,input[type=checkbox]:focus {
+  outline:none;
+  border-color: darken($base-border-color, 20);
+}
+
+.disabled[type=text],.disabled[type=password],.disabled[type=search],.disabled[type=email],.disabled[type=url],.disabled[type=tel],textarea.disabled,select.disabled,input.disabled[type=radio],input.disabled[type=checkbox],[disabled][type=text],[disabled][type=password],[disabled][type=search],[disabled][type=email],[disabled][type=url],[disabled][type=tel],textarea[disabled],select[disabled],input[disabled][type=radio],input[disabled][type=checkbox],fieldset[disabled] [type=text],fieldset[disabled] [type=password],fieldset[disabled] [type=search],fieldset[disabled] [type=email],fieldset[disabled] [type=url],fieldset[disabled] [type=tel],fieldset[disabled] textarea,fieldset[disabled] select,fieldset[disabled] input[type=radio],fieldset[disabled] input[type=checkbox] {
+  color:#cacccd;
+  cursor:default;
+}
+
+[type=text], [type=password], [type=search], [type=email], [type=url], [type=tel],[type=number], textarea, select {
+  display:block;
+  width:100%;
+  padding:8px 10px;
+}
+
+[type=submit] {
+  font-family: $base-font-family;
+}
+
+.invalid .error {
+  color: darken($light-red, 40);
+}
+
+fieldset {
+  margin: 0;
+  border: 0;
+  padding: 0;
+}
+
+label {
+  display: block;
+  padding-top: 9px;
+  padding-bottom: 4px;
+  font-weight: bold;
+}
+
+.hint {
+  margin-top: -5px;
+  padding-bottom: 8px;
+}
+
+select {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff !important;
+  background-image: none;
+  border-radius: 2px;
+}
+
+select.date, select.datetime {
+  width: auto;
+  display: inline-block;
+}
+
+input[type=file] {
+  display: block;
+}
+
+input[type=radio],input[type=checkbox] {
+  position:relative;
+  -webkit-appearance:none;
+  height:1.25em;
+  width:1.25em;
+  margin-bottom:-.25em;
+  margin-right:5px;
+  vertical-align:top;
+}
+
+input[type=radio] {
+  border-radius:1.25em;
+}
+
+input[type=radio]:checked:before {
+  content:"";
+  position:absolute;
+  height:.45em;
+  width:.45em;
+  border-radius:.45em;
+  top:50%;
+  left:50%;
+  margin-top:-.225em;
+  margin-left:-.225em;
+  background-color:#ff5a5f;
+}
+
+input[type=checkbox]:checked:before {
+  content:"\f00c";
+  font-family: FontAwesome;
+  position:absolute;
+  font-size:.85em;
+  left:1px;
+  top: 2px;
+  text-align:center;
+  width:1.25em;
+  color: lighten($base-font-color, 20);
+}
+
+form .cancel {
+  padding-left: 20px;
+}
+
+form .form-error-message {
+  color: $red;
+}
+

data/app/assets/stylesheets/plotline/components/helpers.scss

@@ -0,0 +1,21 @@
+
+@mixin clear-user-select {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.text-center { text-align: center }
+.text-right  { text-align: right  }
+
+.text-muted  { color: #82888a }
+
+.pull-left  { float: left  !important }
+.pull-right { float: right !important }
+
+.img-circle { border-radius: 50% }
+
+.fixed {
+  position: fixed;
+}