tandem 0.2.0.rc

data/app/assets/stylesheets/tandem/contents.scss

@@ -0,0 +1,541 @@
+/*
+  These are styles for the actual tandem application UX.
+  
+*/
+
+@import "variables";
+
+body.tandem-admin-bar {
+  margin-top: 35px;
+}
+#tandem_page_links {
+  z-index: 900;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 35px;
+  line-height: 35px;
+  width: 100%;
+  background: #333;
+  margin: 0;  
+  padding: 0 10px;  
+  border-bottom: 1px solid $darkblue;
+  li {
+    display: inline;    
+    padding: 0 20px;
+    a, a:active, a:visited {
+     color: $lightblue;
+     text-decoration: none; 
+     &:hover {color: #aaa;}
+    }
+  }
+  a#page_new_link {
+    background: transparent url(image_path('tandem/tandem_logo_nav.png')) left no-repeat;
+    padding-left: 100px;
+  }
+}
+.tandem_content:hover {
+  outline: 1px solid $midblue;
+  cursor: pointer;
+}
+.tandem_toolbar {
+  position: absolute;
+  margin: 10px 5px;
+  display: none;
+  background: none;  
+  font-size: 13px;
+  @include goo;
+}
+.tandem_toolbar a.tandem_edit_link,
+.tandem_toolbar a.tandem_edit_link:active,
+.tandem_toolbar a.tandem_edit_link:visited {
+  font-size: 13px;
+  @include goo;  
+  color: #333;
+  background: $lightblue;
+  padding: 5px 10px;
+  text-decoration: none;    
+  text-transform: uppercase;
+  @include radius(3px);
+  font-weight: normal;
+  box-shadow: 0px 0px 5px #333;
+  &:hover {
+    color: #fff !important;
+    background: $darkblue;
+  }
+}
+
+
+
+/////// Tandem Editor
+h4.tandem-logo {
+  font-size: 12px;
+  text-align:right;
+  position: relative;
+  right: 0;
+  @include goo;
+  color: $midblue;
+  font-weight: none;
+  height: 33px;
+  margin: 10px 0;
+  font-weight: normal;
+  text-shadow: none;
+  background: transparent url(image_path('tandem/tandem_logo.png')) 100% 0 no-repeat;
+  text-indent: -9999px;	
+}
+
+
+/////// Contents, Page, & Image Editor
+
+#tandem-editor {
+  width: 600px;
+}
+#tandem-editor-wym {
+  width: 100%;
+}
+
+#tandem-editor, #tandem-editor-wym {
+  h1.tandem-title {
+    font-size: 18px;
+    @include goo;
+    color: $darkblue;
+    font-weight: none;
+    margin: 10px 0;
+  }
+  h3#selected_image_title {
+    font-size: 20px;
+    @include goo;
+    color: #407992;
+    font-weight: normal;
+    margin: 15px 0;
+  }
+  iframe{
+    border:none;
+    height: 100%;
+    width: 100%;
+  }
+  a.use {
+    font-size: 15px; 
+    color: $darkblue;
+  }
+  form {
+    div {
+      padding: 5px;
+    }
+    div.field_with_errors {
+      padding:0;
+      label {padding: 0;}
+      input {
+        background: #fdeeee;
+      }
+    }
+    label {
+      @include goo;
+      color: $darkblue;
+      width: 100px;
+      padding: 0;
+      text-align: left;
+      font-size: 14px;
+      margin-left: 10px;  
+      display:block;
+      float: left;
+    }
+    input, textarea {
+      border: 1px solid #ccc;
+      @include radius(3px);
+      box-shadow: 0 0 5px #aaa;
+      padding: 5px;
+      position:relative;
+    }
+    input#page_is_default, input#page_parent_id_, input#page_parent_id_1 {top:5px;}
+    .field {
+      margin: 15px 0;
+      @include goo;
+    }
+    .field span {
+      font-size: 14px;
+      color: $darkblue;
+      padding: 0 10px 0 5px;
+      position: relative;
+      top: 5px;
+    }
+   .wym_box {
+     background: none;
+     border:none;
+     border-bottom: 1px solid #eee;
+   } 
+   .wym_iframe {
+     background: #fff;
+     border: 1px solid #ccc;     
+   }
+   .wym_skin_default .wym_iframe iframe {border:none;height: 300px;}
+   iframe .wym_iframe {background: transparent; border:none;}
+  } // end form
+  .wym_section {
+    background: none;
+    h2 {
+      background: none;
+      border: 1px solid $darkblue;      
+      @include goo;
+      border: none;
+      padding: 0;
+      margin: 0;
+    }
+    ul {
+      border: none;
+    }
+    a {
+      @include goo;
+      color: $darkblue;    
+      padding: 3px 5px;  
+    }
+    border:none;
+    padding: 2px 3px;    
+  } // end wym-section
+  .actions {
+//    margin: 15px 10px;    
+    input.wymupdate,input.save {
+      background: #4ba9d8;
+      color: #fff;
+      font-size: 18px;
+      @include radius(8px);
+      border: 1px solid #4ba9d8;
+      cursor: pointer;
+      padding: 8px 10px;     
+      @include goo;
+      &:hover {color: #fff;background: $darkblue;}      
+    }      
+  } // end actions  
+  #error_explanation {
+    @include errors;
+  }
+  ul#tandem_image_attributes {
+    margin: 0;
+    padding: 0;
+    li {
+      list-style: none;
+      padding: 5px;
+      list-position: inside;
+      @include goo;
+      color: #3e4c52;
+      font-size: 12px;
+    }
+    li.image_name {
+      font-size: 16px;
+    }
+  }
+} // end tandem editor
+
+.wym {width: 100%;}
+
+/// Image Upload Modal
+
+#tandem-editor-wym form.tandem_content_editor {
+float: left;
+padding-left: 1%;
+}
+form.tandem_text_editor {
+  width: 100%;
+}
+form.tandem_text_editor textarea#content_text_content {
+  width: 95%;
+}
+form.tandem_image_editor {
+  width: 24%;
+}
+iframe {
+  width: 90%;
+  padding: 0;
+  margin :0;
+  height: 300px;
+  overflow: scroll;   
+}
+div#tandem-image-editor {
+  width:73%;
+  float:left;
+  border-left: 1px solid $lightblue;
+}
+//
+h3.tandem-mod-title {
+  font-size: 15px;
+  @include goo;
+  color: $darkblue;
+  font-weight: normal;
+  margin: 10px 0;
+}
+
+#tandem-image-editor div#gallery-image {
+width: 100%;
+padding: 0;
+margin: 0;
+
+
+  h3 {
+    font-size: 15px;
+    @include goo;
+    color: $darkblue;
+    font-weight: normal;
+    margin: 10px 0;
+  }
+}
+/* force to show scrollbars in webkit browsers */
+
+#tandem-editor-wym {
+  ::-webkit-scrollbar {
+  	-webkit-appearance: none;
+  	width: 7px;
+  }
+  ::-webkit-scrollbar-thumb {
+  	border-radius: 4px;
+  	background-color: rgba(0,0,0,.5);
+  	-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
+  }
+}
+
+section#tandem_image_gallery {
+  max-height:400px;
+  overflow-y: scroll;
+  border-top: 1px solid $lightblue;
+  margin: 10px 0;
+  h1 {
+    font-weight: normal;
+    color: $darkblue;
+    font-size: 15px;
+    @include goo;
+  }
+  ul {
+    list-style:none;
+    li {
+      float:left;
+      display: block;
+      width: 180px;
+      height: 130px;
+      margin: 0 10px 40px 10px;
+      padding: 10px 5px 5px 5px;
+      background: $lightblue;
+        span {
+          display: block;
+          width: 150px;
+          height: 80px;
+          margin: 0 auto;
+          overflow: hidden;  
+          text-align:center;
+        }
+        img {
+        margin: 0 auto;      
+        background: #fff;
+        height: 100%;
+        }
+        
+        p {
+          @include goo;
+          color: $darkblue;
+          display:block;
+          clear:both;
+          font-size: 12px;
+          text-align: center;
+          position: relative;
+          padding: 5px 0;
+          a.delete_image {
+            display: block;
+            width: 16px;
+            height: 16px;
+            background: transparent url(image_path('tandem/ic-delete_image.png')) 0 0 no-repeat;
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            cursor: default;
+            &:hover {
+             opacity: 0.5;
+             -moz-opacity: 0.5;
+             filter:alpha(opacity=50); 
+            }
+          }
+        }
+        &:hover {         
+         cursor: pointer;
+         -webkit-box-shadow: 0 0 20px rgba(122,122,122, .5);
+         -moz-box-shadow: 0 0 20px rgba(122,122,122, .5);
+         box-shadow: 0 0 20px rgba(122,122,122, .5);
+         -webkit-transform: rotate(0deg) scale(1.05);
+         -moz-transform: rotate(0deg) scale(1.05);
+         transform: rotate(0deg) scale(1.05);
+         z-index: 300;
+        }
+        
+    }
+
+  }
+}
+
+#tandem-upload-image {
+  padding: 0;
+  margin: 0 0 0 20px;
+  @include goo;  
+  position: relative;
+  span#upload-button {
+    display: block;
+    width: 200px;
+    padding: 10px 0 10px 10px;
+    height: 20px;
+    margin-top: 10px;
+    color: #407992;
+    @include radius(5px);
+    border: 1px solid #c3cace;
+    font-size: 18px;
+    -webkit-box-shadow: 0px 0px 7px #ccc;
+    -moz-box-shadow: 0px 0px 7px #ccc;
+    box-shadow: 0px 0px 7px #ccc;
+    background: #e8f2f7;
+    background: #e9f3f8; /* Old browsers */
+    background: -moz-linear-gradient(top,  #e9f3f8 0%, #dbe9f0 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f3f8), color-stop(100%,#dbe9f0)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #e9f3f8 0%,#dbe9f0 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #e9f3f8 0%,#dbe9f0 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #e9f3f8 0%,#dbe9f0 100%); /* IE10+ */
+    background: linear-gradient(top,  #e9f3f8 0%,#dbe9f0 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f3f8', endColorstr='#dbe9f0',GradientType=0 ); /* IE6-9 */
+    @include goo;
+    cursor: pointer;
+    position: relative;
+    &#upload-button:hover {
+     background: #e5e5e5; /* Old browsers */
+     background: -moz-linear-gradient(top,  #e5e5e5 0%, #d1d1d1 100%); /* FF3.6+ */
+     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */
+     background: -webkit-linear-gradient(top,  #e5e5e5 0%,#d1d1d1 100%); /* Chrome10+,Safari5.1+ */
+     background: -o-linear-gradient(top,  #e5e5e5 0%,#d1d1d1 100%); /* Opera 11.10+ */
+     background: -ms-linear-gradient(top,  #e5e5e5 0%,#d1d1d1 100%); /* IE10+ */
+     background: linear-gradient(top,  #e5e5e5 0%,#d1d1d1 100%); /* W3C */
+     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */
+     color: #fff;
+     border-color: #aaa;
+     cursor: pointer;
+    }
+     input#image_resource {
+       opacity: 0;
+       -moz-opacity: 0;
+       filter:alpha(opacity=0);    
+       position: absolute;
+       top: 0;
+       left: 0;
+       cursor: pointer;
+       width: 200px;
+     }
+  }
+  input#upload-button:hover {
+    background: #eee;
+  }
+  section#error_explanation {
+    @include errors;
+    display:none;
+  }
+  .loader {
+    display:none;
+    width: 200px;
+    height: 20px;
+    background: $lightblue;
+    position: absolute;
+    top: 10px;
+    left: 250px;
+    @include radius(5px);
+    padding: 0;
+    margin: 0;
+    -webkit-box-shadow: 0 0 5px #aaa;
+    -moz-box-shadow: 0 0 5px #aaa;    
+    box-shadow: 0 0 5px #aaa;
+    overflow: hidden;
+    .range {
+      width: 0;
+      padding:0;
+      height: 20px;
+      background: transparent url(image_path('tandem/loader_stripe.png'));    
+      span {
+        font-size: 14px;
+        position: relative;
+        bottom: 5px;
+      }
+    }
+  }
+}
+
+/// Colorbox Overwrites
+
+#cboxTitle{
+  display: none !important;
+  text-transform: capitalize;
+  text-align:center; 
+  width:100%; 
+  font-size: 18px;
+  @include goo;
+  color: $highblue;
+  font-weight: none;
+}
+#cboxOverlay {
+  background: #333;
+}
+#cboxClose {
+  @include goo;
+  color: $darkblue;
+  font-size: 13px;
+  bottom: 25px;
+}
+#cboxLoadedContent{
+  padding-bottom: 50px;
+  background: transparent url(image_path('tandem/tandem_logo.png')) 0 100%  no-repeat;
+
+}
+
+
+/// Advanced Settings
+
+#tandem_advanced_settings {
+  margin: 0 0 15px 0;
+  .advanced-settings {
+    display: none;
+  }
+  h3 {
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: normal;
+    display: block;
+    margin: 10px;
+    color: $darkblue;
+    text-decoration: none;
+    @include goo;
+    padding: 3px 0 0 20px;
+    background: transparent url(image_path('tandem/ic-star.png')) left no-repeat;
+  }
+  h3:hover {
+    color: #333;
+  }
+}
+form.tandem_content_editor div#tandem_advanced_settings .advanced-settings {
+   display: none;
+   .field {
+     padding: none;
+     label {
+       width: 100%;
+       padding: 0;
+       margin: 0;
+       float: none;
+     }
+     input {
+       width: 90%;
+     }
+   }
+}
+form.tandem_text_editor div#tandem_advanced_settings .advanced-settings .field input {
+      width: 200px;
+}
+
+/* new clearfix */
+.clearfix:after {
+	visibility: hidden;
+	display: block;
+	font-size: 0;
+	content: " ";
+	clear: both;
+	height: 0;
+	}
+*:first-child+html .clearfix { zoom: 1; } /* IE7 */
+  

