[dw-free] Rewrite S2PropGroup.pm to use pure CSS positioning instead of tables
[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:
http://bugs.dwscoalition.org/show_bug.cgi?id=1514
First step: de-tablefy the mood theme chooser.
Patch by
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
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; -} --------------------------------------------------------------------------------