Design shrapnel

[edwh]

Little bits and pieces which could be slightly prettier, all fairly quick.

• About - Rework to have a similar feel to the help page
• error-toast - needs love
• DonationThermometer - animate change in value
• DraggableMap used from Spread - icon pin in the centre is not visible enough on the map.
• GroupHeader There's a max-height hack above to keep the description from hogging the screen. It's not that pretty and some people may not even notice the scrollbar, but could be neater.
• GroupSelect - hard-coded max-width.
• OutcomeModal - Needs visual push to make people select a user. How?
• OutcomeModal - "Please choose" is red but the dropdown shouldn't be.
• Ratings - Showing your own feedback in blue is not intuitive. How can we improve that given the very limited space for this?
• default - Shrink navbar on scroll? Hardcoded navbar heights in other places, though, search for 68px.
• default - Notifications dropdown list isn't wide enough before it's loaded.
• message/_id - when it doesn't exist, the message is brutal. error variant is a very shouty red.
• StartEndDate - should be fieldset within a form.
• In settings/index, the notice about phone costs should be a b-alert when it pops up but if the page loads with it already present then it should be a notice-message component
• When an item has multiple photos, we have arrow buttons to move between them. Those buttons are lame.
• Better way of indicating active page on navbar. Proposal is like LinkedIn with white for the active, grey of the others, and a white bar at the bottom. (Bar has been added but investigation is still required into suitable colours for the options)
• Change 0px to be 0 everywhere
• Use shorthand for padding/margins where appropriate
• Analyse the use of !important
• Remove all px font sizes are use relative units instead.
• On mobile, when posting, Add photos button could be on same line as the message type, only over on the right, which would save some vertical space.
• Tidy up the view profile logic. When clicking on the profile picture in NewsLovesModal it should link to the persons profile /profile/userid. The location information in NewsUserInfo already does this. Should we consolidate this in one place at the higher level?
• The "Close Message" link you get after clicking to see details on a post needs better positioning and perhaps styling.
• Hide the technical details of error messages in error.vue behind a "Show details" button.

[aaronferris]

With respect to the Group header, how do we want to position the buttons (join etc) on mobile?

Both Under the logo? Just contact under the logo? Assume left align for any under the logo?

[edwh]

Generally I don't want to take up too much vertical space. So at that screen size: The group logo looks too large and there's loads of whitespace.You could have a shrunken logo on the left side. Then on the right have the group name and buttons below.Then the tag line and everything else below it at full width.The white card could be full width on the screen (no flowery border) and have smaller padding round the contents. I'd rather reposition things to reduce the amount of blank space than aim for consistent positioning across different screen sizes. It's quite fiddly.

…

------ Original Message ------ From: "Aaron Ferris" <notifications@github.com> To: "Freegle/iznik-nuxt" <iznik-nuxt@noreply.github.com> Cc: "Edward Hibbert" <edward@ehibbert.org.uk>; "Author" <author@noreply.github.com>

Sent: 13/01/2020 09:18:22 Subject: Re: [Freegle/iznik-nuxt] Design shrapnel (#142) With respect to the Group header, how do we want to position the buttons (join etc) on mobile? Both Under the logo? Just contact under the logo? Screenshot 2020-01-13 at 09 17 14 <https://user-images.githubusercontent.com/4068825/72244186-9f9ef880-35e5-11ea-8520-edb39951434b.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#142?email_source=notifications&email_token=AAAN26BOFSSKQSBEGJLFL2DQ5QWV5A5CNFSM4KBVA3CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIYABXQ#issuecomment-573571294>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAN26BAKO7LHDGW24OJ4J3Q5QWV5ANCNFSM4KBVA3CA>.

[aaronferris]

OK - think I have that right in my head, probably best to mock something up for mobile, tablet, desktop then confirm before we make any changes. That might be tricky to attain using just CSS, having a quick look at the markup.

[edwh]

Join and Contact should be close together and if one is above the other then it should be Join above. Side by side would be ok too. For example I can imagine that at some sizes you could have: Logo on leftGroup name and both buttons in a single lineTagline and rest below ...whereas if you put one button on top of the other then everything might get pushed down a bit so that more vertical space was used. Probably anything sensible you do will be better than it currently behaves- so yes, mock some stuff up and we can discuss. Thanks for looking at this.

…

------ Original Message ------ From: "Aaron Ferris" <notifications@github.com> To: "Freegle/iznik-nuxt" <iznik-nuxt@noreply.github.com> Cc: "Edward Hibbert" <edward@ehibbert.org.uk>; "Author" <author@noreply.github.com>

Sent: 13/01/2020 09:38:32 Subject: Re: [Freegle/iznik-nuxt] Design shrapnel (#142) So we want join and contact volunteers to be consistently positioned across devices? IE Join above, then contact colunteers below. With the logo to the left? Whatever size it needs to be in order to accomodate the consistent button positions? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#142?email_source=notifications&email_token=AAAN26CEPKUZXSGNCDP3XJDQ5QZBRA5CNFSM4KBVA3CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIYBW5A#issuecomment-573578100>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAN26HAERPJAIIUKMSLF43Q5QZBRANCNFSM4KBVA3CA>.

[aaronferris]

Yeah ill take a look when I get chance, back at work now so might be a few days before I can, was just having a quick look to define what the expected result would be.

[edwh]

Okey-dokey.

…

------ Original Message ------ From: "Aaron Ferris" <notifications@github.com> To: "Freegle/iznik-nuxt" <iznik-nuxt@noreply.github.com> Cc: "Edward Hibbert" <edward@ehibbert.org.uk>; "Author" <author@noreply.github.com>

Sent: 13/01/2020 09:58:12 Subject: Re: [Freegle/iznik-nuxt] Design shrapnel (#142) Yeah ill take a look when I get chance, back at work now so might be a few days before I can, was just having a quick look to define what the expected result would be. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#142?email_source=notifications&email_token=AAAN26GXAXELPPOLBTY4Y5LQ5Q3LJA5CNFSM4KBVA3CKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIYDNLQ#issuecomment-573585070>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAN26GKEVQ3O7L57NLH34LQ5Q3LJANCNFSM4KBVA3CA>.

[JayyajGH]

I've just removed the "tidy the group header" issue as it was recently resolved.