New design: fixups

[mvl22]

With the new chrome mostly implemented (huge progress!), here are the fixups needed to get this to a launchable state:

Menu:

• Make sure the padding matches the prototype; this is top priority to make it feel 'done'
• Currently no way to close the sidebar on mobile - all three methods need to work: drag-left, press escape, implied close from clicking elsewhere
• For the group switcher, could you add a down-triangle floated right (e.g. U+25BE), so it's clear this is a control
• Label 'Group' should be 'Change group'
• The main logo needs to go to the front page always, not to /overview
• Add an entry for now to the menu at the top, 'My cyclescape' and have that go to /overview
• The /overview page is supposed to be styled as per /discussions.html but we can fix this up later
• The link to /settings/help.html doesn't work

Main content rectangle:

• Make sure the padding matches the prototype

Front page (/), in www context:

• Order groups in the result by most members
• Middle box - change text to: "See what's going on! Start a discussion or browse existing." or similar.
• The person button in the top-right is missing - make that go either to the login page or to the user's profile depending on whether they are logged in.

Discussions page (/threads):

• Make sure the microphone graphic is present in the title, as this gives it a bit of character
• Missing 'New discussion' button
• Implement the new tabs style; at present I realise not all will be present but the style itself should be put in
• The filter bar on the right will need to follow, but for now, leave this as a blank space to avoid the left column getting overly-spread layout
• Discussion titles should be in black not green
• 'A discussion on issue' should be a separate line from the area
• Gray background hover for the boxes is missing
• In general I would prefer to have the background box all-linkable as per the design, as this will be the 90% action. HTML should correctly override the clickable zone for internal links. This stuff was changed in the HTML5 spec to allow this kind of scenario as it's not uncommon that you want a large clickable area but lower-priority links within it.
• We need to show the tags from the issue for each discussion, as per the design

Issues (/issues):

• Make sure the hash graphic is present in the title, as this gives it a bit of character
• Make the 'Create new issue' button be the same style as the New discussion button noted above, as these two are critical buttons so we should at least ensure they are consistent for now
• The pagination bar layout is a bit odd - make sure the unlinked (current) item has the same spacing around is as the links; I usually fix this by adding a span around an unlinked item and adding the same padding to that.
• Could you similarly put in the new tab style from the discussion page, so that this page again feels consistent, as it will be a high volume access page so we should make sure it doesn't feel unfinished
• Would it be hard to get the mini-maps in place at this point? They do add a bit of colour and give a sense of liveliness which this page really needs

Groups:

• /groups/2-camcycle/memberships seems to be missing
• On the group subdomain page, the group management / group organisers layout is a bit unfinished. In general, I do think this needs to launch with the /group.html design basically in place as this will give confidence

My profile:

• Make sure there is more space between the heading and the buttons above it. Basically I would just move the buttons up.

Obviously there will then be future work for implementing redesign of the other internal pages, but that is a second-order issue.

[nikolai-b]

Missing 'New discussion' button

I've added this but there isn't the concept of new discussion until we have got rid of issues. Discussions are currently on issues only.

Middle box - change text to: "See what's going on! Start a discussion or browse existing." or similar.

Is that the text that is currently "Cyclescape is an online campaigning toolkit for people working for better cycling across the UK."?

The person button in the top-right is missing - make that go either to the login page or to the user's profile depending on whether they are logged in.

Ah yes, that is something I wanted to ask you. At the bottom left there is sign in and in the top right there is also sign in. I think having the search in the top right makes sense but the double sign in does not. Also the top right icon is not there on the login page or once logged in.

[nikolai-b]

The tabs on discussion has popular. What is the definition of popular? On the current site viewing discussion is possible outside of a group context. Inside a group context there are also administrative discussion.

[nikolai-b]

Right aligned "New discussion on issues" link to issues.

Rm My Cyclescape. Default subscribed (which is the old my discussions).

Popular 2 months most messages (exclude star)

Add admin discussion tab

[nikolai-b]

With

The person button in the top-right is missing - make that go either to the login page or to the user's profile depending on whether they are logged in.

This leaves a few inconsistencies. In the sidenav there is a different icon for profile. Do you want the top icon to for profile to not match the sidenav? Also why profile and not sign out?

I have made the icon switch to the profile one when you're logged in but it looks a little odd:

On the designs once the user is logged in there is only the search

