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

[fu]

[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 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;
+    }
--------------------------------------------------------------------------------

Comments

Display Issue

[ninetydegrees]

With icons which are less than 100px high, keywords and such can go below the icon. If you only have keywords, it's printed between icons and don't seem to correspond to anything. Pretty confusing.


Edit: simple solution is to switch to 'vertical-align: top' and add more padding between elements but this means not keeping the same alignment as on the current page.

Also this worked for me (basically this is what I used on custom pages) but I haven't tested it in any other browser than the current version of FF:

.icon-image {
float: left;
clear: left;
margin-bottom: 1.5em;
margin-right: 1em;
min-width: 100px;
}

.icon-info {
margin-bottom: 1.5em;
margin-left: 100px;
}

Also, the page won't adapt to smaller resolutions as the icons from second column won't go below the icons from first one (don't know if that was the case before as well but maybe it's something to think about).