dw-free: http://bugs.dwscoalition.org/show

Discussion:

dw-free: http://bugs.dwscoalition.org/show_bug.cgi?id=3495

Dreamwidth Changelog

2011-04-18 05:29:54 UTC

Add option "smaller" for comment userpic sizes. Previously: full = 100%, small = 50%; now: full = 100%, small = 75%; smaller = 50%

Patch by ninetydegrees.

diffs (44 lines):

diff -r a4dc459038d1 -r f3d2493c9451 bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2 Mon Apr 18 13:18:01 2011 +0800
+++ b/bin/upgrading/s2layers/core2.s2 Mon Apr 18 13:29:19 2011 +0800
@@ -1293,10 +1293,10 @@ property bool tags_aware {
}

property string comment_userpic_style {
- des = "User icon display style for comments";
- doc = "User icon display style for comments. Either '' for full, 'small' for small, or 'off' for none.";
+ des = "Select the size of icons in comments";
+ doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
doc_flags = "[construct]";
- values = "|Full|small|Small|off|Off";
+ values = "|Full|small|Small|smaller|Smaller";
}

property string userpics_position {
diff -r a4dc459038d1 -r f3d2493c9451 bin/upgrading/s2layers/core2base/layout.s2
--- a/bin/upgrading/s2layers/core2base/layout.s2 Mon Apr 18 13:18:01 2011 +0800
+++ b/bin/upgrading/s2layers/core2base/layout.s2 Mon Apr 18 13:29:19 2011 +0800
@@ -14,6 +14,7 @@ propgroup presentation {
property use tags_page_type;
property use sidebar_width;
property use sidebar_width_doubled;
+ property use comment_userpic_style;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;
diff -r a4dc459038d1 -r f3d2493c9451 cgi-bin/LJ/S2/EntryPage.pm
--- a/cgi-bin/LJ/S2/EntryPage.pm Mon Apr 18 13:18:01 2011 +0800
+++ b/cgi-bin/LJ/S2/EntryPage.pm Mon Apr 18 13:29:19 2011 +0800
@@ -181,6 +181,12 @@ sub EntryPage
my $height = $pic->{height};

if ( $comment_userpic_style eq 'small' )
+ {
+ $width = $width * 3 / 4;
+ $height = $height * 3 / 4;
+ }
+
+ if ( $comment_userpic_style eq 'smaller' )
{
$width = $width / 2;
$height = $height / 2;

Dreamwidth Changelog

2011-04-18 05:32:39 UTC

Permalink

Backend for entry userpics (also has full, small, smaller as options)

Patch by fu.

diffs (75 lines):

diff -r f3d2493c9451 -r d848707362a3 cgi-bin/LJ/S2.pm
--- a/cgi-bin/LJ/S2.pm Mon Apr 18 13:29:19 2011 +0800
+++ b/cgi-bin/LJ/S2.pm Mon Apr 18 13:32:13 2011 +0800
@@ -1885,6 +1885,19 @@ sub Entry
$e->{$_} = $arg->{$_};
}

+ my $pic = $e->{userpic};
+ if ( $pic->{url} ) {
+ my $userpic_style = $arg->{userpic_style} || "";
+
+ if ( $userpic_style eq 'small' ) {
+ $pic->{width} = $pic->{width} * 3 / 4;
+ $pic->{height} = $pic->{height} * 3 / 4;
+ } elsif ( $userpic_style eq "smaller" ) {
+ $pic->{width} = $pic->{width} / 2;
+ $pic->{height} = $pic->{height} / 2;
+ }
+ }
+
my $remote = LJ::get_remote();
my $poster = $e->{poster}->{_u};

@@ -2034,6 +2047,8 @@ sub Entry_from_entryobj
} else {
$userpic = Image_userpic( $journal, $journal->userpic->picid ) if $journal->userpic;
}
+
+ my $userpic_style = S2::get_property_value( $opts->{ctx}, 'entry_userpic_style' );

# override used moodtheme if necessary
my $moodthemeid = $u->prop( 'opt_forcemoodtheme' ) eq 'Y' ?
@@ -2065,6 +2080,7 @@ sub Entry_from_entryobj
new_day => 0, #if true, set later
end_day => 0, #if true, set later
userpic => $userpic,
+ userpic_style => $userpic_style,
tags => $taglist,
permalink_url => $entry_obj->url,
moodthemeid => $moodthemeid,
diff -r f3d2493c9451 -r d848707362a3 cgi-bin/LJ/S2/EntryPage.pm
--- a/cgi-bin/LJ/S2/EntryPage.pm Mon Apr 18 13:29:19 2011 +0800
+++ b/cgi-bin/LJ/S2/EntryPage.pm Mon Apr 18 13:32:13 2011 +0800
@@ -175,19 +175,15 @@ sub EntryPage
}

