[dw-free] Styles: refactor one-column mode to allow modules to go either above or below entries
[commit: http://hg.dwscoalition.org/dw-free/rev/0f96f64eb6be]
http://bugs.dwscoalition.org/show_bug.cgi?id=2873
Implement split mode for Basic Boxes, Boxes and Borders, ColorSide,
Crossroads, Fluid Measure, Five AM, Modish, Modular, Paletteable,
Tranquility III.
Switch EasyRead to use one-column-split rather than one-column (just changes
which picture is used in the layout type / columns chooser, but no
functional change otherwise).
Patch by
ninetydegrees.
Files modified:
http://bugs.dwscoalition.org/show_bug.cgi?id=2873
Implement split mode for Basic Boxes, Boxes and Borders, ColorSide,
Crossroads, Fluid Measure, Five AM, Modish, Modular, Paletteable,
Tranquility III.
Switch EasyRead to use one-column-split rather than one-column (just changes
which picture is used in the layout type / columns chooser, but no
functional change otherwise).
Patch by
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
Files modified:
- bin/upgrading/s2layers/basicboxes/layout.s2
- bin/upgrading/s2layers/boxesandborders/layout.s2
- bin/upgrading/s2layers/crossroads/layout.s2
- bin/upgrading/s2layers/easyread/layout.s2
- bin/upgrading/s2layers/fiveam/layout.s2
- bin/upgrading/s2layers/fluidmeasure/layout.s2
- bin/upgrading/s2layers/modular/layout.s2
- bin/upgrading/s2layers/paletteable/layout.s2
- cgi-bin/LJ/S2Theme/basicboxes.pm
- cgi-bin/LJ/S2Theme/boxesandborders.pm
- cgi-bin/LJ/S2Theme/colorside.pm
- cgi-bin/LJ/S2Theme/crossroads.pm
- cgi-bin/LJ/S2Theme/easyread.pm
- cgi-bin/LJ/S2Theme/fiveam.pm
- cgi-bin/LJ/S2Theme/fluidmeasure.pm
- cgi-bin/LJ/S2Theme/modish.pm
- cgi-bin/LJ/S2Theme/modular.pm
- cgi-bin/LJ/S2Theme/paletteable.pm
- cgi-bin/LJ/S2Theme/tranquilityiii.pm
-------------------------------------------------------------------------------- diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/basicboxes/layout.s2 --- a/bin/upgrading/s2layers/basicboxes/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/basicboxes/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -64,16 +64,33 @@ </div><!-- end header --> <div id="content"> <div class="inner"> + """; + if ($*layout_type == "one-column-split") { + """ + <div id="secondary"><div class="inner"> + """; + $this->print_module_section("one"); + """ + </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="primary"><div class="inner"> """; $this->print_body(); """ </div></div><!-- end primary and primary>inner --> + """; + if ($*layout_type != "one-column-split") { + """ <div id="secondary"><div class="inner"> - """; + """; $this->print_module_section("one"); """ </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="invisible-separator" style="float: left; width: 1px;"></div> <!-- this is a hack for IE7 + two-columns-right --> <div id="tertiary"><div class="inner"> """; @@ -412,11 +429,12 @@ background: $*color_entry_background, !important; font-size: .9em !important; color: $*color_entry_text !important; } -.module-search .search-form { text-align: right; } + +.two-columns #secondary .module-search .search-form, +.three-columns .module-search .search-form { + text-align: right; + } $userpic_css """; } - - - diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/boxesandborders/layout.s2 --- a/bin/upgrading/s2layers/boxesandborders/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/boxesandborders/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -74,16 +74,33 @@ </div><!-- end header --> <div id="content"> <div class="inner"> + """; + if ($*layout_type == "one-column-split") { + """ + <div id="secondary"><div class="inner"> + """; + $this->print_module_section("one"); + """ + </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="primary"><div class="inner"> """; $this->print_body(); """ </div></div><!-- end primary and primary>inner --> + """; + if ($*layout_type != "one-column-split") { + """ <div id="secondary"><div class="inner"> - """; + """; $this->print_module_section("one"); """ </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="invisible-separator" style="float: left; width: 1px;"></div> <!-- this is a hack for IE7 + two-columns-right --> <div id="tertiary"><div class="inner"> """; @@ -434,7 +451,11 @@ .module-content ul { list-style: outside square; } -.module-userprofile { text-align: center; } +.two-columns #secondary .module-userprofile, +.three-columns .module-userprofile { + text-align: center; + } + .module-userprofile .module-header { text-align: left; } .module-typelist ul { list-style: none; } diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/crossroads/layout.s2 --- a/bin/upgrading/s2layers/crossroads/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/crossroads/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -76,16 +76,33 @@ </div><!-- end header --> <div id="content"> <div class="inner"> + """; + if ($*layout_type == "one-column-split") { + """ + <div id="secondary"><div class="inner"> + """; + $this->print_module_section("one"); + """ + </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="primary"><div class="inner"> """; $this->print_body(); """ </div></div><!-- end primary and primary>inner --> + """; + if ($*layout_type != "one-column-split") { + """ <div id="secondary"><div class="inner"> - """; + """; $this->print_module_section("one"); """ </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="invisible-separator" style="float: left; width: 1px;"></div> <!-- this is a hack for IE7 + two-columns-right --> <div id="tertiary"><div class="inner"> """; @@ -567,8 +584,7 @@ list-style: none; } .module-content ul ul { padding-left: 1em; } -.module-userprofile .module-content, -.module-syndicate .module-content { text-align: center; } +.module-userprofile .module-content { text-align: center; } .module-content ul.userlite-interaction-links { margin-top: .5em; } diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/easyread/layout.s2 --- a/bin/upgrading/s2layers/easyread/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/easyread/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -31,7 +31,7 @@ property use comment_datetime_format_group; } -set layout_type = "one-column"; +set layout_type = "one-column-split"; set use_custom_friend_colors = false; set custom_foreground_element = "subject"; set custom_background_element = "subject"; diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/fiveam/layout.s2 --- a/bin/upgrading/s2layers/fiveam/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/fiveam/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -139,16 +139,33 @@ </div><!-- end header --> <div id="content"> <div class="inner"> + """; + if ($*layout_type == "one-column-split") { + """ + <div id="secondary"><div class="inner"> + """; + $this->print_module_section("one"); + """ + </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="primary"><div class="inner"> """; $this->print_body(); """ </div></div><!-- end primary and primary>inner --> + """; + if ($*layout_type != "one-column-split") { + """ <div id="secondary"><div class="inner"> - """; + """; $this->print_module_section("one"); """ </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="invisible-separator" style="float: left; width: 1px;"></div> <!-- this is a hack for IE7 + two-columns-right --> <div id="tertiary"><div class="inner"> """; @@ -950,6 +967,12 @@ margin-right: 2em; } +.one-column-split #primary, +.one-column #footer, +.two-columns #footer { + clear: both; + } + .module h2 { padding-top: .8em; text-transform: lowercase; diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/fluidmeasure/layout.s2 --- a/bin/upgrading/s2layers/fluidmeasure/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/fluidmeasure/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -64,7 +64,7 @@ """ <div id="canvas"> <div class="inner"> -<div id="top-color"></div> + <div id="top-color"></div> <div id="header"> <div class="inner"> """; @@ -76,16 +76,33 @@ </div><!-- end header --> <div id="content"> <div class="inner"> + """; + if ($*layout_type == "one-column-split") { + """ + <div id="secondary"><div class="inner"> + """; + $this->print_module_section("one"); + """ + </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="primary"><div class="inner"> """; $this->print_body(); """ </div></div><!-- end primary and primary>inner --> + """; + if ($*layout_type != "one-column-split") { + """ <div id="secondary"><div class="inner"> - """; + """; $this->print_module_section("one"); """ </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="invisible-separator" style="float: left; width: 1px;"></div> <!-- this is a hack for IE7 + two-columns-right --> <div id="tertiary"><div class="inner"> @@ -515,6 +532,19 @@ -webkit-border-radius: 1em; -khtml-border-radius: 1em; } +.one-column #secondary, +.one-column #tertiary { + padding: .5em 0; + } + +.one-column #tertiary { + margin-top: 2em; + } + +.one-column-split #tertiary { + margin-top: 0; + } + #secondary a, #tertiary a { color: $*color_module_link; } #secondary a:visited, @@ -599,8 +629,17 @@ border: 1px solid $*color_module_title_background; } .module-search .search-form { margin: .2em auto; } -.module-search .search-box { margin: .2em; width: 95%; } -.module-search .search-form { text-align: right; } +.module-search .search-box { margin: .2em; } + +.two-columns #secondary .module-search .search-form, +.three-columns .module-search .search-form { + text-align: right; + } + +.module-search .module-content, +.module-cuttagcontrols .module-content { + padding-top: 1em; + } /* footer */ diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/modular/layout.s2 --- a/bin/upgrading/s2layers/modular/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/modular/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -71,16 +71,33 @@ </div><!-- end header --> <div id="content"> <div class="inner"> + """; + if ($*layout_type == "one-column-split") { + """ + <div id="secondary"><div class="inner"> + """; + $this->print_module_section("one"); + """ + </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="primary"><div class="inner"> """; $this->print_body(); """ </div></div><!-- end primary and primary>inner --> + """; + if ($*layout_type != "one-column-split") { + """ <div id="secondary"><div class="inner"> - """; + """; $this->print_module_section("one"); """ </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="invisible-separator" style="float: left; width: 1px;"></div> <!-- this is a hack for IE7 + two-columns-right --> <div id="tertiary"><div class="inner"> """; @@ -245,6 +262,17 @@ #primary > .inner:first-child { padding: 0 .5em; } +.one-column #content { + margin-left: .5em; + margin-right: .5em; + } + +.one-column #secondary > .inner:first-child, +.one-column #tertiary > .inner:first-child { + padding-left: .5em; + padding-right: .5em; + } + .two-columns-left #content, .three-columns-left #content { margin-right: .5em; } diff -r 4150ba329e7f -r 0f96f64eb6be bin/upgrading/s2layers/paletteable/layout.s2 --- a/bin/upgrading/s2layers/paletteable/layout.s2 Thu Jul 21 01:38:01 2011 +0800 +++ b/bin/upgrading/s2layers/paletteable/layout.s2 Thu Jul 21 01:53:03 2011 +0800 @@ -78,16 +78,33 @@ </div><!-- end header --> <div id="content"> <div class="inner"> + """; + if ($*layout_type == "one-column-split") { + """ + <div id="secondary"><div class="inner"> + """; + $this->print_module_section("one"); + """ + </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="primary"><div class="inner"> """; $this->print_body(); """ </div></div><!-- end primary and primary>inner --> + """; + if ($*layout_type != "one-column-split") { + """ <div id="secondary"><div class="inner"> - """; + """; $this->print_module_section("one"); """ </div></div><!-- end secondary and secondary>inner --> + """; + } + """ <div id="invisible-separator" style="float: left; width: 1px;"></div> <!-- this is a hack for IE7 + two-columns-right --> <div id="tertiary"><div class="inner"> """; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/basicboxes.pm --- a/cgi-bin/LJ/S2Theme/basicboxes.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/basicboxes.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/boxesandborders.pm --- a/cgi-bin/LJ/S2Theme/boxesandborders.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/boxesandborders.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/colorside.pm --- a/cgi-bin/LJ/S2Theme/colorside.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/colorside.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/crossroads.pm --- a/cgi-bin/LJ/S2Theme/crossroads.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/crossroads.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/easyread.pm --- a/cgi-bin/LJ/S2Theme/easyread.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/easyread.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column" ) } +sub layouts { ( "1s" => "one-column-split" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/fiveam.pm --- a/cgi-bin/LJ/S2Theme/fiveam.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/fiveam.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } sub page_props { diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/fluidmeasure.pm --- a/cgi-bin/LJ/S2Theme/fluidmeasure.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/fluidmeasure.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/modish.pm --- a/cgi-bin/LJ/S2Theme/modish.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/modish.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/modular.pm --- a/cgi-bin/LJ/S2Theme/modular.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/modular.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/paletteable.pm --- a/cgi-bin/LJ/S2Theme/paletteable.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/paletteable.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } sub comment_props { diff -r 4150ba329e7f -r 0f96f64eb6be cgi-bin/LJ/S2Theme/tranquilityiii.pm --- a/cgi-bin/LJ/S2Theme/tranquilityiii.pm Thu Jul 21 01:38:01 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/tranquilityiii.pm Thu Jul 21 01:53:03 2011 +0800 @@ -2,7 +2,7 @@ use base qw( LJ::S2Theme ); use strict; -sub layouts { ( "1" => "one-column", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right", "3" => "three-columns-sides", "3r" => "three-columns-right", "3l" => "three-columns-left" ) } sub layout_prop { "layout_type" } 1; --------------------------------------------------------------------------------