OnePlace release v0.5.0: feed with filter by tags and more

Github repository: https://github.com/OnePlace-media/oneplace

Project description

OnePlace is a web-application built on Steem and Golos blockchains. As a basis we took Vue.js with SSR module for frontend and LoopBack for backend. Our project is fully open-source under MIT license.
Technology stack: Node.js, Vue.js, Loopback, Redis, MySQL
Website: https://oneplace.media
Latest release on Github • Installation guide

New Features

1. Following feed with filter by tags, top menu bar

OnePlace feed with filter by tags

There are multiple commits involved with the feature: 1, 2, 3. New feed component was created. Filter by tags from our blog page was redefined as a separate component.

Additionally, top menu bar was added to header for ease of navigation:

<div class="header__menu" v-if="$auth && $auth.ready() && account.username">
  <router-link 
     :to="{name:'chain-trend', params:{chain}}" 
     :class="{'header__menu-item--active': isPopular}"
     class="header__menu-item link" tag="a">{{$t('topBar.popular')}}
  </router-link>
  <router-link
     :to="{name:'chain-account-feed', params:{chain, username: account.username}}" 
     :class="{'header__menu-item--active': isFeed}"
     class="header__menu-item link" tag="a">{{$t('topBar.feed')}}
  </router-link>
  <router-link 
     :to="{name:'chain-account-view', params:{chain, username: account.username}}" 
     :class="{'header__menu-item--active': isBlog}"
     class="header__menu-item link" tag="a">{{$t('topBar.blog')}}
  </router-link>
</div>

2. Redesign of post cards

View commit

Popular posts by tag

All post cards were redesigned to fit the new design style, for example, all images on popular posts feed gained 16px padding. The preview text is now cut off using css overflow trick (code below), for example, limited to 3 lines for smaller cards and 2 lines for the first card (see image above).

.tag-block__top-post-text {
    font-size: 14px;
    line-height: 20px;
    max-height: 60px;
    color: #818888;
    margin-bottom: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.tag-block__top-post:first-child .tag-block__top-post-text {
    max-height: 40px;
    -webkit-line-clamp: 2;
 }

3. Minor updates in this release

• Added title attributes with prompts and translated missing placeholders in the Settings section (commit);
• Removed old JS-based preview text cutoffs for feed and blog and applied CSS-based method, added NSFW image filter and warning to feed and blogs (commit).