[dw-free] Account Settings/Display/Site Scheme: add preview pics

[fu]

[commit: http://hg.dwscoalition.org/dw-free/rev/b9bb499b1507]

http://bugs.dwscoalition.org/show_bug.cgi?id=3301

Adds a preview, alt text, and a textual description of each site scheme, to
make it easier for users to determine which site skin they want/need. Also
involves restyling the area to provide more space for the new description.
Have moved the setting to the bottom of the page now that it's taking up so
much room. Lots of thanks to ninetydegrees for doing the
preview pictures, and denise for coming up with the actual
wording for the alt text and descriptions.

Patch by fu.

Files modified:

• bin/upgrading/en.dat
• cgi-bin/LJ/Setting/SiteScheme.pm
• htdocs/img/siteskins/previews/celerity.png
• htdocs/img/siteskins/previews/gradation-horizontal.png
• htdocs/img/siteskins/previews/gradation-vertical.png
• htdocs/img/siteskins/previews/lynx.png
• htdocs/manage/settings/index.bml
• htdocs/stc/settings.css

--------------------------------------------------------------------------------
diff -r 41caad637f26 -r b9bb499b1507 bin/upgrading/en.dat
--- a/bin/upgrading/en.dat	Mon Aug 15 15:04:46 2011 +0800
+++ b/bin/upgrading/en.dat	Mon Aug 15 17:53:36 2011 +0800
@@ -2774,6 +2774,8 @@
 
 setting.sitescheme.error.invalid=Invalid site skin.
 
+setting.sitescheme.journal.style=Would you like to select your journal style?
+
 setting.sitescheme.label=Site Skin
 
 setting.sitescheme.label=Site Scheme
@@ -3534,6 +3536,26 @@
 
 sitescheme.footer.suggestion=Make a Suggestion
 
+siteskins.celerity.alt=Celerity: Black text on white background; olive color highlights
+
+siteskins.celerity.desc=Default-sized sans-serif font; vertical, fixed, non-expanding menus.
+
+siteskins.blueshift.alt=Blueshift: Black text ond white background; blue highlights
+
+siteskins.blueshift.desc=Vertical, fixed, non-expanding menus.
+
+siteskins.gradation-horizontal.alt=Gradation Horizontal: Light text on black background; monochrome colors
+
+siteskins.gradation-horizontal.desc=Light on dark for less glare; default-sized sans-serif font; horizontal, drop-down expanding dynamic menus (requires fine mouse control).
+
+siteskins.gradation-vertical.alt=Gradation Vertical: Light text on black background; monochrome colors.
+
+siteskins.gradation-vertical.desc=Light on dark for less glare; default-sized sans-serif font; vertical, fixed, non-expanding menus.
+
+siteskins.lynx.alt=Lynx: Simplest skin with minimal styling. Uses all browser defaults for color and font sizes.
+
+siteskins.lynx.desc=Uses browser default for font and colors. Simplified menu for screenreaders and mobile devices; use site map for navigation.
+
 Sorry|notes=typically used to announce that the requested action can't be done.
 Sorry=Sorry
 
diff -r 41caad637f26 -r b9bb499b1507 cgi-bin/LJ/Setting/SiteScheme.pm
--- a/cgi-bin/LJ/Setting/SiteScheme.pm	Mon Aug 15 15:04:46 2011 +0800
+++ b/cgi-bin/LJ/Setting/SiteScheme.pm	Mon Aug 15 17:53:36 2011 +0800
@@ -57,21 +57,34 @@
 
         next if !$show_hidden && $is_hidden && $sitescheme ne $value;
 
-        my $desc = $scheme->{desc} && LJ::Lang::string_exists($scheme->{desc}) ? LJ::Lang::ml($scheme->{desc}) : "";
-        $label .= " ($desc)" if $desc;
+        my $scheme_alt_ml;
+        $scheme_alt_ml = $scheme->{alt} if $scheme->{alt} && LJ::Lang::string_exists( $scheme->{alt} );
+        $scheme_alt_ml ||= "siteskins.$scheme->{scheme}.alt" if LJ::Lang::string_exists( "siteskins.$scheme->{scheme}.alt" );
+        my $alt = $scheme_alt_ml ? "alt='" . LJ::Lang::ml( $scheme_alt_ml ) . "'": "";
 
-        $ret .= LJ::html_check({
+        my $img = $scheme->{img} || "$scheme->{scheme}.png";
+        $label .= qq{<img src="$LJ::IMGPREFIX/siteskins/previews/$img" $alt width="150" height="114" />};
+
+
+        my $desc_ml;
+        $desc_ml = $scheme->{desc} if $scheme->{desc} && LJ::Lang::string_exists( $scheme->{desc} );
+        $desc_ml ||= "siteskins.$scheme->{scheme}.desc" if LJ::Lang::string_exists( "siteskins.$scheme->{scheme}.desc" );
+        my $desc = $desc_ml ? LJ::Lang::ml( $desc_ml ) : "";
+        $label .= "<p class='note'>$desc</p>" if $desc;
+
+
+        $ret .= "<div class='sitescheme-item'>" . LJ::html_check({
             type => "radio",
             name => "${key}sitescheme",
             id => "${key}sitescheme_$value",
             value => $value,
             selected => $sitescheme eq $value ? 1 : 0,
-        }) . "<label for='${key}sitescheme_$value' class='radiotext'>$label</label>";
+        }) . "<label for='${key}sitescheme_$value' class='radiotext'>$label</label></div>";
     }
 
     my $errdiv = $class->errdiv($errs, "sitescheme");
     $ret .= "<br />$errdiv" if $errdiv;
