Set active tag selection

backend/backend.py

@@ -99,7 +99,11 @@ def main_page():
     sorted_watches.sort(key=lambda x: x['last_changed'], reverse=True)
 
     existing_tags = datastore.get_all_tags()
-    output = render_template("watch-overview.html", watches=sorted_watches, messages=messages, tags=existing_tags)
+    output = render_template("watch-overview.html",
+                             watches=sorted_watches,
+                             messages=messages,
+                             tags=existing_tags,
+                             active_tag=limit_tag)
 
     # Show messages but once.
     messages = []

backend/static/css/styles.css

@@ -140,11 +140,15 @@ body:after, body:before {
 
 .button-tag {
     background: rgb(99, 99, 99);
-    /* this is a green */
     color: #fff;
     font-size: 65%;
+    border-bottom-left-radius: initial;
+    border-bottom-right-radius: initial;
+}
+.button-tag.active {
+    background: #9c9c9c;
+    font-weight: bold;
 }
-
 .button-error {
     background: rgb(202, 60, 60);
     /* this is a maroon */

backend/templates/watch-overview.html

@@ -15,11 +15,12 @@
         <!-- user/pass r = requests.get('https://api.github.com/user', auth=('user', 'pass')) -->
     </form>
     <div>
+
         {% for tag in tags %}
             {% if tag == "" %}
-            <a href="/" class="pure-button button-tag ">All</a>
+            <a  href="/" class="pure-button button-tag {{'active' if active_tag == tag }}">All</a>
             {% else %}
-            <a href="/?tag={{ tag}}" class="pure-button button-tag ">{{ tag }}</a>
+            <a  href="/?tag={{ tag}}" class="pure-button button-tag {{'active' if active_tag == tag }}">{{ tag }}</a>
             {% endif %}
         {% endfor %}
     </div>