ish_rails 0.0.1

data/app/assets/javascripts/view_ports.js

@@ -0,0 +1,3 @@
+//= require jquery
+//= require ish/url-handler
+//= require ish/init

data/app/assets/stylesheets/ish/styles.css

@@ -0,0 +1,536 @@
+body {
+  background: #ddd;
+}
+
+/* Header */
+.sg-header {
+  height: 33px;
+  background: #222222;
+  color: white;
+  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+  text-transform: uppercase;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  -webkit-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 0 #5f6164, inset 0 -1px 0 #2e2f2f, 0 1px 3px rgba(0, 0, 0, 0.3); }
+  .sg-header * {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box; }
+  .sg-header ul, .sg-header ol {
+    padding: 0;
+    margin: 0; }
+  .sg-header li {
+    list-style: none;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
+  .sg-header a {
+    font-size: 70%;
+    color: gray;
+    text-decoration: none;
+    display: block;
+    line-height: 1;
+    padding: 1em;
+    -webkit-transition: background 0.15s ease-out;
+    -moz-transition: background 0.15s ease-out;
+    -ms-transition: background 0.15s ease-out;
+    -o-transition: background 0.15s ease-out;
+    transition: background 0.15s ease-out;
+    -webkit-transition: color 0.15s ease-out;
+    -moz-transition: color 0.15s ease-out;
+    -ms-transition: color 0.15s ease-out;
+    -o-transition: color 0.15s ease-out;
+    transition: color 0.15s ease-out; }
+    .sg-header a:hover, .sg-header a:focus, .sg-header a.active {
+      color: white;
+      background: rgba(255, 255, 255, 0.05); }
+  .sg-header ol li ol li ol li a {
+    padding-left: 2em;
+    text-transform: none; }
+
+/* URL Form */
+#url-toggle { 
+  display: none; 
+}
+
+#url {
+  height: 33px;
+  padding: 0 0.5em;
+  border: 0;
+  background: #444;
+  color: #fff;
+  -webkit-transition: background 0.15s ease-out;
+    -moz-transition: background 0.15s ease-out;
+    -ms-transition: background 0.15s ease-out;
+    -o-transition: background 0.15s ease-out;
+    transition: background 0.15s ease-out;
+}
+
+#url:hover {
+  background: #454545;
+}
+
+#url:focus {
+  outline: 0;
+  background: #555;
+  color: #fff;
+}
+
+@media all and (min-width: 46.75em) {
+  #url {
+    width: 20em;
+  }
+}
+
+#url-submit {
+  background: none;
+  color: gray;
+  text-transform: uppercase;
+  border: 0;
+  cursor: pointer;
+  -webkit-transition: background 0.15s ease-out;
+    -moz-transition: background 0.15s ease-out;
+    -ms-transition: background 0.15s ease-out;
+    -o-transition: background 0.15s ease-out;
+    transition: background 0.15s ease-out;
+    -webkit-transition: color 0.15s ease-out;
+    -moz-transition: color 0.15s ease-out;
+    -ms-transition: color 0.15s ease-out;
+    -o-transition: color 0.15s ease-out;
+    transition: color 0.15s ease-out;
+}
+
+#url-submit:hover, #url-submit:focus {
+  background: rgba(255, 255, 255, 0.05);
+  color: #fff;
+}
+
+/* Accordion */
+.sg-acc-handle:after {
+  content: ' +';
+  float: right;
+  font-size: 70%; }
+  @media all and (min-width: 44em) {
+    .sg-acc-handle:after {
+      float: none; } }
+.sg-acc-handle.active {
+  color: white;
+  background: rgba(255, 255, 255, 0.05); }
+  .sg-acc-handle.active:after {
+    content: ' -'; }
+.sg-acc-handle.sg-icon:after {
+  content: ""; }
+
+.sg-acc-panel {
+  overflow: hidden;
+  max-height: 0;
+  min-width: 10em;
+  background: #222222;
+  -webkit-transition: max-height 0.5s ease-out;
+  -moz-transition: max-height 0.5s ease-out;
+  -ms-transition: max-height 0.5s ease-out;
+  -o-transition: max-height 0.5s ease-out;
+  transition: max-height 0.5s ease-out; }
+  .sg-acc-panel.active {
+    max-height: 50em; }
+  .sg-acc-panel.sg-right {
+    position: absolute;
+    left: auto;
+    right: 0; }
+
+/* Controls (sizing, view mode) */
+.sg-controls {
+  border: 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2; }
+  .sg-controls .sg-acc-panel.active {
+    max-height: 17em; }
+  .sg-controls .sg-nav-phases .sg-acc-panel {
+    min-width: 0; }
+    .sg-controls .sg-nav-phases .sg-acc-panel.active {
+      max-height: none; }
+
+.sg-control-trigger {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
+  @media all and (min-width: 44em) {
+    .sg-control-trigger {
+      border: 0; } }
+  @media all and (min-width: 45em) {
+    .sg-control-trigger {
+      float: left;
+      width: 6em; } }
+
+@media all and (min-width: 44em) {
+  .sg-control > li {
+    float: left;
+    width: 31em;
+    border-bottom: 0;
+    border-left: 1px solid rgba(255, 255, 255, 0.05); } }
+
+.sg-control > li {
+  float: left; }
+.sg-control .sg-input {
+  padding: 0.1em;
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out; }
+  .sg-control .sg-input:active, .sg-control .sg-input:focus {
+    outline: 0;
+    background: #f7f7f7;
+    color: #000; }
+
+@media all and (max-width: 45em) {
+  .sg-quarter {
+    float: left;
+    width: 25%;
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
+    text-align: center; }
+    .sg-quarter:first-child {
+      border-left: 0; } }
+
+@media all and (max-width: 45em) {
+  .sg-half {
+    float: left;
+    width: 50%;
+    border-left: 1px solid rgba(255, 255, 255, 0.05);
+    text-align: center; }
+    .sg-half:nth-child(odd) {
+      border-left: 0; } }
+
+.sg-current-size {
+  font-size: 70%;
+  color: gray;
+  padding: 0.8em 0.95em; }
+  .sg-current-size:hover .sg-input {
+    background: #f7f7f7;
+    color: #000; }
+  @media all and (min-width: 45em) {
+    .sg-current-size {
+      float: left; } }
+
+.sg-size-options {
+  max-width: 10em; }
+  @media all and (min-width: 45em) {
+    .sg-size-options {
+      position: static;
+      max-height: none;
+      max-width: none; }
+      .sg-size-options > li {
+        float: left;
+        border: 0;
+        border-left: 1px solid rgba(255, 255, 255, 0.05); } }
+
+#sg-form {
+  margin: 0;
+  border: 0;
+  padding: 0; }
+
+.sg-input {
+  margin: -2px 0 0 0;
+  padding: 0;
+  border: 1px solid #222;
+  background-color: #222;
+  color: gray;
+  width: 35px;
+  text-align: right; }
+
+.sg-input-active {
+  background-color: #fff;
+  color: #000; }
+
+.sg-view {
+  position: relative; }
+  .sg-view > ul {
+    position: absolute;
+    top: 2em;
+    left: 0; }
+
+.sg-checkbox:before {
+  display: inline-block;
+  margin-right: 0.4em; }
+
+/*------------------------------------*\
+    $STYLE GUIDE VIEWPORT
+\*------------------------------------*/
+/* Viewport */
+#sg-vp-wrap {
+  text-align: center;
+  width: 100%; }
+  @media all and (min-width: 44em) {
+    #sg-vp-wrap {
+      position: fixed;
+      top: 2em;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 0; } }
+  #sg-vp-wrap.wrap-animate {
+    -webkit-transition: left 0.3s ease-out;
+    -moz-transition: left 0.3s ease-out;
+    -ms-transition: left 0.3s ease-out;
+    -o-transition: left 0.3s ease-out;
+    transition: left 0.3s ease-out; }
+
+#sg-viewport {
+  border: 0;
+  x-margin: 0 auto;
+  height: 100%;
+  width: 100%; }
+  #sg-viewport.hay-mode {
+    -webkit-transition: all 40s linear;
+    -moz-transition: all 40s linear;
+    -ms-transition: all 40s linear;
+    -o-transition: all 40s linear;
+    transition: all 40s linear; }
+
+#sg-cover {
+  width: 100%;
+  height: 100%;
+  display: none;
+  position: absolute;
+  z-index: 20;
+  cursor: col-resize; }
+
+#sg-gen-container {
+  height: 100%;
+  text-align: center;
+  margin: 0 auto; }
+  #sg-gen-container.hay-mode {
+    -webkit-transition: all 40s linear;
+    -moz-transition: all 40s linear;
+    -ms-transition: all 40s linear;
+    -o-transition: all 40s linear;
+    transition: all 40s linear; }
+
+#sg-rightpull-container {
+  width: 10px;
+  float: right;
+  margin: 0;
+  height: 100%;
+  cursor: col-resize; }
+
+#sg-rightpull {
+  margin: 0;
+  width: 10px;
+  height: 100%;
+  background: #999;
+  -webkit-transition: background 0.2s ease-out;
+  -moz-transition: background 0.2s ease-out;
+  -ms-transition: background 0.2s ease-out;
+  -o-transition: background 0.2s ease-out;
+  transition: background 0.2s ease-out; }
+  #sg-rightpull:hover {
+    background: #666; }
+  #sg-rightpull:active {
+    cursor: col-resize;
+    background: #444; }
+
+.vp-animate {
+  -webkit-transition: width 0.8s ease-out;
+  -moz-transition: width 0.8s ease-out;
+  -ms-transition: width 0.8s ease-out;
+  -o-transition: width 0.8s ease-out;
+  transition: width 0.8s ease-out; }
+
+/*------------------------------------*\
+    $STYLE GUIDE CONTENT 
+\*------------------------------------*/
+/* Section Pattern */
+.sg-pattern {
+  margin-bottom: 2em;
+  overflow: hidden; }
+
+/* Section Head */
+.sg-pattern-head {
+  margin: 2em 0;
+  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+  font-size: 70%;
+  font-weight: normal;
+  padding: 1em 0;
+  border-bottom: 1px solid gray; }
+  .sg-pattern-head a {
+    display: block;
+    color: gray;
+    text-decoration: none;
+    cursor: pointer; }
+    .sg-pattern-head a:hover {
+      color: #222222; }
+
+/* Clean View */
+.sg-clean .sg-main {
+  padding: 0; }
+
+.sg-code, .sg-annotations {
+  clear: both;
+  background: #dddddd;
+  color: #222222;
+  padding: 1em 0.5em;
+  margin: 1em 0; }
+  .sg-code a, .sg-annotations a {
+    text-decoration: underline; }
+
+.sg-code pre {
+  white-space: -moz-pre-line;
+  white-space: -pre-line;
+  white-space: -o-pre-line;
+  word-wrap: break-word;
+  white-space: pre-line;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0.5em; }
+
+.sg-code-contains {
+  margin-bottom: 1rem;
+  font-size: 85%;
+  color: gray; }
+  .sg-code-contains code {
+    padding: 0.2em;
+    background: rgba(0, 0, 0, 0.3);
+    color: #f7f7f7;
+    position: relative;
+    top: -2px; }
+
+.sg-code-head {
+  color: gray;
+  font-size: 1em; }
+
+.demo {
+  overflow: hidden;
+  margin-bottom: 1rem; }
+
+.demo .gi, .demo .demo-block {
+  background: #dddddd;
+  color: gray;
+  text-align: center;
+  margin-bottom: 0.5em;
+  padding: 1em !important; }
+  .demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
+    color: #dddddd;
+    background: gray; }
+  .demo .gi .gi, .demo .demo-block .gi {
+    background: rgba(0, 0, 0, 0.1);
+    color: #dddddd; }
+    .demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
+      background: rgba(0, 0, 0, 0.3); }
+
+.demo-animate {
+  background: #dddddd;
+  padding: 1em;
+  margin-bottom: 1em;
+  text-align: center; }
+
+.animate-move {
+  position: relative; }
+  .animate-move .demo-shape {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 20px;
+    background: gray; }
+  .animate-move:hover > .demo-shape {
+    left: 100%;
+    margin-left: -20px; }
+
+.demo-icons {
+  font-size: 2em; }
+  .demo-icons li {
+    padding: 0.2em; }
+
+.sg-colors {
+  overflow: hidden; }
+  .sg-colors li {
+    overflow: hidden;
+    border: 1px solid #dddddd;
+    padding: 0.3em;
+    margin: 0 0.2em 0.2em 0; }
+    @media all and (min-width: 30em) {
+      .sg-colors li {
+        float: left;
+        width: 5em; } }
+
+.sg-swatch {
+  display: block;
+  height: 1.5em;
+  width: 50%; }
+  @media all and (max-width: 30em) {
+    .sg-swatch {
+      float: left;
+      margin-right: 0.3em; } }
+  @media all and (min-width: 30em) {
+    .sg-swatch {
+      width: 100%;
+      height: 4em;
+      margin-bottom: 0.2em; } }
+
+.sg-label {
+  line-height: 1; }
+
+#sg-annotation-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  width: 100%;
+  padding: 1em; }
+
+/* Annotations */
+#sg-annotation-container {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+  font-size: 90%;
+  background: #222222;
+  color: gray;
+  position: fixed;
+  top: auto;
+  padding: 1rem 1rem 4rem;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2;
+  -webkit-transition: bottom 0.3s ease-out;
+  -moz-transition: bottom 0.3s ease-out;
+  -webkit-transition: bottom 0.3s ease-out;
+  -ms-transition: bottom 0.3s ease-out;
+  -o-transition: bottom 0.3s ease-out;
+  transition: bottom 0.3s ease-out; }
+  #sg-annotation-container a {
+    color: #dddddd; }
+
+#sg-annotation-close-btn {
+  color: #fff;
+  position: absolute;
+  top: 1em;
+  right: 1em;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-align: right; }
+
+.has-comment, .has-comment a {
+  cursor: help !important; }
+
+@font-face {
+  font-family: 'icons';
+  src: url("../assets/icons.eot");
+  src: url("../assets/icons.eot?#iefix") format("embedded-opentype"), url("../assets/icons.woff") format("woff"), url("../assets/icons.ttf") format("truetype"), url("../assets/icons.svg#icons") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/* Pattern Lab icon fonts */
+.icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .sg-header .sg-nav-toggle, .icon-checkbox-unchecked, .sg-checkbox, .icon-checkbox-checked, .sg-checkbox.active, .icon-eye {
+  font-family: 'icons';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased; }

data/app/assets/stylesheets/view_ports.css

@@ -0,0 +1,3 @@
+/*
+*= require ish/styles
+*/

data/app/controllers/view_ports_controller.rb

@@ -0,0 +1,5 @@
+class ViewPortsController < ApplicationController
+  def index
+    render layout: false
+  end
+end

data/app/helpers/view_ports_helper.rb

@@ -0,0 +1,2 @@
+module ViewPortsHelper
+end

data/app/views/view_ports/index.html.erb

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>ish. yet another viewport resizer.</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width" />
+    <%= stylesheet_link_tag    "view_ports", media: "all" %>
+    <%= javascript_include_tag "view_ports" %>
+  </head>
+  <body>
+    <%
+    src = !params['url'].present? ? 'http://localhost:3000' : params['url']
+    %>
+    <header class="sg-header" role="banner">
+       <div class="nav url-change">
+        <form method="get" action="" id="url-form">
+          <label for="url" id="url-toggle" class="url-toggle">URL</label>
+          <input id="url" type="text" name="url" placeholder="Enter any URL" value="<%= src %>" />
+          <button id="url-submit">Go</button>
+        </form>
+      </div>
+
+      <div class="sg-controls" id="sg-controls">
+        <div class="sg-control-content">
+          <ul class="sg-control">
+            <li class="sg-size">
+              <div class="sg-current-size">
+                <form id="sg-form">
+                  Size <input type="text" class="sg-input sg-size-px" value="320">px /
+                  <input type="text" class="sg-input sg-size-em" value="20">em
+                </form><!--end #sg-form-->
+              </div><!--end #sg-current-size-->
+              <ul class="sg-acc-panel sg-size-options">
+               <li class="sg-quarter"><a href="#" id="sg-size-s">S</a></li>
+                <li class="sg-quarter"><a href="#" id="sg-size-m">M</a></li>
+                <li class="sg-quarter"><a href="#" id="sg-size-l">L</a></li>
+                <li class="sg-half"><a href="#" id="sg-size-full">Full</a></li>
+                <li class="sg-half"><a href="#" id="sg-size-random">Random</a></li>
+                <li class="sg-half"><a href="#" class="mode-link" id="sg-size-disco">Disco</a></li>
+                <li class="sg-half"><a href="#" class="mode-link" id="sg-size-hay">Hay!</a></li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </header>
+
+    <!-- Iframe -->
+    <div id="sg-vp-wrap">
+      <div id="sg-cover"></div>
+      <div id="sg-gen-container">
+        <iframe id="sg-viewport" src="<%= src %>" sandbox="allow-same-origin allow-scripts"></iframe>
+        <div id="sg-rightpull-container">
+          <div id="sg-rightpull"></div>
+        </div>
+      </div>
+    </div>
+    <!--end iFrame-->
+
+  </body>
+</html>

data/config/initializers/assets.rb

@@ -0,0 +1 @@
+Rails.application.config.assets.precompile += %w( view_ports.css view_ports.js )

data/config/routes.rb

@@ -0,0 +1,4 @@
+Rails.application.routes.draw do
+  get 'view-ports' => 'view_ports#index'
+
+end

data/lib/ish_rails/engine.rb

@@ -0,0 +1,4 @@
+module IshRails
+  class Engine < ::Rails::Engine
+  end
+end

data/lib/ish_rails/version.rb

@@ -0,0 +1,3 @@
+module IshRails
+  VERSION = "0.0.1"
+end

data/lib/ish_rails.rb

@@ -0,0 +1,4 @@
+require "ish_rails/engine"
+
+module IshRails
+end

data/lib/tasks/ish_rails_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :ish_rails do
+#   # Task goes here
+# end

data/test/controllers/view_ports_controller_test.rb

@@ -0,0 +1,9 @@
+require 'test_helper'
+
+class ViewPortsControllerTest < ActionController::TestCase
+  test "should get index" do
+    get :index
+    assert_response :success
+  end
+
+end

data/test/dummy/README.rdoc

@@ -0,0 +1,28 @@
+== README
+
+This README would normally document whatever steps are necessary to get the
+application up and running.
+
+Things you may want to cover:
+
+* Ruby version
+
+* System dependencies
+
+* Configuration
+
+* Database creation
+
+* Database initialization
+
+* How to run the test suite
+
+* Services (job queues, cache servers, search engines, etc.)
+
+* Deployment instructions
+
+* ...
+
+
+Please feel free to use a different markup language if you do not plan to run
+<tt>rake doc:app</tt>.

data/test/dummy/Rakefile

@@ -0,0 +1,6 @@
+# Add your own tasks in files placed in lib/tasks ending in .rake,
+# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
+
+require File.expand_path('../config/application', __FILE__)
+
+Rails.application.load_tasks