Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Source Interface /lookup UX #5096

Merged
merged 2 commits into from
Jan 28, 2020
Merged

Improve Source Interface /lookup UX #5096

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
af095c4
Improve /lookup UX
DrGFreeman Jan 15, 2020
08edfa2
Restore logout button in base.html
DrGFreeman Jan 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions securedrop/sass/modules/_hr-horizontal-rule-line.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,3 +19,8 @@
clear: both
border: none
height: 10px

&.header-separator-high
clear: both
border: none
height: 30px
12 changes: 11 additions & 1 deletion securedrop/sass/source.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,14 @@
background: rgba(0, 0, 0, 0.05)
box-sizing: border-box
-moz-box-sizing: border-box
margin-top: 5px
padding: 5px 10px
text-align: center
width: 80%

@media only screen and (max-width: 880px)
#codename-hint
width: 100%

#codename-hint-visible
.visible-codename
Expand Down Expand Up @@ -181,8 +187,12 @@ p#codename
margin: 0 2%
padding: 5px 15px

p#no-replies
h4#no-replies
text-align: center
color: $color_grey_medium
background: $color_grey_xlight
padding: 40px
margin: 0.5em 0

p.explanation
text-align: left
Expand Down
11 changes: 7 additions & 4 deletions securedrop/source_templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,13 @@
{% endblock %}

<div class="panel selected">
{% if 'logged_in' in session %}
Copy link
Contributor

@zenmonkeykstop zenmonkeykstop Jan 24, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logout button was moved from the base to lookup template as part of the layout changes. One consequence of this is that it no longer appears on other pages that use extend base.html - /why-journalist-key and the error pages being the most likely examples. It might be better to have the logout widget as an include, and include it on pages that may be rendered during an active session.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I actually didn't need to move the logout button, only ensure the HR that follows the button in base.html is not included when the codename hint is displayed in /lookup. The changes in 08edfa2 restores the button while keeping the /lookup layout as desired.

<a href="{{ url_for('main.logout') }}" class="btn pull-right" id="logout">{{ gettext('LOG OUT') }}</a>
{% endif %}
<hr class="no-line">
{% if 'logged_in' in session %}
<a href="{{ url_for('main.logout') }}" class="btn pull-right" id="logout">{{ gettext('LOG OUT') }}</a>
{% endif %}

{% if not new_user%}
<hr class="no-line">
{% endif %}

{% block body %}{% endblock %}

Expand Down
33 changes: 17 additions & 16 deletions securedrop/source_templates/lookup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
{% extends "base.html" %}
{% block body %}

{% if new_user %}
<div class="code-reminder pull-left" id="codename-hint">
<div id="codename-hint-visible">
<img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/lock-black.png') }}" width="17" height="20"> {{ gettext('Remember, your codename is:') }}
<a id="codename-hint-show" class="show pull-right visible-codename" href="#codename-hint-visible">{{ gettext('Show') }}</a>
<div id="codename-hint-content" class="hidden-codename codename">
<a id="codename-hint-hide" class="pull-right" href="#codename-hint">{{ gettext('Hide') }}</a>
<p>{{ codename }}</p>
</div>
</div>
</div>
<hr class="header-separator-high">
{% else %}
<hr class="no-line">
{% endif %}

<div class="center">
{% include 'flashed.html' %}

Expand Down Expand Up @@ -104,23 +120,8 @@ <h2 class="headline">{{ gettext('Read Replies') }}</h2>
</div>
</form>
{% else %}
<p id="no-replies" class="explanation">{{ gettext('There are no replies at this time.') }}</p>
<h4 id="no-replies" class="explanation">{{ gettext('— No Messages —') }}</h4>
{% endif %}
</div>

<hr class="no-line">

{% if new_user %}
<div class="code-reminder" id="codename-hint">
<div id="codename-hint-visible">
<img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/lock-black.png') }}" width="17" height="20"> {{ gettext('Remember, your codename is:') }}
<a id="codename-hint-show" class="show pull-right visible-codename" href="#codename-hint-visible">{{ gettext('Show') }}</a>
<div id="codename-hint-content" class="hidden-codename codename">
<a id="codename-hint-hide" class="pull-right" href="#codename-hint">{{ gettext('Hide') }}</a>
<p>{{ codename }}</p>
</div>
</div>
</div>
{% endif %}

{% endblock %}