arrow indication of which page the user is on #3

fanout · Oct 15, 2014 · 33ff968 · 33ff968
1 parent 19b2be5
commit 33ff968
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 18 deletions.
diff --git a/website/static/styles/WebhookInbox.css b/website/static/styles/WebhookInbox.css
@@ -60,7 +60,29 @@ a img {
     text-align: right;
 }
 
-.header .links > a {
+.header .links ul { list-style: none;}
+.header .links ul li {
+    display: inline-block;
+    position: relative;
+}
+
+.header .links ul li > .arrow{
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    top: -35px;
+    display: none;
+    margin-left: 5px;
+    left: 50%;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid black;
+}
+
+.header .links ul li.active > .arrow{
+    display: inline-block;
+}
+.header .links ul li > a {
     color: #9599a1;
     text-shadow: 1px 1px 2px #000;
     margin-left: 35px;

diff --git a/website/static/styles/WebhookInboxViewer.css b/website/static/styles/WebhookInboxViewer.css
@@ -54,7 +54,29 @@ a img {
     text-align: right;
 }
 
-.header .links > a {
+.header .links ul { list-style: none;}
+.header .links ul li {
+    display: inline-block;
+    position: relative;
+}
+
+.header .links ul li > .arrow{
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    top: -35px;
+    display: none;
+    margin-left: 5px;
+    left: 50%;
+    border-left: 10px solid transparent;
+    border-right: 10px solid transparent;
+    border-top: 10px solid black;
+}
+
+.header .links ul li.active > .arrow{
+    display: inline-block;
+}
+.header .links ul li > a {
     color: #9599a1;
     text-shadow: 1px 1px 2px #000;
     margin-left: 35px;

diff --git a/website/templates/website/about.html b/website/templates/website/about.html
@@ -1,5 +1,5 @@
 {% extends "website/l2_base.html" %}
-
+{% block nav_about %}active{% endblock %}
 {% block title_suffix %} - About{% endblock %}
 
 {% block content %}

diff --git a/website/templates/website/contact.html b/website/templates/website/contact.html
@@ -1,5 +1,5 @@
 {% extends "website/l2_base.html" %}
-
+{% block nav_contact %}active{% endblock %}
 {% block title_suffix %} - Contact Us{% endblock %}
 
 {% block content %}

diff --git a/website/templates/website/home.html b/website/templates/website/home.html
@@ -14,17 +14,8 @@
     <base href="/" />
 {% endblock %}
 
-{% block header %}
-<div class="header container fixed-height">
-    <div class="row">
-        <div class="links">
-            <a href="/docs/api.html">API</a>
-            <a href="/about/">About</a>
-            <a href="/contact/">Contact</a>
-        </div>
-    </div>
-</div>
-{% endblock %}
+{% block header_class %}{% endblock %}
+{% block header_log %}{% endblock %}
 
 {% block content_home %}
 <div class="description container fixed-height">

diff --git a/website/templates/website/l2_base.html b/website/templates/website/l2_base.html
@@ -21,13 +21,17 @@
 {% block header %}
 <div class="header container {% block header_class %}header80 fixed-height{% endblock %}">
     <div class="row">
+        {% block header_log %}
         <div class="logo">
             <a href="/"><img src="/static/images/logo.png" /></a>
         </div>
+        {% endblock %}
         <div class="links">
-            <a href="/docs/api.html">API</a>
-            <a href="/about/">About</a>
-            <a href="/contact/">Contact</a>
+            <ul>
+                <li class="{% block nav_api %}{% endblock %}"><span class="arrow"></span><a href="/docs/api.html">API</a></li>
+                <li class="{% block nav_about %}{% endblock %}"><span class="arrow"></span><a href="/about/">About</a></li>
+                <li class="{% block nav_contact %}{% endblock %}"><span class="arrow"></span><a href="/contact/">Contact</a></li>
+            </ul>
         </div>
     </div>
 </div>

diff --git a/website/templates/website/nav.html b/website/templates/website/nav.html
@@ -0,0 +1,7 @@
+<div class="links">
+    <ul>
+        <li class="{% block nav_api %}{% endblock %}"><span class="arrow"></span><a href="/docs/api.html">API</a></li>
+        <li class="{% block nav_about %}{% endblock %}"><span class="arrow"></span><a href="/about/">About</a></li>
+        <li class="{% block nav_contact %}{% endblock %}"><span class="arrow"></span><a href="/contact/">Contact</a></li>
+    </ul>
+</div>