UHasselt Component Library

FeedMessage 

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

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

    <div class='feed-reaction-body'>
        <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-reaction-footer'>
        <span class='feed-reaction-footer-col feed-reaction-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>
    </div>
</div>
 
<div class='feed-reaction'>
    <div class='feed-reaction-header'>
        <div class='feed-reaction-header-author'>
            {{author}}
        </div>

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

    <div class='feed-reaction-body'>
        <p>
            {{text}}
        </p>
    </div>

    <div class='feed-reaction-footer'>
        <span class='feed-reaction-footer-col feed-reaction-footer-like'>
            {{render '@item-toggle' like}}
        </span>
    </div>
</div>
 
{
  "author": "Albert Verscheuven",
  "time": "15u45",
  "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
  }
}
  • Content: 
    .feed-reaction {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 32px;

    @screen md {
        flex-wrap: nowrap;
    }

    &:last-child {
        margin-bottom: 0;
    }

    .feed-reaction-header  {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 16px;

        @screen md {
            width: 30%;
            margin-right: 16px;
            margin-bottom: 0px;
        }
    }

    .feed-reaction-header-author {
        @apply text-black-500;

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

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

        font-size: 16px;
    }

    .feed-reaction-body {
        margin-right: 16px;
        margin-bottom: 16px;

        @screen md {
            margin-bottom: 0;
        }
    }

    .feed-reaction-footer {
        flex-shrink: 0;
    }

    .feed-reaction-footer-like {
        position: relative;
        top: -10px;
        left: -10px;
    }
}
  • URL: /components/raw/feed-reaction/feed-reaction.css
  • Filesystem Path: src\components\04-organisms\feed-reaction\feed-reaction.css
  • Size: 1 KB

No notes defined.