fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2011-08-02 10:37 pm
  • Add Memory
  • Share This Entry

[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 [personal profile] ninetydegrees.

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 {
--------------------------------------------------------------------------------