[mvl22]

This leaves a few inconsistencies. In the sidenav there is a different icon for profile. Do you want the top icon to for profile to not match the sidenav?

The top-right profile icon (white) and the sidebar profile (gray) seems to be the same logo, albeit different shade. I'm happy with that.

Also why profile and not sign out?

I think the idea is that the top-right button takes you to the profile, quite simply. That is fairly normal. We could add a sign out link on the profile page though.

[mvl22]

Could you review the ticked boxes above to see if they are now in place?

I will then create a second iteration list below as I work through testing, as we discussed yesterday. It feels like all the functionality/screens are in place now for the transitionary change, and basically just needs some visual tidying-up.

[nikolai-b]

I think the checklist is in the correct state. We've discussed a few in person (i.e. pagination CSS and links clickable). Others seem like nice to haves or I'm not totally clear on them. If there are any you think are blockers and I could get on without your input I think it makes sense to do in a new list.

[nikolai-b]

P.S. I checked why "load more" button on the Chisholm Trail thread ruins the layout. It is due to the CSS / flex grid. I'm sure I can fix but I have a feeling you'd prefer to craft the CSS for messages on a discussion.

[mvl22]

Are there any database migrations involved in the change? If not, are we safe to point staging to the live data, so that volunteer users could be asked to try it for a while as a beta switchover?

[mvl22]

In group (subdomain) mode:

• On / , the Browse discussions and Browse issues boxes are slightly too close together visually
• On / , the list of users on the right should have the names aligned (indented) when no image for a user with those with images
• On / , in the top-right the two circular buttons should use a proper styled tooltip (as used for the 'Committee' tooltip in the people list), so that these are more discoverable
• On / , the map should not have a style switcher - it adds too much clutter and is not necessary here
• On /threads , the 'Administrative discussions' text wraps as it's long. Change to 'Admin items'
• On /threads , the pagination control has inconsistent spacing for the currently-selected (unlinked) item - they all need to be spaced equally, irrespective of whether linked. The usual approach is surround it with a span, mark that as inline-block, then apply the link padding value to the span also.
• On /threads , when changing tabs, there is a bit of delay between the new tab loading. This means for a few seconds the old content is displayed against a different tab. I think this should instead show a loading spinner, as there is currently little confidence to be sure whether the new content has loaded or not.
• On /threads , please have the 'New Group Administrative discussion' button aligned (floated) to the right
• On /users/userid/private_messages , the font size is very large
• On the menu, the 'Membership' entry given to group admins should be 'Group management', to match the page itself
• On the menu, decapitalise 'Messages' in 'Private messages'
• On the menu, rename 'Help & feedback' to 'Feedback'
• On /groups/id-moniker/profile/edit , the textareas are being overlapped in the corners by the border radius. Seems textareas need a bit of padding.
• On /groups/id-moniker/profile/edit , there are a + and - button, and a non-existent image, each shown twice, on the left of the form.
• On group management pages like /groups/id-moniker/membership_requests , the green secondary heading needs a bit more padding both above and below - it is uncomfortably close to the tabs and the content.

[nikolai-b]

I can't point staging to live data easily. I'd have to allow external connections to the production postgresql cluster which is a bit of a pain. Also staging is configured differently, it does not send email, it would not update the search Solar, images etc. would be stored on staging not production. Instead I've copied the production database over to staging. I've not copied assets as that is 100GB but other than images it should be more testable now.

[nikolai-b]

Minor things but the sponsor logos have gone, there is no footer or link to github and no changelog.

I'm guessing the sponsor logos are very old anyway and the SHA link to github is probably not needed but wanted to check about the changelog.

[mvl22]

Thanks. Next round:

Threads list - layout needs tidying-up:

• In the list of threads (all listings), please remove the <br> before "A discussion on issue", to help group the two parts of the box
• In the list of threads (all listings), in group mode, remove the paragraph containing the group name, as that is just clutter and will 99% of the same say the same name as in the title. The current site doesn't show this. If there is a mix, people will see the group name anyway when they click through to the thread.
• Administrative threads aren't getting the two columns properly, e.g. /threads/763
• Please for now comment out the two drop-cap CSS directives used for the thread lists: I think on balance this isn't working

these should result in this, which is much tighter and easier to parse visually:

