0.25 upgrade

[lizconlan]

First pass attempt - some colour/styling changes could use a second look. Screenshots of the main visual changes included in the comments below along with some notes about missing translations and a question about whether old text should be kept.

Template files which turned out to be identical to current core once the whitespace and line wrapping issues had been addressed have been deleted leaving a much simpler theme.

Connects to #88

[lizconlan]

Notable visual changes

Front page

The front page of the site has changed quite a bit since version 0.22.4.9 and currently looks something like this:

(I'm not entirely convinced by my colour choices, I was more focused on getting the layout right.)

Note the slight change in the colour of the search box text is deliberate to provide more contrast, the repositioning of "Sign in or sign up" is accidental but I quite liked it so left it in for feedback (more than happy to move it back to where it was on the old design).

New request page wording

The wording in the request advice sidebar has also changed...

Current site wording:

Updated wording:

In particular the phrase "There may be risks associated with using your real name. Read our advice about using a pseudonym" is no longer used - it can be kept if required but will mean more work for future translators (and maintaining a theme-specific Transifex project in addition to the translations in the main Alaveteli project).

[lizconlan]

I've retained the old sidebar wording about using a pseudonym for now, but that's the only difference between the core /views/request/new.html.erb template and theme version so the theme file can be deleted if the old text is not required.

[lizconlan]

The rake task that checks the help pages found some missing sections in the translated versions:

theme: sobanukirwa-theme locale: en

No missing templates or sections

theme: sobanukirwa-theme locale: rw

Missing section: postal_answer in template privacy
Missing help template:  _why_they_should_reply_by_email rw

theme: sobanukirwa-theme locale: fr

Missing section: full_address in template privacy
Missing section: postal_answer in template privacy
Missing help template:  _why_they_should_reply_by_email fr

[lizconlan]

Also of possible note - have imported block-grid from Foundation as the simplest way of retaining the original footer layout. Someone with better CSS/Foundation skillz may know of a better way.

[garethrees]

Quick first pass:

currently looks something like this

• Screenshot on the whole looks good
• Looks like its missing the thin green, yellow and blue banner at the top
• Should use the new style locale switcher

I'm not entirely convinced by my colour choices

• Should keep the existing colours as much as possible. The green looks different to me.
• I'd probably make the button in the black box green.

change in the colour of the search box text is deliberate to provide more contrast

+1, much better.

repositioning of "Sign in or sign up"

Should be in the same position as alavetelitheme (i.e. no customisation applied to sobanukirwa-theme.

"There may be risks associated with using your real name. Read our advice about using a pseudonym"

This should be kept

The rake task that checks the help pages found some missing sections in the translated versions

Out of scope for this issue/PR

[lizconlan]

• Looks like its missing the thin green, yellow and blue banner at the top

I think that was just my clumsy cropping of the screenshot

[garethrees]

FWIW I like Paparazzi! for full page screenshots.

[lizconlan]

With colours and the banner section fixed:

[lizconlan]

Locale switcher detail (when clicked):

Have nudged the locale switcher down a bit so that it appears to be vertically aligned to the logo text as it looked a bit odd otherwise. Have also forced a minimum width to prevent this from happening:

[garethrees]

With colours and the banner section fixed:

That green doesn't look right. https://github.com/mysociety/sobanukirwa-theme/blob/master/assets/stylesheets/responsive/custom.scss#L7

EDIT: the primary button colour should be #6EA942 – the interface green (i.e. success messages) shouldn't need an override.

Expected colour

Actual colour

• Keep the new button style
• Keep the less prominent secondary colour

[lizconlan]

latest screenshots:

Homepage

Request page

(I've darkened the yellow slightly for the text but there still might not be enough contrast against the grey)

Mobile homepage:

menu closed

menu open

[garethrees]

I've darkened the yellow slightly…

Looks like you've got develop checked out, but we're only upgrading to 0.25.0.x.

There's a big diff in app/views/request/new.html.erb.

I'd apply this to the homepage to tighten up the colour scheme:

diff --git a/assets/stylesheets/responsive/custom.scss b/assets/stylesheets/responsive/custom.scss
index 7df7423..ae7e279 100644
--- a/assets/stylesheets/responsive/custom.scss
+++ b/assets/stylesheets/responsive/custom.scss
@@ -784,7 +784,7 @@ dt {
 .steps__step-number {
   height: 3.5em;
   width: 3.5em;
-  background-color: $color_green;
+  background-color: $color_sobanukirwa_green;
   box-shadow: 0 1px 2px transparentize($color_black, 0.75);
   padding: 1em;
   border-radius: 100%;
@@ -853,12 +853,12 @@ dt {
 .homepage-hero {
   .new-request__make-new-requests {
     @include button-base;
-    background-color: desaturate(darken($color_sobanukirwa_green, 10%), 5%);
+    background-color: desaturate($color_sobanukirwa_green, 5%);
     color: $color_white;
     &:hover,
     &:active,
     &:focus {
-      background-color: darken($color_sobanukirwa_green, 20%);
+      background-color: darken($color_sobanukirwa_green, 10%);
     }
   }
 }

[lizconlan]

Homepage

Request page

Mobile

[garethrees]

Looks good. Squash it down but we'll have to wait 'til translations are done before merge.

Also need to generate the theme translations, but will do that after merge.