Moved everything from right to left

Moved the Run/Save/Gistify buttons to the left panel, due to logic (it doesn't make sense to be in the right pane).
jwo · Dec 4, 2013 · 221a964 · 221a964
1 parent f45bb19
commit 221a964
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 49 deletions.
diff --git a/app/assets/stylesheets/app.css.scss.erb b/app/assets/stylesheets/app.css.scss.erb
@@ -21,33 +21,8 @@ body {
   }
 }
 
-#control-panel {
-  width: 100%;
-  position: absolute;
-  height: auto;
-  background-color: darkred;
-
-  .panel-list {
-    margin-bottom: 0;
-    text-align: center;
-  }
-
-  li {
-    display: inline;
-
-    a {
-      background: darkred;
-      top: 13px;
-      font-size: 15px;
-
-    }
-
-  }
-}
-
 #info-panel {
   background: white;
-  margin-top: 58px;
   height: 100%;
   border: 3px solid #9b111e;
 }
@@ -103,15 +78,68 @@ body {
 
 .button-content {
   input {
-    font-size: 17px;
+    font-size: 16px;
     border-bottom-left-radius: 16;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
-    background: darkred;
+    background: #112435;
     border: 0;
-    padding-bottom: 20px;
+    text-align: center;
+    margin-right: 261px;
+    padding-bottom: 11px;
+    padding-top: 10px;
+    border: 3px solid darkred;
+    top: -3;
   }
+
+  ul {
+    margin-bottom: 0;
+    text-align: center;
+    position: absolute;
+    z-index: 100;
+    right: 15;
+
+    li {
+      display: inline;
+
+      #save_riddle {
+        font-size: 15px;
+        border: 3px solid darkred;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: inherit;
+        background: #112435;
+        text-align: center;
+        padding-bottom: 20px;
+        padding-top: 11px;
+        margin-right: -13px;
+        padding-bottom: 10;
+        top: -3;
+      }
+
+      #create_gist {
+        border: 3px solid darkred;
+        font-size: 15px;
+        border-bottom-left-radius: 0;
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 16;
+        background: #112435;
+        text-align: center;
+        color: white;
+        margin-top: 0;
+        padding-top: 11px;
+        margin-right: -6px;
+        padding-bottom: 10;
+        bottom: 0px;
+        top: -3;
+        }
+      }
+
+    }
+
 }
 
 #riddle_form{

diff --git a/app/views/riddles/_form.html.haml b/app/views/riddles/_form.html.haml
@@ -2,6 +2,25 @@
   =simple_form_for(@riddle, url: play_path, :remote => true, :method => :post, disable_with: "Running That Ruby!", :html=>{:id=>"riddle_form"}) do |f|
     .button-content
       =f.submit "Run", :class=>"execute button"
+      %ul.block-grid.three-up
+        -if @riddle.persisted?
+          %li
+            =link_to "#", :id=>"update_riddle", "data-update-url" => url_for(@riddle), title: "Save a new version", :class=> "has-tip white small radius button" do
+              %i.icon-edit.icon-large
+              Update
+            %li
+              =link_to "#", :id=>"fork_riddle", "data-fork-url" => url_for([:fork, @riddle]), title: "Fork your own version", :class=> "has-tip white small radius button" do
+                %i.icon-share.icon-large
+                Fork
+        -else
+          %li
+            =link_to "#", :id=>"save_riddle", :class=> "white small radius button" do
+              %i.icon-edit.icon-large
+              Save
+        %li
+          =link_to "#", :id=> "create_gist", title: "Create a public github gist", :class=> "has-tip white small radius button" do
+            %i.icon-github-sign.icon-large
+            Gistify
       =f.input :code, :as => :text, label: false, placeholder: "Step Only: Enter your ruby here", input_html: {id: "riddle_code"}
   %br
 

diff --git a/app/views/riddles/_info.html.haml b/app/views/riddles/_info.html.haml
@@ -1,21 +0,0 @@
-#control-panel
-  %ul.panel-list
-    -if @riddle.persisted?
-      %li
-        =link_to "#", :id=>"update_riddle", "data-update-url" => url_for(@riddle), title: "Save a new version", :class=> "white tiny radius button" do
-          %i.icon-edit.icon-large
-          Update
-        %li
-          =link_to "#", :id=>"fork_riddle", "data-fork-url" => url_for([:fork, @riddle]), title: "Fork your own version", :class=> "white tiny radius button" do
-            %i.icon-share.icon-large
-            Fork
-    -else
-      %li
-        =link_to "#", :id=>"save_riddle", :class=> "white tiny radius button" do
-          %i.icon-edit.icon-large
-          Save
-    %li
-      =link_to "#", :id=> "create_gist", title: "Create a public github gist", :class=> "white tiny radius button" do
-        %i.icon-github-sign.icon-large
-        Gistify
-