Listings: Styling of tags

  • Hi there,


    I'm using "Listings" to display list categories / items. Therefore I have created the following custom template:


    Here you can see the output of the code above:

    https://unforced.de/salesforce-resources


    Can someone tell me how to style the tags so that they look like tags? ;)


    I have found those two classes within the listings documentation:


    itemTagsContainer uk-margin-top uk-text-bold uk-text-primary
    itemTag uk-badge


    Any further suggestions / recommendations?


    Thanks in advance,

    Ben

  • You don't need a float left, just place them inside a paragraph and wrap the tags with a span. For further styling checkout the link below.

    HTML
    1. <p>
    2.     <span v-for="tag in item.tags" class="uk-badge">{{ tag.title }}</span>
    3. </p>

    https://getuikit.com/v2/docs/badge.html

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • And some question to your website: why are you using style tags and a lot of float element, if you just could take uikit classes which will fullfil the same purpose and will provide better readability & adaptability.


    Also think about the float element, there is no line-break on smaller devices (e.g. mobilde phones).


    e.g. Work experience


    Instead of the div with float just use a paragraph. For text styling consider:

    https://getuikit.com/v2/docs/base.html#headings

    https://getuikit.com/v2/docs/text.html


    Short example ;)

    Code
    1. <div class="uk-accordion-content uk-active">
    2.     <span class="uk-text-small">2007/02 - 2010/12</span>
    3.     <h2 class="uk-margin-remove">Project Manager</h2>
    4. <span class="uk-text-muted">cwerk GmbH, Munich</span>
    5.     <ul>
    6.     <li>Online presences and e-stores</li>
    7.     <li>Web applications</li>
    8.     <li>Project and key account management.</li>
    9.     </ul>
    10. </div>


    No offense, I am just wondering about this hardcoding :)

    The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • You are absolutely right. Unfortunately, I created those structure / classes before dealing with UIkit more in detail. Will optimize the code as soon as possible.


    Just out of curiosity: how exactly would you refactor the following source code (see https://unforced.de/work-experience) to get a similar / the same result?


  • The LORD is my strength and my shield; in him my heart trusts, and I am helped; my heart exults, and with my song I give thanks to him. Psalm 28,7

  • Highly appreciated. This was already on my agenda, especially because of the mobile view.


    Until now, I have adjusted the first page:

    https://unforced.de/work-experience


    More to come. Thanks once again.