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 {
padding: 9px 14px;
}
+ header {
+ text-align: center;
+ }
+
.header_right {
margin-right: 2%;
+ float: none;
}
a.logo {
--- /dev/null
+/**
+ * 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();
+ }
+ });
+});
<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]-->
><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 %}
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">