show actionbar pre-expand-blog
This commit is contained in:
zhaospei
parent
d2405de7dd
commit
38d5c2cab1
4 changed files with 89 additions and 78 deletions
|
|
@ -222,20 +222,26 @@
|
|||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pre-expand-blog::before {
|
||||
.show-more {
|
||||
color: var(--color-accent-dark);
|
||||
font-style: italic;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
padding: 0px 12px;
|
||||
margin-top: 5px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-image: -webkit-linear-gradient(bottom, gray, lightgray 3%, transparent 8%, transparent 100%);
|
||||
border-radius: 8px;
|
||||
inset: 50% 0px 60px;
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 1%, #f3f3f3 95%, #f3f3f3 100%);
|
||||
display: flex;
|
||||
-webkit-box-pack: end;
|
||||
justify-content: flex-end;
|
||||
align-items: flex-end;
|
||||
cursor: pointer;
|
||||
padding: 16px 16px;
|
||||
}
|
||||
|
||||
.pre-expand-blog:hover {
|
||||
background-color: #f3f3f3;
|
||||
.actionbar-box {
|
||||
margin: 8px 16px;
|
||||
}
|
||||
|
||||
.post-full {
|
||||
|
|
@ -349,4 +355,4 @@
|
|||
font-size: 2.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,51 +1,54 @@
|
|||
{% set logged_in = request.user.is_authenticated %}
|
||||
{% set profile = request.profile if logged_in else None %}
|
||||
{% if logged_in %}
|
||||
{% if include_hr %}<hr>{% endif %}
|
||||
<div class="page-vote actionbar">
|
||||
<span class="actionbar-block" style="justify-content: flex-start;">
|
||||
<span id="like-button-{{pagevote.id}}"
|
||||
class="like-button actionbar-button {% if pagevote.vote_score(request.profile) == 1 %}voted{% endif %}"
|
||||
onclick="javascript:pagevote_upvote({{ pagevote.id }})"
|
||||
>
|
||||
<span class="pagevote-score" id="pagevote-score-{{pagevote.id}}">{{ pagevote.score }}</span>
|
||||
<i class="fa fa-thumbs-o-up" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Like")}}</span>
|
||||
</span>
|
||||
<span id="dislike-button-{{pagevote.id}}" class="dislike-button actionbar-button {% if pagevote.vote_score(request.profile) == -1 %}voted{% endif %}" onclick="javascript:pagevote_downvote({{ pagevote.id }})">
|
||||
<i class="fa fa-thumbs-o-down" style="font-size: large;"></i>
|
||||
</span>
|
||||
{% if include_hr %}
|
||||
<hr>{% endif %}
|
||||
<div class="page-vote actionbar">
|
||||
<span class="actionbar-block" style="justify-content: flex-start;">
|
||||
<span id="like-button-{{pagevote.id}}"
|
||||
class="like-button actionbar-button {% if pagevote.vote_score(request.profile) == 1 %}voted{% endif %}"
|
||||
onclick="javascript:pagevote_upvote({{ pagevote.id }})">
|
||||
<span class="pagevote-score" id="pagevote-score-{{pagevote.id}}">{{ pagevote.score }}</span>
|
||||
<i class="fa fa-thumbs-o-up" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Like")}}</span>
|
||||
</span>
|
||||
{% if not hide_actionbar_comment %}
|
||||
<span class="actionbar-block">
|
||||
<span class="actionbar-button actionbar-comment">
|
||||
<i class="fa fa-comment-o" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Comment")}} {% if comment_list.count() %} ({{comment_list.count()}}) {% endif %}</span>
|
||||
</span>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="actionbar-block">
|
||||
<span id="bookmark-button-{{bookmark.id}}"
|
||||
class="bookmark-button actionbar-button {% if bookmark.get_bookmark(request.profile) == True %} bookmarked {% endif %}"
|
||||
onclick="javascript:bookmark({{ bookmark.id }})"
|
||||
>
|
||||
<i class="fa fa-bookmark-o" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Bookmark")}}</span>
|
||||
</span>
|
||||
<span id="dislike-button-{{pagevote.id}}"
|
||||
class="dislike-button actionbar-button {% if pagevote.vote_score(request.profile) == -1 %}voted{% endif %}"
|
||||
onclick="javascript:pagevote_downvote({{ pagevote.id }})">
|
||||
<i class="fa fa-thumbs-o-down" style="font-size: large;"></i>
|
||||
</span>
|
||||
<span class="actionbar-block" >
|
||||
<span class="actionbar-button actionbar-share" style="position: relative" {{"share-url=" + share_url if share_url else ""}}>
|
||||
<i class="fa fa-share" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Share")}}</span>
|
||||
</span>
|
||||
</span>
|
||||
{% if not hide_actionbar_comment %}
|
||||
<span class="actionbar-block">
|
||||
<span class="actionbar-button actionbar-comment">
|
||||
<i class="fa fa-comment-o" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Comment")}} {% if comment_list.count() %} ({{comment_list.count()}}) {% endif
|
||||
%}</span>
|
||||
</span>
|
||||
{% if actionbar_report_url %}
|
||||
<span class="actionbar-block">
|
||||
<a class="actionbar-button black" href="{{actionbar_report_url}}">
|
||||
<i class="fa fa-flag-o" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Report")}}</span>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</span>
|
||||
{% endif %}
|
||||
<span class="actionbar-block">
|
||||
<span id="bookmark-button-{{bookmark.id}}"
|
||||
class="bookmark-button actionbar-button {% if bookmark.get_bookmark(request.profile) == True %} bookmarked {% endif %}"
|
||||
onclick="javascript:bookmark({{ bookmark.id }})">
|
||||
<i class="fa fa-bookmark-o" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Bookmark")}}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span class="actionbar-block" style="justify-content: flex-end;">
|
||||
<span class="actionbar-button actionbar-share" style="position: relative"
|
||||
{{"share-url=" + share_url if share_url else ""}}>
|
||||
<i class=" fa fa-share" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Share")}}</span>
|
||||
</span>
|
||||
</span>
|
||||
{% if actionbar_report_url %}
|
||||
<span class="actionbar-block">
|
||||
<a class="actionbar-button black" href="{{actionbar_report_url}}">
|
||||
<i class="fa fa-flag-o" style="font-size: large;"></i>
|
||||
<span class="actionbar-text">{{_("Report")}}</span>
|
||||
</a>
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
@ -2,26 +2,26 @@
|
|||
<div style="margin-bottom: 0.5em">
|
||||
<span class="time">
|
||||
{% with authors=post.authors.all() %}
|
||||
{%- if authors -%}
|
||||
<img src="{{gravatar(authors[0])}}" style="width: 1.5em; border-radius: 50%; margin-bottom: -0.3em">
|
||||
<span class="post-authors">{{ link_users(authors) }}</span>
|
||||
{%- endif -%}
|
||||
{%- if authors -%}
|
||||
<img src="{{gravatar(authors[0])}}" style="width: 1.5em; border-radius: 50%; margin-bottom: -0.3em">
|
||||
<span class="post-authors">{{ link_users(authors) }}</span>
|
||||
{%- endif -%}
|
||||
{% endwith %}
|
||||
•
|
||||
{{ relative_time(post.publish_on, abs=_('on {time}'), rel=_('{time}')) -}}
|
||||
{%- if post.sticky %} •
|
||||
<i title="Sticky" class="fa fa-star fa-fw"></i>{% endif -%}
|
||||
<i title="Sticky" class="fa fa-star fa-fw"></i>{% endif -%}
|
||||
{% if post.is_organization_private and show_organization_private_icon %}
|
||||
•
|
||||
<span>
|
||||
{% for org in post.organizations.all() %}
|
||||
<span class="organization-tag" style="display: inherit;">
|
||||
<a href="{{ org.get_absolute_url() }}">
|
||||
<i class="fa fa-lock"></i> {{ org.name }}
|
||||
</a>
|
||||
</span>
|
||||
{% endfor %}
|
||||
•
|
||||
<span>
|
||||
{% for org in post.organizations.all() %}
|
||||
<span class="organization-tag" style="display: inherit;">
|
||||
<a href="{{ org.get_absolute_url() }}">
|
||||
<i class="fa fa-lock"></i> {{ org.name }}
|
||||
</a>
|
||||
</span>
|
||||
{% endfor %}
|
||||
</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
<span style="float: right">
|
||||
|
|
@ -39,9 +39,12 @@
|
|||
<div class="blog-description">
|
||||
<div class="summary content-description">
|
||||
{% cache 86400 'post_summary' post.id %}
|
||||
{{ post.summary|default(post.content, true)|markdown(lazy_load=True)|reference|str|safe }}
|
||||
{{ post.summary|default(post.content, true)|markdown(lazy_load=True)|reference|str|safe }}
|
||||
{% endcache %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="show-more"> {{_("...Xem thêm")}} </div>
|
||||
<div class="actionbar-box">
|
||||
{% set pagevote = post.pagevote %}
|
||||
{% set bookmark = post.bookmark %}
|
||||
{% set hide_actionbar_comment = True %}
|
||||
|
|
|
|||
|
|
@ -32,21 +32,20 @@
|
|||
{% block js_media %}
|
||||
<script type="text/javascript">
|
||||
function activateBlogBoxOnClick() {
|
||||
$('.blog-box').on('click', function () {
|
||||
var $description = $(this).children('.blog-description');
|
||||
$('.show-more').on('click', function () {
|
||||
var $description = $(this).parent().children('.blog-description');
|
||||
var max_height = $description.css('max-height');
|
||||
if (max_height !== 'fit-content') {
|
||||
$description.css('max-height', 'fit-content');
|
||||
$(this).css('cursor', 'auto');
|
||||
$(this).removeClass('pre-expand-blog');
|
||||
$(this).find('.actionbar').show();
|
||||
$(this).parent().css('cursor', 'auto');
|
||||
$(this).parent().removeClass('pre-expand-blog');
|
||||
console.log($(this).parent());
|
||||
$(this).hide();
|
||||
}
|
||||
})
|
||||
$('.blog-box').each(function () {
|
||||
if ($(this).prop('scrollHeight') > $(this).height()) {
|
||||
$(this).addClass('pre-expand-blog');
|
||||
$(this).css('cursor', 'pointer');
|
||||
$(this).find('.actionbar').hide();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue