Replacing text by icons in Grid Extra Info and also rearranging it

[Lit]

I'm using the Grid view, and I'm finding it too cluttered, I've been trying to spread out certain things using position: absolute; but I'm starting to think I'm making a mess that way.
So, here's what I've got:

I would like to get rid of phrases such as "Views:" "Reviews:", "Comments:", etc. and replace them by icons (FontAwesome).

I would also like to separate a few of the elements and spread them around the box. Ideally, I would like something like this (very crude MSPaint):


You would have the Title, followed up by Author Name and Date nested together on top of the description. Basically grouping things pertaining the Submission item itself together.
Then you'd have the description like normal.
And at the very bottom, you'd have things related to how users interact with that submission item. Like how many views it has, replies, etc. with the Rating being the very last one and fixed to the right side. Sort of like how the Forum's "Action Bar" look:

(This might be a bit of a big one to ask about in a single post, but if you could teach me the ropes or tell me where to look I can figure out the rest)

 

[Bob]

Each Layout Type has Style Properties that let you enable/disable each data element. By default, most elements are enabled. If you want to reduce what you call "clutter", then simple edit the Showcase: Appearance Style Properties for the Grid View Layout type and disable the elements that you don't want displayed.





As for the design customizations...

Keep in mind, customizations like this are an on your own type thing. I'd highly recommend contacting Russ from Pixel Exit and have him design you a custom "Grid view" (that is what a lot of license holders do). Would save you a lot of headache and he is fair with pricing for what he designs and designs them to your exact specs. He's done quite a few customizations for Layout Types in AMS, UBS, CAS, IMS, LD, RMS, Showcase and more...

Customizing the grid view layout type can be done via editing the grid_view_layout macro in the xa_sc_item_list_macros template as well as modifying/adding LESS/CSS in the xa_sc_grid_view_layout.less template.



Hope that helps somewhat! Sorry that I can't provide a cut and paste solution for you!

 

[Lit]

If you want to reduce what you call "clutter"

I'm mainly referring to reducing "visual clutter", as in, replacing text by icons, as it's a little more modern an easier on the eyes that way in my opinion.
Took me the whole day but I figured it out, btw:



I guess a suggestion for future updates: a handy "replace text with icons" option would go a long way.
I'm not sure if it's the best approach, but here's what I did if you (or anyone facing the same problem in the future) are curious:

Spoiler: My solution

In the xa_sc_item_list_macros template in:

    <ul class="listInline listInline--bullet">

I went around replacing the {{phrase}} with <xf:fa> tags.

So things such as:

<li>
                            <span class="u-muted">{{ phrase('views') }}:
                            {$item.view_count|number_short} </span>
                        </li>

Became:

<li>
                            <span class="u-muted"><xf:fa icon="fas fa-eye"/>&nbsp;
                                {$item.view_count|number_short} </span>
                          
                        </li>

Not sure if that's the best way of doing it, but it got the job done.
Then I placed everything inside a new div called extraStuff and also reordered the code related to the ratingStars to be at the very end of the div.

Spoiler

<ul class="interactionBar">
                    <div class="extraStuff">
                    <xf:if is="$item.view_count && $extras.view_count">
                        <li>
                            <span class="u-muted"><xf:fa icon="fas fa-eye"/>&nbsp;
                                {$item.view_count|number_short} </span>
                           
                        </li>
                    </xf:if>
                    <xf:if is="$item.reaction_score && $extras.reaction_score">
                        <li>
                            <span class="u-muted"><xf:fa icon="fas fa-thumbs-up"/>&nbsp;
                            {$item.reaction_score|number_short}</span>
                        </li>
                    </xf:if>
                    <xf:if is="$item.update_count && $extras.update_count">
                        <li>
                            <a href="{{ link('showcase/updates', $item) }}" class="u-muted"><span>{{ phrase('xa_sc_updates') }}:</span> {$item.update_count|number_short}</a>
                        </li>
                    </xf:if>
                    <xf:if is="$item.review_count && $extras.review_count">
                        <li>
                            <a href="{{ link('showcase/reviews', $item) }}" class="u-muted"><span><xf:fa icon="fa-pen"/>&nbsp;</span> {$item.review_count|number_short}</a>
                        </li>
                    </xf:if>
                        <xf:if is="$item.comment_count && $extras.comment_count">
                        <li>
                            <a href="{{ link('showcase', $item) }}#comments" class="u-muted"><span><xf:fa icon="fas fa-comment"/>&nbsp;</span> {$item.comment_count|number_short}</a>
                        </li>
                    </xf:if>

                        <xf:if is="$item.author_rating && $item.Category.allow_author_rating && $extras.author_rating">
                            <li id="rating">
                                <xf:macro id="rating_macros::stars"
                                          arg-rating="{$item.author_rating}"
                                          arg-class="ratingStars--scAuthorRating" />
                            </li>
                        </xf:if>
                       
                    <xf:if is="$item.rating_avg AND $item.rating_count && $extras.rating_avg">
                        <li id="rating">
                            <xf:macro id="rating_macros::stars"
                                arg-rating="{$item.rating_avg}"
                                arg-class="" />
                        </li>
                    </xf:if>
                   
                    </div>
                </ul>

One thing to note is that I gave the RatingStar an id of "rating" so I could reference it in the CSS, because I couldn't figure out an easier way of aliging only the stars to the right.

In EXTRA.less, I created the styling:

.interactionBar {
    list-style-type: none;
    padding: @xf-paddingMedium 10px;
    margin: 0;
}

.extraStuff {
    font-size: 1.3rem;
    display: flex;
    text-wrap: nowrap;
    gap: 10px;
    width: 100%;
    padding: 0;
   
    li#rating{
        display:flex;
        width:100%;
        justify-content: end;
        font-size: 1rem;
    }
   
}

And last, but not least. I CTRL+X everything and placed it in between the two </div> at the very end of the macro (couple of lines up from the </xf:macro>).


Now I just have to style certain things a little further and figure out a better icon for the Reviews.

The only thing I couldn't figure out just yet is how to add an alt text to the icons. I also got scared of toying around too much with the moderation button to add it to the list. So I guess it's fine to leave it floating around like that, only mods that will get to see it anyways .

Would save you a lot of headache and he is fair with pricing for what he designs

Thanks for the suggestion but you gave me all the direction I needed. I'm having a good time playing around and figuring things out on my own, I'm not a programmer so it makes me feel smart when I get things looking nice. I wasn't really asking for a copy and paste answer either, just more information like where to look and all that, regardless, thank you very much.