Topic List Previews


(Angus McLeod) #527

Hey guy’s, I’m just getting back on board with Discourse work after going away over Christmas / New Years. Some initial responses:

When I last looked, that list didn’t have any plugin outlets, so I can’t do anything with it right now. I’ll check again and maybe make a PR to Discourse core.

This should be the default behavior actually. If you have the Solution plugin enabled, the post represented in the topic list preview should be the solution post. This may have been affected by the recent optimization work and other updates.

I’ll add this as a setting. Not everyone is a fan of this.

Sounds like a bug. I’ll take a look at it asap.


#528

I double checked whether this functionality works on the most recent commit on master (8a5273be2e3f3b548d12921f7143923d7e5c402a) and can confirm its broken. Just hoping to make certain I was not wrong in pointing it out in the first place. :drevil:

I created two topics, one with a solution with an image and one with the topic with an image.

Here is a demonstration of the first case:


And the second case:



(Angus McLeod) #529

It seems that what happens currently is that everything but the thumbnail gets linked to a post marked as a solution. The excerpt does change to an excerpt of the accepted solution post and the actions link to the accepted solution post. The thumbnail does not get updated however.

I just pushed some server code which will update the preview thumbnail to the image in the accepted post (if one exists).

It is dependent on an update to discourse-solved itself, which I have made a PR for. If / When that gets accepted, this will work as expected.

** update, the PR to discourse-solved has been accepted (thanks @sam) so please give this a whirl @jgujgu @tobiaseigen


#530

The latest update does make the thumbnails appear for solutions. Great fix, @angus. :allthethings: Thank you.

I found one inconsistency in my testing that I couldn’t quite fix myself. I tried a situation where the topic did not have an image and a situation where it did have an image, and both solutions had images. When topic_list_hotlink_thumbnails = true, only the topic post image + solution text would appear:

Console output for the first 2 posts:

this.get('showThumbnail')
false
this.get('showThumbnail')
true

This is how it appears when topic_list_hotlink_thumbnails = false. All correct, of course:

this.get('showThumbnail')
true
this.get('showThumbnail')
true

In the first case, I can understand why showThumbnail would console.log false then true, but somewhere I think the initialization code has to look at whether the solution has an image_url if topic_list_hotlink_thumbnails = true (and serialize it if this is the case). Maybe I am over-complicating it all. :rageguy:


(Angus McLeod) #531

Yes, I intentionally avoided making the topic_list_hotlink_thumbnails setting interoperable with the solutions integration.

Firstly, I would recommend that you don’t use topic_list_hotlink_thumbnails. It causes performance issues and there is no real need for it unless for some reason your instance has no way of storing images.

Also, the image_url property of topics, which the topic_list_hotlink_thumbnails setting uses, is native to discourse and can be used by other functionality / plugins. I prefer to avoid updating it directly.

I’ll make a note about that next to the topic_list_hotlink_thumbnail setting.

Thanks for your detailed report!


#532

Thank you for your explanation @angus. I understand the performance hit from using the original image_url, so I will probably opt for using the thumbnail instead.


(Pad Pors) #533

Hi Angus,

After the update, editing images of a topic doesn’t change the thumbnails in the main page. is this something in the plan or is this a bug?


(Angus McLeod) #534

Not planned :slight_smile:

Perhaps something in Discourse core changed. I’ll have a look at it tomorrow.


(Angus McLeod) #535

It was in fact a bug. Thanks for reporting. The thumbnails in the list will update now.


(Chris Beach) #536

Hi @angus

I’ve just enabled your TLP plugin and found that the categories are missing in mobile view. Without the plugin, categories display under the topic titles, but with the plugin enabled, I get this:

I have tried tweaking various settings in your plugin but no luck getting the categories back. Could you take a look please?

Also seem to be missing the UI for topics started by pasting a link (which used to look like this:)


(Angus McLeod) #537

Thanks Chris, useful feedback.

This is now fixed.

Cool, I’m glad to see this feature is now part of core. I’ve added the link feature into the relevant topic list preview template as well.

Let me know if there’s anything else. I rely on feedback to know when to fix / update things.


(Chris Beach) #538

I enabled mobile thumbnails and personally liked it a lot. However, members of my site didn’t share my enthusiasm unfortunately :frowning:

I asked what the issue was got the following feedback:

I think the problem is that users don’t like the left margins being out of alignment

I’ve been thinking about other ways of presenting images. I wonder how it would look if they were faded to near-transparent, colourised with the category colour, and laid across background of the row with a linear gradient fade to white from right to left. :thinking: I’ll have a bash at a mockup … watch this space…


(Angus McLeod) #539

I would be more than happy to implement a better design. I agree the current one is not great. Looking forward to it!


(Chris Beach) #540

