Tails

#1 Updated by sajolida 2018-10-11 15:58:55

• Parent task set to Feature #14877

#2 Updated by sajolida 2018-10-21 20:26:49

• Target version changed from Tails_3.10.1 to Tails_3.11

This will require some coding work but it can go live in the middle of the campaign.

#3 Updated by sajolida 2018-10-25 06:12:25

• Status changed from Confirmed to In Progress

I started writing some code…

#4 Updated by sajolida 2018-10-27 10:33:59

• Assignee changed from sajolida to moire
• QA Check set to Ready for QA
• Feature Branch set to web/16043-donation-counter

Here is some coooooode!

moire: Please have a look! I’ll also ask someone else to review the bits of JS in there.

All our account handlers agreed on updating us every ~2 weeks. We can update the total amount each time one of them sends us fresh information. That’s why I added a ‘Last updated’ info.

Rationale behind the code:

• We need JS to display the number of days remaining.
• I’m hiding the ‘Last updated’ info when there’s no JavaScript because we need it for toggles to work; even though here I’m doing it with CSS because I’m already inside an and I don’t know how to do it otherwise.
• I’m encoding the total amount multiple times so that it can still be displayed in different languages without JavaScript. The downside is that we’ll have to rebuild the whole website on the server every time. If you think it’s better to not display the counter at all when there is no JavaScript, I can also update the amount using JavaScript instead of having it directly in the HTML.
• As decided elsewhere, I’m using USD for English (and Farsi) and EUR for the other languages.

NB: I haven’t tested the version without JavaScript. Please try it out and report. Sorry!

#5 Updated by Anonymous 2018-10-29 13:53:33

• Assignee changed from moire to sajolida
• QA Check changed from Ready for QA to Pass

Hi!

I’m having a look at the code.

+  var days = document.getElementsByClassName('counter-days');
+  for (let i = 0; i < days.length; i++) {
+    days[i].style.display = "block";
+  }

I see you are using a for loop here because there is the information in all languages at once. Not beautiful, but I understand the reasoning.

From a CSS point of view, I think it would be useful to have .counter set on an absolute position only using a media query for bigger screens and display it below the donation sentence and icon on smaller screens. Now if you look on a small screen / smartphone, it looks not very nice.

There is also a really cool thing now to display things next to each other:

a.donate-banner {
    display: flex;
    justify-content: space-between;
}

and then both columns (the donation text on the left and the counter on the right) would get another div around them and the above code would adjust it nicely, while you could still use margins and paddings to adjust it more to one side or the other. → But that’s just CSS-Geekeries, not necessary :)

Everything else looks good to me.

#9 Updated by sajolida 2018-10-29 16:10:47

• Assignee changed from sajolida to moire
• QA Check changed from Pass to Ready for QA

moire: Feel free to still have a look but since Ulrike did an extensive review already I’ll ask our account holders to send me a first batch of information and release the counter as soon as I have something valuable.

#11 Updated by moire 2018-11-01 18:28:06

• Assignee changed from moire to sajolida
• QA Check changed from Ready for QA to Dev Needed

sajolida wrote:
> moire: Feel free to still have a look but since Ulrike did an extensive review already I’ll ask our account holders to send me a first batch of information and release the counter as soon as I have something valuable.

I viewed it with and without javascript, with and without the “mobile” view provided by Firefox.

It looks good and works well: progress bar, goal, values, time left and “last updated” popup.

On “mobile” though the underline that should end with “Tails!” continues until the end of the screen.

#13 Updated by sajolida 2018-11-02 11:58:36

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

Done :)

And fixed the glitch with b351e23f48.