fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2011-07-12 11:27 am
  • Add Memory
  • Share This Entry

[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/b0877c36cce6]

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

Implement one-column split mode (with modules at top and bottom) for Tabula
Rasa and Tabula-Rasa-based layouts.

Patch by [personal profile] ninetydegrees.

Files modified:
  • bin/upgrading/en.dat
  • bin/upgrading/s2layers/core2.s2
  • bin/upgrading/s2layers/core2base/layout.s2
  • cgi-bin/LJ/Customize.pm
  • cgi-bin/LJ/S2Theme/core2base.pm
  • htdocs/img/customize/layouts/1.png
  • htdocs/img/customize/layouts/1s.png
  • htdocs/stc/widgets/layoutchooser.css
  • htdocs/stc/widgets/themechooser.css
--------------------------------------------------------------------------------
diff -r 9c51b6c34304 -r b0877c36cce6 bin/upgrading/en.dat
--- a/bin/upgrading/en.dat	Tue Jul 12 19:17:50 2011 +0800
+++ b/bin/upgrading/en.dat	Tue Jul 12 19:26:29 2011 +0800
@@ -273,21 +273,23 @@
 
 customize.layoutname.default=(Unnamed - [[layoutid]])
 
-customize.layouts.1=1 Column (no sidebar)
-
-customize.layouts.2l=2 Column (sidebar on left)
-
-customize.layouts.2lnh=2 Column (sidebar on left; no header)
-
-customize.layouts.2r=2 Column (sidebar on right)
-
-customize.layouts.2rnh=2 Column (sidebar on right; no header)
-
-customize.layouts.3=3 Column (sidebars on either side)
-
-customize.layouts.3l=3 Column (sidebars on the left)
-
-customize.layouts.3r=3 Column (sidebars on the right)
+customize.layouts2.1=1 Column (modules at bottom; no sidebar)
+
+customize.layouts.1s=1 Column (modules at top and bottom; no sidebar)
+
+customize.layouts2.2l=2 Column (sidebar on the left)
+
+customize.layouts2.2lnh=2 Columns (sidebar on the left; no header)
+
+customize.layouts2.2r=2 Columns (sidebar on the right)
+
+customize.layouts2.2rnh=2 Columns (sidebar on the right; no header)
+
+customize.layouts2.3=3 Columns (one sidebar on each side)
+
+customize.layouts2.3l=3 Columns (two sidebars on the left)
+
+customize.layouts2.3r=3 Columns (two sidebars on the right)
 
 customize.layouts_for_dropdown.choose=(Choose a Layout)
 
diff -r 9c51b6c34304 -r b0877c36cce6 bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2	Tue Jul 12 19:17:50 2011 +0800
+++ b/bin/upgrading/s2layers/core2.s2	Tue Jul 12 19:26:29 2011 +0800
@@ -1371,7 +1371,7 @@
 
 property string layout_type {
         des = "Layout Type";
-        values = "|none|one-column|One column|two-columns-left|Two columns (Sidebar on Left)|two-columns-right|Two columns (Sidebar on Right)|three-columns-sides|Three columns (Sidebars on either side)|three-columns-left|Three column (Sidebars on Left)|three-columns-right|Three column (Sidebars on Right)";
+        values = "|none|one-column|One column (modules at bottom)|one-column-split|One column split (modules at top & bottom)|two-columns-left|Two columns (sidebar on the left)|two-columns-right|Two columns (sidebar on the right)|three-columns-sides|Three columns (one sidebar on each Side)|three-columns-left|Three column (two sidebars on the left)|three-columns-right|Three column (two sidebars on the right)";
     }
 
 property string sidebar_width {
@@ -3698,6 +3698,7 @@
     var string column_count = "";
     var string column_side = "";
 
+    if ( $*layout_type->contains("split") ) { $column_count = "one-column"; }
     if ( $*layout_type->contains("two") ) { $column_count = "two-columns"; }
     if ( $*layout_type->contains("three") ) { $column_count = "three-columns"; }
 
@@ -4502,16 +4503,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 9c51b6c34304 -r b0877c36cce6 bin/upgrading/s2layers/core2base/layout.s2
--- a/bin/upgrading/s2layers/core2base/layout.s2	Tue Jul 12 19:17:50 2011 +0800
+++ b/bin/upgrading/s2layers/core2base/layout.s2	Tue Jul 12 19:26:29 2011 +0800
@@ -378,7 +378,8 @@
     padding: 1em;
 }
 
-.one-column #secondary { width: $*sidebar_width; }
+.one-column #secondary { width: auto; }
+
 .two-columns-left #secondary,
 .three-columns-sides #secondary {
     float: left;
@@ -405,7 +406,8 @@
     padding: 1em;
 }
 
-.one-column #tertiary { width: $*sidebar_width; }
+.one-column #tertiary { width: auto; }
+
 .two-columns-left #tertiary,
 .two-columns-right #tertiary {
     clear: both;
@@ -659,9 +661,19 @@
 .module-calendar .module-content {
     text-align: center;
 }
+
+.one-column .module-calendar .module-content {
+    text-align: left;
+}
+
 .module-calendar table {
     margin: 0 auto;
 }
+
+.one-column .module-calendar table {
+    margin: 0;
+}
+
 .module-calendar td {
     padding: 1px;
 }
