helios 0.0.5 → 0.1.1

data/lib/helios/frontend/stylesheets/_settings.scss

@@ -15,23 +15,24 @@
 // $em-base: 16px;
 
 // We use these to control various global styles
-// $body-bg: #fff;
-// $body-font-color: #222;
+
+$body-bg: #0f1219 url("../images/bg.png");
+$body-font-color: #cccccc;
 // $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
 // $body-font-weight: normal;
 // $body-font-style: normal;
 
 // We use this to control font-smoothing
-// $font-smoothing: antialiased;
+$font-smoothing: subpixel-antialiased;
 
 // We use these to control text direction settings
 // $text-direction: ltr;
 
 // We use these as default colors throughout
-// $primary-color: #2ba6cb;
-// $secondary-color: #e9e9e9;
-// $alert-color: #c60f13;
-// $success-color: #5da423;
+$primary-color: #bfbc3d;
+$secondary-color: #bfbc3d;
+$alert-color: #c60f13;
+$success-color: #5da423;
 
 // We use these to make sure border radius matches unless we want it different.
 // $global-radius: 3px;
@@ -70,10 +71,10 @@
 //
 
 // We use these to control header font styles
-// $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
-// $header-font-weight: bold;
-// $header-font-style: normal;
-// $header-font-color: #222;
+$header-font-family: "Bariol", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
+$header-font-weight: 400;
+$header-font-style: normal;
+$header-font-color: $primary-color;
 // $header-line-height: 1.4;
 // $header-top-margin: .2em;
 // $header-bottom-margin: .5em;

data/lib/helios/frontend/stylesheets/screen.sass

@@ -1,69 +1,90 @@
-@import "compass/reset"
+@import "compass"
 +global-reset
 
-@import "foundation/foundation-global"
+@mixin helvetica-font-stack
+  font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
+
+@mixin meslo-font-stack
+  font-family: "Meslo", Menlo, Monaco, monospace
+
+@import "./settings"
+@import "./fonts"
+@import "./iphone"
+@import "./codemirror"
+
 @import "foundation"
 
+body
+  -webkit-text-stroke: 1px transparent
+@media only screen and (max-device-width:480px)
+  body
+    -webkit-text-stroke: 0 black
+
 [role="application"]
   +grid-row
 
 [role="banner"]
-  +grid-row($behavior: nest)
+  +grid-row($behavior: nest-collapse)
   #logo
     font-family: "Bariol"
-    +grid-column(4, $float: left)
+    font-weight: 700
+    text-align: left
+    +grid-column(2, $float: left)
+    padding-left: 13px
 
   [role="navigation"]
-    +grid-column(8, $float: right, $last-column: true)
     +grid-row($behavior: nest-collapse)
+    +grid-column(10, $float: right)
 
     ul
-      +block-grid(4)
+      float: right !important
+      margin-top: 10px
 
     li, a
-      display: block
+      color: #222
 
     li
+      padding: 0
+
       a
-        padding-top: 50px
-
-      &.data a
-        background: url("../images/data.png") center center no-repeat 
-      &.push-notification a
-        background: url("../images/push-notification.png") center center no-repeat 
-      &.in-app-purchase a
-        background: url("../images/in-app-purchase.png") center center no-repeat 
-      &.passbook a
-        background: url("../images/passbook.png") center center no-repeat 
-      a
-        text-align: center
-        font-size: 0.825em
         display: block
-        height: 60px
+        text-align: left
+        padding: 1em 1.5em 2em 1.5em
+        height: 2em
+
+      i
+        font-size: 1.5em
+        float: left
+        padding-right: 20px
 
 [role="main"]
   +grid-row($behavior: nest-collapse)
-  
-  .auxiliary
-    +grid-row($behavior: nest-collapse)
-    margin: 1em 0
-    input[type="search"]
-      +grid-column(4, $float: right)
-      font-size: 1.25em
-    select#entities
-      +grid-column(4, $float: left)
 
   .master
