Merge pull request #3236 from dhrp/doc-master-warning

Added warning when browsing master. & no longer hides alternative versions

docs/theme/docker/layout.html

@@ -99,7 +99,7 @@
             
             {{ toctree(collapse=False, maxdepth=3) }}
 	    <form>
-	      <input type="text" id="st-search-input" class="st-search-input span3" style="width:160px;" />
+	      <input type="text" id="st-search-input" class="st-search-input span3" placeholder="search in documentation" style="width:210px;" />
           <div id="st-results-container"></div>
 	    </form>
         </div>
@@ -134,13 +134,22 @@
                         </div>
 
                         <div class="social links">
-                            <a class="twitter" href="http://twitter.com/docker">Twitter</a>
-                            <a class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
+                            <a title="Docker on Twitter" class="twitter" href="http://twitter.com/docker">Twitter</a>
+                            <a title="Docker on GitHub" class="github" href="https://github.com/dotcloud/docker/">GitHub</a>
+                            <a title="Docker on Reddit" class="reddit" href="http://www.reddit.com/r/Docker/">Reddit</a>
+                            <a title="Docker on Google+" class="googleplus" href="https://plus.google.com/u/0/b/100381662757235514581/communities/108146856671494713993">Google+</a>
+                            <a title="Docker on Facebook" class="facebook" href="https://www.facebook.com/docker.run">Facebook</a>
+                            <a title="Docker on SlideShare" class="slideshare" href="http://www.slideshare.net/dotCloud">Slideshare</a>
+                            <a title="Docker on Youtube" class="youtube" href="http://www.youtube.com/user/dockerrun/">Youtube</a>
+                            <a title="Docker on Flickr" class="flickr" href="http://www.flickr.com/photos/99741659@N08/">Flickr</a>
+                            <a title="Docker on LinkedIn" class="linkedin" href="http://www.linkedin.com/company/dotcloud">LinkedIn</a>
                         </div>
 
                         <div class="tbox version-flyer ">
                             <div class="content">
-                                <small>Current version:</small>
+                                <p class="version-note">Note: You are currently browsing the development documentation. The current release may work differently.</p>
+
+                                <small>Available versions:</small>
                                 <ul class="inline">
                                     {% for slug, url in versions %}
                                     <li class="alternative"><a href="{{ url }}{%- for word in pagename.split('/') -%}
@@ -163,6 +172,7 @@
         </div>
         <!-- end of footer -->
     </div>
+
 </div>
 
 

docs/theme/docker/static/css/main.css

@@ -205,20 +205,54 @@ body {
 }
 .social .twitter,
 .social .github,
