changelog | [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

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

Flat | Top-Level Comments Only

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).

Edited 2012-02-22 09:52 (UTC)

Hm! It should be doing so; it was specifically coded to do that.

Hm! It should be doing so; it was specifically coded to do that.

If I open the Edit CSS panel with the Web Developer tool it does so maybe it's a priority/important issue.

Yeah, this is a hard one! I do remember that early on we'd managed to get vertical align to the top, but it looked very ragged and was harder to read when the text was of uneven heights (say if the person had comments or text descriptions)

How about if we put the icon at center bottom, and increase the spacing in between icons a bit?

we put the icon at center bottom

You mean the text? 'middle' does work for me.

Hm, no actually. I think that might also lead to misaligned text, and I'd like to try to keep the text aligned at bottom as much as possible. Err, try this at the very end of allpics.css, where it will override the relevant:

.icon-container {
margin-bottom: 0.8em;
}

.icon-image img {
vertical-align: bottom;
}

.icon-image {
line-height: 80px
}

It makes the keywords go above the icon in some cases. If I switch to a very big font size like 22px it doesn't solve the issue at all.

Hmmm. Can you show me a screenshot of the keyword going above the icon? (Also this is purely to solve the issue with smaller than 100px icons; I haven't tried to figure out the icons from the second column thing yet

Sure!

Here's before and here's after with keywords above the zebra icon. I also find it pretty hard to separate the info from the snake icon from the info of the icon which is below it.

Hmm, illuminating.

Uhhh, how about:

.icon-image { padding: 0.5em }
.icon-image img { vertical-align: bottom }?

It's worse. Make everything go up even more.

Yeah, I think we might need to give it more padding. Or start zebra-striping on site skinned icon pages, and use CSS classes so layout designers can zebra-stripe if they want, actually.

Hrrrm okay you mentioned vertical-align: middle, right? With my primary purpose being *not* to change the alignment of the text, how about this?

http://pastebin.com/tJ7pv0Uc

(Otherwise, I'd try vertical-align : text-top instead of middle, though I haven't checked that in IE yet)

Doesn't really change things or make them better but it makes more sense to me to use table-cell for .icon-image as well and it gets much better if you set the img alignment to bottom. What about this:

.icon-image {
display: table-cell;
line-height: 100px;
min-width: 100px;
padding: 0 .5em;
text-align: center;
}

.icon-image img {
vertical-align: bottom;
}

.icon-info {
display: table-cell;
padding: 0 .5em;
overflow: auto;
vertical-align: bottom;
width: 100%;
word-wrap: break-word;
}

or even:

.icon-image {
display: table-cell;
height: 100px;
min-width: 100px;
padding: .5em;
text-align: center;
vertical-align: bottom;
}

.icon-image img {
vertical-align: bottom;
}

.icon-info {
display: table-cell;
padding: .5em;
overflow: auto;
vertical-align: bottom;
width: 100%;
word-wrap: break-word;
}

Second one worked excellently. Have tweaked and committed, thank you!

Glad I could help! Coincidentally, this is pretty much how my style is coded. *g*

Excellent! Funny how that works out *g*

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

Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue

Re: Display Issue