merged with master

LaunchPadLab · Jul 2, 2015 · 8558fb2 · 8558fb2
2 parents 7a6aeb5 + 08156ac
commit 8558fb2
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 101 deletions.
diff --git a/app/assets/stylesheets/fuel/base/_layout.scss b/app/assets/stylesheets/fuel/base/_layout.scss
@@ -20,6 +20,11 @@ body {
 }
 
 
+// Clears
+.margin--clear { margin: 0 }
+.padding--clear { margin: 0 }
+
+
 // Hide/Show Classes
 .mobile--show {
   display: block;

diff --git a/app/assets/stylesheets/fuel/components/_application-icons.scss b/app/assets/stylesheets/fuel/components/_application-icons.scss
@@ -18,7 +18,6 @@ $application-icons:     image-url('fuel/icons/application-icons.svg');
   display: inline-block;
   height: $application-height;
   width: $application-width;
-
 }
 
 

diff --git a/app/assets/stylesheets/fuel/components/_card.scss b/app/assets/stylesheets/fuel/components/_card.scss
@@ -8,6 +8,11 @@ $card-border:        1px solid $grey-base;
 $card-border-radius: 3px;
 $card-padding:       20px;
 
+$card-fixed-offset:  -2px;
+$card-fixed-spread:  0 5px 10px;
+$card-fixed-shadow:  rgba(0, 0, 0, 0.25);
+$card-fixed-width:   400px;
+
 // Structure
 .card {
   @include rem(padding, $card-padding);
@@ -17,6 +22,15 @@ $card-padding:       20px;
   overflow: hidden;
 }
 
