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.

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

[design refresh, rev2] Redesign footer, index page and language selector #4666

Merged
merged 8 commits into from Aug 23, 2019

Conversation

@eloquence
Copy link
Contributor

eloquence commented Aug 9, 2019

Description

Update footer and index page to the second revision as specified for the SecureDrop 1.0.0 design refresh.

Resolves #4662
Resolves #4663

Status

Ready for review

Test plan

  • Verify that the main page design works well in desktop and mobile view of Tor Browser
  • Verify that the footer as specified appears on each page of the Source Interface
  • Verify that there are no unintended side effects on any page of the Source Interface or the Journalist Interface

Why is the logo in the footer a bit different from the main logo?

We decided to use a monochromatic version of the logo in the footer to avoid too much repetition of the exact same image (favicon, potentially stock logo if not replaced, and footer). This monochromatic variant will be one of the approved variants post-logo refresh.

Screenshots

Desktop view

Screen Shot 2019-08-22 at 14 30 40-fullpage

Mobile view

Screen Shot 2019-08-22 at 14 30 53-fullpage

@eloquence

This comment has been minimized.

Copy link
Contributor Author

eloquence commented Aug 9, 2019

(I'm basing this on the rev1 branch for now, which we'll hopefully merge into develop soon.)

@eloquence eloquence force-pushed the design-refresh-rev2-footer branch 2 times, most recently from 3b0761e to 163113a Aug 10, 2019
@codecov-io

This comment has been minimized.

Copy link

codecov-io commented Aug 10, 2019

Codecov Report

❗️ No coverage uploaded for pull request base (logo-and-color-refresh-2019@cd30c12). Click here to learn what that means.
The diff coverage is n/a.

Impacted file tree graph

@@                      Coverage Diff                       @@
##             logo-and-color-refresh-2019    #4666   +/-   ##
==============================================================
  Coverage                               ?   82.67%           
==============================================================
  Files                                  ?       45           
  Lines                                  ?     3122           
  Branches                               ?      338           
==============================================================
  Hits                                   ?     2581           
  Misses                                 ?      454           
  Partials                               ?       87

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cd30c12...163113a. Read the comment docs.

@codecov-io

This comment has been minimized.

Copy link

codecov-io commented Aug 10, 2019

Codecov Report

Merging #4666 into develop will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff            @@
##           develop    #4666   +/-   ##
========================================
  Coverage    82.67%   82.67%           
========================================
  Files           45       45           
  Lines         3122     3122           
  Branches       338      338           
========================================
  Hits          2581     2581           
  Misses         454      454           
  Partials        87       87

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0c0ed47...2018880. Read the comment docs.

@eloquence eloquence force-pushed the logo-and-color-refresh-2019 branch from cd30c12 to 064de4a Aug 13, 2019
@eloquence eloquence force-pushed the design-refresh-rev2-footer branch from d25a7f9 to a965c2a Aug 13, 2019
@eloquence

This comment has been minimized.

Copy link
Contributor Author

eloquence commented Aug 15, 2019

This is technically ready for review if anyone wants to poke, but should be applied against develop once #4634 is merged, so leaving in draft mode for now.

@eloquence eloquence force-pushed the design-refresh-rev2-footer branch from a965c2a to 13a44a5 Aug 15, 2019
@eloquence eloquence added this to Ready for review in SecureDrop Team Board Aug 15, 2019
@eloquence eloquence force-pushed the design-refresh-rev2-footer branch from 13a44a5 to 9939eb9 Aug 15, 2019
@eloquence eloquence changed the base branch from logo-and-color-refresh-2019 to develop Aug 15, 2019
@eloquence eloquence marked this pull request as ready for review Aug 15, 2019
@eloquence

This comment has been minimized.

Copy link
Contributor Author

eloquence commented Aug 16, 2019

Since nobody has reviewed yet and we're no longer in a huge rush, kicking this back into in development to combine with the index page rev2 (in reviewing that design, Nina suggested to alter some of the footer specs again; it's easiest to do that in the same PR).

@eloquence eloquence moved this from Ready for review to In Development in SecureDrop Team Board Aug 16, 2019
@eloquence eloquence changed the title Footer redesign; revised language to be more accessible & mention FPF [design refresh, rev2] Redesign footer and index page Aug 16, 2019
@eloquence

This comment has been minimized.

Copy link
Contributor Author

eloquence commented Aug 16, 2019

(Test failures are legit, functional tests make string checks that will need to be updated.)

eloquence added 6 commits Aug 9, 2019
Resolves #4662
Resolves #4663
- Cleaner globe icon
- Caret icon instead of glyph
- Left-aligned menu items
- Better align menu with logo
- Mobile vs. desktop tweaks
- Darker highlight color for accessibility
@eloquence eloquence force-pushed the design-refresh-rev2-footer branch from a27de5f to d9f333c Aug 22, 2019
@eloquence eloquence changed the title [design refresh, rev2] Redesign footer and index page [design refresh, rev2] Redesign footer, index page and language selector Aug 22, 2019
@eloquence eloquence moved this from In Development to Ready for review in SecureDrop Team Board Aug 22, 2019
@zenmonkeykstop zenmonkeykstop self-assigned this Aug 23, 2019
Copy link
Contributor

zenmonkeykstop left a comment

  • Main page design looks good on desktop and mobile Tor Browser (although the logo and language picker are displayed inconsistently (and awkwardly left-justified with a random HR) on subsequent pages).
  • With the apparmor change in that last commit, the Source Interface renders each page with the footer in place
  • The Journalist Interface displays correctly with no issues as a result of the SI change, and the footer isn't displayed on it.

As an aside, the footer language appears a bit stilted - "stewarded" isn't in common usage and it's more natural to refer to "the Freedom of the Press Foundation" rather than "Freedom of the Press Foundation" - the combination of the two gives the footer text a phishy vibe for me.

From a technical perspective, this is good to go. IMO the footer text could be reworded but that can happen separately.

@zenmonkeykstop zenmonkeykstop merged commit 9515b59 into develop Aug 23, 2019
8 checks passed
8 checks passed
ci/circleci: admin-tests Your tests passed on CircleCI!
Details
ci/circleci: lint Your tests passed on CircleCI!
Details
ci/circleci: python2-app-tests Your tests passed on CircleCI!
Details
ci/circleci: python3-app-tests Your tests passed on CircleCI!
Details
ci/circleci: staging-test-with-rebase Your tests passed on CircleCI!
Details
ci/circleci: static-analysis-and-no-known-cves Your tests passed on CircleCI!
Details
ci/circleci: translation-tests Your tests passed on CircleCI!
Details
ci/circleci: updater-gui-tests Your tests passed on CircleCI!
Details
SecureDrop Team Board automation moved this from Ready for review to Done Aug 23, 2019
@zenmonkeykstop zenmonkeykstop deleted the design-refresh-rev2-footer branch Aug 23, 2019
@eloquence

This comment has been minimized.

Copy link
Contributor Author

eloquence commented Aug 23, 2019

(and awkwardly left-justified with a random HR)

That random HR in mobile looks like a recent design regression, will fix.

The sizing of the language selector on subsequent pages should ideally be made consistent with the logo, but I view that as an enhancement that's OK to defer for now. (It's not entirely trivial given the different sizing specs used on index and subsequent pages.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.