-    $ret .= "<br /><a href='$LJ::SITEROOT/customize/'>" . $class->ml('setting.sitescheme.journal.style') . "</a>";
+    $ret .= "<p class='sitescheme-style'><a href='$LJ::SITEROOT/customize/'>" . $class->ml('setting.sitescheme.journal.style') . "</a></p>";
 
     return $ret;
 }
diff -r 41caad637f26 -r b9bb499b1507 htdocs/img/siteskins/previews/celerity.png
Binary file htdocs/img/siteskins/previews/celerity.png has changed
diff -r 41caad637f26 -r b9bb499b1507 htdocs/img/siteskins/previews/gradation-horizontal.png
Binary file htdocs/img/siteskins/previews/gradation-horizontal.png has changed
diff -r 41caad637f26 -r b9bb499b1507 htdocs/img/siteskins/previews/gradation-vertical.png
Binary file htdocs/img/siteskins/previews/gradation-vertical.png has changed
diff -r 41caad637f26 -r b9bb499b1507 htdocs/img/siteskins/previews/lynx.png
Binary file htdocs/img/siteskins/previews/lynx.png has changed
diff -r 41caad637f26 -r b9bb499b1507 htdocs/manage/settings/index.bml
--- a/htdocs/manage/settings/index.bml	Mon Aug 15 15:04:46 2011 +0800
+++ b/htdocs/manage/settings/index.bml	Mon Aug 15 17:53:36 2011 +0800
@@ -76,7 +76,6 @@
                 DW::Setting::CutInbox
                 LJ::Setting::EmailFormat
                 LJ::Setting::EntryEditor
-                LJ::Setting::SiteScheme
                 DW::Setting::JournalEntryStyle
                 DW::Setting::ViewEntryStyle
                 DW::Setting::ViewJournalStyle
@@ -91,6 +90,7 @@
                 DW::Setting::GoogleAnalytics
                 DW::Setting::ExcludeOwnStats
                 DW::Setting::StickyEntry
+                LJ::Setting::SiteScheme
             )],
         },
         notifications => {
diff -r 41caad637f26 -r b9bb499b1507 htdocs/stc/settings.css
--- a/htdocs/stc/settings.css	Mon Aug 15 15:04:46 2011 +0800
+++ b/htdocs/stc/settings.css	Mon Aug 15 17:53:36 2011 +0800
@@ -53,6 +53,9 @@
 }
 
 /* Display Content */
+.display .display_label {
+    vertical-align: top;
+}
 .display .radiotext {
     position: relative;
     bottom: 2px;
@@ -99,3 +102,19 @@
     width: 100%;
     padding: 10px 5px 10px 5px;
 }
+
+.sitescheme-item {
+    margin-top: 5px;
+    float:left;
+    clear: both;
+}
+
+.sitescheme-item img {
+    display: block;
+    float: left;
+    margin-right: 10px;
+}
+
+.sitescheme-style {
+    clear: both;
+}
--------------------------------------------------------------------------------

Comments

[turlough]

Nice!