Q&A design (blank)

Dev
1

I was asked to do Q&A design, sketch. Which can then be used for later editing.

This code is very raw and if someone wants it, they can use it further.

It was a fun hobby - 10 minutes.

I won’t support it, but I’m placing it here, maybe it will be useful to someone.

CSS

Summary 
.sidebar {
    float: right !important;
    padding: 1px 15px 15px 15px;
}
.list-container.has-sidebar {float: left !important;}
.topic-list .sortable, .topic-list .posters, .badge-wrapper.bullet .badge-category-bg {display: none;}

.topic-list a.title, .topic-list-item.visited a.title { 
    color: #72afd2 !important;font-size: 1.06em; 
   &:visited {color: #07C !important;}
   &:hover {color: #f56400 !important;}
}

.post-row .box .t {
    margin-top: 8px;
}
.badge-wrapper {
    font-size: 13px;
    font-weight: 300;
    color: #3c8dbc !important;
}
.number, .post-row .box .c{font-size: 16px;}
.userlink {
    float: right;
    padding-top: .1em;
    font-size: small; color: #777;
}
a.pren, .sidebar .badge-wrapper.bullet span.badge-category {
   color: #3e6d8e !important;
}

.badge-wrapper.bullet span.badge-category {
    color: #777 !important;
}
.badge-wrapper.bullet span.badge-category:hover, a.pren:hover {
color: #f56400 !important;
}
.text-right {
    text-align: right;
}
.post-row {
    padding: 12px 0 15px 0;
    border-bottom: 1px solid #ececec;
}

.clearfix .communities .badge-wrapper.bullet {
padding: .4em .5em;
}
.clearfix .communities .badge-wrapper.bullet:hover {
  color:#3e6d8e;background-color:#dae6ef;text-decoration:none;
    
}
.post-row .box {
    display: inline-block;
    min-width: 58px;
    margin: 0 3px 0 0;
    font-size: 11px;
    color: #777;
    padding: 5px 5px 6px 5px;
    text-align: center;
    float: left;
}
.post-row .count-box {
    float: left;
    margin-right: 10px;
}
.post-row .unanswered {
    background-color: #fff;
    color: #45A163;
    border: solid 1px #45A163;
}
.post-row .title-box {
    display: block;
    overflow: hidden;
}
.post-row .title-box .post-title {
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 5px;
}
.post-row .community-pad {
    margin-top: 5px; color: #777;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: normal;
    display: inline-block!important;
}

Head

Summary 
<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
<div class="post-row">

<div class="count-box">

<div class="box">
<div class="c">{{number topic.views numberKey="views_long"}}</div>
<div class="t">лайков</div>
</div>
        
{{#if topic.replyCount}}   
<div class="box unanswered">
<div class="c">{{topic.replyCount}}</div>
<div class="t">ответа</div>
</div>
{{else}} 
  
<div class="box no">
<div class="c">{{topic.replyCount}}</div>
<div class="t">ответов</div>
</div>
{{/if}}      
       
<div class="box view">
<div class="c">{{number topic.views numberKey="views_long"}}</div>
<div class="t">показов</div>
</div>

</div>

<div class="title-box clearfix">

<div class="post-title">
{{topic-link topic}}
</div>

<div class="clearfix">

<span class="communities community-pad">
Раздел: {{category-link topic.category showParent="true" onlyStripe="true"}}
</span>

<span class="userlink text-right muted">
изменен <span class="ago2">{{format-date topic.bumpedAt format="tiny"}}</span> назад 
<a class="pren" href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a> &nbsp;
 </span>

</div>
</div>

</script>

toxu
toxu1155×663 37.2 KB

You can use other elements in it, for example:

{{#if topic.featured_link}}
    {{topic-featured-link topic}}
{{/if}}

Etc.

And also sorting at the top:

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