So, I used my rookie Illustrator skills to come up with this:

  • Preserves the margin alignment of all existing elements

  • Right-left fade helps integrate the pictures without an awkward visible margin

  • Introduces a bit of colour to the homepage (driven by category colours, so somewhat informative as well). Hopes to address the feedback I got about Discourse looking “too white” or “business-like”

  • Images slightly blurred to avoid the page looking too “busy”

What do people think? Suggestions welcome


(Nam Nguyen) #541

This is my Mobile Discourse custom template by TLP


(Angus McLeod) #542

@ChrisBeach Nice design. Here’s some thoughts:

  1. Deciding what to preference in the UI really depends on the type of forum you’re running. A good example is the role of user details, particularly avatars. Compare the content-driven Reddit mobile app UI:

    If we were going to take this approach, we would remove the user avatar, make the category tag a lot smaller (and remove the color) and remove the topic stats. But perhaps this doesn’t make sense for your forum.

  2. ‘1’ leads to two questions: “What is your eye drawn to?” and “How does it make you feel?”. What can often happen when you’re making a UI is that you’re trying to accommodate a number of elements into a confined space and you end up making a grand compromise to fit them all in (I’ve made a lot of bad UIs in the past for this reason). What are you trying to make prominent in your UI mockup and what effect is designed to have on the user?

To really judge any mockup we need to directly, rather than indirectly, interrogate what the goal of the design is.

@Nam_Nguyen Cool! is this a css modified version of the Mobile Social Layout and is it live somewhere?


(Nam Nguyen) #543

Yes, this is a live demo site

This is a desktop Discourse template, custom by TLP, I try to focus on the content

I modified it in the CSS/HTML and removed these file topic-list-item.raw.hbs in plugin . discourse-topic-previews/assets/javascripts/discourse/templates at master · angusmcleod/discourse-topic-previews · GitHub
both Desktop and mobile, I think this template, it look like a blog than a forum


(Angus McLeod) #544

It looks great! Well done.

You removed topic-list-item.raw.hbs and replaced it with your own version? Could you share your alternate version?


(Nam Nguyen) #545

Yes :smiley:
Ah the truth is I don’t know about coding, some parts I create as I understand about structure of topic-list-item.raw.hbs, other parts I copy from many templates on Meta, then I paste, preview, paste, preview… . So the structure of code is really terrible, I’m really sorry about it, If there are something wrongs, I really need your help and suggestion ^^
###1. Desktop CSS

.container {max-width: 848px;}

.wrap {max-width: 848px !important;padding: 0 0px;}

#main-outlet {
    padding-top: 70px;
}
.user-table {
    width: 848px;
}
.user-table .wrapper {
    width: 848px;
}
.user-main .user-content {
    width: 848px
}

.d-header .login-button, .d-header button.sign-up-button {
    background: #25AAE2;
}
.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
    color: #08c;
}

.nguoi-tra-loi {
    padding-left: 5px;
}

.time-under-title {
    font-size: 12px;
    padding-left: 10px;
    color: #999;
}

.comment-under-title {
    font-size: 12px;
    padding-left: 10px;
    color: #999;
}

.view-under-title {
    font-size: 12px;
    padding-left: 10px;
    color: #999;
}
.like-under-title {
    font-size: 12px;
    padding-left: 10px;
    color: #999;
}
.author-under-title {
    font-size: 12px;
    color: #999;
}
.category-under-title {
    font-size: 12px;
    font-weight: normal;
    color: #999 !important;
}
.tag-under-title {
    font-size: 12px;
    color: #2b6dad;
}
.tag-vi-tri {
    margin-top: 4px;
}

.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover{
    margin-right: 5px;
    color: #08c;
    font-size: 13px;
}
.bullet + .topic-header-extra {
    padding-top: 2px;
}
.discourse-tag.simple,.discourse-tag.simple:before,.discourse-tag.simple:not(:last-child):before {
   content:"#";
}
.discourse-tags .discourse-tag.simple:not(:last-child):after,.list-tags .discourse-tag.simple:not(:last-child):after {
	content:"";
	padding-left: 5px;
}
.badge-wrapper.bullet span.badge-category {
    padding-right: 3px;
    font-size: 13px;
}
.badge-wrapper.bullet {
    padding-left: 0;
    padding-top: 2px;
}
header .discourse-tag {
    color: #08c !important;
}

.topic-list .main-link a.title {
    font-size: 19px;
    font-weight: bold;
    color: #0088cc;
    line-height: 1.8rem;
}
.topic-list .main-link a.title:hover {
    color: #039;
}
.topic-list a.title.visited:not(.badge-notification):hover {
    color: #039;
}
html.anon .topic-list a.title:visited:not(.badge-notification) {
    color: #555;
}
html.anon .topic-list a.title:visited:not(.badge-notification):hover {
    color: #039;
}