my $comment_userpic;
- my $comment_userpic_style = $opts->{ctx}->[S2::PROPS]->{comment_userpic_style};
- if ( defined $com->{picid} && ( my $pic = $userpic{$com->{picid}} ) && ( $comment_userpic_style ne 'off' ) ) {
+ my $comment_userpic_style = S2::get_property_value( $opts->{ctx}, 'comment_userpic_style' ) || "";
+ if ( defined $com->{picid} && ( my $pic = $userpic{$com->{picid}} ) ) {
my $width = $pic->{width};
my $height = $pic->{height};

- if ( $comment_userpic_style eq 'small' )
- {
+ if ( $comment_userpic_style eq 'small' ) {
$width = $width * 3 / 4;
$height = $height * 3 / 4;
- }
-
- if ( $comment_userpic_style eq 'smaller' )
- {
+ } elsif ( $comment_userpic_style eq 'smaller' ) {
$width = $width / 2;
$height = $height / 2;
}
@@ -551,6 +547,7 @@ sub EntryPage_entry
new_day => 0,
end_day => 0,
userpic => $userpic,
+ userpic_style => S2::get_property_value( $opts->{ctx}, 'entry_userpic_style' ),
permalink_url => $entry->url,
timeformat24 => $remote && $remote->use_24hour_time,
} );

Dreamwidth Changelog

2011-04-18 05:38:04 UTC

Permalink

Add option for entries icons size in core2. Use in Tabula Rasa. Update option in core1 to match the backend.

Patch by ninetydegrees.

diffs (72 lines):

diff -r d848707362a3 -r 854cd299a2b5 bin/upgrading/s2layers/core1.s2
--- a/bin/upgrading/s2layers/core1.s2 Mon Apr 18 13:32:13 2011 +0800
+++ b/bin/upgrading/s2layers/core1.s2 Mon Apr 18 13:37:19 2011 +0800
@@ -1696,11 +1696,13 @@ property Color color_comment_bar {
}
set color_comment_bar = "#d0d0ff";

+# Updated to match Core2 option
+# Off value was removed
property string comment_userpic_style {
- des = "Userpic display style for comments";
- doc = "Userpic display style for comments. Either '' for full, 'small' for small, or 'off' for none.";
- doc_flags = "[construct]";
- values = "|Full|small|Small|off|Off";
+ des = "Select the size of icons in comments";
+ doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
+ doc_flags = "[construct]";
+ values = "|Full|small|Small|smaller|Smaller";
}
set comment_userpic_style = "";

diff -r d848707362a3 -r 854cd299a2b5 bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2 Mon Apr 18 13:32:13 2011 +0800
+++ b/bin/upgrading/s2layers/core2.s2 Mon Apr 18 13:37:19 2011 +0800
@@ -1292,11 +1292,25 @@ property bool tags_aware {
noui = 1;
}

-property string comment_userpic_style {
- des = "Select the size of icons in comments";
+property string[] userpic_style_group {
+ des = "Select the size of icons";
+ grouptype = "datetime";
+ }
+set userpic_style_group = ["entry_userpic_style", "comment_userpic_style"];
+property string entry_userpic_style {
+ des = "In entries";
doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
doc_flags = "[construct]";
values = "|Full|small|Small|smaller|Smaller";
+ grouped = 1;
+}
+
+property string comment_userpic_style {
+ des = "In comments";
+ doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
+ doc_flags = "[construct]";
+ values = "|Full|small|Small|smaller|Smaller";
+ grouped = 1;
}

property string userpics_position {
@@ -1336,6 +1350,7 @@ property string module_tags_opts_count_t

set use_shared_pic = false;
set tags_aware = true;
+set entry_userpic_style = "";
set comment_userpic_style = "";
set userpics_position = "left";
set entry_metadata_position = "bottom";
diff -r d848707362a3 -r 854cd299a2b5 bin/upgrading/s2layers/core2base/layout.s2
--- a/bin/upgrading/s2layers/core2base/layout.s2 Mon Apr 18 13:32:13 2011 +0800
+++ b/bin/upgrading/s2layers/core2base/layout.s2 Mon Apr 18 13:37:19 2011 +0800
@@ -14,7 +14,7 @@ propgroup presentation {
property use tags_page_type;
property use sidebar_width;
property use sidebar_width_doubled;
- property use comment_userpic_style;
+ property use userpic_style_group;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;

Dreamwidth Changelog

2011-04-18 05:52:25 UTC

Permalink

Make adjustments for different icon sizes. Some refactoring.

Patch by ninetydegrees.

diffs (471 lines):

diff -r 854cd299a2b5 -r 02abc4b6f22f bin/upgrading/s2layers/colorside/layout.s2
--- a/bin/upgrading/s2layers/colorside/layout.s2 Mon Apr 18 13:37:19 2011 +0800
+++ b/bin/upgrading/s2layers/colorside/layout.s2 Mon Apr 18 13:51:49 2011 +0800
@@ -48,26 +48,53 @@ function print_stylesheet() {

var string footer_colors = generate_color_css( new Color, $*color_page_background, new Color );

+ var string entry_padding = "";
+ if ( $*entry_userpic_style == "" ) { $entry_padding = "110px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_padding = "85px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_padding = "60px"; }
+
+ var string comment_padding = "";
+ if ( $*comment_userpic_style == "" ) { $comment_padding = "110px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_padding = "85px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_padding = "60px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
.has-userpic .entry .entry-title,
- .has-userpic .comment .comment-title,
- .has-userpic .comment .comment-subjecticon,
- .has-userpic .comment .datetime { margin: 0 0 0 110px; }
.has-userpic .entry .access-filter,
.has-userpic .entry .restrictions,
.has-userpic .entry .datetime,
- .has-userpic .entry .poster,
+ .has-userpic .entry .poster {
+ padding-left: $entry_padding;
+ }
+
+ .has-userpic .comment .header,
.has-userpic .comment .poster,
- .has-userpic .comment .poster-ip { padding-left: 110px; }
+ .has-userpic .comment .poster-ip {
+ padding-left: $comment_padding;
+ }
+
.has-userpic .entry .contents .userpic,
.has-userpic .comment .contents .userpic { left: 5px; }
""";
}
elseif ($*userpics_position == "right") {
$userpic_css = """
- .has-userpic .entry .entry-title { margin: 5px 110px 5px 5px; }
+ .has-userpic .entry .entry-title,
+ .has-userpic .entry .access-filter,
+ .has-userpic .entry .restrictions,
+ .has-userpic .entry .datetime,
+ .has-userpic .entry .poster {
+ padding-right: $entry_padding;
+ }
+
+ .has-userpic .comment .header,
+ .has-userpic .comment .poster,
+ .has-userpic .comment .poster-ip {
+ padding-right: $comment_padding;
+ }
+
.has-userpic .entry .contents .userpic,
.has-userpic .comment .contents .userpic { right: 5px; }
""";
@@ -199,7 +226,7 @@ ul.entry-interaction-links { text-align:
padding: 1px 0 0 0;}

.comment .header { $entry_header_colors
- padding: 5px 110px 5px 5px;
+ padding: 5px;
margin: 0 0 1em 0;}
.comment .header a,
.comment .header a:visited { $entry_title_link_colors }
diff -r 854cd299a2b5 -r 02abc4b6f22f bin/upgrading/s2layers/compartmentalize/layout.s2
--- a/bin/upgrading/s2layers/compartmentalize/layout.s2 Mon Apr 18 13:37:19 2011 +0800
+++ b/bin/upgrading/s2layers/compartmentalize/layout.s2 Mon Apr 18 13:51:49 2011 +0800
@@ -48,6 +48,16 @@ function print_stylesheet () {
var string header_colors = generate_color_css($*color_page_title, $*color_header_background, $*color_entry_border);
var string entry_colors = generate_color_css($*color_entry_text, $*color_entry_background, $*color_entry_border);

+ var string entry_header_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_header_margin = "118px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_header_margin = "93px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_header_margin = "68px"; }
+
+ var string comment_header_margin = "";
+ if ( $*comment_userpic_style == "" ) { $comment_header_margin = "118px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_header_margin = "93px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_header_margin = "68px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
@@ -57,8 +67,13 @@ function print_stylesheet () {
}
.has-userpic div.entry div.header,
.has-userpic div.comment div.header {
- margin-left: 118px;
text-align: right;
+ }
+ .has-userpic div.entry div.header {
+ margin-left: $entry_header_margin;
+ }
+ .has-userpic div.comment div.header {
+ margin-left: $comment_header_margin;
}
.has-userpic div.comment div.userpic {
float: left;
@@ -72,9 +87,11 @@ function print_stylesheet () {
float: right;
margin: -4em 0 1em 1em;
}
- .has-userpic div.entry div.header,
+ .has-userpic div.entry div.header {
+ margin-right: $entry_header_margin;
+ }
.has-userpic div.comment div.header {
- margin-right: 118px;
+ margin-right: $comment_header_margin;
}
.has-userpic div.comment div.userpic {
float: right;
diff -r 854cd299a2b5 -r 02abc4b6f22f bin/upgrading/s2layers/funkycircles/layout.s2
--- a/bin/upgrading/s2layers/funkycircles/layout.s2 Mon Apr 18 13:37:19 2011 +0800
+++ b/bin/upgrading/s2layers/funkycircles/layout.s2 Mon Apr 18 13:51:49 2011 +0800
@@ -159,20 +159,40 @@ function print_stylesheet () {
var string entry_footer_link_visited_colors = generate_color_css($*color_entry_footer_link_visited, new Color, new Color);
var string entry_list_background = generate_background_css ($*image_entry_list_background_url, $*image_entry_list_background_repeat, $*image_entry_list_background_position, new Color);

+ var string entry_spacing = "";
+ if ( $*entry_userpic_style == "" ) { $entry_spacing = "65px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_spacing = "40px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_spacing = "15px"; }
+
+ var string comment_spacing = "";
+ if ( $*comment_userpic_style == "" ) { $comment_spacing = "65px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_spacing = "40px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_spacing = "15px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
.contents .userpic {
- left: -2.5em;
+ left: -40px;
}

.entry .header,
.comment .header {
- padding-left: 95px;
+ margin-left: 2em;
}

- .has-userpic .poster {
- margin-left: 80px;
+ .entry .header {
+ padding-left: $entry_spacing;
+ }
+ .comment .header {
+ padding-left: $comment_spacing;
+ }
+
+ .has-userpic .entry .poster {
+ margin-left: $entry_spacing;
+ }
+ .has-userpic .comment .poster {
+ margin-left: $comment_spacing;
}

.two-columns-left #primary > .inner:first-child,
@@ -192,21 +212,27 @@ function print_stylesheet () {
}
elseif ($*userpics_position == "right") {
$userpic_css = """
- .entry .contents .userpic {
- right: -1.1em;
- }
-
- .comment .contents .userpic {
- right: -2.5em;
+ .contents .userpic {
+ right: -40px;
}

.entry .header,
.comment .header {
- padding-right: 95px;
+ margin-right: 2em;
}

- .has-userpic .poster {
- margin-right: 80px;
+ .entry .header {
+ padding-right: $entry_spacing;
+ }
+ .comment .header {
+ padding-right: $comment_spacing;
+ }
+
+ .has-userpic .entry .poster {
+ margin-right: $entry_spacing;
+ }
+ .has-userpic .comment .poster {
+ margin-right: $comment_spacing;
}

.two-columns-left #primary > .inner:first-child,
@@ -660,25 +686,18 @@ h2#pagetitle {
}

.contents .userpic {
- height: 100px;
position: absolute;
text-align: center;
- top: -.7em;
- width: 100px;
+ top: -10px;
}

.no-userpic .userpic {
display: none;
}

- .comment .contents .userpic {
- top: -1.5em;
- }
-
- .entry .contents .userpic img,
- .comment .contents .userpic {
+ .contents .userpic img {
background-color: $*color_entry_userpic_border;
- padding: .7em;
+ padding: 10px;
box-shadow: .067em .067em .2em $*color_shadow;
-moz-box-shadow: .067em .067em .2em $*color_shadow;
-webkit-box-shadow: .067em .067em .2em $*color_shadow;
@@ -698,7 +717,7 @@ h2#pagetitle {
}

.has-userpic .comment .poster {
- margin-bottom: 32px;
+ margin-bottom: 40px;
}

.entry .poster:before {
@@ -722,7 +741,10 @@ h2#pagetitle {
/* Must be after userpic_css */

.no-userpic .header {
+ margin-left: 0;
+ margin-right: 0;
padding-left: 0;
+ padding-right: 0;
}

.poster.empty {
diff -r 854cd299a2b5 -r 02abc4b6f22f bin/upgrading/s2layers/practicality/layout.s2
--- a/bin/upgrading/s2layers/practicality/layout.s2 Mon Apr 18 13:37:19 2011 +0800
+++ b/bin/upgrading/s2layers/practicality/layout.s2 Mon Apr 18 13:51:49 2011 +0800
@@ -126,6 +126,16 @@ function print_stylesheet () {
var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units);
var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units);

+ var string entry_header_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_header_margin = "135px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_header_margin = "110px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_header_margin = "85px"; }
+
+ var string comment_header_margin = "";
+ if ( $*comment_userpic_style == "" ) { $comment_header_margin = "135px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_header_margin = "110px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_header_margin = "85px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
@@ -135,8 +145,13 @@ function print_stylesheet () {
}
.has-userpic div.entry .header,
.has-userpic div.comment .header {
- margin-left: 135px;
text-align: right;
+ }
+ .has-userpic div.entry .header {
+ margin-left: $entry_header_margin;
+ }
+ .has-userpic div.comment .header {
+ margin-left: $comment_header_margin;
}
""";
}
@@ -146,9 +161,11 @@ function print_stylesheet () {
.has-userpic div.comment div.userpic {
float: right;
}
- .has-userpic div.entry .header,
+ .has-userpic div.entry .header {
+ margin-right: $entry_header_margin;
+ }
.has-userpic div.comment .header {
- margin-right: 135px;
+ margin-right: $comment_header_margin;
}
""";
}
diff -r 854cd299a2b5 -r 02abc4b6f22f bin/upgrading/s2layers/refriedtablet/layout.s2
--- a/bin/upgrading/s2layers/refriedtablet/layout.s2 Mon Apr 18 13:37:19 2011 +0800
+++ b/bin/upgrading/s2layers/refriedtablet/layout.s2 Mon Apr 18 13:51:49 2011 +0800
@@ -115,12 +115,17 @@ function print_stylesheet () {
var string page_link_hover_colors = generate_color_css($*color_page_link_hover, new Color, new Color);
var string page_link_visited_colors = generate_color_css($*color_page_link_visited, new Color, new Color);

+ var string entry_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_margin = "105px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_margin = "80px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_margin = "55px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- left: 105px;
- margin-right: 105px;
+ left: $entry_margin;
+ margin-right: $entry_margin;
}
.entry .inner .userpic {
float: left;
@@ -133,8 +138,8 @@ function print_stylesheet () {
elseif ($*userpics_position == "right") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- right: 105px;
- margin-left: 105px;
+ right: $entry_margin;
+ margin-left: $entry_margin;
}
.entry .inner .userpic {
float: right;
diff -r 854cd299a2b5 -r 02abc4b6f22f bin/upgrading/s2layers/refriedtablet/themes.s2
--- a/bin/upgrading/s2layers/refriedtablet/themes.s2 Mon Apr 18 13:37:19 2011 +0800
+++ b/bin/upgrading/s2layers/refriedtablet/themes.s2 Mon Apr 18 13:51:49 2011 +0800
@@ -323,20 +323,26 @@ set color_module_title_background = "#fd
set color_module_title_background = "#fdfdfd";

function Page::print_theme_stylesheet() {
+
+ var string entry_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_margin = "120px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_margin = "100px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_margin = "70px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- left: 120px;
- margin-right: 120px;
+ left: $entry_margin;
+ margin-right: $entry_margin;
}
""";
}
elseif ($*userpics_position == "right") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- right: 120px;
- margin-left: 120px;
+ right: $entry_margin;
+ margin-left: $entry_margin;
}
""";
}
@@ -400,20 +406,25 @@ set color_module_title = "#e23a1f";
set color_module_title = "#e23a1f";

function Page::print_theme_stylesheet() {
+ var string entry_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_margin = "120px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_margin = "100px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_margin = "70px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- left: 120px;
- margin-right: 120px;
+ left: $entry_margin;
+ margin-right: $entry_margin;
}
""";
}
elseif ($*userpics_position == "right") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- right: 120px;
- margin-left: 120px;
+ right: $entry_margin;
+ margin-left: $entry_margin;
}
""";
}
@@ -671,20 +682,25 @@ set color_module_title = "#0a99aa";
set color_module_title = "#0a99aa";

function Page::print_theme_stylesheet() {
+ var string entry_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_margin = "120px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_margin = "100px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_margin = "70px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- left: 120px;
- margin-right: 120px;
+ left: $entry_margin;
+ margin-right: $entry_margin;
}
""";
}
elseif ($*userpics_position == "right") {
$userpic_css = """
.has-userpic .entry .header, .has-userpic .entry .poster {
- right: 120px;
- margin-left: 120px;
+ right: $entry_margin;
+ margin-left: $entry_margin;
}
""";
}
diff -r 854cd299a2b5 -r 02abc4b6f22f bin/upgrading/s2layers/steppingstones/themes.s2
--- a/bin/upgrading/s2layers/steppingstones/themes.s2 Mon Apr 18 13:37:19 2011 +0800
+++ b/bin/upgrading/s2layers/steppingstones/themes.s2 Mon Apr 18 13:51:49 2011 +0800
@@ -162,19 +162,25 @@ set color_module_title = "#fff";
set color_module_title = "#fff";

function Page::print_theme_stylesheet () {
+
+ var string entry_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_margin = "110px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_margin = "85px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_margin = "60px"; }
+
var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
.entry .header { padding-left: 0; }
.entry .contents .userpic { left: -1em; }
- .entry-poster, .entry-content, .entry .metadata { margin-left: 110px; }
+ .entry-poster, .entry-content, .entry .metadata { margin-left: $entry_margin; }
""";
}
elseif ($*userpics_position == "right") {
$userpic_css = """
.entry .header { padding-right: 0; }
.entry .contents .userpic { right: -1em; }
- .entry-poster, .entry-content, .entry .metadata { margin-right: 110px; }
+ .entry-poster, .entry-content, .entry .metadata { margin-right: $entry_margin; }
""";
}
"""
@@ -238,7 +244,6 @@ function Page::print_theme_stylesheet ()
height: 100%;
padding-top: 2px;
top: 0;
- width: 110px;
}

.entry .contents .userpic a {

Dreamwidth Changelog

2011-04-19 04:08:37 UTC

Permalink

Add option to styles which don't have them. Tweak margins and other CSS as necessary. Rename property to be more consistent with the naming scheme for other properties.

Patch by ninetydegrees.

diffs (414 lines):

diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/bases/layout.s2
--- a/bin/upgrading/s2layers/bases/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/bases/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -17,6 +17,7 @@ propgroup presentation {
property use use_journalstyle_entry_page;
property use layout_type;
property use tags_page_type;
+ property use userpics_style_group;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;
diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/blanket/layout.s2
--- a/bin/upgrading/s2layers/blanket/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/blanket/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -17,6 +17,7 @@ propgroup presentation {
property use use_journalstyle_entry_page;
property use layout_type;
property use tags_page_type;
+ property use userpics_style_group;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;
@@ -29,6 +30,8 @@ propgroup presentation {
}

set layout_type = "one-column";
+set entry_userpic_style= "small";
+set comment_userpic_style= "small";
set use_custom_friend_colors = false;
set custom_foreground_element = "userpic_border";
set custom_background_element = "userpic_background";
@@ -356,8 +359,6 @@ h3.entry-title a { $entry_title_colors }
.userpic { display: block; }

.userpic img {
- height: auto;
- max-width: 80px;
padding: 5px;
$userpic_colors
}
diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/brittle/layout.s2
--- a/bin/upgrading/s2layers/brittle/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/brittle/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -16,6 +16,7 @@ propgroup presentation {
property use layout_type;
property use tags_page_type;
property use sidebar_width;
+ property use userpics_style_group;
property string entryicons_position {
des = "Place icons on the same side or opposite the sidebar";
values = "same|Same side as sidebar|opposite|Opposite the sidebar";
@@ -32,6 +33,8 @@ propgroup presentation {

set sidebar_width = "15em";
set layout_type = "two-columns-right";
+set entry_userpic_style= "small";
+set comment_userpic_style= "small";
set entryicons_position = "opposite";
set use_custom_friend_colors = false;
set custom_foreground_element = "userpic_border";
@@ -315,17 +318,29 @@ function Page::print_default_stylesheet(
var Color blockquote_text = $*color_entry_text -> lighter(10);
var Color blockquote_background = $*color_entry_background -> darker(10);

+ var string entry_userpic_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_userpic_margin = "130px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_userpic_margin = "105px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_userpic_margin = "80px"; }
+
+ var string comment_userpic_margin = "";
+ if ( $*comment_userpic_style == "" ) { $comment_userpic_margin = "140px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_userpic_margin = "115px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_userpic_margin = "90px"; }
+
var string entryicon_css = "";
if ($*entryicons_position == "opposite") {
$entryicon_css = """
div.entry div.userpic,
div.comment div.userpic {
float: $sidebar_position_opposite;
- margin-$sidebar_position_opposite: -100px;
text-align: $sidebar_position;
}
+ div.entry div.userpic {
+ margin-$sidebar_position_opposite: -$entry_userpic_margin;
+ }
div.comment div.userpic {
- margin-$sidebar_position_opposite: -110px;
+ margin-$sidebar_position_opposite: -$comment_userpic_margin;
}
""";
}
@@ -334,15 +349,17 @@ function Page::print_default_stylesheet(
div.entry div.userpic,
div.comment div.userpic {
float: $sidebar_position;
- margin-$sidebar_position: -100px;
text-align: $sidebar_position;
}
+ div.entry div.userpic{
+ margin-$sidebar_position: -$entry_userpic_margin;
+ }
div.comment div.userpic {
- margin-$sidebar_position: -110px;
+ margin-$sidebar_position: -$comment_userpic_margin;
}
#secondary {
- margin-$sidebar_position_opposite: 100px;
- }
+ margin-$sidebar_position_opposite: $entry_userpic_margin;
+ }
""";
}

@@ -492,14 +509,10 @@ h3.entry-title a { color: $*color_entry_

div.entry div.userpic {
display: block;
- height: auto;
margin: 0;
- width: 80px;
}

div.entry div.userpic img {
- max-width: 70px;
- height: auto;
border: 5px solid $*color_navigation_module_background;
}

@@ -717,14 +730,10 @@ textarea.textbox { width: 90%!important

div.comment div.userpic {
display: block;
- height: auto;
margin: 0;
- width: 80px;
}

div.comment div.userpic img {
- max-width: 70px;
- height: auto;
border: 5px solid $*color_navigation_module_background;
}

diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/core2.s2
--- a/bin/upgrading/s2layers/core2.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/core2.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -1292,24 +1292,23 @@ property bool tags_aware {
noui = 1;
}

-property string[] userpic_style_group {
+property string[] userpics_style_group {
des = "Select the size of icons";
grouptype = "datetime";
}
-set userpic_style_group = ["entry_userpic_style", "comment_userpic_style"];
+set userpics_style_group = ["entry_userpic_style", "comment_userpic_style"];
property string entry_userpic_style {
- des = "In entries";
- doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
- doc_flags = "[construct]";
- values = "|Full|small|Small|smaller|Smaller";
- grouped = 1;
-}
-
+ des = "In entries";
+ doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
+ doc_flags = "[construct]";
+ values = "|Full|small|Small|smaller|Smaller";
+ grouped = 1;
+}
property string comment_userpic_style {
- des = "In comments";
- doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
- doc_flags = "[construct]";
- values = "|Full|small|Small|smaller|Smaller";
+ des = "In comments";
+ doc = "Either '' for 100%, 'small' for 75% and 'smaller' for 50%";
+ doc_flags = "[construct]";
+ values = "|Full|small|Small|smaller|Smaller";
grouped = 1;
}

diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/core2base/layout.s2
--- a/bin/upgrading/s2layers/core2base/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/core2base/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -14,7 +14,7 @@ propgroup presentation {
property use tags_page_type;
property use sidebar_width;
property use sidebar_width_doubled;
- property use userpic_style_group;
+ property use userpics_style_group;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;
diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/drifting/layout.s2
--- a/bin/upgrading/s2layers/drifting/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/drifting/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -27,6 +27,7 @@ propgroup presentation
property use num_items_recent;
property use num_items_reading;
property use use_journalstyle_entry_page;
+ property use userpics_style_group;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;
diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/easyread/layout.s2
--- a/bin/upgrading/s2layers/easyread/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/easyread/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -17,6 +17,7 @@ propgroup presentation {
property use use_journalstyle_entry_page;
property use layout_type;
property use tags_page_type;
+ property use userpics_style_group;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;
@@ -304,17 +305,37 @@ function Page::print_default_stylesheet
var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units);
var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units);

-var string entrytitle_padding = $*use_custom_friend_colors ? "padding: .2em;" : "";
+ var string entry_contentsfooter_shift = "";
+ if ( $*entry_userpic_style == "" ) { $entry_contentsfooter_shift = "84px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_contentsfooter_shift = "59px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_contentsfooter_shift = "34px"; }
+
+ var string entry_header_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_header_margin = "110px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_header_margin = "85px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_header_margin = "60px"; }
+
+ var string comment_header_margin = "";
+ if ( $*comment_userpic_style == "" ) { $comment_header_margin = "110px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_header_margin = "85px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_header_margin = "60px"; }
+
+ var string entrytitle_padding = $*use_custom_friend_colors ? "padding: .2em;" : "";

var string userpic_css = "";
if ($*userpics_position == "left") {
$userpic_css = """
- #primary .header {
- margin-left: 110px;
+ .has-userpic .entry .header {
+ margin-left: $entry_header_margin;
}
+ .has-userpic .comment .header {
+ margin-left: $comment_header_margin;
+ }
+
.has-userpic .entry .poster {
- margin-left: 110px;
+ margin-left: $entry_header_margin;
}
+
#comments .userpic a img, .comment-wrapper .userpic a img {
float: left;
margin-right: 10px;
@@ -326,15 +347,21 @@ var string entrytitle_padding = $*use_cu
}
elseif ($*userpics_position == "right") {
$userpic_css = """
- #primary .header {
- margin-right: 110px;
+ .has-userpic .entry .header {
+ margin-right: $entry_header_margin;
}
+ .has-userpic .comment .header {
+ margin-right: $comment_header_margin;
+ }
+
.has-userpic .entry .poster {
- margin-right: 110px;
+ margin-right: $entry_header_margin;
}
+
.has-userpic .entry .contents .userpic {
- margin-left: auto;
+ text-align: right;
}
+
#comments .userpic a img, .comment-wrapper .userpic a img {
float: right;
margin-left: 10px;
@@ -578,13 +605,7 @@ h2.module-header a {

.entry .contents .userpic a img {
border: 0;
- margin-right: 10px;
margin-bottom: 10px;
-}
-
-.has-userpic .entry .contents .userpic {
- height: 100px;
- width: 100px;
}

.has-userpic .entry .poster {
@@ -596,13 +617,13 @@ h2.module-header a {
/* Pushed down in order to accomodate the header being next to the icon. */
.entry .contents {
position: relative;
- bottom: 84px;
+ bottom: $entry_contentsfooter_shift;
}

/* Single post metadata links location/etc. */
.entry .footer {
position: relative;
- bottom: 84px;
+ bottom: $entry_contentsfooter_shift;
}

/* Entry/Comment links */
diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/negatives/layout.s2
--- a/bin/upgrading/s2layers/negatives/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/negatives/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -17,6 +17,7 @@ propgroup presentation {
property use use_journalstyle_entry_page;
property use layout_type;
property use tags_page_type;
+ property use userpics_style_group;
property use userpics_position;
property use entry_metadata_position;
property use use_custom_friend_colors;
diff -r 02abc4b6f22f -r 16e82743fcfb bin/upgrading/s2layers/skittlishdreams/layout.s2
--- a/bin/upgrading/s2layers/skittlishdreams/layout.s2 Mon Apr 18 13:51:49 2011 +0800
+++ b/bin/upgrading/s2layers/skittlishdreams/layout.s2 Tue Apr 19 12:07:58 2011 +0800
@@ -28,6 +28,7 @@ propgroup presentation {
property use layout_type;
property use sidebar_width;
property use tags_page_type;
+ property use userpics_style_group;
property string entryicons_position {
des = "Place icons on the same side or opposite the sidebar";
values = "same|Same side as sidebar|opposite|Opposite the sidebar";
@@ -464,13 +465,37 @@ function Page::print_default_stylesheet

var string navigation_colors = generate_color_css($*color_page_details_text, $*color_entry_background, new Color);

+
+ var string entry_userpic_shift = "";
+ if ( $*entry_userpic_style == "" ) { $entry_userpic_shift = "-66px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_userpic_shift = "-50px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_userpic_shift = "-33px"; }
+
+ var string comment_userpic_shift = "";
+ if ( $*comment_userpic_style == "" ) { $comment_userpic_shift = "-66px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_userpic_shift = "-50px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_userpic_shift = "-33px"; }
+
+
+ var string entry_title_margin = "";
+ if ( $*entry_userpic_style == "" ) { $entry_title_margin = "120px"; }
+ elseif ( $*entry_userpic_style == "small" ) { $entry_title_margin = "95px"; }
+ elseif ( $*entry_userpic_style == "smaller" ) { $entry_title_margin = "70px"; }
+
+ var string comment_title_margin = "";
+ if ( $*comment_userpic_style == "" ) { $comment_title_margin = "120px"; }
+ elseif ( $*comment_userpic_style == "small" ) { $comment_title_margin = "95px"; }
+ elseif ( $*comment_userpic_style == "smaller" ) { $comment_title_margin = "70px"; }
+
var string entryicon_css = "";
if ($*entryicons_position == "same") {
$entryicon_css = """
- .two-columns-right .has-userpic .entry-title,
- .two-columns-right .has-userpic .comment-title { margin: 0 120px .5em 0; }
- .two-columns-left .has-userpic .entry-title,
- .two-columns-left .has-userpic .comment-title { margin: 0 0 .5em 120px; }
+ .two-columns-right .has-userpic .entry-title { margin: 0 $entry_title_margin .5em 0; }
+ .two-columns-right .has-userpic .comment-title { margin: 0 $comment_title_margin .5em 0; }
+
+ .two-columns-left .has-userpic .entry-title { margin: 0 0 .5em $entry_title_margin; }
+ .two-columns-left .has-userpic .comment-title { margin: 0 0 .5em $comment_title_margin; }
+
.two-columns-right .entry .userpic a,
.two-columns-right .comment .userpic a { right: 10px; left: auto; }
.two-columns-left .entry .userpic a,
@@ -479,10 +504,12 @@ function Page::print_default_stylesheet
}
elseif ($*entryicons_position == "opposite") {
$entryicon_css = """
- .two-columns-right .has-userpic .entry-title,
- .two-columns-right .has-userpic .comment-title { margin: 0 0 .5em 120px; }
- .two-columns-left .has-userpic .entry-title,
- .two-columns-left .has-userpic .comment-title { margin: 0 120px .5em 0; }
+ .two-columns-right .has-userpic .entry-title { margin: 0 0 .5em $entry_title_margin; }
+ .two-columns-right .has-userpic .comment-title { margin: 0 0 .5em $comment_title_margin; }
+
+ .two-columns-left .has-userpic .entry-title { margin: 0 $entry_title_margin .5em 0; }
+ .two-columns-left .has-userpic .comment-title { margin: 0 $comment_title_margin .5em 0; }
+
.two-columns-right .entry .userpic a,
.two-columns-right .comment .userpic a { left: 10px; right: auto; }
.two-columns-left .entry .userpic a,
@@ -629,7 +656,15 @@ h1, h2, h3, h4 {font-weight: 700; font-v
.entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {border: solid 1px $*color_entry_title_border_alt; $entry_title_colors }

.userpic a {background-color: $*color_page_border; border: 0px; }
-.entry .userpic a, .comment .userpic a {background-color: $*color_entry_background; border: solid 2px $*color_page_border; display: block; position: absolute; top: -66px; padding: 5px; }
+.entry .userpic a, .comment .userpic a {background-color: $*color_entry_background; border: solid 2px $*color_page_border; display: block; position: absolute; padding: 5px; }
+
+.entry .userpic a {
+ top: $entry_userpic_shift;
+ }
+
+.comment .userpic a {
+ top: $comment_userpic_shift;
+ }

.entry .userpic img, .comment .userpic img {border: none; }
.no-userpic .comment {margin-top: 20px; }

Dreamwidth Changelog

2011-04-19 07:29:13 UTC

Permalink

Add options to styles which have a "no icon" background image.

Patch by ninetydegrees.

diffs (377 lines):

diff -r 16e82743fcfb -r c60ea7d8e110 bin/upgrading/s2layers/crossroads/layout.s2
--- a/bin/upgrading/s2layers/crossroads/layout.s2 Tue Apr 19 12:07:58 2011 +0800
+++ b/bin/upgrading/s2layers/crossroads/layout.s2 Tue Apr 19 15:29:01 2011 +0800
@@ -115,8 +115,6 @@ function Page::print() {

function print_stylesheet () {

-var string no_icon = "$*IMGDIR/profile_icons/user.png";
-
#function to make #tag background same as #entry background
var string tagcolor = "";
if ($*color_entry_background) {
@@ -126,31 +124,69 @@ else {
$tagcolor = $*color_page_background;
}

- var string userpic_css = "";
+ var string{}{} scaling = {
+ "" => {
+ "margin" => "110px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user.png",
+ "noicon_size" => "106px"
+ },
+ "small" => {
+ "margin" => "85px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user-small.png",
+ "noicon_size" => "77px"
+ },
+ "smaller" => {
+ "margin" => "60px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user-smaller.png",
+ "noicon_size" => "51px"
+ }
+ };
+
+ var string entry_margin = $scaling{$*entry_userpic_style}{"margin"};
+ var string entry_noicon = $scaling{$*entry_userpic_style}{"noicon_img"};
+ var string entry_noicon_size = $scaling{$*entry_userpic_style}{"noicon_size"};
+
+ var string comment_margin = $scaling{$*comment_userpic_style}{"margin"};
+ var string comment_noicon = $scaling{$*comment_userpic_style}{"noicon_img"};
+ var string comment_noicon_size = $scaling{$*comment_userpic_style}{"noicon_size"};
+
+ var string userpic_css = """
+ .entry .contents .userpic { background: url("$entry_noicon") center no-repeat; }
+ .entry .contents .userpic, .entry .contents .userpic a {
+ width: $entry_noicon_size;
+ height: $entry_noicon_size;
+ }
+
+ .comment .contents .userpic { background: url("$comment_noicon") center no-repeat; }
+ .comment .contents .userpic, .comment .contents .userpic a {
+ width: $comment_noicon_size;
+ height: $comment_noicon_size;
+ }
+ """;
if ($*userpics_position == "left") {
- $userpic_css = """
+ $userpic_css = $userpic_css + """
.entry .contents .userpic,
.comment .contents .userpic { left: 0; }
- .entry .header,
- .comment-wrapper .header { margin-left: 110px; }
+ .entry .header { margin-left: $entry_margin; }
+ .comment-wrapper .header { margin-left: $comment_margin; }
.entry .header .entry-title,
.full .comment-title { margin-left: -4px; }
- .entry-wrapper .contents .entry-poster { margin: 0 0 25px 110px; }
+ .entry-wrapper .contents .entry-poster { margin: 0 0 25px $entry_margin; }
.full .comment-poster,
- .comment .poster-ip { margin-left: 110px; }
+ .comment .poster-ip { margin-left: $comment_margin; }
""";
}
elseif ($*userpics_position == "right") {
- $userpic_css = """
+ $userpic_css = $userpic_css + """
.entry .contents .userpic,
.comment .contents .userpic { right: 0; }
- .entry .header,
- .comment-wrapper .header { margin-right: 110px; }
+ .entry .header { margin-right: $entry_margin; }
+ .comment-wrapper .header { margin-right: $comment_margin; }
.entry .header .entry-title,
.full .comment-title { margin-right: -4px; }
- .entry-wrapper .contents .entry-poster { margin: 0 110px 25px 0; }
+ .entry-wrapper .contents .entry-poster { margin: 0 $entry_margin 25px 0; }
.full .comment-poster,
- .comment .poster-ip { margin-right: 110px; }
+ .comment .poster-ip { margin-right: $comment_margin; }
""";
}

@@ -269,16 +305,16 @@ body { margin: 0; }
.comment-wrapper .header { min-height: 60px; }

.entry .contents .userpic,
-.comment .contents .userpic {width: 106px;
- height: 106px;
+.comment .contents .userpic {
position: absolute;
top: 0;
- background: url("$no_icon") center no-repeat; }
+ }
+
.entry .contents .userpic a,
-.comment .contents .userpic a { display: block;
- height: 106px;
- width: 106px;
- background-color: $*color_page_background;}
+.comment .contents .userpic a {
+ display: block;
+ background-color: $*color_page_background;
+ }

.entry-wrapper .contents .entry-poster { display: block; }
.page-recent .entry-wrapper .entry-poster,
diff -r 16e82743fcfb -r c60ea7d8e110 bin/upgrading/s2layers/nouveauoleanders/layout.s2
--- a/bin/upgrading/s2layers/nouveauoleanders/layout.s2 Tue Apr 19 12:07:58 2011 +0800
+++ b/bin/upgrading/s2layers/nouveauoleanders/layout.s2 Tue Apr 19 15:29:01 2011 +0800
@@ -298,8 +298,6 @@ function print_stylesheet () {

var string comment_border_image_even = generate_background_css ($*image_comment_border_end_even_url, $*image_comment_border_end_even_repeat, $*image_comment_border_end_even_position, new Color);

- var string no_icon = generate_background_css ("$*IMGDIR/profile_icons/user.png", "no-repeat", "center", new Color);
-
var string navlinks_css = "";
if ($*module_navlinks_section == "header") {
$navlinks_css = """
@@ -341,6 +339,31 @@ function print_stylesheet () {
else {
$navlinks_css = "";
}
+
+ var string{}{} scaling = {
+ "" => {
+ "padding" => "110px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user.png",
+ "icon_wrap_size" => "102px",
+ "icon_link_size" => "100px"
+ },
+ "small" => {
+ "padding" => "85px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user-small.png",
+ "icon_wrap_size" => "77px",
+ "icon_link_size" => "75px"
+ },
+ "smaller" => {
+ "padding" => "60px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user-smaller.png",
+ "icon_wrap_size" => "52px",
+ "icon_link_size" => "50px"
+ }
+ };
+ var string comment_datetime_padding = $scaling{$*comment_userpic_style}{"padding"};
+ var string entry_icon_background = generate_background_css ($scaling{$*entry_userpic_style}{"noicon_img"}, "no-repeat", "center", new Color);
+ var string comment_icon_background = generate_background_css ($scaling{$*comment_userpic_style}{"noicon_img"}, "no-repeat", "center", new Color);
+

"""

@@ -537,16 +560,16 @@ body {
}

.entry .contents .userpic {
- $no_icon
- height: 102px;
- width: 102px;
- }
+ $entry_icon_background
+ height: $scaling{$*entry_userpic_style}{"icon_wrap_size"};
+ width: $scaling{$*entry_userpic_style}{"icon_wrap_size"};
+}

.entry .contents .userpic a {
background-color: $*color_page_background;
display: block;
- height: 100px;
- width: 100px;
+ height: $scaling{$*entry_userpic_style}{"icon_link_size"};
+ width: $scaling{$*entry_userpic_style}{"icon_link_size"};
}

.entry-wrapper-odd .contents .userpic {
@@ -748,11 +771,11 @@ ul.entry-interaction-links {
}

.comment-wrapper-odd.full .datetime {
- padding-left: 110px;
+ padding-left: $comment_datetime_padding;
}

.comment-wrapper-even.full .datetime {
- padding-right: 110px;
+ padding-right: $comment_datetime_padding;
}

.comment-wrapper-even .contents {
@@ -769,16 +792,16 @@ ul.entry-interaction-links {
}

.comment .contents .userpic {
- $no_icon
- height: 102px;
- width: 102px;
- }
+ $comment_icon_background
+ height: $scaling{$*comment_userpic_style}{"icon_wrap_size"};
+ width: $scaling{$*comment_userpic_style}{"icon_wrap_size"};
+}

.comment .contents .userpic a {
background-color: $*color_page_background;
display: block;
- height: 100px;
- width: 100px;
+ height: $scaling{$*comment_userpic_style}{"icon_link_size"};
+ width: $scaling{$*comment_userpic_style}{"icon_link_size"};
}

.comment-wrapper-odd .contents .userpic {
diff -r 16e82743fcfb -r c60ea7d8e110 bin/upgrading/s2layers/steppingstones/layout.s2
--- a/bin/upgrading/s2layers/steppingstones/layout.s2 Tue Apr 19 12:07:58 2011 +0800
+++ b/bin/upgrading/s2layers/steppingstones/layout.s2 Tue Apr 19 15:29:01 2011 +0800
@@ -15,7 +15,6 @@ set color_page_details_text = "#999";
set color_page_details_text = "#999";

function print_stylesheet() {
- var string entry_userpic_background = generate_background_css( "$*IMGDIR/profile_icons/user.png", "no-repeat", "center", $*color_entry_border );

var string header_colors = generate_color_css( $*color_page_title, $*color_header_background, new Color );
var string navigation_colors = generate_color_css( new Color, $*color_entry_background, new Color );
@@ -28,21 +27,73 @@ function print_stylesheet() {
var string footer_colors = generate_color_css( new Color, $*color_footer_background, new Color );
var string footer_link_colors = generate_color_css( $*color_page_title, new Color, new Color );

- var string userpic_css = "";
+ var string{}{} scaling = {
+ "" => {
+ "padding" => "100px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user.png",
+ "icon_wrap_size" => "110px",
+ "icon_link_size" => "102px"
+ },
+ "small" => {
+ "padding" => "75px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user-small.png",
+ "icon_wrap_size" => "85px",
+ "icon_link_size" => "77px"
+ },
+ "smaller" => {
+ "padding" => "50px",
+ "noicon_img" => "$*IMGDIR/profile_icons/user-smaller.png",
+ "icon_wrap_size" => "60px",
+ "icon_link_size" => "52px"
+ }
+ };
+
+ var string entry_header_padding = $scaling{$*entry_userpic_style}{"padding"};
+ var string entry_icon_background = generate_background_css( $scaling{$*entry_userpic_style}{"noicon_img"}, "no-repeat", "center", $*color_entry_border );
+ var string entry_icon_wrap_size = $scaling{$*entry_userpic_style}{"icon_wrap_size"};
+ var string entry_icon_link_size = $scaling{$*entry_userpic_style}{"icon_link_size"};
+
+ var string comment_icon_background = generate_background_css( $scaling{$*comment_userpic_style}{"noicon_img"}, "no-repeat", "center", $*color_entry_border );
+ var string comment_icon_wrap_size = $scaling{$*comment_userpic_style}{"icon_wrap_size"};
+ var string comment_icon_link_size = $scaling{$*comment_userpic_style}{"icon_link_size"};
+
+
+ var string userpic_css = """
+ .entry .contents .userpic { $entry_icon_background
+ width: $entry_icon_wrap_size;
+ height: $entry_icon_wrap_size;
+ }
+ .entry .contents .userpic a {
+ width: $entry_icon_link_size;
+ height: $entry_icon_link_size;
+ }
+
+ .comment .contents .userpic { $comment_icon_background
+ width: $comment_icon_wrap_size;
+ height: $comment_icon_wrap_size;
+ }
+ .comment .contents .userpic a {
+ width: $comment_icon_link_size;
+ height: $comment_icon_link_size;
+ }
+ """;
+
if ($*userpics_position == "left") {
- $userpic_css = """
+ $userpic_css = $userpic_css + """
.entry .contents .userpic { left: -1.5em; }
.comment .contents .userpic { float: left;
margin: 0 .5em .5em -1.5em; }
- .entry .header { padding-left: 100px; }
+
+ .entry .header { padding-left: $entry_header_padding; }
""";
}
elseif ($*userpics_position == "right") {
- $userpic_css = """
+ $userpic_css = $userpic_css + """
.entry .contents .userpic { right: -1.5em; }
.comment .contents .userpic { float: right;
margin: 0 -1.5em .5em .5em; }
- .entry .header { padding-right: 100px; }
+
+ .entry .header { padding-right: $entry_header_padding; }
""";
}
"""
@@ -128,18 +179,22 @@ H1, H2, H3, H4, H5 { font-weight: normal

.entry .contents { padding: .5em .5em 0 .5em; }

-.entry .contents .userpic { position: absolute;
+.entry .contents .userpic {
+ position: absolute;
+ text-align: center;
top: -3em;
- width: 110px;
- height: 110px;
- $entry_userpic_background
- text-align: center; }
-.entry .contents .userpic a { display: block;
- height: 106px;
- width: 102px;
+ }
+
+.entry .contents .userpic a {
+ display: block;
margin: auto;
- $entry_userpic_colors }
-.entry .contents .userpic img { margin-top: 5px; }
+ $entry_userpic_colors
+ }
+
+.entry .contents .userpic img {
+ margin: 5px;
+ $entry_userpic_colors
+ }

.entry-content { margin: 1em 0; }

@@ -192,15 +247,19 @@ ul.entry-interaction-links { text-align:
.comment .poster-ip { font-size: small;
color: $*color_page_details_text; }

-.comment .contents .userpic { $entry_userpic_background
- height: 110px;
- width: 110px;
- text-align: center; }
-.comment .contents .userpic a { display: block;
- height: 102px;
- width: 102px;
- $entry_userpic_colors }
-.comment .contents .userpic img { margin: 5px; }
+.comment .contents .userpic {
+ text-align: center;
+ }
+
+.comment .contents .userpic a {
+ display: block;
+ $entry_userpic_colors
+ }
+
+.comment .contents .userpic img {
+ margin: 5px;
+ $entry_userpic_colors
+ }

.comment-content { margin-top: 1em; }

diff -r 16e82743fcfb -r c60ea7d8e110 htdocs/img/profile_icons/user-small.png
Binary file htdocs/img/profile_icons/user-small.png has changed
diff -r 16e82743fcfb -r c60ea7d8e110 htdocs/img/profile_icons/user-smaller.png
Binary file htdocs/img/profile_icons/user-smaller.png has changed

Dreamwidth Changelog

2011-04-22 14:51:16 UTC

Permalink

Tweak margins to prevent them from horizontally uncentering the userpics.

Patch by fu.

diffs (12 lines):

diff -r 0e44d4e08708 -r 721f6fed8977 bin/upgrading/s2layers/steppingstones/layout.s2
--- a/bin/upgrading/s2layers/steppingstones/layout.s2 Fri Apr 22 22:11:57 2011 +0800
+++ b/bin/upgrading/s2layers/steppingstones/layout.s2 Fri Apr 22 22:50:50 2011 +0800
@@ -192,7 +192,7 @@ H1, H2, H3, H4, H5 { font-weight: normal
}

.entry .contents .userpic img {
- margin: 5px;
+ margin-top: 5px;
$entry_userpic_colors
}