show actionbar pre-expand-blog

resources/blog.scss

@@ -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 {

templates/actionbar/list.html

@@ -1,18 +1,20 @@
 {% 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">
+{% 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 }})"
-      >
+      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 }})">
+    <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>
@@ -20,22 +22,23 @@
   <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 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 }})"
-      >
+      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" >
-      <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-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>
@@ -47,5 +50,5 @@
     </a>
   </span>
   {% endif %}
-  </div>
+</div>
 {% endif %}

templates/blog/content.html

@@ -42,6 +42,9 @@
       {{ 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 %}

templates/three-column-content.html

@@ -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();
       }
     });
   }