docs: move day/night toggle, make it more subtle

eth-brownie · Apr 12, 2020 · 83a400a · 83a400a
1 parent 77635b8
commit 83a400a
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 33 deletions.
diff --git a/docs/_static/css/toggle.css b/docs/_static/css/toggle.css
@@ -2,6 +2,35 @@ input[type=checkbox] {
     visibility: hidden;
     height: 0;
     width: 0;
+    margin: 0;
+}
+
+.rst-versions .rst-current-version {
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+}
+
+.rst-versions .rst-current-version .fa-book,
+.rst-versions .rst-current-version .fa-v,
+.rst-versions .rst-current-version .fa-caret-down {
+    height: 24px;
+    line-height: 24px;
+    vertical-align: middle;
+}
+
+.rst-versions .rst-current-version .fa-element {
+    width: 80px;
+    text-align: center;
+}
+
+.rst-versions .rst-current-version .fa-book {
+    text-align: left;
+}
+
+.rst-versions .rst-current-version .fa-v {
+    color: #27AE60;
+    text-align: right;
 }
 
 label {
@@ -13,8 +42,8 @@ label {
     position: relative;
     cursor: pointer;
     text-indent: -9999px;
-    width: 55px;
-    height: 30px;
+    width: 50px;
+    height: 21px;
     background: #000;
 }
 
@@ -23,10 +52,10 @@ label:after {
     position: absolute;
     content: '';
     background: #fff;
-    width: 20px;
-    height: 20px;
-    top: 5px;
-    left: 4px;
+    width: 15px;
+    height: 15px;
+    top: 3px;
+    left: 3px;
     transition: ease-in-out 200ms;
 }
 
@@ -45,21 +74,4 @@ html.transition *:before,
 html.transition *:after {
     transition: ease-in-out 200ms !important;
     transition-delay: 0 !important;
-}
-
-ul.wy-breadcrumbs {
-    width: 100%;
-}
-
-ul.wy-breadcrumbs li {
-    display: inline-block;
-}
-
-ul.wy-breadcrumbs div.container {
-    float: right;
-}
-
-div#modetext {
-    font-weight: bolder;
-    text-align: center;
 }
diff --git a/docs/_static/js/toggle.js b/docs/_static/js/toggle.js
@@ -5,7 +5,6 @@ document.addEventListener('DOMContentLoaded', function() {
     function toggleCssMode(isDay) {
         var mode = (isDay ? "Day" : "Night");
         localStorage.setItem("css-mode", mode);
-        document.getElementById('modetext').innerHTML = mode;
 
         var darksheet = $('link[href="_static/css/dark.css"]')[0].sheet;
         darksheet.disabled = isDay;

diff --git a/docs/_templates/breadcrumbs.html b/docs/_templates/breadcrumbs.html
diff --git a/docs/_templates/versions.html b/docs/_templates/versions.html
@@ -0,0 +1,36 @@
+{# Add rst-badge after rst-versions for small badge style. #}
+<div class="rst-versions" data-toggle="rst-versions" role="note" aria-label="versions">
+    <span class="rst-current-version" data-toggle="rst-current-version">
+    <span class="fa fa-book fa-element"> RTD </span>
+
+    <span class="fa fa-element">
+    <input class="container_toggle" type="checkbox" id="switch" name="mode">
+    <label for="switch"></label>
+    </span>
+
+    <span class="fa fa-v fa-element"> v: {{ current_version }} <span class="fa fa-caret-down"></span></span>
+
+    </span>
+    <div class="rst-other-versions">
+        <dl>
+            <dt>{{ _('Versions') }}</dt> {% for slug, url in versions %}
+            <dd><a href="{{ url }}">{{ slug }}</a></dd>
+            {% endfor %}
+        </dl>
+        <dl>
+            <dt>{{ _('Downloads') }}</dt> {% for type, url in downloads %}
+            <dd><a href="{{ url }}">{{ type }}</a></dd>
+            {% endfor %}
+        </dl>
+        <dl>
+            {# Translators: The phrase "Read the Docs" is not translated #}
+            <dt>{{ _('On Read the Docs') }}</dt>
+            <dd>
+                <a href="//{{ PRODUCTION_DOMAIN }}/projects/{{ slug }}/?fromdocs={{ slug }}">{{ _('Project Home') }}</a>
+            </dd>
+            <dd>
+                <a href="//{{ PRODUCTION_DOMAIN }}/builds/{{ slug }}/?fromdocs={{ slug }}">{{ _('Builds') }}</a>
+            </dd>
+        </dl>
+    </div>
+</div>