[dw-nonfree] Styles: add new one-column mode to allow modules to go either above or below entries
[commit: http://hg.dwscoalition.org/dw-nonfree/rev/e11837ee2f72]
http://bugs.dwscoalition.org/show_bug.cgi?id=2873
Implement one-column-split mode for Sunday Morning and Transmogrified, with
accompanying CSS.
Patch by
ninetydegrees.
Files modified:
http://bugs.dwscoalition.org/show_bug.cgi?id=2873
Implement one-column-split mode for Sunday Morning and Transmogrified, with
accompanying CSS.
Patch by
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png)
Files modified:
- bin/upgrading/s2layers/sundaymorning/layout.s2
- bin/upgrading/s2layers/transmogrified/layout.s2
- cgi-bin/LJ/S2Theme/sundaymorning.pm
- cgi-bin/LJ/S2Theme/transmogrified.pm
-------------------------------------------------------------------------------- diff -r 6e9874bdbabc -r e11837ee2f72 bin/upgrading/s2layers/sundaymorning/layout.s2 --- a/bin/upgrading/s2layers/sundaymorning/layout.s2 Tue Jul 12 19:56:09 2011 +0800 +++ b/bin/upgrading/s2layers/sundaymorning/layout.s2 Wed Aug 03 06:37:07 2011 +0800 @@ -37,8 +37,6 @@ set custom_colors_template = "%%new%% .userpic a { background-color: %%background%%; border: solid 1px %%foreground%%; }"; -set module_layout_sections = "none|(none)|two|Sidebar"; - propgroup colors { property use color_page_background; @@ -137,11 +135,12 @@ property use module_cuttagcontrols_group; property string module_navlinks_section_override { - values = "none|(none)|one|Header|two|Sidebar"; + values = "none|(none)|one|Header|two|Sidebar|three|Footer"; grouped = 1; } } +set module_layout_sections = "none|(none)|two|Sidebar|three|Footer"; set grouped_property_override = { "module_navlinks_section" => "module_navlinks_section_override" }; set module_navlinks_section = "one"; @@ -234,15 +233,28 @@ $this->print_module_section("one"); """ <div id="wrap"> + + """; + if ($*layout_type == "one-column-split") { + $this->print_module_section("two"); + } + """ <div id="content"> """; $this->print_body(); """ </div> """; + if ($*layout_type != "one-column-split") { $this->print_module_section("two"); + } """ </div><div style="clear:both;"></div> + <div id="bottom"> + """; + $this->print_module_section("three"); + """ + </div> <div id="footer"> """; print safe """<div class="page-top"><a href="#">$*text_page_top</a></div>"""; @@ -409,16 +421,26 @@ #wrap { $page_colors +} + +#wrap, +.two-columns #bottom { padding-$sidebar_position_alt: 200px; /* Fixed: to display the bkg image */ padding-top: 10px; } -.one-column #wrap { +.one-column #wrap, +.one-column #bottom { margin-left: 2em; margin-right: 2em; } -.two-columns #wrap { +.one-column #bottom { + margin-top: 1em; +} + +.two-columns #wrap, +.two-columns #bottom { margin-$sidebar_position: $*sidebar_width; padding-$sidebar_position: 60px; } @@ -443,7 +465,6 @@ .module-section-two { width: $*sidebar_width; max-width: $*sidebar_width; - height: 200px; $module_base_colors } @@ -453,6 +474,19 @@ top: 8em; } +.one-column .module-section-two { + width: auto; + max-width: none; +} + +.one-column-split .module-section-two { + margin-bottom: 1em; +} + +.module-section-three { + $module_base_colors +} + .module-section-one ul { $module_base_colors margin: 0; @@ -492,23 +526,28 @@ $header_hover_colors } -.module-section-two a, .module-section-two .module-header a { +.module-section-two a, .module-section-two .module-header a, +.module-section-three a, .module-section-three .module-header a { $module_link_colors } -.module-section-two a:visited, .module-section-two .module-header a:visited { +.module-section-two a:visited, .module-section-two .module-header a:visited, +.module-section-three a:visited, .module-section-three .module-header a:visited { $module_link_visited_colors } -.module-section-two a:hover, .module-section-two .module-header a:hover { +.module-section-two a:hover, .module-section-two .module-header a:hover, +.module-section-three a:hover, .module-section-three .module-header a:hover { $module_link_hover_colors } -.module-section-two a:active, .module-section-two .module-header a:active { +.module-section-two a:active, .module-section-two .module-header a:active, +.module-section-three a:active, .module-section-three .module-header a:active { $module_link_active_colors } -.module-section-two h2 { +.module-section-two h2, +.module-section-three h2 { margin: 0; margin-bottom: 7px; padding: .2em; @@ -519,11 +558,13 @@ border-top: none; } -.module-section-two ul { +.module-section-two ul, +.module-section-three ul { list-style-type: none; margin-left: .5em; padding: 0; } +.module-section-two ul ul, .module-section-two ul ul { list-style-type: none; margin-left: .5em; @@ -531,12 +572,14 @@ margin-bottom: 0; } -.module-section-two .module { +.module-section-two .module, +.module-section-three .module { $module_colors border-top: none; } -.module-section-two .module:first-child { +.module-section-two .module:first-child, +.module-section-three .module:first-child { border-top: 1px solid $*color_module_border; } @@ -585,8 +628,19 @@ } .module-search .search-box { margin: .5em 0; width: 100%; } + +.one-column .module-search .search-box, +.module-section-three .module-search .search-box { + width: auto; + } + .module-search .search-form { margin: .5em; text-align: right; } +.one-column .module-search .search-form, +.module-section-three .module-search .search-form { + text-align: left; + } + /* wrap long content, particularly openid usernames */ .module-pagesummary .ljuser { white-space: normal !important; diff -r 6e9874bdbabc -r e11837ee2f72 bin/upgrading/s2layers/transmogrified/layout.s2 --- a/bin/upgrading/s2layers/transmogrified/layout.s2 Tue Jul 12 19:56:09 2011 +0800 +++ b/bin/upgrading/s2layers/transmogrified/layout.s2 Wed Aug 03 06:37:07 2011 +0800 @@ -239,7 +239,7 @@ <head>"""; $this->print_head(); $this->print_stylesheets(); - $this->print_head_title(); + $this->print_head_title(); println "</head>"; $this->print_wrapper_start(); $this->print_control_strip(); @@ -258,13 +258,20 @@ $this->print_module_section("one"); """ <div id="wrap"> + """; + if ($*layout_type == "one-column-split") { + $this->print_module_section("two"); + } + """ <div id="content"> """; $this->print_body(); """ </div> """; - $this->print_module_section("two"); + if ($*layout_type != "one-column-split") { + $this->print_module_section("two"); + } """ </div><div style="clear:both;"></div> </div> @@ -454,15 +461,24 @@ $sidebar_positioning } + .one-column .module-section-two { + margin: 0; + position: relative; + width: auto; + } + .module-section-two .module { border: solid 1px $*color_module_border; color: $*color_module_text; background-color: $*color_module_background; margin: 20px; margin-$sidebar_position_alt: 10px; - padding: 10px; + padding: 10px; } + .one-column .module-section-two .module { + margin: 20px 0; + } .module-section-one .module { padding: .5em 20px; @@ -561,6 +577,11 @@ padding: 5px; list-style: none; } + + .one-column .module-userprofile .module-content { + text-align: center; + } + .module-calendar .module-content { text-align: center; } @@ -571,9 +592,19 @@ .module-search .search-form { text-align: right; } + + .one-column .module-search .search-form { + text-align: left; + } + .module-search .search-box { width: 100%; } + + .one-column .module-search .search-box { + width: auto; + } + /* wrap long content, particularly openid usernames */ .module-pagesummary .ljuser { white-space: normal !important; @@ -997,7 +1028,7 @@ } .one-column #content { float: none; } - .one-column .module-section-two { float: none; padding-bottom: 10px; margin-bottom: 20px; } + .one-column .module-section-two { float: none; padding-bottom: 10px; } .one-column #wrap { padding-left: 20px; padding-right: 20px; } .two-columns-right #content { float: left; } .two-columns-right .module-section-two { float: left; } diff -r 6e9874bdbabc -r e11837ee2f72 cgi-bin/LJ/S2Theme/sundaymorning.pm --- a/cgi-bin/LJ/S2Theme/sundaymorning.pm Tue Jul 12 19:56:09 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/sundaymorning.pm Wed Aug 03 06:37:07 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" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right" ) } sub layout_prop { "layout_type" } 1; diff -r 6e9874bdbabc -r e11837ee2f72 cgi-bin/LJ/S2Theme/transmogrified.pm --- a/cgi-bin/LJ/S2Theme/transmogrified.pm Tue Jul 12 19:56:09 2011 +0800 +++ b/cgi-bin/LJ/S2Theme/transmogrified.pm Wed Aug 03 06:37:07 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" ) } +sub layouts { ( "1" => "one-column", "1s" => "one-column-split", "2l" => "two-columns-left", "2r" => "two-columns-right" ) } sub layout_prop { "layout_type" } sub page_props { --------------------------------------------------------------------------------