Implement SVG Donate button

Captainkirkdawson commented 4 years ago

@Captainkirkdawson commented on Fri May 01 2020

@PatReynolds commented on Tue Apr 28 2020

David writes: I added custom event tagging on the donate button on the freereg volunteer page. After publishing, I noticed that the "donate" button hasn't really been clicked since the 12th... I wanted to see if you were aware that the "donate" link on this page:

https://www.freereg.org.uk/cms/opportunities-to-volunteer-with-freereg

looks like this in Chrome:

https://drive.google.com/open?id=1lt285bJ49gq0750q0y42wFiRrf0g-qg5

And like this in safari: https://drive.google.com/open?id=19CV9D70DT0C5e2wBdJk76BYhBWgi7zYe So it looks like the link is broken or missing an image? Is this expected?

Pat notes: image seems to be missing, but link is still there (on Chrome)

@AlOneill commented on Tue Apr 28 2020

Had a look on t3 and noted that:

image referenced is listed on page 3 of list view, dated October-03, 2017
it has an upper-case file extension of .PNG (which may not be relevant in any way)
when I tried to view it, I got a "Not found"
when I tried to edit it, the thumbnail displays as "Donate"

[Also noted that style block at top of Refinery page (and so in body of page) is missing scoped="scoped" and so will be surprised if that does not cause any issues — will investigate.]

So, I conclude that the donate image is no longer in Refinery.

I would then proceed as follows:

add copy of image to Refinery images, with a file extension of .png [sic] —I trust we have a copy somewhere?!
insert into page, close to where current img is, from the Preview pane (with HTML pane closed) and with "Re-size" box unchecked
check that has worked!
then open HTML pane and tweak HTML to replace current src attribute with the one that works

Then check and troubleshoot as necessary. If someone can provide the image, I'll do the Refinery shenanigans [sigh].

@AlOneill commented on Thu Apr 30 2020

@Captainkirkdawson On reflection, I realise that my comments above may not cover the issue you have — can you review and re-state your issue with this page? Thanks.

@Captainkirkdawson commented on Thu Apr 30 2020

@AlOneill go to Opportunities to Volunteer with FreeCen within refinery on test3 and click on html and nothing happens. Never happens elsewhere

@AlOneill commented on Thu Apr 30 2020

@Captainkirkdawson Ah, CEN. Same result as you. (Child page and others — HTML pane opens OK.)

Never seen that before. I would try re-building a DRAFT version of the page, a section at a time, from browser source, to see if that sheds any light. I'll give that a whirl, unless you have a better plan?

Issue of missing donate images on CEN and REG remains …

@AlOneill commented on Thu Apr 30 2020

@Captainkirkdawson DRAFT re-build fine with everything put back except the ad-block, the final aside. The REG version (which is editable) does not have the JavaScript, so will put back in without the JS initially — am thinking that is the likely trouble spot, though I have no idea why except that it seems just the sort of thing that Refinery might baulk at! Will do that tomorrow, with a clear head.

@richpomfret @PatReynolds Do we really want a Donate button and an ad-block … on a page that is recruiting volunteers??

Another (unrelated) issue is links that open in a new tab, without warning. Also a scattering of typos and a couple of clunky phrases and sentences.

@AlOneill commented on Fri May 01 2020

@Captainkirkdawson The re-built DRAFT version of the FreeCEN page is behaving as expected in Refinery: the HTML pane opens, so the editing issue is fixed.

Will not promote from DRAFT status until checked by someone who can confirm that all is truly working as expected. And I still have no idea what the original problem was.

As well as the issues mentioned above, the markup of the page seems overly complex and probably could be simplified somewhat, with a more logical, and thus accessible, flow. However, the positioning of the ad-block — using position: fixed — does restrict the possible source order.

Er, shouldn't these comments be on the CEN board rather than here? (Or perhaps on system-wide as the page for each project will be very similar??)

richpomfret commented 4 years ago

@DeniseColbert to send png image to @AlOneill.

AlOneill commented 4 years ago

@richpomfret @PatReynolds As I asked above, do we want to have both a Donate button and an ad-block on a page that is recruiting volunteers? The response will help me know how to fix the other issues on that page.

DeniseColbert commented 4 years ago

Emailed images 6/5/20

PatReynolds commented 4 years ago

Ad blocker.

Donate button, but with associated text along the lines of 'no time to volunteer, could you help with a donation?'

PatReynolds commented 4 years ago

@PatReynolds to take another look (CEN or REG)

richpomfret commented 4 years ago

@PatReynolds @AlOneill can we close this? Is it complete or do we need a separate story?

AlOneill commented 4 years ago

Have fixed on t3 on all 3 sites — except that on BMD the image moves down a little on focus/hover. Puzzling. Will investigate.

AlOneill commented 4 years ago

BMD issue solved — mea culpa. So all t3 sites now working as expected, even on Safari.

However, the fix is temporary: style is currently applied in each page.

We need to move the styling into an appropriate place in our SCSS, so that is the separate story.

richpomfret commented 3 years ago

@AlOneill fantastic, thank you! Has the separate story been made? If so, I think we can move this into test/close it.

AlOneill commented 3 years ago

This particular issue is done.

How we move the styling into our SCSS depends on #151 — updating the colours and layout of the button. If we are going to use an SVG background image (the simplest in the long run), then the styling, including focus/hover, will be a part of that issue and will be solved when that is done. If we are going to stick with PNG, the styling will need to be added to our SCSS in a different manner.

So, to answer the question of whether the separate story has been made, it all depends … (!)

PatReynolds commented 3 years ago

We now have a SVG version of the static, and have a story to change the colours of the animated version to be in line with the SVG.

We need to find out if we can use SVG in refinery - @Vino to test.

AlOneill commented 3 years ago

@PatReynolds If we are going to update the animated version, then creating a class using the static SVG would be a stop-gap measure. However, it could be simpler to animate the CSS transition based on the updated static SVG (rather than update the original animated version itself).

From memory, the original animated version was quite complex in its setup — perhaps most of the complexity was down to being available in 3 colour schemes. Are we sticking with teal for all projects?

@Vino-S Was not thinking of using SVG inline, unless you consider that to be a better approach than a class?

PatReynolds commented 3 years ago

Has this been superceded by #215 ?

PatReynolds commented 3 years ago

@DeniseColbert to take a look

DeniseColbert commented 3 years ago

No, not superseded by 215, but there seem to be a few questions about SVG/Refinery unanswered

PatReynolds commented 2 years ago

@DeniseColbert to make a new issue on the SVG/PNG descision, referencing this story so aes to capture the discussions here.

FreeUKGen / Systemwide

Implement SVG Donate button #141