@@ -694,10 +706,14 @@
 .tags_cloud li, .module-tags_cloud li { display: inline;
     list-style-type: none; }
 
-.module-syndicate  .module-content {
+.module-syndicate .module-content {
     text-align: center;
 }
 
+.one-column .module-syndicate .module-content {
+    text-align: left;
+}
+
 $userpic_css
     """;
 }
diff -r 9c51b6c34304 -r b0877c36cce6 cgi-bin/LJ/Customize.pm
--- a/cgi-bin/LJ/Customize.pm	Tue Jul 12 19:17:50 2011 +0800
+++ b/cgi-bin/LJ/Customize.pm	Tue Jul 12 19:26:29 2011 +0800
@@ -681,14 +681,15 @@
 
 sub get_layouts {
     return (
-        '1'    => LJ::Lang::ml('customize.layouts.1'),
-        '2l'   => LJ::Lang::ml('customize.layouts.2l'),
-        '2r'   => LJ::Lang::ml('customize.layouts.2r'),
-        '2lnh' => LJ::Lang::ml('customize.layouts.2lnh'),
-        '2rnh' => LJ::Lang::ml('customize.layouts.2rnh'),
-        '3l'   => LJ::Lang::ml( 'customize.layouts.3l' ),
-        '3r'   => LJ::Lang::ml( 'customize.layouts.3r' ),
-        '3'    => LJ::Lang::ml( 'customize.layouts.3' ),
+        '1'    => LJ::Lang::ml('customize.layouts2.1'),
+        '1s'    => LJ::Lang::ml('customize.layouts.1s'),
+        '2l'   => LJ::Lang::ml('customize.layouts2.2l'),
+        '2r'   => LJ::Lang::ml('customize.layouts2.2r'),
+        '2lnh' => LJ::Lang::ml('customize.layouts2.2lnh'),
+        '2rnh' => LJ::Lang::ml('customize.layouts2.2rnh'),
+        '3l'   => LJ::Lang::ml( 'customize.layouts2.3l' ),
+        '3r'   => LJ::Lang::ml( 'customize.layouts2.3r' ),
+        '3'    => LJ::Lang::ml( 'customize.layouts2.3' ),
     );
 }
 
diff -r 9c51b6c34304 -r b0877c36cce6 cgi-bin/LJ/S2Theme/core2base.pm
--- a/cgi-bin/LJ/S2Theme/core2base.pm	Tue Jul 12 19:17:50 2011 +0800
+++ b/cgi-bin/LJ/S2Theme/core2base.pm	Tue Jul 12 19:26:29 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 9c51b6c34304 -r b0877c36cce6 htdocs/img/customize/layouts/1.png
Binary file htdocs/img/customize/layouts/1.png has changed
diff -r 9c51b6c34304 -r b0877c36cce6 htdocs/img/customize/layouts/1s.png
Binary file htdocs/img/customize/layouts/1s.png has changed
diff -r 9c51b6c34304 -r b0877c36cce6 htdocs/stc/widgets/layoutchooser.css
--- a/htdocs/stc/widgets/layoutchooser.css	Tue Jul 12 19:17:50 2011 +0800
+++ b/htdocs/stc/widgets/layoutchooser.css	Tue Jul 12 19:26:29 2011 +0800
@@ -1,10 +1,27 @@
 .layout-content .layout-item {
+    font-size: 1em;
     text-align: center;
     position: relative;
     width: 156px;
 }
+
 .layout-item img.layout-preview {
     border: 1px solid #fff;
     width: 150px;
     height: 114px;
 }
+
+.layout-content .layout-desc {
+    display: block;
+    line-height: 1.3em;
+    min-height: 5.2em;
+    margin: 2px 0 !important;
+}
+
+.layout-item .layout-button {
+    font-size: 1em;
+    line-height: 1.3em;
+    margin-bottom: .7em;
+    margin-top: .2em;
+    padding: .2em;
+}
diff -r 9c51b6c34304 -r b0877c36cce6 htdocs/stc/widgets/themechooser.css
--- a/htdocs/stc/widgets/themechooser.css	Tue Jul 12 19:17:50 2011 +0800
+++ b/htdocs/stc/widgets/themechooser.css	Tue Jul 12 19:26:29 2011 +0800
@@ -71,11 +71,9 @@
 }
 .theme-item .theme-button {
     font-size: 1em;
-    height: 1.9em;
     line-height: 1.3em;
     margin-top: .2em;
-    min-height: 1.9em;
-    padding: .3em;
+    padding: .2em;
 }
 .theme-item .theme-icons {
     position: absolute;
--------------------------------------------------------------------------------
Flat | Top-Level Comments Only
ninetydegrees: Art: self-portrait (Default)

Note

[personal profile] ninetydegrees 2011-07-20 11:45 pm (UTC)(link)
Since modules now have the same width as entries in one column, one might want to warn people about that when this goes live.
fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)

Re: Note

[personal profile] fu 2011-08-25 05:08 pm (UTC)(link)
Thanks for the reminder; I kept this in my inbox so I wouldn't forget, and I just posted the entry :)
ninetydegrees: Art: self-portrait (Default)

Re: Note

[personal profile] ninetydegrees 2011-08-25 05:10 pm (UTC)(link)
And thank you for the reply. I could add it to the Herald.
Flat | Top-Level Comments Only