.topic-details .topic-excerpt {
    color: #34495e;
    line-height: 19px;
}
.topic-details .topic-excerpt .element {
    max-height: 57px;
}
.topic-details {
    max-height: 130px;
}
.topic-list .topic-excerpt {
    color: #34495e;
    font-family: Arial;
}
.topic-list a.title.visited:not(.badge-notification) {
    color: #555;
}
.topic-list .main-link {
    font-size: 14px;
}

.topic-list td {
    color: #231F20;
}


.topic-list .activity .latest-info{display:inline-block;vertical-align:middle}.topic-list .activity img.avatar{vertical-align:middle;margin-right:5px;max-height:32px;max-width:32px}.topic-list .activity{width:160px;text-align:left;padding-left:20px;white-space:nowrap}.topic-list .activity .latest-info .name{display:block;font-weight:bold;font-size:0.9em;margin-top:0px;color:#737373}.topic-list .activity .latest-info .relative-date{display:block;font-size:0.9em;color:#737373}.topic-list td{padding:5px 5px}

.d-header{box-shadow:0 1px 2px 0 rgba(204,204,204,0.99);box-shadow:0px 1px 2px 0px rgba(204,204,204,0.99);background-color: #ffffff;}

#site-logo.logo-big{max-height:45px;max-width:220px;margin-top:-4px}#site-logo.logo-small{max-height:45px;max-width:55px;margin-top:-4px}

body:before{display:inline-block;width:888px;min-height:100%;height:inherit;background-color:#FFF;content:" ";position:fixed;left:50%;right:0;transform:translate(-50%, 0);-webkit-transform:translate(-50%, 0)}@media (max-width: 1139px) and (min-width: 1000px){body:before{width:1010px}.wrap{max-width:996px}}body{background-color:#f4f4f4}

body.docked::before{box-shadow:0px 0px 8px 0px rgba(204,204,204,0.99)}

.adsense{text-align:center;padding:1px;margin-bottom:5px}.google-adsense-label{display:none}.google-dfp-ad-label{display:none}

.topic-list.categories td.category{border-left:13px solid}


.user-preferences .pref-mailing-list-mode{display:none}


.topic-list.categories a.title{color:#000}


.d-header .icons .icon {
    color: #231F20;
}

.d-header {
    padding-top: 0px;
    height: 55px;
}

.d-header .icons [class^="fa fa-"] {
    font-size: 1.514em;
}



.topic-list th:first-of-type,.topic-list td:first-of-type {
	padding-left: 0;
}
.topic-list th:last-of-type,.topic-list td:last-of-type {
    padding-right: 0;
}



.topic-list th,.topic-list td {
	padding:12px 2px;
	font-size: 17px;
	border-top: 2px solid #F2F2F2!important;
}

.topic-list .topic-list-item-separator td span {
    color: #D3222A;
}

.topic-list .topic-list-item-separator td {
    line-height: 0px;
}

.list-controls .category-breadcrumb li.bullet > .badge-category {
    font-size: 14px;
}


.extra-info-wrapper .topic-link {
    color: #231F20;
    font-size: 19px;
    font-weight: bold;
    padding-left: 0px;
}
.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    color: #231F20 !important;
}
.extra-info-wrapper .badge-wrapper.bullet {
    margin-top: 0px;
}
.badge-wrapper.bullet {
    padding-left: 0;
}

#topic-title h1 a {
    color: #333;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 600;
    font-size: 22px;
}

.topic-body .regular {
    color: #000;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 500;
}



aside.onebox .onebox-body h3, aside.onebox .onebox-body h4 {
        font-size: 16.38px;
}
aside.onebox {
    font-size: 14px;
}
aside.onebox {border: 0px solid #e9e9e9!important;border-left: 5px solid #ACC4D7 !important;background-color: #F0F9FF !important;}



nav.post-controls a, nav.post-controls button {
    color: #aab8c2;
}
nav.post-controls .highlight-action {color: #fff;background-color: #D3222A; padding-top: 3px; padding-bottom: 3px;}
nav.post-controls .like-count {font-size: 14px;margin-right: -3px;margin-top: 5px;}
nav.post-controls button.has-like {
    color: #D3222A;
}
nav.post-controls button.create {font-size: 14px; font-weight: 600; padding-top: 3px; padding-bottom:3px; color: #2b6dad;background:#E0F2FF;margin-top: 5px !important;border: 1px solid #2b6dad !important;}




.widget-button.btn.create.no-text {
    font-size: 14px !important;
    font-family: "Arial" !important;
    padding: 3px 8px;
    color: #2b6dad;
    background: #E0F2FF;
    margin: 38px 3px 0 0 !important;
    border: 1px solid #2b6dad !important;
    font-weight: 600;
}

.widget-button.btn.notifications-dropdown{
    
    position: relative;
    border-radius: 30px;
    width: 30px;
}

.widget-button.btn.notifications-dropdown .fa{
    margin-left: -2px;
}
.timeline-container {margin-left: 0px !important;left: calc(50% + 328px) !important;}
.timeline-container .topic-timeline .timeline-footer-controls {margin-top: -28px;}


#create-topic.btn-default {
    border-radius: 40px;
    position: fixed;
    bottom: 30px;
    right: 150px;
    z-index: 999;
    padding: 16px 20px 22px 5px;
    background-color: #D3222A; 
    color: #D3222A; 
    white-space: nowrap;
    text-indent: 7px;
    overflow: hidden;
    width: 50px;
    height: 50px;
    -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
    transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
}

#create-topic.btn-default .fa-plus {
    color: white;
}

#create-topic.btn-default:hover {
    
    width: 50px;
    color: #D3222A;
}


.nav-pills>li.active>a, .nav-pills>li>a.active {
    background-color: #D3222A;
}
.nav-pills > li > a {
    padding: 2px 8px;
    font-size: 13px;
}
.list-controls .category-breadcrumb a.badge-category {
    padding: 2px 8px;
}
.list-controls .category-breadcrumb a.badge-category.category-dropdown-button {
    padding: 2px;
}


//fa-heart:before {
 // content: "\f087";
//}
//i.fa.fa-heart:before {
   // content: "\f08a"
//}
button.like:hover {
    color: #D3222A !important;
    background: #FFF !important;
}

button.has-like {
    color: #D3222A !important;
}

.fa-link:before {
  content: "\f045";
}
button.share:hover {
    color: #19cf86 !important;
    background: #FFF !important;
}
button.bookmark:hover {
    color: #1da1f2 !important;
    background: #FFF !important;
}
button.create-flag:hover {
    color: #DC143C !important;
    background: #FFF !important;
}
button.flag-topic:hover {
    color: #DC143C !important;
    background: #FFF !important;
}
button.edit:hover {
    color: #2F4F4F !important;
    background: #FFF !important;
}
.lazyYT {
    width: 100% !important;
    padding-bottom: 56.25% !important;
}
// Thumbnail img fix

img.thumbnail {
      width:190px;
      max-width:100%;
      max-height:200px;
      object-fit:cover;
}

i.fa.fa-google-plus-square {
    color:#db4437;
}
i.fa.fa-facebook-square {
    color: #3b5998;
}
i.fa.fa-envelope-square {
    color: #FFD700;
}
i.fa.fa-twitter-square {
    color: #1da1f2;
}


.names span.username a::before {content: "@"}
.names span h2::before {content: "@"}
.user-main .about .details h2::before {content: "@"}

.search-header {
    max-width: 430px;
    width: 430px;
}
.search-header #search-term {
    width: 75%;
}
.search-header a.show-help {
    right: 25%;
}

.info-duoi-title {
    padding-top: 4px;
    margin-bottom: 5px;
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.nav-pills>li.active>a, .nav-pills>li>a.active {
  color: $primary;
  font-weight: 500;
  background-color: $secondary;
  border-bottom: 3px solid #D3222A;
}


.nav-pills > li > a:hover{
    background-color: $secondary;
    border-bottom: 3px solid #D3222A;
}

.d-header .icons .unread-notifications {
    background-color: #00BFFF;
}
.badge-notification.new-topic {
    color: #D3222A;
}
.badge-notification.new-posts, .badge-notification.unread-posts {
    background-color: #6cf;
}
h2 {
    line-height: normal;
}
.cooked h1, .d-editor-preview h1 {
    line-height: normal;
}
h3 {
    line-height: normal;
}
.post-menu-area {
    margin-bottom: 5px;
    margin-top: 5px;
}
.btn.no-text > i.fa.fa-link::before {
  content: "\f0c1";
}



header a.topic-featured-link {
    color: #fff;
}

ul, ol, dd {
    margin: 0 0 9px 27px;
}

div.poll .poll-info .info-text {
    font-size: 1.5em;
    line-height: 27px;
}

div#header-ad-top img {
    height: 32px;
    margin-right: 7px;
    margin-top: 4px;
    margin-left: 6px;
}

@media only screen and (max-width: 600px) {
    div#header-ad-top {
        display: none;
    }
}
/* //Header link

.mobile-view .hidden-for-mobile { 
    display: none; 
}
.add-header-links {
    margin-left: 0 !important;
}

.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            color: #000000;
            text-decoration: none;
            text-align: center;
            font-family: 'Arial'; 
            line-height: 40px;
            min-width: 90px;
            font-size: 15px;
            padding: 0 1em;
        }
    }
}
.nav-link-container li a:hover {
    color: #D3222A;
}

@media screen and (max-width: 830px) {
    .nav-link-container li:nth-child(1) {
        display: none;
    }
}
@media screen and (max-width: 743px) {
    .nav-link-container li:nth-child(2) {
        display: none;
    }
}
@media screen and (max-width: 650px) {
    .nav-link-container li:nth-child(3) {
        display: none;
    }
}
@media screen and (max-width: 525px) {
    .nav-link-container li:nth-child(4) {
        display: none;
    }
} end menu */
/*.nav-link-container {
    display: inline;
    li { 
        display: inline-block;
        float: right;
        a {
            height: 32px;
            margin-right: 4px;
            margin-top: 4px;
            margin-left: 4px;
        }
    }
}

// header links
.mobile-view .hidden-for-mobile { 
    display: none; 
}

@media only screen and (max-width: 800px) {
    .nav-link-container {
        display: none;
    }
}
*/