data/app/assets/stylesheets/tandem/scaffold.scss

@@ -0,0 +1,61 @@
+// These styles are the backbone of the tandem app and include the defaults for the tandem 'show' page
+
+@import "variables";
+
+// Tandem Show page styles
+
+#tandem-defaults { 
+  width: 940px;
+  margin: 0 auto;
+  @include goo;
+  color: #333; 
+  padding: 15px;
+  .hero h1 {
+    color: $darkblue;
+    text-align: center;
+  }
+  pre {
+    background-color: #eee;
+    padding: 10px;
+    font-size: 11px;
+  }
+
+  div.field, div.actions {
+    margin-bottom: 10px;
+  }
+
+  #notice {
+    color: green;
+  }
+
+  #error_explanation {
+    width: 450px;
+    border: 2px solid red;
+    padding: 7px;
+    padding-bottom: 0;
+    margin-bottom: 20px;
+    background-color: #f0f0f0;
+  }
+
+  #error_explanation h2 {
+    text-align: left;
+    font-weight: bold;
+    padding: 5px 5px 5px 15px;
+    font-size: 12px;
+    margin: -7px;
+    margin-bottom: 0px;
+    background-color: #c00;
+    color: #fff;
+  }
+
+  #error_explanation ul li {
+    font-size: 12px;
+    list-style: square;
+  }
+} 
+
+// end tandem show page styles
+
+
+
+

