News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Help with a line break, please (too many icons)?

Started by Grammy, May 25, 2021, 03:06:14 PM

Previous topic - Next topic

Grammy

I'm running a test site for 2.1RC3.  I have an admin who wants me to add quite a lot of fields (Custom Profile) to his own 2.1RC3 site.  He wants the display to be "icons" and he wants them to show on Topic View.  I know that it's highly unlikely for one poster to have all the fields the admin has requested to be populated, unless he or she is obsessed with all social media, but hypothetically, if that were the case, I am wondering if I can achieve some sort of "line break" when the number of icons reaches, say 4? 

I've attached a screenshot to show you what I mean.  The more I add, they just stay on the same line and shrink and shrink (until you can't really tell what they are without hovering over them).  I still have quite a few to add!

All that condensed to ask this:  when the custom field icons are more than increments of 4, can there be a line break (or is this more complicated than a few edits?  I see this in index.css (which I'm thinking is related)?

.poster .profile .profile_icons li, .poster .im_icons li {
display: table-cell;
padding-right: 5px;
}

/* The visible stuff below the avatar. */
.user_info > li {
margin: 3px 0 0 0;
}


But I'm wondering if it'll take more than CSS to recognize where there are more than 4 .im_icons and to then create a line break?  (You see, ultimately, I'm trying to stop the icons from continuing to shrink when more are added.)

Maybe if I can just stop them from shrinking they would automatically wrap when they reach the margin?  I'm using an icon size of 16x16px.

Any help would really be appreciated.   :)

Grammy

Okay, I got out a big sledgehammer and some duct tape.  It's not perfect, so if you guys want to put lipstick on my pig, that'd be awesome.   :)

I created a custom table class in index.css.  I removed .poster .im_icons from the rule of displaying as table-cell and gave it its own rules.  I edited the Display.template.php file to echo the table structure along with the <li></li> already there.  So the Topic View does wrap, but it's all done rather clumsily. 

index.css
.poster .im_icons li{
width: 16px;
height: 16px;
display: inline-block;
}
.customprofile_table  {max-width: 140px !important;
height: auto !important;}
}
.customprofile_tbody{
display:block;
}
.customprofile_tr {
display:flex;
  flex-wrap:wrap;
}
.customprofile_td {
display:block;
  flex:1
}


Display.template.php
// Any custom fields to show as icons?
if (!empty($message['custom_fields']['icons']))
{
echo '

<table class="customprofile_table"><tbody class="customprofile_tbody"><tr class="customprofile_tr">
<td="customprofile_td">
<li class="im_icons">
<ol>';

foreach ($message['custom_fields']['icons'] as $custom)
echo '
<li class="custom ', $custom['col_name'], '">', $custom['value'], '</li>';

echo '
</ol>
</li></td></tr></tbody></table>';
}



Since I've gotten this far, I'd appreciate any clean-up you guys might offer?  Because I'm sure it's not quite right. Thanks.   :)

Advertisement: