Feature/edit update button restyling (mendix#131)

* Restyling work-in-progress * Finished redesign
djkwagala · Feb 9, 2017 · 424ed3c · 424ed3c
1 parent 2c24cdb
commit 424ed3c
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 107 deletions.
diff --git a/_assets/styles/_sass/_base.scss b/_assets/styles/_sass/_base.scss
@@ -23,11 +23,8 @@ a {
   text-decoration: none;
 
   &:hover   { color: #000; text-decoration: underline; }
-  // &:visited { color: #205caa; }
-
 }
 
-
 .post-content {
 
   &.no-title {
@@ -140,7 +137,7 @@ a {
 /* Post styles */
 /* ----------------------------------------------------------*/
 
-.post-header { margin: 10px 0 30px; }
+.post-header { margin: 10px 0 0; }
 
 .post-header h1 {
   font-size: 42px;
@@ -159,8 +156,8 @@ a {
   margin: 0 0 30px;
 
   > * {
-    margin-top: 20px;
-    margin-bottom: 20px;
+    //margin-top: 20px;
+    margin-bottom: 10px;
   }
 
   blockquote {
@@ -184,103 +181,9 @@ a {
       border-color: #DDD;
   }
 
-  // pre, code {
-  //   border: 1px solid #d5d5e9;
-  //   background-color: #eef;
-  //   padding: 8px 12px;
-  //   -webkit-border-radius: 3px;
-  //   -moz-border-radius: 3px;
-  //   border-radius: 3px;
-  //   font-size: 12px;
-  //   overflow:auto;
-  // }
-  //
-  // code { padding: 1px 5px; }
-
   ul, ol { margin-left: 1.35em; }
-
-  // pre code {
-  //   border: 0;
-  //   padding-right: 0;
-  //   padding-left: 0;
-  // }
-  //
-  // pre.terminal {
-  //   border: 1px solid #000;
-  //   background-color: #333;
-  //   color: #FFF;
-  //   -webkit-border-radius: 3px;
-  //   -moz-border-radius: 3px;
-  //   border-radius: 3px;
-  //
-  //   code { background-color: #333; }
-  // }
 }
 
-/* Syntax highlighting styles */
-/* ----------------------------------------------------------*/
-//
-// .highlight  { background: #ffffff; }
-// .highlight .c { color: #999988; font-style: italic } /* Comment */
-// .highlight .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-// .highlight .k { font-weight: bold } /* Keyword */
-// .highlight .o { font-weight: bold } /* Operator */
-// .highlight .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-// .highlight .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-// .highlight .c1 { color: #999988; font-style: italic } /* Comment.Single */
-// .highlight .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-// .highlight .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-// .highlight .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
-// .highlight .ge { font-style: italic } /* Generic.Emph */
-// .highlight .gr { color: #aa0000 } /* Generic.Error */
-// .highlight .gh { color: #999999 } /* Generic.Heading */
-// .highlight .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-// .highlight .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
-// .highlight .go { color: #888888 } /* Generic.Output */
-// .highlight .gp { color: #555555 } /* Generic.Prompt */
-// .highlight .gs { font-weight: bold } /* Generic.Strong */
-// .highlight .gu { color: #aaaaaa } /* Generic.Subheading */
-// .highlight .gt { color: #aa0000 } /* Generic.Traceback */
-// .highlight .kc { font-weight: bold } /* Keyword.Constant */
-// .highlight .kd { font-weight: bold } /* Keyword.Declaration */
-// .highlight .kp { font-weight: bold } /* Keyword.Pseudo */
-// .highlight .kr { font-weight: bold } /* Keyword.Reserved */
-// .highlight .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-// .highlight .m { color: #009999 } /* Literal.Number */
-// .highlight .s { color: #d14 } /* Literal.String */
-// .highlight .na { color: #008080 } /* Name.Attribute */
-// .highlight .nb { color: #0086B3 } /* Name.Builtin */
-// .highlight .nc { color: #445588; font-weight: bold } /* Name.Class */
-// .highlight .no { color: #008080 } /* Name.Constant */
-// .highlight .ni { color: #800080 } /* Name.Entity */
-// .highlight .ne { color: #990000; font-weight: bold } /* Name.Exception */
-// .highlight .nf { color: #990000; font-weight: bold } /* Name.Function */
-// .highlight .nn { color: #555555 } /* Name.Namespace */
-// .highlight .nt { color: #000080 } /* Name.Tag */
-// .highlight .nv { color: #008080 } /* Name.Variable */
-// .highlight .ow { font-weight: bold } /* Operator.Word */
-// .highlight .w { color: #bbbbbb } /* Text.Whitespace */
-// .highlight .mf { color: #009999 } /* Literal.Number.Float */
-// .highlight .mh { color: #009999 } /* Literal.Number.Hex */
-// .highlight .mi { color: #009999 } /* Literal.Number.Integer */
-// .highlight .mo { color: #009999 } /* Literal.Number.Oct */
-// .highlight .sb { color: #d14 } /* Literal.String.Backtick */
-// .highlight .sc { color: #d14 } /* Literal.String.Char */
-// .highlight .sd { color: #d14 } /* Literal.String.Doc */
-// .highlight .s2 { color: #d14 } /* Literal.String.Double */
-// .highlight .se { color: #d14 } /* Literal.String.Escape */
-// .highlight .sh { color: #d14 } /* Literal.String.Heredoc */
-// .highlight .si { color: #d14 } /* Literal.String.Interpol */
-// .highlight .sx { color: #d14 } /* Literal.String.Other */
-// .highlight .sr { color: #009926 } /* Literal.String.Regex */
-// .highlight .s1 { color: #d14 } /* Literal.String.Single */
-// .highlight .ss { color: #990073 } /* Literal.String.Symbol */
-// .highlight .bp { color: #999999 } /* Name.Builtin.Pseudo */
-// .highlight .vc { color: #008080 } /* Name.Variable.Class */
-// .highlight .vg { color: #008080 } /* Name.Variable.Global */
-// .highlight .vi { color: #008080 } /* Name.Variable.Instance */
-// .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */
-
 @media screen and (max-width: 600px) {
 
   .post-header h1 { font-size: 36px; }

diff --git a/_assets/styles/_sass/_general.scss b/_assets/styles/_sass/_general.scss
@@ -156,6 +156,7 @@
     border: $border-color 1px solid;
     background: $color-lightgrey;
     padding: 1em;
+    margin: 10px 0 -5px;
     &_title {
       width: 100%;
       border-bottom: 1px solid $border-color;
@@ -177,8 +178,9 @@
   }
 
   .history {
-    text-align: right;
+    //text-align: right;
     font-size: 0.8em;
+    //float: right;
     time {
       font-weight: bold
     }
@@ -218,6 +220,7 @@
     color: $link-color;
     font-weight: 100;
     @include border-radius(2em);
+    @include clearfix();
     font-size: 12px;
     i {
       top: 0.1em;
@@ -245,6 +248,10 @@
   border-width: 0px;
 }
 
+.article-info {
+  margin: 2em 0 0;
+}
+
 #back-to-top {
     position: fixed;
     bottom: 20px;

diff --git a/_assets/styles/_sass/_variables.scss b/_assets/styles/_sass/_variables.scss
@@ -23,3 +23,11 @@ $border-color: #d7d7d7;
   -o-border-radius: $radius;
   border-radius: $radius;
 }
+
+@mixin clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}
diff --git a/_includes/git_file_info.html b/_includes/git_file_info.html
@@ -1,7 +1,7 @@
 {% unless page.nogit %}
 {% assign history = site.data.history[page.path] %}
 {% if history %}
-  <div class="history">Last update: <time datetime="{{history.date}}">{{ history.date }}</time> in <a target="_blank" href="https://github.com/mendix/docs/commit/{{history.hash}}" title="commit {{history.hash}}">{{ history.hash | slice: 0, 6 }}</a><i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="left" title="This reflects the latest version on the master-branch.<br /><br />Please note that we actively develop on the development branch and periodically push this to master. So the page that is published here could be a few commits behind."></i></div>
+  <div class="history">Last update: <a target="_blank" href="https://github.com/mendix/docs/commits/development/{{page.path}}" title="commit {{history.hash}}"><time datetime="{{history.date}}">{{ history.date }}</time></a><i class="glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="left" title="This reflects the latest version on the master branch on Github.<br /><br />Please note that we actively develop on the development branch and periodically push this to master. The page that is published here could be a few commits behind."></i></div>
 {% else %}
   <!-- NO GIT HISTORY FOUND -->
 {% endif %}

diff --git a/_layouts/mxdefault.html b/_layouts/mxdefault.html
@@ -22,9 +22,20 @@
       <div class="row main">
         <div class="col-md-9 col-xs-12 col-md-push-3 content">
           <div class="post">
-            <header class="post-header">
-              <h1>{{ page.title }}</h1>
-            </header>
+            <div class="row">
+              <div class="col-md-10 col-xs-12">
+                <header class="post-header">
+                  <h1>{{ page.title }}</h1>
+                </header>
+                {% include git_file_info.html %}
+              </div>
+              <div class="col-md-2 hidden-sm hidden-xs">
+                <div class="article-info">
+                  {% include github_edit_button.html %}
+                </div>
+              </div>
+            </div>
+
             <article class="post-content mxdefault">
               <div class="row post-header-row">
                 <div class="col-xs-9">
@@ -35,12 +46,12 @@ <h1>{{ page.title }}</h1>
                   {% endunless %}
                 </div>
                 <div class="col-xs-3">
-                  {% include github_edit_button.html %}
+
                 </div>
               </div>
               {{ content }}
             </article>
-            {% include git_file_info.html %}
+
           </div>
         </div>
         <div class="col-md-3 col-xs-12 col-md-pull-9 sidebar">