-.social .googleplus {
-  background: url("https://www.docker.io/static/img/footer-links.png") no-repeat transparent;
+.social .googleplus,
+.social .facebook,
+.social .slideshare,
+.social .linkedin,
+.social .flickr,
+.social .youtube,
+.social .reddit {
+  background: url("../img/social/docker_social_logos.png") no-repeat transparent;
   display: inline-block;
-  height: 35px;
+  height: 32px;
   overflow: hidden;
   text-indent: 9999px;
-  width: 35px;
-  margin-right: 10px;
+  width: 32px;
+  margin-right: 5px;
+}
+.social :hover {
+  -webkit-transform: rotate(-10deg);
+  -moz-transform: rotate(-10deg);
+  -o-transform: rotate(-10deg);
+  -ms-transform: rotate(-10deg);
+  transform: rotate(-10deg);
 }
 .social .twitter {
-  background-position: 0px 2px;
+  background-position: -160px 0px;
+}
+.social .reddit {
+  background-position: -256px 0px;
 }
 .social .github {
-  background-position: -59px 2px;
+  background-position: -64px 0px;
+}
+.social .googleplus {
+  background-position: -96px 0px;
+}
+.social .facebook {
+  background-position: 0px 0px;
+}
+.social .slideshare {
+  background-position: -128px 0px;
+}
+.social .youtube {
+  background-position: -192px 0px;
+}
+.social .flickr {
+  background-position: -32px 0px;
+}
+.social .linkedin {
+  background-position: -224px 0px;
 }
 form table th {
   vertical-align: top;
@@ -349,6 +383,7 @@ div.alert.alert-block {
   border: 1px solid #88BABC;
   padding: 5px;
   font-size: larger;
+  max-width: 300px;
 }
 .version-flyer .content {
   padding-right: 45px;
@@ -358,18 +393,18 @@ div.alert.alert-block {
   background-position: right center;
   background-repeat: no-repeat;
 }
-.version-flyer .alternative {
-  visibility: hidden;
-  display: none;
-}
 .version-flyer .active-slug {
   visibility: visible;
   display: inline-block;
+  font-weight: bolder;
 }
 .version-flyer:hover .alternative {
   animation-duration: 1s;
   display: inline-block;
-  visibility: visible;
+}
+.version-flyer .version-note {
+  font-size: 16px;
+  color: black;
 }
 /* =====================================
   Styles for 

docs/theme/docker/static/css/main.less

@@ -337,24 +337,64 @@ body {
   margin-top: 15px;
 }
 
-.social .twitter, .social .github, .social .googleplus {
-  background: url("https://www.docker.io/static/img/footer-links.png") no-repeat transparent;
-  display: inline-block;
-  height: 35px;
-  overflow: hidden;
-  text-indent: 9999px;
-  width: 35px;
-  margin-right: 10px;
+.social {
+  .twitter, .github, .googleplus, .facebook, .slideshare, .linkedin, .flickr, .youtube, .reddit {
+    background: url("../img/social/docker_social_logos.png") no-repeat transparent;
+    display: inline-block;
+    height: 32px;
+    overflow: hidden;
+    text-indent: 9999px;
+    width: 32px;
+    margin-right: 5px;
+  }
+}
+
+.social :hover {
+  -webkit-transform: rotate(-10deg);
+     -moz-transform: rotate(-10deg);
+       -o-transform: rotate(-10deg);
+      -ms-transform: rotate(-10deg);
+          transform: rotate(-10deg);
 }
 
 .social .twitter {
-  background-position: 0px 2px;
+  background-position: -160px 0px;
+}
+
+.social .reddit {
+  background-position: -256px 0px;
 }
 
 .social .github {
-  background-position: -59px 2px;
+  background-position: -64px 0px;
 }
 
+.social .googleplus {
+  background-position: -96px 0px;
+}
+
+.social .facebook {
+  background-position: -0px 0px;
+}
+
+.social .slideshare {
+  background-position: -128px 0px;
+}
+
+.social .youtube {
+  background-position: -192px 0px;
+}
+
+.social .flickr {
+  background-position: -32px 0px;
+}
+
+.social .linkedin {
+  background-position: -224px 0px;
+}
+
+
+
 // Styles on the forms
 // ----------------------------------
 
@@ -535,31 +575,34 @@ div.alert.alert-block {
   border: 1px solid #88BABC;
   padding: 5px;
   font-size: larger;
+  max-width: 300px;
 
   .content {
     padding-right: 45px;
     margin-top: 7px;
     margin-left: 7px;
-    // display: inline-block;
     background-image: url('../img/container3.png');
     background-position: right center; 
     background-repeat: no-repeat;
   }
 
   .alternative {
-    visibility: hidden;
-    display: none;
   }
 
   .active-slug {
     visibility: visible;
     display: inline-block;
+    font-weight: bolder;
   }
 
   &:hover .alternative {
     animation-duration: 1s;
     display: inline-block;
-    visibility: visible;
+  }
+
+  .version-note {
+    font-size: 16px;
+    color: black;
   }
 
 }
@@ -640,5 +683,3 @@ dt:hover > a.headerlink {
 .deprecated {
    color: orangered;
 }
-
-

docs/theme/docker/static/js/docs.js

@@ -53,14 +53,6 @@ $(function(){
         }
     }
 
-    if (doc_version == "") {
-        $('.version-flyer ul').html('<li class="alternative active-slug"><a href="" title="Switch to local">Local</a></li>');
-    }
-
-    // mark the active documentation in the version widget
-    $(".version-flyer a:contains('" + doc_version + "')").parent().addClass('active-slug');
-
-
     // attached handler on click
     // Do not attach to first element or last (intro, faq) so that
     // first and last link directly instead of accordian
@@ -95,4 +87,18 @@ $(function(){
     // add class to all those which have children
     $('.sidebar > ul > li').not(':last').not(':first').addClass('has-children');
 
+
+    if (doc_version == "") {
+        $('.version-flyer ul').html('<li class="alternative active-slug"><a href="" title="Switch to local">Local</a></li>');
+    }
+
+    if (doc_version == "master") {
+        $('.version-flyer .version-note').hide();
+    }
+
+    // mark the active documentation in the version widget
+    $(".version-flyer a:contains('" + doc_version + "')").parent().addClass('active-slug').setAttribute("title", "Current version");
+
+
+
 });