+.card__fixed {
+  @include animation(fade-in 0.3s linear);
+  @include box-shadow($card-fixed-spread, $card-fixed-shadow);
+  @include position(absolute, null null null 100px);
+  @include rem(margin-top, $card-fixed-offset);
+  @include rem(width, $card-fixed-width);
+  z-index: 1000;
+}
+
 .card-image {
   @include rem(margin, 20px auto);
   border: $card-border;

diff --git a/app/assets/stylesheets/fuel/components/_editor.scss b/app/assets/stylesheets/fuel/components/_editor.scss
@@ -1,84 +1,45 @@
+// Editor Component
+// ========================================
 
-$editor-border: thin solid $grey-base;
 
-#toolbar {
+// Variables
+$editor-background-color:  $white-dark;
+$editor-border:            1px solid $grey-base;
+$editor-border-radius:     3px;
+$editor-margin:            0 0 -2px;
+
+$editor-button-color:      $black-base;
+$editor-button-padding:    5px 12px;
+$editor-button-transition: all 0.2s ease-in-out;
+
+
+// Structure
+#editor {
   @include clearfix;
-  background-color: $white-dark;
+  @include position(relative);
+  @include rem(margin, $editor-margin);
+  background-color: $editor-background-color;
   border: $editor-border;
-  border-bottom: none;
+  border-top-left-radius: $editor-border-radius;
+  border-top-right-radius: $editor-border-radius;
   padding: 0;
-  position: relative;
-  margin: 0;
 }
 
 .editor-button{
-  @include rem(padding, 5px 12px);
-  color: $black-base;
+  @include rem(padding, $editor-button-padding);
+  @include transition($editor-button-transition);
+  color: $editor-button-color;
   display: inline-block;
   margin: 0;
 
-  // &:nth-child(even) {
-    // border-left: $editor-border;
-    // border-right: $editor-border;
-  // }
-
-  &:hover, &.wysihtml5-command-dialog-opened {
-    cursor: pointer;
-    color: $blue-base;
+  &:nth-child(even) {
+    border-left: $editor-border;
+    border-right: $editor-border;
   }
 
-}
-
-.dropdown-window {
-  background-color: $white-base;
-  border: thin solid $grey-dark;
-  position: absolute;
-  width: 400px;
-}
-
-.dropdown-body {
-  padding: 20px;
-  border-bottom: thin solid $grey-dark;
-}
-
-.dropdown-footer {
-  background-color: $white-dark;
-  height: 48px;
-  padding: 10px 22px;
-  font-weight: bold;
-
-  a {
+  &:hover,
+  &.wysihtml5-command-dialog-opened {
     cursor: pointer;
-    float: right;
-  }
-
-  .button {
-    margin-left: 20px;
-    margin-bottom: 0px;
-  }
-
-}
-
-
-.dropdown--createLink {
-  left: 100px;
-}
-
-.dropdown--image {
-  left: 200px;
-
-  label {
-    margin-top: 20px;
-  }
-
-  .progress {
-    max-width: 600px;
-    margin:    0.2em 0 0.2em 0;
-  }
-
-  .progress .bar {
-    @include rem(padding, 5px 10px);
-    color:   white;
-    display: none;
+    color: $blue-base;
   }
 }
diff --git a/app/assets/stylesheets/fuel/components/_forms.scss b/app/assets/stylesheets/fuel/components/_forms.scss
@@ -11,7 +11,11 @@ label {
   text-transform: uppercase;
 }
 
-fieldset { @include rem(margin-bottom, 30px); }
+fieldset {
+  @include rem(margin-bottom, 30px);
+
+  &.small { @include rem(margin-bottom, 15px);  }
+}
 
 // Inputs
 #{$all-text-inputs},
@@ -92,4 +96,17 @@ select{
 a.delete-post {
   float: right;
   @include s-golf;
+}
+
+
+// Progresss Bars
+.progress {
+  @include rem(margin, 10px 0);
+  width: 100%;
+}
+
+.progress .bar {
+  @include rem(padding, 5px 10px);
+  color: $white-base;
+  display: none;
 }
diff --git a/app/assets/stylesheets/fuel/components/_sliding-panel.scss b/app/assets/stylesheets/fuel/components/_sliding-panel.scss
@@ -28,6 +28,7 @@ $sliding-panel-spread-active:      5px 0 10px;
 }
 
 .sliding-panel-header {
+  @include position(relative);
   @include rem(margin-bottom, 20px);
   @include rem(padding, 20px);
   background-color: $sliding-panel-header-background;
@@ -39,9 +40,18 @@ $sliding-panel-spread-active:      5px 0 10px;
   }
 }
 
+.sliding-panel-header--close {
+  @include position(absolute, 15px 15px null null);
+  @include transform(rotate(45deg));
+}
+
 .sliding-panel-body {
   margin: 0 auto;
   width: 65%;
+
+  img,
+  iframe,
+  video { width: 100%; }
 }
 
 .sliding-panel-fade-screen {

diff --git a/app/views/fuel/admin/posts/_editor.html.erb b/app/views/fuel/admin/posts/_editor.html.erb
@@ -4,7 +4,7 @@
 
     if ($("body").hasClass("posts-controller")){
        var editor = new wysihtml5.Editor("fuel_post_content", { // id of textarea element
-          toolbar:      "toolbar", // id of toolbar element
+          toolbar:      "editor", // id of toolbar element
           parserRules:  wysihtml5ParserRules,
           stylesheets: "<%= stylesheet_path('fuel/wysihtml') %>"
        });
@@ -38,9 +38,8 @@
             submitButton.prop('disabled', true);
 
             progressBar.
-              css('background', 'green').
+              css('background', '#C4DC6E').
               css('display', 'block').
-              css('width', '0%').
               text("Loading...");
           },
           done: function(e, data) {
@@ -60,7 +59,7 @@
             submitButton.prop('disabled', false);
 
             progressBar.
-              css("background", "red").
+              css("background", "#F7917C").
               text("Failed");
           }
         });

diff --git a/app/views/fuel/admin/posts/_form.html.erb b/app/views/fuel/admin/posts/_form.html.erb
@@ -47,7 +47,7 @@
   <div class="form-container--full">
     <fieldset>
       <%= f.label :content, 'Your Post' %>
-      <ul id="toolbar" style="display: none;">
+      <ul id="editor" style="display: none;">
         <li class="editor-button" data-wysihtml5-command="bold" title="CTRL+B"><i class="fa fa-bold"></i></li>
         <li class="editor-button" data-wysihtml5-command="italic" title="CTRL+I"><i class="fa fa-italic"></i></li>
         <li class="editor-button" data-wysihtml5-command="insertUnorderedList"><i class="fa fa-list-ul"></i></li>
