From ab027f38a8c4a283a94a5eb8d053031cef0b9706 Mon Sep 17 00:00:00 2001
From: Johan Cwiklinski <johan@x-tnd.be>
Date: Oct 16 2014 17:22:47 +0000
Subject: Switch each part on/off, smaller size on titles


---

diff --git a/progit/static/progit.css b/progit/static/progit.css
index 8ff4030..df6a87c 100644
--- a/progit/static/progit.css
+++ b/progit/static/progit.css
@@ -118,7 +118,8 @@ header h1 span {
     border-bottom: 1px solid rgba(237, 237, 237, 0.4);
 }
 
-.project_list header h3 {
+.project_list header h3, .project_list header h2 {
+    font-size: 1em;
     margin:0;
 }
 
@@ -132,18 +133,21 @@ header h1 span {
     border-radius: 5px 5px 5px 5px;
     color: black;
     display: table-cell;
-    /*margin: 1em auto;*/
     overflow: hidden;
     padding: 2em;
-    /*width: 15em;*/
-}
-
-.project_link {
     background-repeat: no-repeat;
     background-position: 5px 50%;
     padding-left: 85px;
 }
 
+.project_link:visited {
+    color: black;
+}
+
+.project_link:hover {
+    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
+}
+
 .project_link span {
     display: block;
 }
@@ -513,6 +517,11 @@ a.button:visited, a.button:hover {
     border-radius: 10px 10px 0 0;
 }
 
+.show_parts {
+    float: right;
+    margin-top: -3.6em;
+}
+
 [id=error] h2 {
     color: red;
 }
diff --git a/progit/static/toggle.css b/progit/static/toggle.css
new file mode 100644
index 0000000..8d600d5
--- /dev/null
+++ b/progit/static/toggle.css
@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2012-2013 Thibaut Courouble
+ * http://www.cssflow.com
+ *
+ * Licensed under the MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+ */
+
+.switch {
+  position: relative;
+  width: 120px;
+  border-radius: 3px;
+}
+
+.switch.oneline {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.switch-label {
+  position: relative;
+  z-index: 2;
+  float: left;
+  width: 58px;
+  line-height: 26px;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.35);
+  text-align: center;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
+  cursor: pointer;
+  font-weight: bold;
+}
+
+.switch-label-off {
+  padding-left: 2px;
+}
+
+.switch-label-on {
+  padding-right: 2px;
+}
+
+/*
+ * 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-input:checked + .switch-label-on ~ .switch-selection {
+  left: 60px;
+  /* Note: left: 50% doesn't transition in WebKit */
+}
+
+.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);
+
+    //#0066cc
+    //#34609f
+
+  -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);
+  -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-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 d62f771..c252a32 100644
--- a/progit/templates/index.html
+++ b/progit/templates/index.html
@@ -4,6 +4,11 @@
 {%block tag %}home{% endblock %}
 
 
+{% block header %}
+    <link rel="stylesheet" type="text/css" media="screen"
+        href="{{ url_for('static', filename='toggle.css') }}"/>
+{% endblock %}
+
 {% macro render_row(items) -%}
     {% for repo in items %}
         {% if loop.index is divisibleby(3) %}
@@ -26,8 +31,8 @@
     {% endfor %}
 {%- endmacro %}
 
-{% macro render_repos(list, total, page, title, count) %}
-    <section class="project_list">
+{% macro render_repos(list, total, page, title, count, id) %}
+<section class="project_list" id="{{ id }}">
         <header>
             <h{% if username %}3{% else %}2{% endif %}>{{ title }} ({{ count }})</h{% if username %}3{% else %}2{% endif %}>
         </header>
@@ -67,9 +72,48 @@
 {% block content %}
     {% if username %}
         <h2>{{ username | avatar(36) | safe }} {{ username }}</h2>
+        <aside class="show_parts">
+            <strong>My repos:</strong>
+            <div class="switch oneline">
+                <input type="radio" class="switch-input" name="myrepos" value="on" id="myreposon" checked="checked">
+                <label for="myreposon" class="switch-label switch-label-off">Show</label>
+                <input type="radio" class="switch-input" name="myrepos" value="off" id="myreposoff">
+                <label for="myreposoff" class="switch-label switch-label-on">Hide</label>
+                <span class="switch-selection"></span>
+            </div>
+            <strong>Forks:</strong>
+            <div class="switch oneline">
+                <input type="radio" class="switch-input" name="myforks" value="on" id="forkson" checked="checked">
+                <label for="forkson" class="switch-label switch-label-off">Show</label>
+                <input type="radio" class="switch-input" name="myforks" value="off" id="forksoff">
+                <label for="forksoff" class="switch-label switch-label-on">Hide</label>
+                <span class="switch-selection"></span>
+            </div>
+            <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>
+        </aside>
 
-        {{ render_repos(user_repos, total_page_repos, repopage, 'My Projects', user_repos_length) }}
-        {{ render_repos(user_forks, total_page_forks, forkpage, 'My Forks', user_forks_length) }}
+        {{ render_repos(user_repos, total_page_repos, repopage, 'My Projects', user_repos_length, 'myrepos') }}
+        {{ render_repos(user_forks, total_page_forks, forkpage, 'My Forks', user_forks_length, 'myforks') }}
+    {% endif %}
+    {{ render_repos(repos, total_page, page, 'All Projects', repos_length, 'repos') }}
+{% endblock %}
+
+{% block jscripts %}
+    {{ super() }}
+    {% if username %}
+    <script type="text/javascript">
+        $(function(){
+            $('.show_parts input[type="radio"]').change(function(){
+                $('#' + $(this).attr('name')).toggle();
+            });
+        });
+    </script>
     {% endif %}
-    {{ render_repos(repos, total_page, page, 'All Projects', repos_length) }}
 {% endblock %}