From 5a42915b6893457045db205a905dc743283c510a Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 2 Dec 2012 02:13:22 +0100 Subject: [PATCH 1/9] First commit to add header dropdown --- mediagoblin/static/css/base.css | 4 ++- mediagoblin/templates/mediagoblin/base.html | 31 +++++++++++++++++++++ mediagoblin/templates/mediagoblin/root.html | 27 ------------------ 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index f8a9e014..7a4fbb1e 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -112,7 +112,9 @@ input, textarea { } header { - width: 100%; + width: 940px; + margin-left: auto; + margin-right: auto; padding: 0; margin-bottom: 42px; background-color: #303030; diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index e1fa0191..0717e7ba 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -57,6 +57,8 @@ ({% trans %}log out{% endtrans %}) {% if request.user and request.user.status == 'active' %} {% trans %}Add media{% endtrans %} +
▼
+
▲
{% elif request.user and request.user.status == "needs_email_verification" %} {# the following link should only appear when verification is needed #} + {% if request.user.status == 'active' %} +
+

{% trans %}Actions{% endtrans %}

+ +
+ {% endif %} {% endblock %}
diff --git a/mediagoblin/templates/mediagoblin/root.html b/mediagoblin/templates/mediagoblin/root.html index 047dd2bb..5c6eb52f 100644 --- a/mediagoblin/templates/mediagoblin/root.html +++ b/mediagoblin/templates/mediagoblin/root.html @@ -21,33 +21,6 @@ {% block mediagoblin_content %} {% if request.user %} - {% if request.user.status == 'active' %} -

{% trans %}Actions{% endtrans %}

- - {% endif %}

{% trans %}Explore{% endtrans %}

{% else %}

{% trans %}Hi there, welcome to this MediaGoblin site!{% endtrans %}

From 3afe739c410bb64b29ee4b1c8da4894cbabf00ca Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 2 Dec 2012 02:19:20 +0100 Subject: [PATCH 2/9] Several edits to header dropdown: - Style the up/down arrow as a button - Remove the Actions header - Remove redundant original "Add media" button - Style "Add media" and "Create new collection" links as buttons --- mediagoblin/templates/mediagoblin/base.html | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index 0717e7ba..fe383334 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -53,12 +53,9 @@ {% block mediagoblin_header_title %}{% endblock %}
{% if request.user %} - {{ request.user.username }}{% trans %}'s account{% endtrans %} - ({% trans %}log out{% endtrans %}) {% if request.user and request.user.status == 'active' %} - {% trans %}Add media{% endtrans %} -
▼
-
▲
+
▼
+
▲
{% elif request.user and request.user.status == "needs_email_verification" %} {# the following link should only appear when verification is needed #}
{% if request.user.status == 'active' %}
-

{% trans %}Actions{% endtrans %}

+ {{ request.user.username }}{% trans %}'s account{% endtrans %} + ({% trans %}log out{% endtrans %})
    -
  • +
  • {%- trans %}Add media{% endtrans -%}
    • -
  • +
  • {%- trans %}Create new collection{% endtrans -%}
  • From 2369feb58acef5a04ee160db60a2180093a764a7 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 2 Dec 2012 02:22:18 +0100 Subject: [PATCH 3/9] Give elements proper, more descriptive class names --- mediagoblin/templates/mediagoblin/base.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index fe383334..b16eb71a 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -54,8 +54,8 @@
    {% if request.user %} {% if request.user and request.user.status == 'active' %} -
    ▼
    -
    ▲
    +
    ▼
    +
    ▲
    {% elif request.user and request.user.status == "needs_email_verification" %} {# the following link should only appear when verification is needed #}
    {% if request.user.status == 'active' %} -
    +
    {{ request.user.username }}{% trans %}'s account{% endtrans %} ({% trans %}log out{% endtrans %})
      From a7d079aca6780255531531b16849d5272b83ec41 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 2 Dec 2012 02:25:53 +0100 Subject: [PATCH 4/9] Fix small user error --- mediagoblin/templates/mediagoblin/base.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index b16eb71a..da5bd388 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -69,7 +69,7 @@ {% endif %}
    - {% if request.user.status == 'active' %} + {% if request.user and request.user.status == 'active' %}
    {{ request.user.username }}{% trans %}'s account{% endtrans %} ({% trans %}log out{% endtrans %}) From f2578595cde69f1a7b39272798e510bc81001461 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 2 Dec 2012 02:29:29 +0100 Subject: [PATCH 5/9] Fix header width issue on small screens --- mediagoblin/static/css/base.css | 1 + 1 file changed, 1 insertion(+) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 7a4fbb1e..40378543 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -663,6 +663,7 @@ pre { header { text-align: center; + width: 100%; } .header_right { From 3351e5b242d8457fd5adb119267e70a898b6113f Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Sun, 2 Dec 2012 02:34:29 +0100 Subject: [PATCH 6/9] Fix header width again: this is a better approach --- mediagoblin/static/css/base.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 40378543..3b23c06c 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -112,7 +112,8 @@ input, textarea { } header { - width: 940px; + width: 100%; + max-width: 940px; margin-left: auto; margin-right: auto; padding: 0; @@ -663,7 +664,6 @@ pre { header { text-align: center; - width: 100%; } .header_right { From 209bfb35cd4e94775999238336dc628ab1be3b9d Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Tue, 4 Dec 2012 21:11:42 +0100 Subject: [PATCH 7/9] Edit header styling (add border-bottom, remove background-color); add margin to header_dropdown --- mediagoblin/static/css/base.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 3b23c06c..2ba17936 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -118,8 +118,7 @@ header { margin-right: auto; padding: 0; margin-bottom: 42px; - background-color: #303030; - border-bottom: 1px solid #252525; + border-bottom: 1px solid #333; } .header_right { @@ -141,6 +140,10 @@ header { list-style: none; } +.header_dropdown { + margin: 20px; +} + a.logo { color: #fff; font-weight: bold; From 75a086dafaf59a45a995f84a37951e6553566dfc Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Tue, 4 Dec 2012 21:12:00 +0100 Subject: [PATCH 8/9] Add header_dropdown.js --- mediagoblin/static/js/header_dropdown.js | 27 ++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 mediagoblin/static/js/header_dropdown.js diff --git a/mediagoblin/static/js/header_dropdown.js b/mediagoblin/static/js/header_dropdown.js new file mode 100644 index 00000000..1b2fb00f --- /dev/null +++ b/mediagoblin/static/js/header_dropdown.js @@ -0,0 +1,27 @@ +/** + * 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 . + */ + +$(document).ready(function(){ + $(".header_dropdown").hide(); + $(".header_dropdown_up").hide(); + $(".header_dropdown_down,.header_dropdown_up").click(function() { + $(".header_dropdown_down").toggle(); + $(".header_dropdown_up").toggle(); + $(".header_dropdown").slideToggle(); + }); +}); From 10d241976447ab87dfebfebf9679a796400f6445 Mon Sep 17 00:00:00 2001 From: Jef van Schendel Date: Thu, 17 Jan 2013 16:15:03 +0100 Subject: [PATCH 9/9] CSS edits to dropdown menu; added log out button for unverified users --- mediagoblin/static/css/base.css | 17 ++++++----------- mediagoblin/templates/mediagoblin/base.html | 6 ++++-- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/mediagoblin/static/css/base.css b/mediagoblin/static/css/base.css index 2ba17936..4ccebfe1 100644 --- a/mediagoblin/static/css/base.css +++ b/mediagoblin/static/css/base.css @@ -127,21 +127,16 @@ header { float: right; } -.header_right ul { - display: none; - position: absolute; - top: 42px; - right: 0px; - background: #252525; - padding: 20px; +.header_dropdown { + margin-bottom: 20px; } -.header_right li { +.header_dropdown li { list-style: none; } -.header_dropdown { - margin: 20px; +.dropdown_title { + font-size: 20px; } a.logo { @@ -151,7 +146,7 @@ a.logo { .logo img { vertical-align: middle; - margin: 6px 8px; + margin: 6px 8px 6px 0; } .mediagoblin_content { diff --git a/mediagoblin/templates/mediagoblin/base.html b/mediagoblin/templates/mediagoblin/base.html index da5bd388..904a69d9 100644 --- a/mediagoblin/templates/mediagoblin/base.html +++ b/mediagoblin/templates/mediagoblin/base.html @@ -62,6 +62,7 @@ user=request.user.username) }}" class="button_action_highlight"> {% trans %}Verify your email!{% endtrans %} + or {% trans %}log out{% endtrans %} {% endif %} {% else %} @@ -71,8 +72,9 @@
    {% if request.user and request.user.status == 'active' %}
    - {{ request.user.username }}{% trans %}'s account{% endtrans %} - ({% trans %}log out{% endtrans %}) +

    + {{ request.user.username }}{% trans %}'s account{% endtrans %} + ({% trans %}log out{% endtrans %})