+    +grid-column(12, $float: left)
+
+  .detail
+    +panel
+    +grid-column(4, $float: right, $last-column: true)
+    float: right !important
+
+  .detail + .master
     +grid-column(8, $float: left)
 
+  .master
     table
+      +border-radius(8px)
       display: block
       table-layout: fixed
       width: 100%
       overflow: auto
 
+    th
+      font-weight: 600
+      color: #333
+
     tr td
-      max-width: 240px
+      max-width: 40em
       white-space: nowrap
       overflow: auto
 
@@ -76,12 +97,21 @@
       +grid-row($behavior: nest-collapse)
       +pagination
 
+      display: none
+
       ul
-        +grid-column(10, $center: true)
+        +grid-column(12, $center: true)
+
+
+    #datagrid
+      table + p
+        width: 100%
+        text-align: center
+        padding: 2em
+        font-size: 2em
 
   .detail
-    +grid-column(4, $float: left, $last-column: true)
-    +panel
+
     form
       fieldset
         border: 0
@@ -96,3 +126,58 @@
 
       button, input[type="submit"]
         +button
+
+.auxiliary
+  +grid-row($behavior: nest-collapse)
+  margin: 10px 0
+
+  h2
+    width: 200px
+    float: left
+    margin-left: 15px
+
+  button, input, form
+    float: right !important
+
+  .filter input
+    width: 300px
+    margin-top: 5px
+    margin-left: 20px
+    margin-right: 15px
+
+  button, button:hover, .button, .button:hover
+    color: #222
+
+    &.dropdown
+      text-align: left !important
+
+  .dropdown.button:before
+    border-color: #222 transparent transparent transparent !important
+
+  #entities-dropdown
+    float: right
+    width: 300px
+    margin-right: 15px
+
+  #entities
+    margin-left: -140px
+    font-size: 1.5em
+
+#compose-modal
+  width: 90%
+  left: 45%
+  top: 30px
+
+  .iphone
+    float: right
+
+  form
+    float: left
+    width: 500px
+
+    fieldset
+      border: none
+      padding: 0
+
+      legend
+        display: none

data/lib/helios/frontend/views/compose.jst.tpl

@@ -0,0 +1,70 @@
+<header>
+  <h1>Send a Push Notification</h1>
+</header>
+
+<form id="compose">
+  <!-- <fieldset id="recipients">
+    <legend>Recipients</legend>
+
+    <ol>
+      <li>
+        <input type="radio" name="recipients" value="all" id="recipients[all]"/>
+        <label for="recipients[all]">All Devices</label>
+      </li>
+      <li>
+        <input type="radio" name="recipients" value="specified" id="recipients[specified]"/>
+        <label for="recipients[specified]">Specified Devices</label>
+        <textarea id="tokens" name="tokens" rows="3", cols="50"></textarea>
+      </li>
+    </ol>
+  </fieldset> -->
+
+  <fieldset class="message">
+    <legend>Payload</legend>
+
+    <div class="span7">
+      <textarea id="payload" name="payload" rows="4" cols="50">
+  {
+    "aps": {
+      "alert": "Lorem ipsum dolar sit amet.",
+      "badge": 0
+    }
+  }</textarea>
+
+      <div class="alert">
+        <strong></strong> : <span></span>
+      </div>
+    </div>
+  </fieldset>
+
+  <hr/>
+
+  <button id="send" type="button">Send Push Notification</button>
+</form>
+
+<figure class="iphone preview">
+  <header>
+    <figure class="status">
+      <span class="signal">▁</span>
+      <span class="carrier">Carrier</span>
+      <span class="battery">100%</span>
+    </figure>
+
+    <time>
+      <span class="time">9:04</span>
+      <span class="date">Thursday, November 29</span>
+    </time>
+  </header>
+
+  <figure class="notification">
+    <h1>App Name</h1>
+    <p></p>
+  </figure>
+
+  <footer>
+    <figure class="slider">
+      <input type="range" value="0"></input>
+      <span>slide to view</span>
+    </figure>
+  </footer>
+</figure>

data/lib/helios/frontend/views/devices.jst.tpl

