From 33ff9689ad96c544cc2779379ebe6ed66bef9593 Mon Sep 17 00:00:00 2001
From: Raymond <raymondshah99@gmail.com>
Date: Wed, 15 Oct 2014 13:15:58 -0700
Subject: [PATCH] arrow indication of which page the user is on #3

---
 website/static/styles/WebhookInbox.css       | 24 +++++++++++++++++++-
 website/static/styles/WebhookInboxViewer.css | 24 +++++++++++++++++++-
 website/templates/website/about.html         |  2 +-
 website/templates/website/contact.html       |  2 +-
 website/templates/website/home.html          | 13 ++---------
 website/templates/website/l2_base.html       | 10 +++++---
 website/templates/website/nav.html           |  7 ++++++
 7 files changed, 64 insertions(+), 18 deletions(-)
 create mode 100644 website/templates/website/nav.html

diff --git a/website/static/styles/WebhookInbox.css b/website/static/styles/WebhookInbox.css
index 049df11..3ee67f4 100644
--- 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
index 3381bb8..e460158 100644
--- 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
index 0d15b6c..332d6cc 100644
--- 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
index fd8eda7..2643c68 100644
--- 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
index b6e0da3..60eaff1 100644
--- 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
index d51a345..a3980d0 100644
--- 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
new file mode 100644
index 0000000..de12a57
--- /dev/null
+++ 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>
\ No newline at end of file