@@ -61,25 +61,26 @@
         <li class="editor-button" data-wysihtml5-command="undo"><i class="fa fa-undo"></i></li>
         <li class="editor-button" data-wysihtml5-action="change_view">HTML</li>
 
-        <div data-wysihtml5-dialog="createLink" style="display: none;" class="dropdown-window dropdown--createLink">
-          <div class="dropdown-body">
+        <div data-wysihtml5-dialog="createLink" style="display: none;" class="card card__fixed">
+          <fieldset class="small">
+            <label>Link URL:</label>
             <input data-wysihtml5-dialog-field="href" value="http://">
-          </div>
-          <footer class="dropdown-footer">
-            <a data-wysihtml5-dialog-action="save" class="save-link button button--primary button--small">Insert</a>
-          </footer>
+          </fieldset>
+          <fieldset class="margin--clear right">
+            <a data-wysihtml5-dialog-action="save" class="save-link button button--primary button--small margin--clear">Insert</a>
+          </fieldset>
         </div>
 
-        <div data-wysihtml5-dialog="insertImage" style="display: none;" class="dropdown-window dropdown--image">
-          <div class="dropdown-body">
-            <label>
-              Upload Image:
-              <%= file_field_tag :image, id: "image-upload", class: "directUpload"  %>
-            </label>
-            <label>
-              Image URL:
-              <input data-wysihtml5-dialog-field="src" value="http://" id="imageUrl">
-            </label>
+        <div data-wysihtml5-dialog="insertImage" style="display: none;" class="card card__fixed">
+          <fieldset class="small">
+            <div class="half-group">
+              <label> Upload Image: <%= file_field_tag :image, id: "image-upload", class: "directUpload"  %> </label>
+            </div>
+            <div class="half-group">
+              <label> Or Image URL: <input data-wysihtml5-dialog-field="src" value="http://" id="imageUrl"> </label>
+            </div>
+          </fieldset>
+          <fieldset class="small">
             <label>
               Align:
               <select data-wysihtml5-dialog-field="className">
@@ -88,11 +89,11 @@
                 <option value="wysiwyg-float-right">right</option>
               </select>
             </label>
-          </div>
-          <footer class="dropdown-footer">
-            <a data-wysihtml5-dialog-action="save" class="save-link button button--primary button--small">Insert</a>
-            <a data-wysihtml5-dialog-action="cancel" class="button button--danger button--small">Cancel</a>
-          </footer>
+          </fieldset>
+          <fieldset class="right margin--clear">
+            <a data-wysihtml5-dialog-action="save" class="save-link button button--primary button--small margin--clear">Insert</a>
+            <a data-wysihtml5-dialog-action="cancel" class="button button--danger button--small margin--clear">Cancel</a>
+          </fieldset>
         </div>
       </ul>
       <%= f.text_area :content, class: 'post' %>

diff --git a/app/views/fuel/admin/posts/_post_preview.html.erb b/app/views/fuel/admin/posts/_post_preview.html.erb
@@ -1,9 +1,9 @@
-<%#= form_tag('preview', method: "post", id: "preview_form") do %>
-  <%#= hidden_field_tag :content %>
-<%# end %>
 <div class="js-menu sliding-panel-content">
   <header class="sliding-panel-header">
-    <h5 class="inverse title">You are currently previewing this post.</h5>
+    <h5 class="inverse title">You are currently previewing this post</h5>
+    <%= link_to '#', class: "js-menu-trigger" do %>
+      <i class="add-icon sliding-panel-header--close"></i>
+    <% end %>
   </header>
   <div class="sliding-panel-body">
     <%= render 'content', content: @post.content %>

diff --git a/lib/fuel/version.rb b/lib/fuel/version.rb
@@ -1,3 +1,3 @@
 module Fuel
-  VERSION = "0.3.27"
+  VERSION = "0.3.28"
 end
diff --git a/spec/dummy/db/development.sqlite3 b/spec/dummy/db/development.sqlite3
-Original file line number
+Diff line change
@@ Expand Up @@
       display: inline-block;
       height: $application-height;
       width: $application-width;
     }
@@ Expand Down @@