Merge pull request #310 from kristi/frontend-tweak

Frontend tweaks

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

@@ -30,6 +30,7 @@ a {
   -webkit-border-radius: 1em;
 }
 
+.ff #gollum-editor,
 .ie #gollum-editor {
   padding-bottom: 1em;
 }
@@ -51,9 +52,9 @@ a {
   background: #fff;
   border: 1px solid #ddd;
   color: #000;
-  font-size: 1.3em;
+  font-size: 1.1em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  line-height: 1.8em;
+  line-height: 1.5em;
   margin: 1em 0 0.4em;
   padding: 0.5em;
   width: 98%;
@@ -192,44 +193,36 @@ a#function-help:hover span { background-position: -405px -28px; }
 
 #gollum-editor #gollum-editor-function-bar #gollum-editor-format-selector {
   overflow: hidden;
-  padding: 0 0 1.1em 0;
+  padding: .2em 0 .5em 0;
 }
 
 #gollum-editor #gollum-editor-function-bar
   #gollum-editor-format-selector select {
   background-color: #f9f9f9;
-  border: 1px solid transparent;
+  border: 1px solid #ddd;
+  color: #333;
 
   float: right;
-  font-size: 1.1em;
+  font-size: 1em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1.6em;
-  padding: 0.5em 0.7em;
-  margin-bottom: 0;
+  padding: 0.3em 0.4em;
 
 
   border-radius: 0.5em;
   -moz-border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
-  -moz-outline: none;
-}
-
-#gollum-editor #gollum-editor-function-bar
-  #gollum-editor-format-selector select:hover {
-  background-color: #fff;
-  border: 1px solid #ddd;
-  -moz-outline: none;
 }
 
 #gollum-editor #gollum-editor-function-bar
   #gollum-editor-format-selector label {
   color: #999;
   float: right;
-  font-size: 1.1em;
+  font-size: 1em;
   font-weight: bold;
   line-height: 1.6em;
-  padding: 0.6em 0.5em 0 0;
+  padding: .3em 0.5em 0 0;
 }
 
 #gollum-editor #gollum-editor-function-bar
@@ -243,9 +236,9 @@ a#function-help:hover span { background-position: -405px -28px; }
 #gollum-editor textarea#gollum-editor-body {
   background: #fff;
   border: 1px solid #ddd;
-  font-size: 1.3em;
+  font-size: 1em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  line-height: 1.8em;
+  line-height: 1.4em;
   margin: 1em 0 0.4em;
   padding: 0.5em; /* I don't really like mixing pct & em here… */
   width: 98%;
@@ -259,7 +252,7 @@ a#function-help:hover span { background-position: -405px -28px; }
   cursor: pointer;
   display: block;
   float: left;
-  font-size: 1.2em;
+  font-size: 1em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: bold;
   margin: 0;
@@ -403,7 +396,7 @@ a#function-help:hover span { background-position: -405px -28px; }
   color: #333;
   cursor: pointer;
   display: block;
-  font-size: 1.2em;
+  font-size: 1em;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: bold;
   line-height: 1.2em;

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

@@ -37,8 +37,8 @@ a:hover, a:visited {
 
 /* @section head */
 #head {
+  border-bottom: 1px solid #ddd;
   margin: 4.5em 0 0.5em;
-  padding: 0.5em 0;
   overflow: hidden;
 }
 
@@ -142,6 +142,7 @@ a:hover, a:visited {
     }
 
   /* @section footer */
+
   #wiki-footer {
     clear: both;
     margin: 2em 0 5em;
@@ -208,6 +209,7 @@ a:hover, a:visited {
 
   /* @section page-footer */
   .page #footer {
+    border-top: 1px solid #ddd;
     margin: 1em 0 7em;
   }
 
@@ -235,12 +237,12 @@ a:hover, a:visited {
   }
 
 #wiki-history {
-  margin-top: 3em;
+  margin-top: 2em;
 }
 
   #wiki-history fieldset {
     border: 0;
-    margin: 2em 0;
+    margin: 1em 0;
     padding: 0;
   }
 
@@ -262,14 +264,14 @@ a:hover, a:visited {
 
   #wiki-history table tr td {
     border: 1px solid #c0dce9;
-    font-size: 1.2em;
+    font-size: 1em;
     line-height: 1.6em;
     margin: 0;
     padding: 0.3em 0.7em;
   }
 
   #wiki-history table tr td.checkbox {
-    min-width: 2em;
+    width: 4em;
     padding: 0.3em;
   }
 
@@ -278,7 +280,9 @@ a:hover, a:visited {
     display: block;
     padding-right: 0;
     padding-top: 0.4em;
-    margin-right: -0.2em;
+    margin: 0 auto;
+    width: 1.2em;
+    height: 1.2em;
   }
 
   #wiki-history table tr:nth-child(2n),
@@ -331,6 +335,10 @@ a:hover, a:visited {
     padding: 0 0.2em;
   }
 
