Feature #14921

Improve the CSS of the new download page

Added by sajolida 2017-11-04 16:18:50 . Updated 2017-12-03 15:48:26 .

Status:
Resolved
Priority:
Normal
Assignee:
Category:
Installation
Target version:
Start date:
2017-11-04
Due date:
% Done:

0%

Feature Branch:
web/14921-download-css
Type of work:
Website
Blueprint:

Starter:
Affected tool:
Installation Assistant
Deliverable for:

Description

  • Text on top of [X] button in OpenPGP toogle, see Feature #14630#note-16.
  • When I installed the extension, the “Verify” button becomes visible. But IMO one can easily miss this modification. Would it be possible to make it more visible? Either by using another colour or by making this button bigger or animate the background colour or something similar?

Files


Subtasks


Related issues

Related to Tails - Bug #10909: Toggle are displayed by default when JavaScript is disabled In Progress 2016-01-12

History

#1 Updated by sajolida 2017-11-14 13:18:02

  • Target version changed from Tails_3.3 to Tails_3.5

#2 Updated by sajolida 2017-11-17 15:22:47

  • Description updated

#3 Updated by sajolida 2017-11-22 21:03:20

  • Description updated

#4 Updated by cbrownstein 2017-11-26 19:38:38

  • Status changed from Confirmed to In Progress
  • Assignee changed from sajolida to cbrownstein

I’m going to take care of the screenshot issue pointed out in Feature #14630#note-21 by spriver.

#5 Updated by sajolida 2017-11-27 00:39:06

  • QA Check set to Ready for QA
  • Feature Branch set to web/14921-download-css

I think this is ready. I’m super happy!

#6 Updated by cbrownstein 2017-11-28 06:58:56

I’ll update this ticket as I notice issues, rather than list all of the issues in a single note.

First issue that I’m noticing: In website/install/win.en.html and all of the similar pages, e.g., website/install/debian/usb-overview.en.html

“Let’s Go!” is not centered in the button like it is at
https://tails.boum.org/install/win/usb/overview/index.en.html

#7 Updated by sajolida 2017-12-02 07:23:20

Cody: when do you think you’ll be done with this review?

intrigeri will have another look at Uzair’s work this week-end and we might very well release right after that.

I think it would also be fine to release even if your review is not 100% done, but then I’ll want to know whether you think that the big picture is correct and that there is no very big mistake that should block a release.

(And please give this ticket more priority than Feature #14977.)

#8 Updated by cbrownstein 2017-12-02 08:20:43

Please see the attached screenshots. The problem in the “win” screenshots is present when JavaScript is disabled.

With respect to the “openpgp_dialog_X” screenshot: When JavaScript is disabled and the “X” is clicked, the dialog snaps to the top of the window. I don’t know if this is expected behavior. If not, is it possible to remove the “X” since it’s nonfunctional anyway?

The “You seem to have JavaScript disabled…” screenshot assumes that the user is blocking JavaScript with the NoScript extension. This might not accurate. The user can block JavaScript by other means. (I’m cognizant of the fact that it’s impossible to anticipate all the ways the user can block JavaScript.)

Also, I made 2 commits in my branch. I’m not sure if you want to use them.

https://github.com/cbrownstein/tails/tree/web/14921-download-css

Other than the above issues, I’m not noticing anything else at the moment.

#9 Updated by sajolida 2017-12-02 19:40:35

  • related to Bug #10909: Toggle are displayed by default when JavaScript is disabled added

#10 Updated by sajolida 2017-12-02 19:46:53

> File chrome_win1.png added
> File chrome_win2.png added
> File firefox_win1.png added
> File firefox_win2.png added
> File openpgp_dialog_X.png added
> Assignee changed from cbrownstein to sajolida
> QA Check changed from Ready for QA to Dev Needed
>
> Please see the attached screenshots. The problem in the “win” screenshots is present when JavaScript is disabled.

Yeap. That’s Bug #10909 and it’s been the case since we have these download
instructions. This should have solved Bug #10909 years ago but that work
never got properly finished.

The good news is that I managed to do something smarter this time for
the new download page (toggle are hidden when JavaScript is disabled) so
we should reuse the same technique elsewhere now (and maybe push it
upstream to ikiwiki).

We could do that during our sprint for example as we’ll be working on
very related things.

> With respect to the “openpgp_dialog_X” screenshot: When JavaScript is disabled and the “X” is clicked, the dialog snaps to the top of the window. I don’t know if this is expected behavior. If not, is it possible to remove the “X” since it’s nonfunctional anyway?

Right, the [X] should be removed when JavaScript is disabled. I took
note of this in Bug #10909#note-16 since it’s a related issue (toggle
working badly without JavaScript).

> The “You seem to have JavaScript disabled…” screenshot assumes that the user is blocking JavaScript with the NoScript extension. This might not accurate. The user can block JavaScript by other means. (I’m cognizant of the fact that it’s impossible to anticipate all the ways the user can block JavaScript.)

Like you said people can deactivate JavaScript in many different ways so
we can’t give precise instructions for all of them. My guess was that
the most frequent use case in our context will be people in Tor Browser
(for example with the security slider on High) and that’s what I documented.

People who do things differently are likely to be tech-savvy enough to
know by themselves how to enable JavaScript on one page. If you have no
JavaScript at all you’re probably used to seeing broken websites and
having to tweak your settings.

> Also, I made 2 commits in my branch. I’m not sure if you want to use them.

I merged them, thanks!

We don’t update the notification_in_tails.png screenshot every time
because it’s not worth it but it’s good to refresh it from time to time
and here we also changed from i386 to amd64 in the file name.

> https://github.com/cbrownstein/tails/tree/web/14921-download-css
>
> Other than the above issues, I’m not noticing anything else at the moment.

\o/

#11 Updated by sajolida 2017-12-02 19:48:38

  • QA Check changed from Dev Needed to Pass

Then this ticket is “Ready for QA: Pass” now I think → \o/

#12 Updated by sajolida 2017-12-03 15:48:26

  • Status changed from In Progress to Resolved
  • Assignee deleted (sajolida)
  • QA Check deleted (Pass)