[dw-free] Rewrite S2PropGroup.pm to use pure CSS positioning instead of tables

[fu]

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

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

First step: de-tablefy the mood theme chooser.

Patch by chagrined.

Files modified:

• cgi-bin/LJ/Widget/MoodThemeChooser.pm
• htdocs/stc/widgets/moodthemechooser.css

--------------------------------------------------------------------------------
diff -r 6642ce722bea -r c6c608717fd5 cgi-bin/LJ/Widget/MoodThemeChooser.pm
--- a/cgi-bin/LJ/Widget/MoodThemeChooser.pm	Thu Dec 15 00:57:15 2011 +0800
+++ b/cgi-bin/LJ/Widget/MoodThemeChooser.pm	Thu Dec 15 01:05:14 2011 +0800
@@ -64,43 +64,34 @@
     $ret .= "</ul>";
     $ret .= "</div>";
 
-    my $moodtheme_extra = LJ::Hooks::run_hook( "mood_theme_extra_content", $u, \@themes ) || '';
-    my $show_special = $moodtheme_extra ? "special" : "nospecial";
-
     my $mobj = DW::Mood->new( $preview_moodthemeid );
     my @show_moods = qw( happy sad angry tired );
 
     if ( $mobj) {
         my $count = 0;
 
-        $ret .= "<div class='moodtheme-preview moodtheme-preview-$show_special highlight-box'>";
-        $ret .= "<table summary=''>";
-        $ret .= "<tr>" unless $moodtheme_extra;
+        $ret .= "<div class='moodtheme-preview moodtheme-preview highlight-box'>";
         foreach my $mood (@show_moods) {
             my %pic;
             if ( $mobj->get_picture( $mobj->mood_id( $mood ), \%pic ) ) {
-                $ret .= "<tr>" if $moodtheme_extra && $count % 2 == 0;
-                $ret .= "<td><img class='moodtheme-img' align='absmiddle' alt='$mood' src=\"$pic{pic}\" width='$pic{w}' height='$pic{h}' /><br />$mood</td>";
-                $ret .= "</tr>" if $moodtheme_extra && $count % 2 != 0;
+                $ret .= "<div class='moodtheme-mood'>";
+				$ret .= "<img alt='$mood' src=\"$pic{pic}\" width='$pic{w}' height='$pic{h}' />";
+				$ret .= "<p>$mood</p>";
+				$ret .= "</div>";
                 $count++;
             }
         }
-        if ( $moodtheme_extra ) {
-            $ret .= "<tr><td colspan='2'>";
-        } else {
-            $ret .= "<td>";
-        }
-        $ret .= "<p><a href='$LJ::SITEROOT/moodlist?moodtheme=$preview_moodthemeid'>";
-        $ret .= $class->ml( 'widget.moodthemechooser.viewtheme' ) . "</a></p>";
-        $ret .= "</td></tr></table>";
+        $ret .= "<div class='moodtheme-view-link'>";
+		$ret .= "<a href='$LJ::SITEROOT/moodlist?moodtheme=$preview_moodthemeid'>";
+        $ret .= $class->ml( 'widget.moodthemechooser.viewtheme' ) . "</a>";
+        $ret .= "</div>";
         my $mood_des = $mobj->des;
         LJ::CleanHTML::clean( \$mood_des );
-        $ret .= "<p>$mood_des</p>";
+        $ret .= "<div class='moodtheme-description'>";
+		$ret .= "<p>$mood_des</p></div>";
         $ret .= "</div>";
     }
 
-    $ret .= $moodtheme_extra;
-
     $ret .= "</fieldset>" unless $u->prop('stylesys') == 2;
 
     return $ret;
diff -r 6642ce722bea -r c6c608717fd5 htdocs/stc/widgets/moodthemechooser.css
--- a/htdocs/stc/widgets/moodthemechooser.css	Thu Dec 15 00:57:15 2011 +0800
+++ b/htdocs/stc/widgets/moodthemechooser.css	Thu Dec 15 01:05:14 2011 +0800
@@ -21,54 +21,39 @@
 }
 .moodtheme-form {
     float: left;
+    margin-right: 40px;
 }
 div.moodtheme-preview {
     float: left;
     padding: 5px;
     margin-left: 20px;
+    width: auto;
 }
-.moodtheme-preview-nospecial {
-    width: 360px;
+
+.moodtheme-preview div {
+    float: left;
 }
-.moodtheme-preview table {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-}
-.moodtheme-preview table td {
+
+.moodtheme-mood {
+    margin: 0.2em 0.5em;
     text-align: center;
 }
-.moodtheme-preview-nospecial table td {
-    vertical-align: bottom;
+
+.moodtheme-mood p {
+    text-align: center;
+    margin-bottom: 0.2em;
 }
-.moodtheme-preview p {
-    text-align: right;
+
+.moodtheme-view-link {
+    margin: 0.2em 0.5em;
+    text-align: center;
 }
-.special-moodthemes {
-    width: 175px;
-    float: left;
-    margin-left: 20px;
+
+.moodtheme-description {
+    clear: left;
 }
-.special-moodthemes-inner {
-    border: 1px solid #FFCC33;
+
+.moodtheme-description p {
+    text-align: left;
+    margin: 0.2em 0.5em;
 }
-* html .special-moodthemes-inner {
-    height: 1%;
-}
-.special-moodthemes h3 {
-    font-weight: bold;
-    font-style: italic;
-    font-size: 11px;
-    margin: 0 !important;
-    padding: 2px 4px;
-}
-.special-moodthemes ul li {
-    margin: 5px;
-    float: left;
-}
-.special-moodthemes-desc {
-    padding: 5px;
-    margin-top: 3px;
-    font-size: smaller;
-}
--------------------------------------------------------------------------------