//Footer Ads

div#upcloud-bottom img {
    display: block;
    margin: 10px auto 4px auto;
    max-height: 25px;
    max-width: 221px; 
}

div#upcloud-bottom a {
    display: inline-block;
}

div#upcloud-bottom {
    text-align: center;
    margin-bottom: 10px;
}

div#upcloud-bottom-text {
    margin-top: -6px;
}

/* Fix for Discourse bug. */
/* Progress indicator positioning gets off with footer.*/
.posts-wrapper {
    margin-bottom: 16px;
}
#topic-progress-wrapper.docked {
    margin-bottom: -20px;
}

###2: Desktop Header

<!DOCTYPE html>
<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>

{{#if bulkSelectEnabled}}
  <td class='star'>
    <input type="checkbox" class="bulk-select">
  </td>
{{/if}}
  
<td class='main-link clearfix'>
  {{#if showThumbnail}}
      {{raw "list/topic-thumbnail" topic=topic thumbnails=thumbnails}}
  {{/if}}
  {{raw "topic-status" topic=topic}}
  {{topic-link topic}}
  {{#if topic.featured_link}}
    {{topic-featured-link topic}}
  {{/if}}
  {{#if showTopicPostBadges}}
    {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
  {{/if}}
  <div class='info-under-title'>
          <a class='author-under-title' href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{avatar topic.creator usernamePath="username" imageSize="tiny"}} {{topic.creator.username}}</a>
          <span class='time-under-title'><i class="fa fa-clock-o"></i> {{format-date topic.bumpedAt format="medium-with-ago"}}</span>
          <span class="view-under-title {{topic.viewsHeat}}"><i class="fa fa-eye"></i> {{number topic.views numberKey="views_long"}} lượt xem</span>
          <span class='comment-under-title {{view.likesHeat}}'><i class="fa fa-comments-o"></i> {{number topic.replyCount noTitle="true"}} trả lời</span>
          <a class='author-under-title' href="{{topic.lastPostUrl}}">@ {{topic.last_poster_username}}</a>
          
  </div>
  {{#if expandPinned}}
      <div><span style="max-height: 60px;>{{raw "list/topic-excerpt" topic=topic}}</span></div>
  {{/if}}

 <div class='tag-vi-tri'> 
  <span class='tag-under-title'>{{#each topic.visibleListTags as |tag|}}<a style="color: #eeeeee;"}}">{{discourse-tag tag}}</a> {{/each}}</span>
 </div>
</td>

</script>

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>

</script>

<script type='text/x-handlebars' data-template-name='list/topic-excerpt.raw'>
{{#if topic.hasExcerpt}}
  <div class="topic-excerpt">
    {{{topic.excerpt}}}
    {{#if topic.excerptTruncated}}
      <a href="{{topic.url}}">{{i18n}}</a>
    {{/if}}
  </div>
{{/if}}
</script>

<script type="text/discourse-plugin" version="0.4">
api.decorateWidget('header-icons:before', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('li', [
                helper.h('div#header-ad-top', [
                    helper.h('a', {href:'https://vngeek.net', target: '_self'},  
                    helper.h('img', {
                        src:'https://vngeek.s3-ap-southeast-1.amazonaws.com/original/1X/2f3a72b5b8bf1054b51f5c85a5bb2aa66f5b4c00.png'})),
                    
                ])
            ]);
        }
});
</script>

<!-- <script type="text/discourse-plugin" version="0.4">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {href:'https://vngeek.net', target: '_blank'},  
                    helper.h('img', {
                        src:'https://vngeek.s3-ap-southeast-1.amazonaws.com/original/1X/2f3a72b5b8bf1054b51f5c85a5bb2aa66f5b4c00.png'})),
                    helper.h('a.nav-link', {href:'https://vngeek.net', target: '_blank'},  
                    helper.h('img', {
                        src:'https://vngeek.s3-ap-southeast-1.amazonaws.com/original/1X/793b468e7fe78c2349e38ec6ff1e542ebbd91e38.png'})),
                        
                    helper.h('a.nav-link', {href:'https://vngeek.net', target: '_blank'},  
                    helper.h('img', {
                        src:'https://vngeek.s3-ap-southeast-1.amazonaws.com/original/1X/5eaff326e450bb9ad28b5f13ceeca981a0fd9a3c.png'})),
                        
                    helper.h('a.nav-link', {href:'https://vngeek.net', target: '_blank'},  
                    helper.h('img', {
                        src:'https://vngeek.s3-ap-southeast-1.amazonaws.com/original/1X/a8359e24376417afd5c2a07cb9342a2a95e3a639.png'})),
                    helper.h('a.nav-link', {href:'https://vngeek.net', target: '_blank'},  
                    helper.h('img', {
                        src:'https://vngeek.s3-ap-southeast-1.amazonaws.com/original/1X/74f9a1a4436516f63bea2cff701877e1b1aae19d.png'})),
                ])
            ]);
        }
});
</script> -->

<!-- Menu <script type="text/discourse-plugin" version="0.4">
api.decorateWidget('home-logo:after', helper => {
    const showExtraInfo = helper.attrs.minimized;
        if(!showExtraInfo) {
            return helper.h('ul.nav-link-container', [
                
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://vngeek.net/', 
                        text:'Hỏi đáp',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://vngeek.net/', 
                        text:'Xe',
                        target:'_blank'
                    })
                ]),
                helper.h('li.hidden-for-mobile', [
                    helper.h('a.nav-link', {
                        href:'https://vngeek.net/', 
                        text:'Đánh giá',
                        target:'_blank'
                    })
                ]),
                helper.h('li', [
                    helper.h('a.nav-link', {
                        href:'https://vngeek.net/', 
                        text:'Tin tức',
                        target:'_self'
                    })
                ])
            ]);
        }
});
</script> -->

###3: Mobile CSS

html.anon .topic-list a.title:visited:not(.badge-notification) {
    color: #555;
}

.d-header .login-button, .d-header button.sign-up-button {
    background: #25AAE2;
}
.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover {
    color: #08c;
}

.img-duoi-title {
    margin-top: 5px;
}


.time-under-title {
    font-size: 12px;
    padding-left: 10px;
    color: #999;
}

.comment-under-title {
    font-size: 12px;
    padding-left: 10px;
    color: #999;
}

.view-under-title {
    font-size: 12px;
    padding-left: 10px;
    color: #999;
}

.author-under-title {
    font-size: 12px;
    color: #999;
}

.tag-under-title {
    font-size: 12px;
    
    color: #2b6dad;
    
}
.tag-vi-tri {
    margin-top: 4px;
}

.discourse-tag.simple, .discourse-tag.simple:visited, .discourse-tag.simple:hover{
    margin-right: 5px;
    color: #08c;
    font-size: 13px;
}
.bullet + .topic-header-extra {
    padding-top: 2px;
}
.discourse-tag.simple,.discourse-tag.simple:before,.discourse-tag.simple:not(:last-child):before {
   content:"#";
}
.discourse-tags .discourse-tag.simple:not(:last-child):after,.list-tags .discourse-tag.simple:not(:last-child):after {
	content:"";
	padding-left: 5px;
}
.badge-wrapper.bullet span.badge-category {
    padding-right: 3px;
    font-size: 13px;
}
.badge-wrapper.bullet {
    padding-left: 0;
    padding-top: 2px;
}
header .discourse-tag {
    color: #08c !important;
}

.mobile-view #list-area.social-style td a.title {
    font-size: 20px;
}
.topic-list .main-link a.title {
    font-weight: bold;
    color: #0088cc;
    line-height: 1.8rem;
    font-size: 18px;
}
.topic-list .main-link a.title:hover {
    color: #039;
}
.topic-list a.title.visited:not(.badge-notification):hover {
    color: #039;
}

.topic-details .topic-excerpt {
    color: #34495e;
    line-height: 19px;
}
.topic-details .topic-excerpt .element {
    max-height: 57px;
}
.topic-details {
    max-height: 130px;
}
.topic-list .topic-excerpt {
    color: #34495e;
    font-family: Arial;
}
.topic-list a.title.visited:not(.badge-notification) {
    color: #555;
}
.topic-list .main-link {
    font-size: 14px;
}


.topic-list td {
    color: #231F20;
}


#site-logo.logo-big{max-height:40px;max-width:220px;margin-top:-2px}#site-logo.logo-small{max-height:40px;max-width:55px;margin-top:-2px}

.topic-list.categories a.title{color:#000}


.d-header .icons .icon {
    color: #231F20;
}

.d-header {
    padding-top: 0px;
    height: 55px;
}

.d-header .icons [class^="fa fa-"] {
    font-size: 1.514em;
}



.topic-list th:first-of-type,.topic-list td:first-of-type {
	padding-left: 0;
}
.topic-list th:last-of-type,.topic-list td:last-of-type {
    padding-right: 0;
}



.topic-list th,.topic-list td {
	padding:12px 2px;
	font-size: 17px;
	border-top: 2px solid #F2F2F2!important;
}

.topic-list .topic-list-item-separator td span {
    color: #D3222A;
}

.topic-list .topic-list-item-separator td {
    line-height: 0px;
}

.list-controls .category-breadcrumb li.bullet > .badge-category {
    font-size: 14px;
}


.extra-info-wrapper .topic-link {
    color: #231F20;
    font-size: 19px;
    font-weight: bold;
    padding-left: 0px;
}
.extra-info-wrapper .badge-wrapper.bullet span.badge-category {
    color: #231F20 !important;
}
.extra-info-wrapper .badge-wrapper.bullet {
    margin-top: 0px;
}
.badge-wrapper.bullet {
    padding-left: 0;
}

#topic-title h1 a {
    color: #333;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 600;
    font-size: 22px;
}

.topic-body .regular {
    color: #000;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 500;
}



aside.onebox .onebox-body h3, aside.onebox .onebox-body h4 {
        font-size: 16.38px;
}
aside.onebox {
    font-size: 14px;
}
aside.onebox {border: 0px solid #e9e9e9!important;border-left: 5px solid #ACC4D7 !important;background-color: #F0F9FF !important;}



nav.post-controls a, nav.post-controls button {
    color: #aab8c2;
}
nav.post-controls .highlight-action {color: #fff;background-color: #D3222A; padding-top: 3px; padding-bottom: 3px;}
nav.post-controls .like-count {font-size: 14px;margin-right: -3px;margin-top: 5px;}
nav.post-controls button.has-like {
    color: #D3222A;
}
nav.post-controls button.create {font-size: 14px; font-weight: 600; padding-top: 3px; padding-bottom:3px; color: #2b6dad;background:#E0F2FF;margin-top: 5px !important;border: 1px solid #2b6dad !important;}




.widget-button.btn.create.no-text {
    font-size: 14px !important;
    font-family: "Arial" !important;
    padding: 3px 8px;
    color: #2b6dad;
    background: #E0F2FF;
    margin: 38px 3px 0 0 !important;
    border: 1px solid #2b6dad !important;
    font-weight: 600;
}

.widget-button.btn.notifications-dropdown{
    
    position: relative;
    border-radius: 30px;
    width: 30px;
}

.widget-button.btn.notifications-dropdown .fa{
    margin-left: -2px;
}
.timeline-container {margin-left: 0px !important;left: calc(50% + 328px) !important;}
.timeline-container .topic-timeline .timeline-footer-controls {margin-top: -28px;}


#create-topic.btn-default {
    border-radius: 40px;
    position: fixed;
    bottom: 30px;
    right: 25px;
    z-index: 999;
    padding: 16px 20px 22px 5px;
    background-color: #D3222A; 
    color: #D3222A; 
    white-space: nowrap;
    text-indent: 7px;
    overflow: hidden;
    width: 50px;
    height: 50px;
    -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;
    transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;
}

#create-topic.btn-default .fa-plus {
    color: white;
}

#create-topic.btn-default:hover {
    
    width: 50px;
    color: #D3222A;
}


.nav-pills>li.active>a, .nav-pills>li>a.active {
    background-color: #D3222A;
}
.nav-pills > li > a {
    padding: 2px 8px;
    font-size: 13px;
}
.list-controls .category-breadcrumb a.badge-category {
    padding: 2px 8px;
}
.list-controls .category-breadcrumb a.badge-category.category-dropdown-button {
    padding: 2px;
}


//fa-heart:before {
 // content: "\f087";
//}
//i.fa.fa-heart:before {
   // content: "\f08a"
//}
button.like:hover {
    color: #D3222A !important;
    background: #FFF !important;
}

button.has-like {
    color: #D3222A !important;
}

.fa-link:before {
  content: "\f045";
}
button.share:hover {
    color: #19cf86 !important;
    background: #FFF !important;
}
button.bookmark:hover {
    color: #1da1f2 !important;
    background: #FFF !important;
}
button.create-flag:hover {
    color: #DC143C !important;
    background: #FFF !important;
}
button.flag-topic:hover {
    color: #DC143C !important;
    background: #FFF !important;
}
button.edit:hover {
    color: #2F4F4F !important;
    background: #FFF !important;
}
.lazyYT {
    width: 100% !important;
    padding-bottom: 56.25% !important;
}


img.thumbnail {
      width:190px;
      max-width:100%;
      max-height:200px;
      object-fit:cover;
}

i.fa.fa-google-plus-square {
    color:#db4437;
}
i.fa.fa-facebook-square {
    color: #3b5998;
}
i.fa.fa-envelope-square {
    color: #FFD700;
}
i.fa.fa-twitter-square {
    color: #1da1f2;
}


.names span.username a::before {content: "@"}
.names span h2::before {content: "@"}
.user-main .about .details h2::before {content: "@"}


.info-duoi-title {
    padding-top: 3px;
    margin-bottom:4px;
}

body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

.nav-pills>li.active>a, .nav-pills>li>a.active {
  color: $primary;
  font-weight: 500;
  background-color: $secondary;
  border-bottom: 3px solid #D3222A;
}


.nav-pills > li > a:hover{
    background-color: $secondary;
    border-bottom: 3px solid #D3222A;
}

.d-header .icons .unread-notifications {
    background-color: #00BFFF;
}
.badge-notification.new-topic {
    color: #D3222A;
}
.badge-notification.new-posts, .badge-notification.unread-posts {
    background-color: #6cf;
}
h2 {
    line-height: normal;
}
.cooked h1, .d-editor-preview h1 {
    line-height: normal;
}
h3 {
    line-height: normal;
}
.post-menu-area {
    margin-bottom: 5px;
    margin-top: 5px;
}
.btn.no-text > i.fa.fa-link::before {
  content: "\f0c1";
}




ul, ol, dd {
    margin: 0 0 9px 27px;
}

div.poll .poll-info .info-text {
    font-size: 1.5em;
    line-height: 27px;
}
// Footer Ads
div#upcloud-bottom img {
    display: block;
    margin: -4px auto 8px auto;
    max-height: 22px;
    max-width: 221px; 
}

