Ui fixes #1538

heartsucker · 2017-01-29T15:53:05Z

Makes some of the suggested changes in #1536 and fixes an incomplete rebase from #1349.

redshiftzero

Solid changes @heartsucker 👍 . I've added a couple of comments inline. Once addressed this is good to merge in.

redshiftzero · 2017-01-31T22:25:57Z

securedrop/sass/_base.sass

    font-size: 30px
+    color: #004080


Seems like from the mockups that the text that we want this color and left alignment applied to is actually the h2 text?

Actually the bigger problem is that most places we use h2, we should be using h1, and the only places we use h1, should definitely be h2. Ha. I'll make some more changes.

redshiftzero · 2017-01-31T22:29:05Z

securedrop/source_templates/index.html

@@ -34,15 +34,16 @@
          </h2>
          <hr class="cut-out" />
          <p>If this is your first time submitting documents to journalists, start here.</p>
-          <a href="/generate" class="btn alt block" id="submit-documents-button"><img id="warning-close" src="{{ url_for('static', filename='i/font-awesome/white/cloud-upload.svg') }}" width="17px" height="17px"> Submit Documents</a>
+          {# adding a break between 'submit' and 'documents' to make both containers equal sized #}
+          <a href="/generate" class="sd-button btn alt block" id="submit-documents-button">SUBMIT<br/>DOCUMENTS</a>


Looks like these containers are not equal sized in Tor Browser:

I'm not seeing it display like this. What OS are you testing this on? I'm on Firefox 51.0.1 / Debian Stretch. Also, how are you getting TB to reach localhost?

Check out this link for how to allow TB to reach localhost. I was running Tor Browser 6.5 on Mac OS X when I made that screenshot. Check it out in Tor Browser (it's based on Firefox 45.7.0 so the CSS might render differently) and let me know if you can't reproduce what I see above

The "no proxy" option isn't working for me. Also TB 6.5. Hmm. If you want to branch this and make a tweak, go ahead.

Sure, I'll take a look

Ok branched off this and in fix-box-sizes-on-src-interface-index there is a single commit 74f612b fixing these boxes to be the same size. Now in Tor Browser this looks like:

I'll submit a PR against this repo to get that commit merged in after I merge your PR in

redshiftzero · 2017-01-31T22:31:52Z

securedrop/sass/journalist.sass

+
+      &:hover
+        color: #999
+        background-color: white


Verified this fixes the CSS on the journalist interface 👍

redshiftzero · 2017-02-02T01:00:54Z

Hey @heartsucker - thanks for addressing these comments - everything looks good on my end now. If you fix the functional test failure I will merge this in 😄

heartsucker · 2017-02-02T09:18:47Z

@redshiftzero Sounds good. It might take a few days for me to get to it. New job 'n all.

fixes item 1 from issue 1536

fixes item 4 in issue 1536

fixes item 5 in 1536

rebasing of sass changes left out this bit of css

heartsucker · 2017-02-02T20:13:24Z

Two things:

How the eff do you get a container to be the width of the stuff inside it without setting min-width to some pixel value?
Is cancel button outline / text supposed to be the same color as the continue button?

redshiftzero · 2017-02-02T21:28:18Z

Try width: auto - also if you're talking about for the buttons, if you remove the width: 35% from the btn primary then the button will be the width of the content inside it:

For that button we are using the color suggested by @ninavizz - @ninavizz is the different color intentional for a UX reason? Unless there is a UX reason to make them different, I think it's fine to change to be the same color (note you'll also need to modify the rollover color).

ninavizz · 2017-02-03T03:19:10Z

Hey @heartsucker—my bad on that hex call, sorry abt that! I got sloppy, it should visually match the primary button—yes, yes. :)

I updated my spec to cite #727c9b as the recco'd stroke color (it's a taaaad darker than the button blue).

Thx for catching & asking!

ninavizz · 2017-02-03T07:10:29Z

Ok, I created #1552 as a go-to place to solidly document global basic things between all three UIs: Journalist, Source, and Admin. I had used #004080 I had for hyperlink-blue, and confused that for the header's blue in my haste to document earlier notes. #7985AA is the global "muted blue" I want to see carry into headers. Really sorry for the runaround on that @heartsucker @redshiftzero @fowlslegs!

heartsucker · 2017-02-03T07:52:53Z

if you remove the width: 35% from the btn

