grandstand 0.2.1

data/app/stylesheets/global.less

@@ -0,0 +1,435 @@
+/*
+  global.less contains the styling for rendering the admin UI in any context, assuming
+  it lives somewhere underneath a .admin item. This will allow you to take global UI
+  elements and apply them externally or internally - whatever you feel like.
+*/
+@import url('_buttons');
+
+body, html {
+  min-height:100%;
+}
+
+body.admin {
+  background-color:#fff;
+  background-image:-moz-linear-gradient(top, #fff, #eee);
+  background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
+  font:12px Arial, sans-serif;
+  margin:0;
+  padding:0;
+}
+
+.admin {
+  /* HTML Tags (excluding form input elements) */
+  a {
+    cursor:pointer;
+    text-decoration:none;
+  }
+
+  a img {
+    border-width:0;
+  }
+
+  form {
+    label {
+      color:#666;
+      display:block;
+      font:bold 12px Arial;
+      margin-bottom:3px;
+    }
+
+    .field {
+      margin:0;
+      padding:10px 5px;
+    }
+  }
+
+  h1, h2 {
+    font-family:'Calibiri', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+    .button {
+      margin-left:10px;
+      vertical-align:center;
+    }
+  }
+
+  h1 {
+    margin:0 0 10px 0;
+    font-size:16pt;
+  }
+
+  h2 {
+    margin:0 0 5px 0;
+    font-size:14pt;
+  }
+  
+  table {
+    border-collapse:collapse;
+    border-spacing:0;
+    width:100%;
+  }
+
+  table {
+    tbody, tr {
+      width:100%;
+    }
+  }
+
+
+  /* Tag-specific classes */
+  select.error {
+    border:1px solid #f00;
+  }
+
+  select.multiple {
+    min-height:55px;
+    min-width:150px;
+  }
+
+  select.small {
+    width:50px;
+  }
+
+  textarea.small {
+    height:32px;
+    width:180px;
+  }
+
+  textarea.wysiwyg {
+    display:block;
+    height:400px;
+    width:100%;
+  }
+
+  textarea.error, input.error {
+    border:1px solid #f00 !important;
+  }
+
+  tr.item {
+    background-color:#fff;
+  }
+
+  tr.item.odd {
+    background-color:#edf3fe;
+  }
+
+  tr.item td {
+    padding:5px;
+  }
+
+  tr.item td.icon {
+    background-position:5px 2px;
+    padding-left:25px;
+  }
+
+  /* General Classes */
+  .container {
+    float:left;
+    margin:0 0 10px 10px;
+    padding:0 !important;
+    width:220px;
+  }
+
+  .container.gallery img {
+    display:none;
+  }
+
+  .container.gallery a img, .container.image img {
+    display:block;
+    padding:10px;
+  }
+
+  .container:hover {
+    background-color:#ececec;
+  }
+
+  .dropdown {
+    -moz-border-radius-bottomleft:5px;
+    -moz-border-radius-bottomright:5px;
+    -moz-box-shadow:#444 0 2px 2px;
+    -webkit-border-bottom-left-radius:5px;
+    -webkit-border-bottom-right-radius:5px;
+    -webkit-box-shadow:#444 0 2px 2px;
+  }
+
+  .grid {
+    border-collapse:collapse;
+    border:1px solid #aaa;
+
+    thead th {
+      background:#eee;
+      padding:5px;
+      text-align:left;
+    }
+
+    tbody {
+      tr.row {
+        td {
+          border-top:1px solid #aaa;
+          padding:5px;
+        }
+
+        td.actions {
+          text-align:right;
+        }
+      }
+
+      tr.one {
+        background-color:#fff;
+      }
+
+      tr.two {
+        background-color:#edf3fe;
+      }
+    }
+  }
+
+  .grey {
+    color:#666;
+  }
+
+  .header {
+    background-color:#a7a7a7;
+    background-image:-moz-linear-gradient(top, #cacaca, #a7a7a7);
+    background-image:-webkit-gradient(linear, left top, left bottom, from(#cacaca), to(#a7a7a7));
+    border-bottom:1px solid #888;
+    overflow:hidden;
+    padding:5px;
+    -moz-border-radius-topleft:5px;
+    -moz-border-radius-topright:5px;
+    -webkit-border-top-left-radius:5px;
+    -webkit-border-top-right-radius:5px;
+  }
+
+  .header .float-left {
+    cursor:move;
+    font-weight:bold;
+  }
+
+
+  .button {
+    #grandstand > .button-default;
+  }
+
+  .button::-moz-focus-inner {
+    border:none;
+    padding:0 !important;
+  }
+
+  .button:hover {
+    #grandstand > .button-hover;
+  }
+
+  .button:active {
+    #grandstand > .button-active;
+  }
+
+  .button.grey {
+    #grandstand > .button-grey;
+  }
+
+  .button.grey:hover {
+    #grandstand > .button-grey-hover;
+  }
+
+  .button.grey:active {
+    #grandstand > .button-grey-active;
+  }
+
+  .error {
+    margin-top:5px;
+  }
+
+  .errors label {
+    color:#f00;
+  }
+
+  .errors input.text, .errors select, .errors textarea {
+    border:1px solid #f00;
+  }
+
+  .flash {
+    bottom:20px;
+    position:fixed;
+    text-align:center;
+    width:100%;
+    z-index:4;
+  }
+
+  .flash .inner {
+    background:rgba(0, 0, 0, 0.7);
+    color:#fff;
+    display:inline-block;
+    font-size:24pt;
+    margin:0 auto;
+    padding:10px 20px;
+    -moz-border-radius:70px;
+    -webkit-border-radius:70px;
+  }
+
+  .float-left {
+    float:left;
+  }
+
+  .float-right {
+    float:right;
+  }
+
+  .icon {
+    background-position:left top;
+    background-repeat:no-repeat;
+    display:inline-block;
+    min-height:16px;
+    padding-left:20px;
+  }
+
+  .button:hover .icon, .icon:hover {
+    background-position:left bottom;
+  }
+
+  .button.has-icon {
+    padding-left:5px;
+  }
+
+  .icon.add {
+    background-image:url(../images/icons/add.png);
+  }
+
+  .icon.delete {
+    background-image:url(../images/icons/delete.png);
+  }
+
+  .icon.edit {
+    background-image:url(../images/icons/edit.png);
+  }
+
+  .icon.error {
+    background-image:url(../images/icons/error.png);
+  }
+
+  .icon.gallery {
+    background-image:url(../images/icons/gallery.png);
+  }
+
+  .icon.galleries {
+    background-image:url(../images/icons/galleries.png);
+  }
+
+  .icon.image {
+    background-image:url(../images/icons/image.png);
+  }
+
+  .icon.okay {
+    background-image:url(../images/icons/okay.png);
+  }
+
+  .icon.pages {
+    background-image:url(../images/icons/pages.png);
+  }
+
+  .icon.posts {
+    background-image:url(../images/icons/posts.png);
+  }
+
+  .icon.upload {
+    background-image:url(../images/icons/upload.png);
+  }
+
+  .icon.users {
+    background-image:url(../images/icons/users.png);
+  }
+
+  h1.icon {
+    line-height:48px;
+    padding-left:58px;
+  }
+
+  .inset {
+    background-color:#f0f0f0;
+    padding:10px;
+    -moz-border-radius:5px;
+    -webkit-border-radius:5px;
+    -moz-box-shadow:inset #888 0 1px 2px;
+    -webkit-box-shadow:inset #888 0 1px 2px;
+  }
+
+  .inset.icon {
+    background-position:5px 5px;
+    display:block;
+    padding-left:68px;
+  }
+
+  .progress-bar {
+    background:url(../images/background-progress-bar.png) repeat-x left center;
+    margin:0;
+    padding:0 !important;
+    width:200px;
+
+    .progress {
+      background:url(../images/background-progress.gif) repeat-x;
+      height:11px;
+      width:0;
+    }
+  }
+
+  .progress-bar.complete .progress {
+    background-image:url(../images/background-progress-complete.gif);
+    width:100%;
+  }
+
+  .right {
+    text-align:right;
+  }
+
+  /* Form Elements */
+  select {
+    padding:2px;
+  }
+
+  textarea {
+    height:50px;
+  }
+
+  input.text, textarea {
+    background:#fff url(../images/background-input.gif) repeat-x;
+    border-bottom:1px solid #ddd;
+    border-left:1px solid #c3c3c3;
+    border-right:1px solid #c3c3c3;
+    border-top:1px solid #7d7d7d;
+    padding:3px;
+    width:370px;
+    -moz-box-sizing:border-box;
+    -ms-box-sizing:border-box;
+    -webkit-box-sizing:border-box;
+  }
+
+  input.text.medium {
+    width:180px;
+  }
+
+  input.text.oversized {
+  /*  display:block;*/
+    font-size:18px;
+    width:100%;
+  }
+
+  input.half.text.oversized {
+    width:183px;
+  }
+
+  input.text.small {
+    width:94px;
+  }
+
+  input.text.tiny {
+    width:50px;
+  }
+
+  input.replace.unedited, textarea.replace.unedited {
+    color:#777 !important;
+  }
+
+  /* jQuery UI */
+  .ui-tabs-hide {
+    display:none;
+  }
+}

data/app/stylesheets/login.less

@@ -0,0 +1,30 @@
+/*
+  login.less simply contains the layout for the login page. This page is used
+  only for logging users into the site, and is pretty basic.
+*/
+
+#logo {
+  left:50%;
+  margin-left:-190px;
+  position:absolute;
+  top:100px;
+}
+
+#login {
+/*  background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
+  background-image:-moz-linear-gradient(top, #eee, #ddd);
+*/
+  border-bottom:1px solid #fff;
+  left:50%;
+  margin:0 0 0 -200px;
+  position:absolute;
+  padding:2em;
+  top:130px;
+  width:400px;
+  -moz-box-sizing:border-box;
+  -ms-box-sizing:border-box;
+  -webkit-box-sizing:border-box;
+  -moz-border-radius:5px;
+  -webkit-border-radius:5px;
+/*  -webkit-box-shadow:rgba(0, 0, 0, 0.5) 0 0 5px;*/
+}

data/app/stylesheets/wysiwyg.less

@@ -0,0 +1,96 @@
+/*
+  wysiwyg.less contains the CSS for any WYSIWYG editors that are rendered
+  in the admin interface or during site preview. It mostly makes sure things
+  look okay no matter where they happen. Important to note is that when
+  in preview mode, we keep the Grandstand UI theming from global.less,
+  even though it's nested inside someone else's UI. This may not be very
+  pretty, so you should consider extending external.css to include any
+  overrides you may have.
+*/
+@import url('_buttons');
+@import url('_dialogs');
+
+.admin .wysiwyg {
+  border:1px solid #888;
+  overflow:hidden;
+  position:relative;
+  -webkit-border-radius:3px;
+
+  .toolbar {
+    #grandstand > .styled-toolbar;
+    border-bottom:1px solid #444;
+    position:relative;
+    z-index:4;
+
+    .button {
+      line-height:0;
+      padding:3px;
+
+      .icon {
+        background-position:center top;
+      }
+
+      .icon.bold {
+        background-image:url(../images/icons/editor/bold.png);
+      }
+
+      .icon.italic {
+        background-image:url(../images/icons/editor/italic.png);
+      }
+
+      .icon.ordered-list {
+        background-image:url(../images/icons/editor/ordered-list.png);
+      }
+
+      .icon.unordered-list {
+        background-image:url(../images/icons/editor/unordered-list.png);
+      }
+    }
+
+    .button:hover .icon {
+      background-position:center bottom;
+    }
+  }
+
+  iframe {
+    background:#fff url(../images/background-input.gif) repeat-x;
+  /*  border-bottom:1px solid #ddd;
+    border-left:1px solid #c3c3c3;
+    border-right:1px solid #c3c3c3;
+    border-top:1px solid #7d7d7d;*/
+    display:block;
+    height:400px;
+    width:100%;
+    -webkit-border-bottom-left-radius:3px;
+    -webkit-border-bottom-right-radius:3px;
+  }
+
+  textarea {
+    border-width:0;
+  /*  padding:0;*/
+  }
+
+  .cover {
+    background-color:rgba(255, 255, 255, 0.9);
+    height:100%;
+    left:0;
+    position:absolute;
+    top:0;
+    width:100%;
+    z-index:1;
+    -webkit-border-radius:3px;
+  }
+
+  .loading {
+    background:rgba(0, 0, 0, 0.7) url(../images/spinner-dark.gif) center center no-repeat;
+    height:50px;
+    left:50%;
+    margin:-25px 0 0 -25px;
+    position:absolute;
+    top:50%;
+    width:50px;
+    z-index:2;
+    -moz-border-radius:5px;
+    -webkit-border-radius:5px;
+  }
+}

data/app/views/admin/galleries/_form.html.erb

@@ -0,0 +1,11 @@
+<% wrap_admin_form do -%>
+  <div class="field">
+    <%= form.label :name %>
+    <%= form.text_field :name, :class => 'text' %>
+    <%= errors_on(:gallery, :name) %>
+  </div>
+  <div class="field">
+    <%= form.label :description %>
+    <%= form.text_area :description %>
+  </div>
+<% end -%>

data/app/views/admin/galleries/_gallery.html.erb

@@ -0,0 +1,16 @@
+<% editable ||= false -%>
+<% gallery.images.each do |image| -%>
+<div class="inset image container" id="images_<%= image.id %>">
+  <% if editable -%>
+  <div class="header">
+    <div class="float-left image icon">
+      <%= truncate(image.file.original_filename, :length => 23) %>
+    </div>
+    <div class="float-right">
+      <%= link_to '', edit_admin_gallery_image_path(gallery, image), :class => 'edit icon remote' %><%= link_to '', delete_admin_gallery_image_path(gallery, image), :class => 'delete icon remote' %>
+    </div>
+  </div>
+  <% end -%>
+  <%= image_tag(image.file.url(:admin_medium), :alt => image.caption) %>
+</div>
+<% end -%>

data/app/views/admin/galleries/_list.html.erb

@@ -0,0 +1,17 @@
+<% galleries.each do |gallery| -%>
+<div class="inset gallery container" id="galleries_<%= gallery.url %>">
+  <div class="header">
+    <div class="float-left gallery icon">
+      <%= (gallery.name) %>
+    </div>
+    <div class="float-right">
+      <%= link_to '', edit_admin_gallery_path(gallery), :class => 'edit icon remote' %>
+      <%= link_to '', delete_admin_gallery_path(gallery), :class => 'delete icon remote' %>
+    </div>
+  </div>
+  <%= link_to(image_tag(gallery.cover_image.file.url(:admin_medium)), admin_gallery_path(gallery)) %>
+  <% gallery.images.limit(100).each do |image| -%>
+  <%= image_tag(image.file.url(:admin_medium)) %>
+  <% end -%>
+</div>
+<% end -%>

data/app/views/admin/galleries/delete.html.erb

@@ -0,0 +1,8 @@
+<h2>Are you sure you want to do this?</h2>
+<% form_for(@gallery, :html => {:method => :delete}, :url => admin_gallery_path(@gallery)) do %>
+  <div class="field">You cannot undo this once it's done! This gallery, and all of its pictures, will be gone forever - poof!</div>
+  <div class="toolbar">
+    <%= button('Delete') %>
+    <%= button_link_to('Cancel', return_path || admin_gallery_path(@gallery), :class => 'cancel') %>
+  </div>
+<% end %>

data/app/views/admin/galleries/edit.html.erb

@@ -0,0 +1,8 @@
+<h2>Edit Gallery</h2>
+<% form_for(@gallery, :url => admin_gallery_path(@gallery)) do |form| -%>
+  <%= render :partial => 'form', :locals => {:form => form} %>
+  <div class="toolbar">
+    <%= button 'Save' %>
+    <%= button_link_to('Cancel', admin_galleries_path, :class => 'cancel') %>
+  </div>
+<% end -%>

data/app/views/admin/galleries/editor.html.erb

@@ -0,0 +1,13 @@
+<form action="<%= request.fullpath %>" method="POST">
+  <div class="source">
+    <span class="header">Galleries</span>
+    <% @galleries.each do |gallery| -%>
+    <a href="<%= admin_gallery_path(gallery) %>">
+      <span class="icon" style="background-image:url(<%= gallery.cover_image.file.url(:admin_icon) %>);"><%= gallery.name %></span>
+    </a>
+    <% end -%>
+  </div>
+  <div class="destination">
+    
+  </div>
+</form>

data/app/views/admin/galleries/editor_with_images.html.erb

@@ -0,0 +1,19 @@
+<form action="<%= request.fullpath %>" method="POST">
+  <div class="source">
+    <div class="header">Galleries</div>
+    <% @galleries.each_with_index do |gallery, index| -%>
+    <a<%= raw ' class="active"' if index.zero? %> href="<%= admin_gallery_path(gallery) %>" rel="gallery-<%= gallery.to_param %>">
+      <span class="icon" style="background-image:url(<%= gallery.cover_image.file.url(:admin_icon) %>);"><%= gallery.name %></span>
+    </a>
+    <% end -%>
+  </div>
+  <div class="destination">
+    <div class="scrollable">
+      <% @galleries.each_with_index do |gallery, index| -%>
+      <div id="gallery-<%= gallery.to_param %>"<%= raw ' style="display:none;"' unless index.zero? %>>
+        <%= render :partial => 'gallery', :locals => {:gallery => gallery} %>
+      </div>
+      <% end -%>
+    </div>
+  </div>
+</form>

data/app/views/admin/galleries/index.html.erb

@@ -0,0 +1,13 @@
+<% content_for :left do %>
+  <%= button_link_to('Add a Gallery', new_admin_gallery_path, :class => 'remote', :icon => 'add') %>
+<% end %>
+<% if @galleries.empty? -%>
+<div class="inset">
+  <h2>You haven't set up any galleries!</h2>
+  <b class="grey">Get started:</b> <%= button_link_to('Add a Gallery', new_admin_gallery_path, :class => 'remote', :icon => 'add') %>
+</div>
+<% else -%>
+<div class="galleries sortable">
+  <%= render :partial => 'list', :locals => {:galleries => @galleries} %>
+</div>
+<% end -%>

data/app/views/admin/galleries/new.html.erb

@@ -0,0 +1,8 @@
+<h2>New Gallery</h2>
+<% form_for(@gallery, :url => admin_galleries_path) do |form| -%>
+  <%= render :partial => 'form', :locals => {:form => form} %>
+  <div class="toolbar">
+    <%= button 'Add Gallery' %>
+    <%= button_link_to('Cancel', admin_galleries_path, :class => 'cancel') %>
+  </div>
+<% end -%>

data/app/views/admin/galleries/show.html.erb

@@ -0,0 +1,15 @@
+<% content_for :left do %>
+  <%= button_link_to('Upload An Image', new_admin_gallery_image_path(@gallery), :class => 'remote', :icon => 'upload') %>
+  <%= button_link_to('Upload Multiple', upload_admin_gallery_images_path(@gallery), :class => 'remote', :icon => 'upload') %>
+<% end %>
+<h1 class="galleries icon"><%= @gallery.name %> <%= button_link_to('Edit', edit_admin_gallery_path(@gallery), :class => 'remote', :icon => 'edit') %></h1>
+<% if @gallery.images.empty? -%>
+<div class="inset">
+  <h2>You haven't uploaded any images!</h2>
+  <b class="grey">Get started:</b> <%= button_link_to('Upload an Image', new_admin_gallery_image_path(@gallery), :class => 'remote') %>
+</div>
+<% else -%>
+<div class="images sortable">
+  <%= render :partial => 'gallery', :locals => {:gallery => @gallery, :editable => true} %>
+</div>
+<% end -%>