data/app/assets/stylesheets/tandem/variables.scss

@@ -0,0 +1,38 @@
+// Varibles for Tandem UX
+
+@import url(http://fonts.googleapis.com/css?family=Glegoo);
+
+@mixin goo {
+  font-family: 'Glegoo', serif;
+}
+
+@mixin radius($radius) {
+  -moz-border-radius: $radius;
+  -webkit-border-radius: $radius;
+  border-radius: $radius;
+}
+@mixin errors {
+  background: $lightblue;
+  padding: 5px;
+  margin: 5px 0;
+  h1, h2 {
+    font-size: 18px;
+    @include goo;
+    color: $darkblue;        
+    font-weight: normal;
+    margin-left: 15px;
+  }
+  ul {
+    li {
+    color: $darkblue;
+    font-size: 13px;
+    margin: 7px 0;
+    }
+  }
+}
+$lightblue: #E8F3F8;
+$lowblue: #DBE6EC;
+$midblue: #C2CBCE;
+$highblue: #A4BCC2;
+$darkblue: #81A8B8;
+$red: #660000;

data/app/assets/stylesheets/tandem.css

@@ -0,0 +1,7 @@
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *= require_self
+ *= require_tree './tandem'
+*/

data/app/controllers/tandem/application_controller.rb

@@ -0,0 +1,19 @@
+module Tandem
+  class ApplicationController < ActionController::Base
+    check_authorization
+
+    rescue_from CanCan::AccessDenied do |exception|
+      redirect_to (Configuration::unauthorized_path || root_url) , :alert => exception.message
+    end
+
+    def current_user
+      Configuration.current_user.call(request)
+    end
+
+    private
+
+    def current_ability
+      @current_ability ||= ::Tandem::Ability.new(current_user)
+    end
+  end
+end