D'oh. Note to self: don't debug on the S-bahn. :(

heartsucker · 2017-02-03T09:00:57Z

@redshiftzero Should be good to merge now.

redshiftzero · 2017-02-03T18:24:07Z

@heartsucker I took another look at this - looking much better - just a couple more small things 🙏 :

There was a rebase snafu on /login:

Remove extra codename field (leaving the one with id="login-with-existing-codename" since the functional tests are looking for that)
Cancel button should be at the same y-position as the continue button (once you fix the nesting of the <p>s that should happen naturally 😇
Cancel button should redirect back to the index

Finally, the index looks like this in Tor Browser:

But my SecureDrop-CSS-spider-sense tells me that if you change the classes on the "Check for a response" button to sd-button btn primary index then this button will be fixed 💯

Also thanks @ninavizz for that quick response 💎

ninavizz · 2017-02-03T21:22:56Z

Are Sources now being asked to enter their passphrase 2x? :(

Cancel (or secondary) button should always be visually paired w/ the primary button—no more than ~4px space, between them. Once I'm fully competent with this Terminal/dev-build stuff (that @fowlslegs was extra-awesome spending THREE hours walking me through, on Tuesday!) that's still super brain-hurts-new to me, I'll do all I can to comment directly on the code itself.

Longer-term, a UI library of common elements—such as button pairs!—with "how to modify w/o breaking code or visual standards" notes will be a nice thing to create, so all these repeat-elements can be way easier to wham-bam cut-and-paste/modify. More time spent building + designing, less time spent replicating the saaaame things over and over again. The Y!UI library was built when I was at Yahoo!, and maan, that thing was awesome!

heartsucker · 2017-02-03T21:27:05Z

No, this was just a messy rebase I didn't check carefully enough. I only checked the things I fought changed and not everything. Some of the changes broke the design and some are just functionally wrong (double password). Changes soon (hopefully). Am 03.02.2017 22:22 schrieb "Nina Eleanor Alter" <[email protected]>:

…

Are Sources now being asked to enter their passphrase 2x? :( Cancel (or secondary) button should always be visually paired w/ the primary button—no more than ~4px space, between them. Once I'm fully competent with this Terminal/dev-build stuff (that @fowlslegs <https://github.com/fowlslegs> was extra-awesome spending THREE hours walking me through, on Tuesday!) that's still super brain-hurts-new to me, I'll do all I can to comment directly on the code itself. Longer-term, a UI library of common elements—such as button pairs!—with "how to modify w/o breaking code or visual standards" notes will be a nice thing to create, so all these repeat-elements can be way easier to wham-bam cut-and-paste/modify. More time spent building + designing, less time spent replicating the saaaame things over and over again. The Y!UI library was built when I was at Yahoo!, and maan, that thing was awesome! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1538 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AD0DALzc0pd5YVPG81KgF_FJ838cQblDks5rY5qzgaJpZM4Lw0ux> .

ninavizz · 2017-02-03T22:10:37Z

Cool! I (and lots of others in the UX-for-security community) just find that whole "Enter your password in a second time!" pattern-standard to be absurdly asinine... and wanted to make sure it wasn't sought, here. I should trust my experience with you thus far, that you're not an advocate for piffy security-theatrics... :D

heartsucker · 2017-02-04T08:51:56Z

@redshiftzero Apologies for the sloppy rebase and time wasted. This one should do it, though. However, two notes about things that look less than ideal. Not sure if these should be tackled here or in another issue.

Without JS enabled, it is not obvious what the download and delete buttons do (IMO).

The reset buttons here have too much text in them, so I think there should be text to the left explaining what the button does, and then reset totp and reset yubikey buttons.

@ninavizz Comments / suggestions?

redshiftzero · 2017-02-05T18:37:35Z

@heartsucker no worries. Thanks for making these changes! I've checked this out and it now looks great - I'm going to merge this in now given that the changes are solid and we've already had a long back and forth in this PR. But! If you want to make another followup PR you could make the following changes to address these (IMHO valid but much smaller) concerns:

Change button text to "Download Selected" and "Delete Selected" - which may involve making some CSS changes such that this text fits in one line when JS is enabled.
I agree with your suggested solution here, bearing in mind that "Reset Google Authenticator" makes more sense to non-technical folk than "Reset TOTP" (people acting as administrators / point people for their SecureDrop instance might not be super techy).

heartsucker · 2017-02-05T18:51:33Z

@redshiftzero You got it. :D

heartsucker force-pushed the ui-fixes branch 3 times, most recently from 64f0871 to 61f7365 Compare January 30, 2017 08:15

redshiftzero suggested changes Jan 31, 2017

View reviewed changes

redshiftzero self-assigned this Feb 1, 2017

redshiftzero mentioned this pull request Feb 1, 2017

Source interface UX improvements #1534

Merged

heartsucker force-pushed the ui-fixes branch from 61f7365 to e9f05fa Compare February 1, 2017 22:01

heartsucker added 6 commits February 2, 2017 19:10

left align h1, change color to freedomofpress#4080

3a88c03

fixes item 1 from issue 1536

capitalized buttons, added spacing

9bdd857

fixes item 4 in issue 1536

make dev VM warning much more obvious

0f589e5

KILL ALL BUTTON ICONS

f684470

fixes item 5 in 1536

fixed broken css

db8d75d

rebasing of sass changes left out this bit of css

fixed h1/h2 ambiguity

1b4a6f3

heartsucker force-pushed the ui-fixes branch from e9f05fa to 1b4a6f3 Compare February 2, 2017 19:30

heartsucker force-pushed the ui-fixes branch from 6a85e25 to b772882 Compare February 3, 2017 08:49

heartsucker and others added 2 commits February 4, 2017 09:45

html/css additions after rebase

10c937a

Fix mismatched box sizes on source interface index

b14c5ec

heartsucker force-pushed the ui-fixes branch from b772882 to b14c5ec Compare February 4, 2017 08:47

removed lock icon on source generate page

bed052e

heartsucker force-pushed the ui-fixes branch from 8222ee8 to e099b72 Compare February 4, 2017 17:30

increased codename letter spacing

c8b3a17

heartsucker force-pushed the ui-fixes branch 2 times, most recently from 26d527d to 8729ece Compare February 4, 2017 18:37

heartsucker mentioned this pull request Feb 4, 2017

Recommended 0.4 SOURCE UI Fixes #1536

Closed

heartsucker added 4 commits February 5, 2017 10:33

changed placeholder text on source /lookup page

db4a35f

updated source copy for clarity / supportiveness

7a60442

updated sass for flashes / asides

420dd76

removed unused sass rule

a824f99

heartsucker force-pushed the ui-fixes branch from 8729ece to a824f99 Compare February 5, 2017 10:59

use 'include' for embedded SVGs to avoid clutter in HTML

d99c776

heartsucker force-pushed the ui-fixes branch from 1a8d867 to d99c776 Compare February 5, 2017 14:10

redshiftzero approved these changes Feb 5, 2017

View reviewed changes

redshiftzero merged commit f54c531 into freedomofpress:develop Feb 5, 2017

heartsucker deleted the ui-fixes branch February 5, 2017 18:42

This was referenced Feb 5, 2017

Flash message fixes #1558

Merged

Change delete/download text on Journalist interface #1571

Closed

Change reset buttons for YubiKey/Authenticator in Journalist/Admin interface #1572

Closed

Replace the Font Awesome icons with images #1477

Closed

cfm mentioned this pull request Jun 17, 2021

all-caps button labels are misread by screen-readers #6003

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ui fixes #1538

Ui fixes #1538

heartsucker commented Jan 29, 2017

redshiftzero left a comment

redshiftzero Jan 31, 2017

heartsucker Feb 1, 2017

redshiftzero Jan 31, 2017

heartsucker Feb 1, 2017

redshiftzero Feb 1, 2017 •

edited

Loading

heartsucker Feb 1, 2017

redshiftzero Feb 1, 2017

redshiftzero Feb 2, 2017 •

edited

Loading

redshiftzero Jan 31, 2017

redshiftzero commented Feb 2, 2017

heartsucker commented Feb 2, 2017

heartsucker commented Feb 2, 2017

redshiftzero commented Feb 2, 2017

ninavizz commented Feb 3, 2017

ninavizz commented Feb 3, 2017 •

edited

Loading

heartsucker commented Feb 3, 2017

heartsucker commented Feb 3, 2017

redshiftzero commented Feb 3, 2017

ninavizz commented Feb 3, 2017

heartsucker commented Feb 3, 2017 via email

ninavizz commented Feb 3, 2017 •

edited

Loading

heartsucker commented Feb 4, 2017

redshiftzero commented Feb 5, 2017

heartsucker commented Feb 5, 2017

Ui fixes #1538

Ui fixes #1538

Conversation

heartsucker commented Jan 29, 2017

redshiftzero left a comment

Choose a reason for hiding this comment

redshiftzero Jan 31, 2017

Choose a reason for hiding this comment

heartsucker Feb 1, 2017

Choose a reason for hiding this comment

redshiftzero Jan 31, 2017

Choose a reason for hiding this comment

heartsucker Feb 1, 2017

Choose a reason for hiding this comment

redshiftzero Feb 1, 2017 • edited Loading

Choose a reason for hiding this comment

heartsucker Feb 1, 2017

Choose a reason for hiding this comment

redshiftzero Feb 1, 2017

Choose a reason for hiding this comment

redshiftzero Feb 2, 2017 • edited Loading

Choose a reason for hiding this comment

redshiftzero Jan 31, 2017

Choose a reason for hiding this comment

redshiftzero commented Feb 2, 2017

heartsucker commented Feb 2, 2017

heartsucker commented Feb 2, 2017

redshiftzero commented Feb 2, 2017

ninavizz commented Feb 3, 2017

ninavizz commented Feb 3, 2017 • edited Loading

heartsucker commented Feb 3, 2017

heartsucker commented Feb 3, 2017

redshiftzero commented Feb 3, 2017

ninavizz commented Feb 3, 2017

heartsucker commented Feb 3, 2017 via email

ninavizz commented Feb 3, 2017 • edited Loading

heartsucker commented Feb 4, 2017

redshiftzero commented Feb 5, 2017

heartsucker commented Feb 5, 2017

redshiftzero Feb 1, 2017 •

edited

Loading

redshiftzero Feb 2, 2017 •

edited

Loading

ninavizz commented Feb 3, 2017 •

edited

Loading

ninavizz commented Feb 3, 2017 •

edited

Loading