fu: Close-up of Fu, bringing a scoop of water to her mouth (Default)
fu ([personal profile] fu) wrote in [site community profile] changelog2012-02-14 05:41 pm

[dw-free] Cleanup tables on site-styled /icons

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

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

Use CSS instead of tables to align and space out /icons.

Patch by [personal profile] momijizukamori.

Files modified:
  • bin/upgrading/s2layers/siteviews/layout.s2
  • htdocs/stc/allpics.css
--------------------------------------------------------------------------------
diff -r f18a58c7d31f -r f24d2e4438a9 bin/upgrading/s2layers/siteviews/layout.s2
--- a/bin/upgrading/s2layers/siteviews/layout.s2	Tue Feb 14 22:15:12 2012 +0800
+++ b/bin/upgrading/s2layers/siteviews/layout.s2	Wed Feb 15 01:40:32 2012 +0800
@@ -83,10 +83,12 @@
 set text_icons_inactive = "[Inactive]";
 
 function IconsPage::print_title() {
+    # Do not actually *print* anything here, or in overridden instances, just call set_content with windowtitle or title as appropriate. 
     $*SITEVIEWS->set_content("title",$this->view_title());
 }
 
 function IconsPage::print_default_stylesheet() {
+    # Do not actually *print* any stylesheets here, but you can $*SITEVIEWS->need_res(...); here to pull in anything.
     $*SITEVIEWS->need_res( "stc/allpics.css" );
 }
 
@@ -120,68 +122,33 @@
             }
             if ( (++$sort_ct) < size $.sort_keyseq) { print $*text_default_separator; }
         }
-        """</p><table class='allpics'>""";
-        foreach var Icon i ($.icons) {
+        
+        """<div class="icon-container">"""; 
+                foreach var Icon i ($.icons) {
             $piccount++;
 
             if ($piccount % 2 == 1) {
-                """<tr>""";
+                """<div class="icon-row">""";
             }
 
             $i->print();
 
             if ($piccount % 2 == 1) {
-                """<td class='blank'></td>""";
+                
             } else {
-                """</tr>\n""";
+                """</div>""";
             }
         }
         if ($piccount) {
             if ($piccount % 2 == 1) {
             }
-            """</table>""";
+            
         } else {
         }
+        """</div>""";
 
         $.pages->print({ "anchor" => "" });
+        """<div class="clear-floats"></div>""";
     }
 }
 
-function Icon::print() {
-    """<td class='pic'>""";
-    
-    """<a href="$.link_url">"""; $.image->print(); """</a>""";
-
-    """</td><td class='desc'>""";
-
-    if ( $.default ) {
-        print safe """<u>$*text_icons_default</u><br/>""";
-    }
-
-    if ( not $.active ) {
-        print safe """<em>$*text_icons_inactive</em><br/>""";
-    }
-
-    if ( size $.keywords ) {
-        var int count = 0;
-        print safe """<strong>$*text_icons_keywords</strong> """;
-        foreach var string kw ( $.keywords ) {
-            $count++;
-            print safe $kw;
-            if ( $count < size $.keywords ) {
-                print safe $*text_icons_keyword_sep;
-            }
-        }
-        """<br/>""";
-    }
-
-    if ( $.comment ) {
-        print safe """<strong>$*text_icons_comment</strong> $.comment<br/>""";
-    }
-
-    if ( $.description ) {
-        print safe """<strong>$*text_icons_description</strong> $.description<br/>""";
-    }
-
-    """</td>""";
-}
diff -r f18a58c7d31f -r f24d2e4438a9 htdocs/stc/allpics.css
--- a/htdocs/stc/allpics.css	Tue Feb 14 22:15:12 2012 +0800
+++ b/htdocs/stc/allpics.css	Wed Feb 15 01:40:32 2012 +0800
@@ -1,18 +1,59 @@
 /* allpics styling */
 
-table.allpics {
+#content {
+    overflow: visible !important;
+    }
+
+.icon-container {
     margin-left: 50px;
+    min-width: 350px;
+    z-index:10;
 }
 
-.allpics td {
+.icon-image {
+    float: left;
+    width: 100px;
+    height: 100px;
+    line-height: 100px;
+    text-align: center;
+    padding: 0.2em 0.5em;
+    }
+
+.icon-image img {
+    
+    }
+
+.icon-info {
+    padding: 0.2em 0.5em;
+    overflow:auto;
     vertical-align: bottom;
-}
+    word-wrap: break-word;
+    display: table-cell;
+    width:100%;
+    }
 
-.allpics .userpic-img {
-    margin-right: 1em;
-    margin-top: 15px;
-}
+.icon {
+    width:50%;
+    float: left;
+    vertical-align: bottom;
+    min-width: 350px;
+    display:table;
+    }
 
-.allpics blank {
-    width: 50px;
-}
+.label, .comment-text, .description-text {
+    font-weight: bold;
+    }
+
+.default {
+    text-decoration: underline;
+    font-weight:normal;
+    }
+
+.keywords li, .keywords ul {
+    display:inline;
+    margin: 0;
+    }
+
+.icon-row {
+    clear:both;
+    }
--------------------------------------------------------------------------------
ninetydegrees: Art: self-portrait (Default)

Re: Display Issue

[personal profile] ninetydegrees 2012-02-22 12:20 pm (UTC)(link)
It's worse. Make everything go up even more.