@@ -1,3 +1,16 @@
-<h2>Devices</h2>
+<div class="auxiliary">
+  <h2>Devices</h2>
 
-<div id="datagrid" class="master"></div>
+  <form class="filter">
+    <input type="text" placeholder="Filter Devices..." value=""/>
+  </form>
+  <button class="button" data-reveal-id="compose-modal">Compose</button>
+
+</div>
+
+<div class="master">
+  <div id="datagrid">
+  </div>
+</div>
+
+<div id="compose-modal" class="reveal-modal"></div>

data/lib/helios/frontend/views/entities.jst.tpl

@@ -1,9 +1,11 @@
 <div class="auxiliary">
-  <select id="entities">
+  <h2>Data</h2>
+  <a id="entities-dropdown" data-dropdown="entities" class="button dropdown">Entities</a>
+  <ul id="entities" class="f-dropdown">
     <% _.each(entities.models, function(entity) { %>
-      <option value="<%= entity.url() %>"><%= entity.get('name') %></option>
+      <li><a href="#<%= entity.url() %>"><%= entity.get('name') %></a></li>
     <% }) %>
-  </select>
+  </ul>
 </div>
 
-<div id="datagrid" class="master"></div>
+<div id="datagrid" class="master"></div>

data/lib/helios/frontend/views/index.haml

@@ -4,22 +4,38 @@
     %meta{charset: "utf-8"}
     %meta{:'http-equiv' => "X-UA-Compatible", content: "IE=edge,chrome=1"}
     %title Helios
-    %link{rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon"}
     %link{rel: "license", href: "http://opensource.org/licenses/MIT", :title => "MIT License"}
     %link{rel: "description", href: "Helios"}
     = css :application
 
-  %body{role: 'application'}
+  %body{role: 'application', data: {version: Helios::VERSION}}
     %header{role: 'banner'}
-      %h1#logo 
+      %h1#logo
         %a{href: ''} Helios
 
       %nav{role: 'navigation'}
-        %ul
-          - for service in ['Data', 'Push Notification', 'In-App Purchase', 'Passbook']
-            - slug = service.downcase.gsub(/\W/, '-')
-            %li{class: slug}
-              %a{href: "##{slug}"}= service
+        %ul.button-group
+          %li.button
+            %a{href: "#data"}
+              %i.data
+              Data
+          %li.button
+            %a{href: "#push-notification"}
+              %i.push-notification
+              Push Notification
+
+          %li.button
+            %a{href: "#in-app-purchase"}
+              %i.in-app-purchase
+              In-App Purchase
+
+          %li.button
+            %a{href: "#passbook"}
+              %i.passbook
+              Passbook
+
+
+
 
     %div{role: 'main'}
 

data/lib/helios/frontend/views/passes.jst.tpl

@@ -1,3 +1,11 @@
-<h2>Passes</h2>
+<div class="auxiliary">
+  <h2>Passes</h2>
 
-<div id="datagrid" class="master"></div>
+  <form class="filter">
+    <input type="text" placeholder="Filter Passes..." value=""/>
+  </form>
+</div>
+
+<div class="master">
+  <div id="datagrid"></div>
+</div>

data/lib/helios/frontend/views/receipts.jst.tpl

@@ -1,3 +1,11 @@
-<h2>Receipts</h2>
+<div class="auxiliary">
+  <h2>Receipts</h2>
 
-<div id="datagrid" class="master"></div>
+  <form class="filter">
+    <input type="text" placeholder="Filter Receipts..." value=""/>
+  </form>
+</div>
+
+<div class="master">
+  <div id="datagrid"></div>
+</div>

data/lib/helios/templates/Gemfile.erb

@@ -1,7 +1,10 @@
 source "https://rubygems.org"
 
+<% if options.edge %>
+gem 'helios', git: 'git://github.com/helios-framework/helios.git'
+<% else %>
 gem 'helios'
+<% end %>
 
+gem 'unicorn'
 gem 'pg'
-
-gem 'thin', '~>1.4.1'