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

[dw-free] Add "icon scaling" to customize options

[commit: http://hg.dwscoalition.org/dw-free/rev/c60ea7d8e110]

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

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

Patch by [personal profile] ninetydegrees.

Files modified:
  • bin/upgrading/s2layers/crossroads/layout.s2
  • bin/upgrading/s2layers/nouveauoleanders/layout.s2
  • bin/upgrading/s2layers/steppingstones/layout.s2
  • htdocs/img/profile_icons/user-small.png
  • htdocs/img/profile_icons/user-smaller.png
--------------------------------------------------------------------------------
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
--------------------------------------------------------------------------------