UHasselt Component Library

FeedMessage 

<div class='feed-message'>
    <div class='feed-message-header'>
        <div class='feed-message-header-avatar-author'>
            <div class="avatar avatar-red feed-message-header-avatar">
                <span>ET</span>
            </div>

            <span class='feed-message-header-author'>
                Albert Verscheuven
            </span>
        </div>

        <span class='feed-message-header-time'>
            15u45
        </span>

        <span class="tag tag-red-round tag-sm">
            Populair

        </span>

    </div>

    <div class='feed-message-body'>
        <h3 class="heading feed-message-body-title">
            Titel van bericht
        </h3>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.
        </p>
    </div>

    <div class='feed-message-footer'>
        <span class='feed-message-footer-col feed-message-footer-like'>
            <div class='item-toggle'>
                <input class='item-toggle-input' type='checkbox' id='like' name='like' value='like' />
                <label for='like' class='icon-checked'>
                    <span class="icon fas fa-thumbs-up   " aria-hidden="true"></span>

                    <span class="label-text">Like</span>
                </label>

                <label for='like' class='icon-unchecked'>
                    <span class="icon fal fa-thumbs-up   " aria-hidden="true"></span>

                    <span class="label-text">Like</span>
                </label>
            </div>
        </span>

        <span class='feed-message-footer-col feed-message-footer-react'>
            <button class="link link-secondary" aria-label="" title="Reageer">
                <span class="icon fas fa-comment-alt-lines   " aria-hidden="true"></span>
                <span class="text">Reageer</span>

            </button>

        </span>

        <span class='feed-message-footer-col feed-message-footer-reactions'>
            <button class="link link-secondary" aria-label="" title="12 reacties">

                <span class="text">12 reacties</span>

            </button>

        </span>
    </div>
</div>
 
<div class='feed-message'>
    <div class='feed-message-header'>
        <div class='feed-message-header-avatar-author'>
            {{render '@avatar' avatar}}

            <span class='feed-message-header-author'>
                {{author}}
            </span>
        </div>

        {{#if time}}
            <span class='feed-message-header-time'>
                {{time}}
            </span>
        {{/if}}

        {{#if tag}}
            {{render '@tag' tag}}
        {{/if}}
    </div>

    <div class='feed-message-body'>
        {{render '@heading' title}}

        <p>
            {{text}}
        </p>
    </div>

    <div class='feed-message-footer'>
        <span class='feed-message-footer-col feed-message-footer-like'>
            {{render '@item-toggle' like}}
        </span>

        <span class='feed-message-footer-col feed-message-footer-react'>
            {{render '@link' react}}
        </span>

        <span class='feed-message-footer-col feed-message-footer-reactions'>
            {{render '@link' reactions}}
        </span>
    </div>
</div>
 
{
  "avatar": {
    "firstLetter": "E",
    "lastLetter": "T",
    "modifier": "red feed-message-header-avatar"
  },
  "author": "Albert Verscheuven",
  "time": "15u45",
  "tag": {
    "modifier": "tag-red-round",
    "size": "tag-sm",
    "element": "span",
    "text": "Populair"
  },
  "title": {
    "text": "Titel van bericht",
    "tag": "h3",
    "modifier": "feed-message-body-title"
  },
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non mi lorem. Ut efficitur enim quis purus hendrerit bibendum. Ut quam felis, tincidunt vel eros eu, ornare tincidunt metus.",
  "like": {
    "id": "like",
    "name": "like",
    "value": "like",
    "text": "Like",
    "icon": {
      "icon-checked": {
        "style": "fas",
        "icon": "fa-thumbs-up"
      },
      "icon-unchecked": {
        "style": "fal",
        "icon": "fa-thumbs-up"
      }
    },
    "checked": false,
    "disabled": false
  },
  "react": {
    "modifier": "link-secondary",
    "element": "button",
    "href": false,
    "title": "Reageer",
    "aria_label": "",
    "text": "Reageer",
    "isExternal": false,
    "iconBefore": {
      "icon": "fa-comment-alt-lines",
      "style": "fas"
    }
  },
  "reactions": {
    "modifier": "link-secondary",
    "element": "button",
    "href": false,
    "title": "12 reacties",
    "aria_label": "",
    "text": "12 reacties",
    "isExternal": false,
    "extIcon": false,
    "action": false
  }
}
  • Content: 
    .feed-message {
    padding-bottom: 32px;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 32px;

    &:last-child {
        padding-bottom: 0;
        border-bottom: none;
        margin-bottom: 0;
    }

    .feed-message-header  {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 16px;

        @screen sm {
            flex-wrap: no-wrap;
        }
    }

    .feed-message-header-avatar-author {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 4px;

        @screen sm {
            width: auto;
            margin-bottom: 0px;
        }
    }

    .feed-message-header-avatar {
        margin-right: 16px;
        flex-shrink: 0;
    }

    .feed-message-header-author {
        @apply text-red;

        margin-right: 16px;

        font-size: 18px;
        font-weight: 700;
    }

    .feed-message-header-time {
        @apply text-black-400;

        margin-right: 16px;

        font-size: 18px;
    }

    .feed-message-body {
        margin-bottom: 16px;
    }

    .feed-message-footer {
        display: flex;
        flex-wrap: wrap;

        @screen sm {
            flex-wrap: nowrap;
        }
    }

    .feed-message-footer-col {
        margin-right: 16px;
        display: flex;
        align-items: center;

        @screen sm {
            margin-right: 24px;
        }
    }

    .feed-message-footer-like {
        order: 9999;
        width: 100%;
        margin-left: -10px;

        @screen sm {
            order: 0;
            padding-right: 24px;
            margin-left: 0;
            /* border-right: 1px solid #e3e3e3; */
            width: auto;

            @screen sm {
                padding-right: 0;
            }
        }

        &::after {
            content: '';
            height: 20px;
            border-left: 1px solid #e3e3e3;
            right: 0;
            display: none;

            @screen sm {
                margin-left: 16px;
                display: block;
            }
        }
    }

    .feed-message-footer-react {
        padding-right: 16px;
        border-right: 1px solid #e3e3e3;

        @screen sm {
            padding: 0;
            border-right: none;
        }
    }

    .feed-message-footer-reactions {
        padding-right: 0;
        border-right: none;

        @screen sm {
            margin-left: auto;
            margin-right: 0;
        }
    }
}
  • URL: /components/raw/feed-message/feed-message.css
  • Filesystem Path: src\components\04-organisms\feed-message\feed-message.css
  • Size: 2.6 KB

No notes defined.