• Please set the Unfollow/Follow turbo-frame to have the same width, so that these are then left-aligned rather than hugging the right side. May need an em-based width set.
• Please add some left-padding to the box containing the star, as it is visually too close to the unfollow button
• On mobile, the Filter button that appears bottom-right should probably be commented-out for now, until we get that functionality in place
• Planning applications pagination is broken, e.g. /planning_applications?planning_page=2#planning-applications doesn't show page 2, either in the content or the pagination links. The #planning-applications hash can now be removed also.
• The 'Admin items' tab seems to have more space to the left of the text label after the icon, compared to the others
• Can we reduce the height / up-down-padding of the pagination bar - they should be the same or ideally very slightly smaller than the main tabs, as this is secondary to the main tabs
• The star and group details columns don't have the same top padding that the first two columns have, so they appear right at the top of the box out of line

Other sections:

• On group management pages like /groups/id-moniker/membership_requests, the space between the menu and the content is much narrower than pages like issues - it is currently uncomfortably close. The issues page has the correct spacing. All pages on the site should use that consistently. Another example of the problem is /issues/new.
• On the issues page, the tab style is left-aligned rather than centre-aligned as per the tabs on the threads page
• Could the older-style tabs on places like the group management page be migrated to the newer tabs style?
• The library listing seems to be sort-of-centre-aligned rather than left-aligned. The main content block box should always be touching to the left
• On /issues/new, when the richtext is in focus, there is no cursor shown
• On /issues/new, the selected button seems to have a white oval around the selected item. I think instead the selected item itself should be white rather than gray.
• The planning applications page needs a main heading 'Planning applications' with its icon, as per Issues and Discussions. Then change 'Planning applications in your location' to be a normal paragraph, not a heading.
• Similarly, the tags page needs a main heading 'Tags' with its icon
• Ditto, group management page
• Private messages has the wrong heading style, should be the same as the others just noted above
• The main button at the end of /issues/new is the older style (in general these should all use the new rounded gray style instead, all around the site)
• On /issues/new, the label and box for Deadline/date are not aligned with all the others
• On /issues/new, put All day on a new line just under the main box, as it's too easy to miss at the moment
• On /issues/new, the last column with the hints wraps round to a new line improperly - these hints should appear as a proper third column that is aligned

Solving the problem of not being clear how to start a new discussion:

• On the main threads page, the 'My discussions' and 'All discussions' tabs should have a "New discussion (+)" button (in the same style as the admin discussion button), which goes to the Issues page.
• On the issues main page, add a paragraph (after the first paragraph): "To start a new discussion, search for the most relevant issue and start a discussion there."

Thread discussion page:

• The listing of people has long names wrapping around the image, rather than the whole text be aligned with the start of that text
• On a thread page, e.g. /threads/6491 would you be able to copy in some profile images so that I can see what this really looks like? At present the assets are missing so it's hard to see what it's like
• I think the design needs a gray line between the postings as per the earlier design - at present the posts are just not obviously split enough
• After the "NAME posted" line, add more space - at present this is closer than the paragraph spacing between the paragraphs which follow.
• The cog menu popup bubble at the top has some odd left padding
• On a thread page like /threads/763 with long URLs, this causes the content to overlap the sidebar. I think this indicates that the box is unconstrained in size and also probably needs overflow: hidden.

Main menu:

• Can we get the main menu to highlight the currently-active area? I'm not sure if there is a style given. I suggest giving the active area have background-color: #ddd;

[nikolai-b]

Hi Martin, all the problems with the /issues/new seem to be worse on the live site than in the new design. I don't think this should stop us especially as the aim is to remove issues.

Could you expand on this or add an image:

The listing of people has long names wrapping around the image, rather than the whole text be aligned with the start of that text

With this issue:

I think the design needs a gray line between the postings as per the earlier design - at present the posts are just not obviously split enough

do you mean between the discussion description and the postings or between individual postings? The design only has the hr once at the top:

[mvl22]

The listing of people has long names wrapping around the image, rather than the whole text be aligned with the start of that text

This is the problem (truncated for privacy) - see how a long name wraps under the image rather than wrapping to under where the name starts:

do you mean between the discussion description and the postings or between individual postings? The design only has the hr once at the top

I did, yes. But perhaps could we first get image assets coming through so I can judge this better? Also the 'day ago' isn't formatted the same way as per the example. So at the moment I'm probably not able to make a good judgement.