+.history #footer {
+  margin-bottom: 7em;
+}
+
 .history #wiki-history ul.actions li,
 .history #footer ul.actions li {
   margin: 0 0.6em 0 0;
@@ -410,10 +418,14 @@ a:hover, a:visited {
 
   .compare .data {
     border: 1px solid #ddd;
-    margin-top: 1em;
+    margin: 1em 0 2em;
     overflow: auto;
   }
 
+  .compare .data table {
+    width: 100%;
+  }
+
   .compare .data pre {
     margin: 0;
     padding: 0;
@@ -426,11 +438,15 @@ a:hover, a:visited {
   .compare .data tr td {
     font-family: "Consolas", "Monaco", "Andale Mono", "Courier New", monospace;
     font-size: 1.2em;
-    line-height: 1.8em;
+    line-height: 1.2em;
     margin: 0;
     padding: 0;
   }
 
+  .compare .data tr td + td + td {
+    width: 100%;
+  }
+
   .compare .data td.line_numbers {
     background: #f7f7f7;
     border-right: 1px solid #999;
@@ -444,6 +460,10 @@ a:hover, a:visited {
   margin-right: 0.6em;
 }
 
+.compare #footer {
+  margin-bottom: 7em;
+}
+
 
 
 /* @control syntax */
@@ -481,8 +501,9 @@ ul.actions {
 
  ul.actions li {
    float: left;
-   font-size: 1.2em;
+   font-size: 0.9em;
    margin-left: 0.6em;
+   margin-bottom: 0.6em;
  }
 
 .minibutton a {
@@ -594,27 +615,30 @@ ul.actions {
     background: #fff;
     border: 1px solid #d4d4d4;
     overflow: hidden;
+    height: 2.0em;
 
     border-radius: 0.3em;
     -moz-border-radius: 0.3em;
     -webkit-border-radius: 0.3em;
   }
 
+  .ie #head #searchbar #searchbar-fauxtext,
+  .ff #head #searchbar #searchbar-fauxtext {
+     height: 2.2em
+  }
+
   #head #searchbar #searchbar-fauxtext input#search-query {
     border: none;
     color: #000;
     float: left;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-    font-size: 1.2em;
-    height: 2.15em;
+    font-size: 1em;
+    height: inherit;
+    padding: 0 .5em;
 
     -webkit-focus-ring: none;
   }
 
-  .ff #head #searchbar #searchbar-fauxtext input#search-query {
-    padding: 0.2em 0 0.2em 0.5em;
-  }
-
   .ie #head #searchbar #searchbar-fauxtext input#search-query {
     padding: 0.4em 0 0 0.5em;
   }
@@ -630,7 +654,7 @@ ul.actions {
     margin: 0 !important;
     padding: 0;
     float: right;
-    font-size: 1.2em;
+    height: inherit;
 
     border-radius: 0 3px 3px 0;
     -moz-border-radius: 0 3px 3px 0;
@@ -639,10 +663,10 @@ ul.actions {
 
   #head #searchbar #searchbar-fauxtext #search-submit span {
     background-image: url(/images/icon-sprite.png);
-    background-position: -431px 4px;
+    background-position: -431px -1px;
     background-repeat: no-repeat;
     display: block;
-    height: 2.15em;
+    height: inherit;
     overflow: hidden;
     text-indent: -5000px;
     width: 28px;

lib/gollum/frontend/public/gollum/css/template.css

@@ -10,7 +10,7 @@
 
 
 html, body {
-  color: black;
+  color: #333;
 }
 
 body {
@@ -24,7 +24,7 @@ img {
 
 #template {
   font-size: 14px;
-  line-height: 1.4;
+  line-height: 1.6;
   margin-bottom: 40px;
 }
 
@@ -35,7 +35,7 @@ a.absent {
 
 /* Primary Body Copy */
 #template p {
-  margin: 1em 0;
+  margin: 1.4em 0;
   padding: 0;
 }
 
@@ -52,17 +52,17 @@ a.absent {
 }
 
 #template h1 {
-  border-bottom: 1px solid #ccc;
-  font-size: 33px; /* was 32, GH is 33px */
+  font-size: 28px;
   line-height: normal;
-  padding: .08em 0 0 0;
-  margin: 0;
+  padding: 10px 0 0 0;
+  margin: 30px 0 10px;
 }
 
 #template h2 {
+  border-bottom: 1px solid #ddd;
   font-size: 22px;
-  line-height: normal;
-  margin: 22px 0 0;
+  line-height: 1.6;
+  margin: 22px 0 10px;
   padding: 7px 0 0;
 }
 
@@ -110,16 +110,16 @@ a.absent {
   /* Border Reset for headers with horizontal rules */
   #template > h2:first-child,
   #template > h1:first-child {
-    margin: 12px 0 0;
-    padding: 10px 0 0;
+    margin: 12px 0 10px;
+    padding: 10px 0 10px;
   }
 
 
 /* Lists, Blockquotes & Such */
 #template ul,
 #template ol {
-  margin-top: 1.5em;
-  margin-left: 2.6em;
+  margin: 15px 0;
+  padding-left: 30px;
 }
 
   /* Nested Lists */
@@ -132,7 +132,7 @@ a.absent {
   #template ul ul,
   #template ol ol {
     padding: 0;
-    margin: .5em 0;
+    margin: 15px 0;
   }
 
 #template dl {
@@ -286,7 +286,7 @@ a.absent {
   background-color: #f8f8f8;
   border: 1px solid #dedede;
   font-size: 13px;
-  padding: 0;
+  padding: 1px 5px;
 
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
@@ -313,6 +313,7 @@ pre, code {
 #template pre code, #template pre tt {
   background-color: transparent;
   border: none;
+  padding: 0;
 }
 
 /*

lib/gollum/frontend/templates/compare.mustache

@@ -3,10 +3,16 @@
   <h1>History for <strong>{{path}}</strong></h1>
   
   <ul class="actions">
+    <li class="minibutton">
+      {{>searchbar}}
+    </li>
+    <li class="minibutton"><a href="/{{escaped_name}}"
+       class="action-view-page">View Page</a></li>
+    <li class="minibutton"><a href="/edit/{{escaped_name}}"
+       class="action-edit-page">Edit Page</a></li>
     <li class="minibutton"><a href="/history/{{escaped_name}}"
-       class="action-page-history">Back to Page History</a></li>
+       class="action-page-history">Page History</a></li>
   </ul>
-  {{>searchbar}}
 </div>
 
 {{#message}}
@@ -17,6 +23,8 @@
   
   {{#show_revert}}
   <ul class="actions">
+    <li class="minibutton"><a href="/history/{{escaped_name}}"
+       class="action-page-history">Back to Page History</a></li>
     <li class="minibutton">
       <form name="gollum-revert" action="/revert/{{escaped_name}}/{{before}}/{{after}}" method="post" id="gollum-revert-form">
       <a href="#" class="gollum-revert-button">Revert Changes</a>
@@ -41,6 +49,8 @@
 </div>
 <div id="footer">
   <ul class="actions">
+    <li class="minibutton"><a href="/history/{{escaped_name}}"
+       class="action-page-history">Back to Page History</a></li>
     {{#show_revert}}
     <li class="minibutton">
       <a href="#" class="gollum-revert-button">Revert Changes</a>
@@ -50,4 +60,4 @@
   </ul>
 </div>
 </div>
-</div>
+</div>

lib/gollum/frontend/templates/history.mustache

@@ -2,12 +2,14 @@
 <div id="head">
   <h1>History for <strong>{{title}}</strong></h1>
   <ul class="actions">
+    <li class="minibutton">
+      {{>searchbar}}
+    </li>
     <li class="minibutton"><a href="/{{escaped_name}}"
        class="action-view-page">View Page</a></li>
     <li class="minibutton"><a href="/edit/{{escaped_name}}"
        class="action-edit-page">Edit Page</a></li>
   </ul>
-  {{>searchbar}}
 </div>
 <div id="wiki-history">
   
@@ -57,4 +59,4 @@
        class="action-back-to-top">Back to Top</a></li>
   </ul>
 </div>
-</div>
+</div>

lib/gollum/frontend/templates/page.mustache

@@ -2,6 +2,9 @@
 <div id="head">
   <h1>{{title}}</h1>
   <ul class="actions">
+    <li class="minibutton">
+      {{>searchbar}}
+    </li>
     <li class="minibutton"><a href="/pages"
       class="action-all-pages">All Pages</a></li>
     <li class="minibutton" class="jaws">
@@ -13,7 +16,6 @@
     <li class="minibutton"><a href="/history/{{escaped_name}}"
        class="action-page-history">Page History</a></li>
   </ul>
-  {{>searchbar}}
 </div>
 <div id="wiki-content">
 <div class="wrap {{#has_footer}} has-footer {{/has_footer}} {{#has_sidebar}}  has-rightbar{{/has_sidebar}}">

lib/gollum/frontend/templates/pages.mustache

@@ -2,10 +2,12 @@
 <div id="head">
   <h1>{{title}}</h1>
   <ul class="actions">
+    <li class="minibutton">
+      {{>searchbar}}
+    </li>
     <li class="minibutton"><a href="/"
        class="action-edit-page">Home</a></li>
   </ul>
-  {{>searchbar}}
 </div>
 <div id="results">
 

lib/gollum/frontend/templates/search.mustache

@@ -2,10 +2,12 @@
 <div id="head">
   <h1>Search Results for <strong>{{query}}</strong></h1>
   <ul class="actions">
+    <li class="minibutton">
+      {{>searchbar}}
+    </li>
     <li class="minibutton"><a href="/"
        class="action-edit-page">Home</a></li>
   </ul>
-  {{>searchbar}}
 </div>
 <div id="results">