div#upcloud-bottom a {
    display: inline-block;
}

div#upcloud-bottom {
    text-align: center;
    margin-bottom: 16px;
}

div#upcloud-bottom-text {
    margin-top: -6px;
}

###4. Mobile Header

<!DOCTYPE html>
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'>
<td>
  {{#if socialStyle}}
    <div class='main-link'>
      {{raw "topic-status" topic=topic}}
      {{topic-link topic}}
      {{raw-plugin-outlet name="topic-list-after-title"}}
    {{#if showTopicPostBadges}}
      {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
    {{/if}}
    <div>
    <div class='info-duoi-title'>
          <a class='author-under-title' href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{avatar topic.creator usernamePath="username" imageSize="tiny"}} {{topic.creator.username}}</a>
          <span class='time-under-title'><i class="fa fa-clock-o"></i> {{format-date topic.bumpedAt format="medium-with-ago"}}</span>
          <span class="view-under-title {{topic.viewsHeat}}"><i class="fa fa-eye"></i> {{number topic.views numberKey="views_long"}} lượt xem</span>
          <span class='comment-under-title {{view.likesHeat}}'><i class="fa fa-comments-o"></i> {{number topic.replyCount noTitle="true"}} trả lời</span>
 </div>
    <div class='img-duoi-title'>
    {{#if showThumbnail}}
      {{raw "list/topic-thumbnail" topic=topic thumbnails=thumbnails}}
    {{/if}}
    <div>
  {{/if}}

    {{#if expandPinned}}
      {{raw "list/topic-excerpt" topic=topic}}
    {{/if}}
    

    {{raw-plugin-outlet name="topic-list-tags"}}


  </div>
</td>
</script>

<script type='text/x-handlebars' data-template-name='list/posts-count-column.raw'>

</script>

<script type='text/x-handlebars' data-template-name='list/topic-excerpt.raw'>
{{#if topic.hasExcerpt}}
  <div class="topic-excerpt">
    {{{topic.excerpt}}}
    {{#if topic.excerptTruncated}}
      <a href="{{topic.url}}">{{i18n}}</a>
    {{/if}}
  </div>
{{/if}}
</script>

###5: Desktop & Mobile Footer

<div id='upcloud-bottom'>
    <a href="https://vngeek.net" target="_self" onclick="trackOutboundLink('https://vngeek.net'); return false;">
        <img src="https://vngeek.net/images/d-logo-sketch.png" alt="VnGeek">
    </a>
    <div id='upcloud-bottom-text'>© <a href="https://vngeek.net/">VnGeek.net</a> - Đam mê công nghệ!</div>
</div>

(Angus McLeod) #546

@Nam_Nguyen Nice!

@ChrisBeach Just reading my previous message to you again, it kinda sounds like I’m rejecting your design. Far from it. I mainly want to understand a bit more about what you’re thinking and why you made the choices you did. Perhaps it would be an improvement over the current design, but I’m partly wondering about the question of how to please all parties using the plugin.