Add dropdown to header

3 files changed, 97 insertions, 12 deletions

diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css
index 0face2a1..96a03241 100644
--- a/mediagoblin/static/css/base.css
+++ b/mediagoblin/static/css/base.css
@@ -117,13 +117,57 @@ header {
   padding: 0;
   margin-bottom: 42px;
   background-color: #303030;
-  height: 34px;
   border-bottom: 1px solid #252525;
 }
 
 .header_right {
-  float: right;
   margin: 8px;
+  display: inline-block;
+  float: right;
+}
+
+.header_right ul {
+	display: none;
+	position: absolute;
+	top: 42px;
+	right: 0px;
+	background: #252525;
+	padding: 20px;
+}
+
+.header_right li {
+  list-style: none;
+}
+
+.dropdown {
+  display: inline-block;
+  color: #c3c3c3;
+  background-color: #424242;
+  border: 1px solid;
+  border-color: #464646 #2B2B2B #252525;
+  border-radius: 4px;
+  padding: 3px 8px;
+  font-size: 16px;
+  text-decoration: none;
+  font-style: normal;
+  font-weight: bold;
+  cursor: pointer;
+  position: relative;
+}
+
+.dropdown_items {
+  position: absolute;
+  right: 0px;
+  top: 25px;
+  background-color: #424242;
+  padding: 10px;
+  width: 160px;
+  border-radius: 5px 0 5px 5px;
+  box-shadow: 0 2px 1px black;
+}
+
+.dropdown_items a {
+  display: block;
 }
 
 a.logo {
@@ -562,8 +606,13 @@ table.media_panel th {
     padding: 9px 14px;
   }
   
+  header {
+    text-align: center;
+  }
+  
   .header_right {
     margin-right: 2%;
+    float: none;
   }
   
   a.logo {
diff --git a/mediagoblin/static/js/header_dropdown.js b/mediagoblin/static/js/header_dropdown.js
new file mode 100644
index 00000000..57385203
--- /dev/null
+++ b/mediagoblin/static/js/header_dropdown.js
@@ -0,0 +1,33 @@
+/**
+ * GNU MediaGoblin -- federated, autonomous media hosting
+ * Copyright (C) 2011, 2012 MediaGoblin contributors.  See AUTHORS.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+$(document).ready(function() {
+  $(".dropdown_items").hide();
+  $(".dropdown").click(function(e) {
+    e.preventDefault();
+    $(".dropdown_items").toggle();
+  });
+  $(".dropdown_items").mouseup(function() {
+    return false
+  });
+  $(document).mouseup(function(e) {
+    if($(e.target).not(".dropdown_items")) {
+      $(".dropdown_items").hide();
+    }
+  });
+});
diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html
index c2d5457d..16882a98 100644
--- a/mediagoblin/templates/mediagoblin/base.html
+++ b/mediagoblin/templates/mediagoblin/base.html
@@ -28,6 +28,8 @@
     <link rel="shortcut icon"
           href="{{ request.staticdirect('/images/goblin.ico') }}" />
     <script src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
+    <script type="text/javascript"
+          src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
     <!--[if lt IE 9]>
       <script src="{{ request.staticdirect('/js/extlib/html5shiv.js') }}"></script>
     <![endif]-->
@@ -44,12 +46,6 @@
                ><img src="{{ request.staticdirect('/images/logo.png') }}"
                    alt="{% trans %}MediaGoblin logo{% endtrans %}" /></a>
           {% endblock mediagoblin_logo %}
-          {% if request.user and request.user.status == 'active' %}
-            <a class="button_action"
-               href="{{ request.urlgen('mediagoblin.submit.start') }}">
-              {% trans %}Add media{% endtrans %}
-            </a>
-          {% endif %}
           {% block mediagoblin_header_title %}{% endblock %}
           <div class="header_right">
             {% if request.user %}
@@ -60,15 +56,22 @@
                    class="button_action_highlight">
                   {% trans %}Verify your email!{% endtrans %}</a>
               {% endif %}
-             <a href="{{ request.urlgen('mediagoblin.user_pages.user_home',
-                                          user= request.user.username) }}">
-                {{ request.user.username }}</a>
-              (<a href="{{ request.urlgen('mediagoblin.auth.logout') }}">{% trans %}log out{% endtrans %}</a>)
+              <div class="dropdown">
+                {{ request.user.username }} ▾
+                <div class="dropdown_items">
+                  {% if request.user and request.user.status == 'active' %}
+                    <a href="{{ request.urlgen('mediagoblin.submit.start') }}">+ Add media</a>
+                  {% endif %}
+                  <a href="{{ request.urlgen('mediagoblin.user_pages.user_home', user= request.user.username) }}">View your profile</a>
+                  <a class="button_action" href="{{ request.urlgen('mediagoblin.auth.logout') }}">{% trans %}Log out{% endtrans %}</a>
+                </div>
+              </div>
             {% else %}
               <a href="{{ request.urlgen('mediagoblin.auth.login') }}">
                 {% trans %}Log in{% endtrans %}</a>
             {% endif %}
           </div>
+          <div class="clear"></div>
         </header>
       {% endblock %}
     <div class="container">