Adding footer and sidebar fields to editor

lib/gollum/frontend/public/css/editor.css

@@ -46,7 +46,7 @@
   font-size: 1.3em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   line-height: 1.8em;
-  margin: 0;
+  margin: 1em 0 0.4em;
   padding: 0.5em;
   width: 98%;
 }
@@ -55,8 +55,9 @@
   color: #999;
 }
 
-#gollum-editor-title-field input {
+#gollum-editor-title-field input#gollum-editor-page-title {
   font-weight: bold;
+  margin-top: 0;
 }
 
 #gollum-editor-title-field.active {
@@ -79,7 +80,7 @@
 #gollum-editor #gollum-editor-function-bar {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
-  padding: 0 0 0.5em 0;
+  padding: 0.6em 0 1.1em 0;
   display: none;
 }
 
@@ -204,7 +205,7 @@ a#function-image:hover span { background-position: -324px -28px; }
   font-size: 1.3em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   line-height: 1.8em;
-  margin: 0.5em 0;
+  margin: 1em 0 0.4em;
   padding: 0.5em; /* I don't really like mixing pct & em here… */
   width: 98%;
   height: 20em;
@@ -248,6 +249,103 @@ a#function-image:hover span { background-position: -324px -28px; }
   background: -moz-linear-gradient(top, #599bdc, #3072b3);
 }
 
+#gollum-editor .collapsed,
+#gollum-editor .expanded {
+  border-bottom: 1px solid #ddd;
+  display: block;
+  overflow: hidden;
+  padding: 1em 0 0.5em;
+}
+
+#gollum-editor #gollum-editor-body + .collapsed,
+#gollum-editor #gollum-editor-body + .expanded {
+  border-top: 1px solid #ddd;
+  margin-top: 0.7em;
+}
+
+#gollum-editor .collapsed a.button,
+#gollum-editor .expanded a.button {
+  background: #f7f7f7;
+  border: 1px solid #ddd;
+  color: #333;
+  display: block;
+  float: left;
+  height: 25px;
+  overflow: hidden;
+  margin: 0.2em 0.5em 0.75em 0;
+  text-shadow: 0 1px 0 #fff;
+  width: 25px;
+  
+  border-radius: 0.3em;
+  -moz-border-radius: 0.3em;
+  -webkit-border-radius: 0.3em;
+  
+  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f4f4f4', endColorstr='#ececec');
+  background: -webkit-gradient(linear, left top, left bottom, from(#f4f4f4), to(#ececec));
+  background: -moz-linear-gradient(top, #f4f4f4, #ececec);
+}
+
+#gollum-editor .collapsed h4,
+#gollum-editor .expanded h4 {
+  font-size: 1.6em;
+  float: left;
+  margin: 0;
+  padding: 0.4em 0 0 0.3em;
+  text-shadow: 0 -1px 0 #fff;
+}
+
+#gollum-editor .collapsed a.button:hover,
+#gollum-editor .expanded h4 a.button:hover {
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+  text-decoration: none;
+  
+  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#599bdc', endColorstr='#3072b3');
+  background: -webkit-gradient(linear, left top, left bottom, from(#599bdc), to(#3072b3));
+  background: -moz-linear-gradient(top, #599bdc, #3072b3);
+}
+
+#gollum-editor .collapsed a span,
+#gollum-editor .expanded a span {
+  background-image: url(../images/icon-sprite.png);
+  background-position: -351px -1px;
+  background-repeat: no-repeat;
+  display: block;
+  height: 25px;
+  overflow: hidden;
+  text-indent: -5000px;
+  width: 25px;
+}
+
+#gollum-editor .collapsed a:hover span {
+  background-position: -351px -28px;
+}
+
+#gollum-editor .expanded a span {
+  background-position: -378px 0;
+}
+
+#gollum-editor .expanded a:hover span {
+  background-position: -378px -28px;
+}
+
+#gollum-editor .collapsed textarea {
+  display: none;
+}
+
+#gollum-editor .expanded textarea {
+  border: 1px solid #ddd;
+  clear: both;
+  display: block;
+  font-size: 1.3em;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  height: 7em;
+  line-height: 1.8em;
+  margin: 0.7em 0;
+  padding: 0.5em;
+  width: 98%;
+}
+
 
 
 /* @control dialog */

lib/gollum/frontend/public/javascript/gollum-editor/gollum.editor.js

@@ -39,6 +39,15 @@
         Placeholder.add( $('#gollum-editor-edit-summary input') )
       }
       
+      if ( EditorHas.collapsibleInputs() ) {
+        $('#gollum-editor .collapsed a.button, ' + 
+          '#gollum-editor .expanded a.button').click(function( e ) {
+          e.preventDefault();
+          $(this).parent().toggleClass('expanded');
+          $(this).parent().toggleClass('collapsed');
+        });
+      }
+      
       // Initialize the function bar by loading proper definitions
       if ( EditorHas.functionBar() ) {
         var htmlSetMarkupLang =
@@ -214,6 +223,10 @@
                $('#gollum-editor-body').length );
     },
     
+    collapsibleInputs: function() {
+      return $('#gollum-editor .collapsed, #gollum-editor .expanded').length;
+    },
+    
     
     /**
      *  EditorHas.functionBar
@@ -662,6 +675,6 @@
        return ( _PLACEHOLDERS.length );
      }
      
-   }
+   };
   
 // })(jQuery); 

lib/gollum/frontend/templates/editor.mustache

@@ -37,12 +37,26 @@
   <fieldset id="gollum-editor-fields">
     <textarea id="gollum-editor-body"
      data-markup-lang="markdown" name="content">{{content}}</textarea>
+     
+     
+    <div id="gollum-editor-edit-footer" class="collapsed">
+      <a href="#" class="button"><span>Expand/Collapse</span></a>
+      <h4>Footer</h4>
+      <textarea id="gollum-editor-footer" name="footer"></textarea>
+    </div>
+    
+    <div id="gollum-editor-edit-sidebar" class="collapsed">
+      <a href="#" class="button"><span>Expand/Collapse</span></a>
+      <h4>Sidebar</h4>
+      <textarea id="gollum-editor-sidebar" name="sidebar"></textarea>
+    </div>
     
     <div id="gollum-editor-edit-summary" class="singleline">
       <label for="message" class="jaws">Edit message:</label>
       <input type="text" name="message" id="gollum-editor-message-field" value="Write a small message here explaining this change. (Optional)">
     </div>
     
+    
     <span class="jaws"><br></span>
     <input type="submit" id="gollum-editor-submit" value="Save" title="Save current changes">
   </fieldset>

scratch/TODO

@@ -1,9 +1,9 @@
 * Editor
   * Add sidebar field
   * Add footer field
-  * Add edit summary field
   * Create rest of markup lang definitions
 * Create Error Page
-* Create Compare Revisions Page
+* Create Compare Revisions Page (like, when comparing the two)
 * Create Search Results Page
-* Write Editor/Sidebar implementation notes for Rick
+* Write Editor/Sidebar implementation notes for Rick
+* Write print.css