From dcf26de8d1aebc8b8ca80ae27b6430b373596160 Mon Sep 17 00:00:00 2001
From: Pierre-Yves Chibon <pingou@pingoured.fr>
Date: Feb 21 2015 14:04:47 +0000
Subject: Adjust the on/off toggle button in the index page to be similar to the ones used in pkgdb


These are apparently clearer than the ones we used to have

---

diff --git a/progit/static/toggle.css b/progit/static/toggle.css
index 5c5a97a..89dd52f 100644
--- a/progit/static/toggle.css
+++ b/progit/static/toggle.css
@@ -6,96 +6,134 @@
  * http://www.opensource.org/licenses/mit-license.php
  */
 
+label {
+ margin:0;
+ padding:0;
+}
+
 .switch {
   position: relative;
-  width: 120px;
-  border-radius: 3px;
+  display: inline-block;
+  vertical-align: top;
+  width: 75px;
+  height: 20px;
+  padding: 3px;
+  background-color: white;
+  border-radius: 18px;
+  box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+  background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
+  background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
+  background-image: -o-linear-gradient(top, #eeeeee, white 25px);
+  background-image: linear-gradient(to bottom, #eeeeee, white 25px);
 }
 
-.switch.oneline {
-    display: inline-block;
-    vertical-align: middle;
+.switch-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
 }
 
 .switch-label {
   position: relative;
-  z-index: 2;
-  float: left;
-  width: 58px;
-  line-height: 26px;
-  font-size: 11px;
-  color: rgba(0, 0, 0, 0.15);
-  text-align: center;
-  cursor: pointer;
-  font-weight: bold;
+  display: block;
+  height: inherit;
+  font-size: 10px;
+  text-transform: uppercase;
+  background: #eceeef;
+  border-radius: inherit;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
+  -webkit-transition: 0.15s ease-out;
+  -moz-transition: 0.15s ease-out;
+  -o-transition: 0.15s ease-out;
+  transition: 0.15s ease-out;
+  -webkit-transition-property: opacity background;
+  -moz-transition-property: opacity background;
+  -o-transition-property: opacity background;
+  transition-property: opacity background;
 }
 
-.switch-label-off {
-  padding-left: 2px;
+.switch-label:before, .switch-label:after {
+  position: absolute;
+  top: 50%;
+  margin-top: -.5em;
+  line-height: 1;
+  -webkit-transition: inherit;
+  -moz-transition: inherit;
+  -o-transition: inherit;
+  transition: inherit;
 }
 
-.switch-label-on {
-  padding-right: 2px;
+.switch-label:before {
+  content: attr(data-off);
+  right: 11px;
+  color: #aaa;
+  text-shadow: 0 1px rgba(255, 255, 255, 0.5);
 }
 
-/*
- * Note: using adjacent or general sibling selectors combined with
- *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
- *       See this article for more info and a potential fix:
- *       http://css-tricks.com/webkit-sibling-bug/
- */
-.switch-input {
-  display: none;
-}
-.switch-input:checked + .switch-label {
-  font-weight: bold;
-  color: #fff;
-  -webkit-transition: 0.15s ease-out;
-  -moz-transition: 0.15s ease-out;
-  -o-transition: 0.15s ease-out;
-  transition: 0.15s ease-out;
+.switch-label:after {
+  content: attr(data-on);
+  left: 11px;
+  color: white;
+  text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+  opacity: 0;
 }
-.switch-input:checked + .switch-label-on ~ .switch-selection {
-  left: 60px;
-  /* Note: left: 50% doesn't transition in WebKit */
+
+.switch-input:checked ~ .switch-label {
+  background: #3b6eb4;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
 }
 
-.switch-selection {
-  display: block;
-  position: absolute;
-  z-index: 1;
-  top: 2px;
-  left: 2px;
-  width: 58px;
-  height: 22px;
-  background: #65bd63;
-  border-radius: 3px;
-  background-image: -webkit-linear-gradient(top, #0066cc, #34609f);
-  background-image: -moz-linear-gradient(top, #0066cc, #34609f);
-  background-image: -o-linear-gradient(top, #0066cc, #34609f);
-  background-image: linear-gradient(to bottom, #0066cc, #34609f);
+.switch-input:checked ~ .switch-label:before {
+  opacity: 0;
+}
 
-    //#0066cc
-    //#34609f
+.switch-input:checked ~ .switch-label:after {
+  opacity: 1;
+}
 
-  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
+.switch-handle {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 18px;
+  height: 18px;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+  background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
+  background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
+  background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
+  background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
   -webkit-transition: left 0.15s ease-out;
   -moz-transition: left 0.15s ease-out;
   -o-transition: left 0.15s ease-out;
   transition: left 0.15s ease-out;
 }
-/*witch-blue .switch-selection {
-  background: #3aa2d0;
-  background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);
-  background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);
-  background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);
-  background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);
+
+.switch-handle:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -6px 0 0 -6px;
+  width: 12px;
+  height: 12px;
+  background: #f9f9f9;
+  border-radius: 6px;
+  box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
+  background-image: -webkit-linear-gradient(top, #eeeeee, white);
+  background-image: -moz-linear-gradient(top, #eeeeee, white);
+  background-image: -o-linear-gradient(top, #eeeeee, white);
+  background-image: linear-gradient(to bottom, #eeeeee, white);
+}
+
+.switch-input:checked ~ .switch-handle {
+  left: 59px;
+  box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+}
+
+.switch-green > .switch-input:checked ~ .switch-label {
+  background: #4fb845;
 }
-.switch-yellow .switch-selection {
-  background: #c4bb61;
-  background-image: -webkit-linear-gradient(top, #e0dd94, #c4bb61);
-  background-image: -moz-linear-gradient(top, #e0dd94, #c4bb61);
-  background-image: -o-linear-gradient(top, #e0dd94, #c4bb61);
-  background-image: linear-gradient(to bottom, #e0dd94, #c4bb61);
-}*/
diff --git a/progit/templates/index.html b/progit/templates/index.html
index a3e0292..cd8875f 100644
--- a/progit/templates/index.html
+++ b/progit/templates/index.html
@@ -41,7 +41,7 @@
     {% if username %}
     <script type="text/javascript">
         $(function(){
-            $('.show_parts input[type="radio"]').change(function(){
+            $('.show_parts input[type="checkbox"]').change(function(){
                 $('#' + $(this).attr('name')).toggle();
             });
         });
diff --git a/progit/templates/render_repo.html b/progit/templates/render_repo.html
index 8ad66e4..1a41cab 100644
--- a/progit/templates/render_repo.html
+++ b/progit/templates/render_repo.html
@@ -71,33 +71,34 @@
 
 {% macro repos_switch(all = True) %}
     <aside class="show_parts">
+        <div class="container">
         <strong>
             {% if all %}My repos:{% else %}Repos:{% endif %}
         </strong>
-        <div class="switch oneline">
-            <input type="radio" class="switch-input" name="{% if all %}my{% endif %}repos" value="on" id="myreposon" checked="checked">
-            <label for="myreposon" class="switch-label switch-label-off">Show</label>
-            <input type="radio" class="switch-input" name="{% if all %}my{% endif %}repos" value="off" id="myreposoff">
-            <label for="myreposoff" class="switch-label switch-label-on">Hide</label>
-            <span class="switch-selection"></span>
-        </div>
+
+            <label class="switch">
+                <input type="checkbox" class="switch-input"
+                    name="myrepos" id="monitor" checked>
+                <span class="switch-label" data-on="On" data-off="Off"></span>
+                <span class="switch-handle"></span>
+            </label>
         <strong>Forks:</strong>
-        <div class="switch oneline">
-            <input type="radio" class="switch-input" name="{% if all %}my{% endif %}forks" value="on" id="forkson" checked="checked">
-            <label for="forkson" class="switch-label switch-label-off">Show</label>
-            <input type="radio" class="switch-input" name="{% if all %}my{% endif %}forks" value="off" id="forksoff">
-            <label for="forksoff" class="switch-label switch-label-on">Hide</label>
-            <span class="switch-selection"></span>
-        </div>
+            <label class="switch">
+                <input type="checkbox" class="switch-input"
+                    name="{% if all %}my{% endif %}forks" id="forks"
+                    checked>
+                <span class="switch-label" data-on="On" data-off="Off"></span>
+                <span class="switch-handle"></span>
+            </label>
         {% if all %}
         <strong>All repos:</strong>
-        <div class="switch oneline">
-            <input type="radio" class="switch-input" name="repos" value="on" id="reposon" checked="checked">
-            <label for="reposon" class="switch-label switch-label-off">Show</label>
-            <input type="radio" class="switch-input" name="repos" value="off" id="reposoff">
-            <label for="reposoff" class="switch-label switch-label-on">Hide</label>
-            <span class="switch-selection"></span>
-        </div>
+            <label class="switch">
+                <input type="checkbox" class="switch-input"
+                    name="repos" id="allrepos" checked />
+                <span class="switch-label" data-on="On" data-off="Off"></span>
+                <span class="switch-handle"></span>
+            </label>
         {% endif %}
+        </div>
     </aside>
 {% endmacro %}