Merge pull request #52 from zhaospei/master

Fix pre-expand-blog css

resources/blog.scss

@@ -32,7 +32,8 @@
     }
 }
 
-.blog-sidebar, .right-sidebar {
+.blog-sidebar,
+.right-sidebar {
     width: 100%;
     margin-left: auto;
 }
@@ -41,6 +42,7 @@
     color: green;
     font-weight: bold;
     background-color: lightgreen;
+
     .sidebar-icon {
         color: green;
     }
@@ -157,17 +159,21 @@
     padding-bottom: 1em;
     clear: both;
 }
+
 .problem-feed-name {
     display: inline;
     font-weight: bold;
 }
+
 .problem-feed-name a {
     color: #0645ad;
 }
+
 .problem-feed-info-entry {
     display: inline;
     float: right;
 }
+
 .problem-feed-types {
     color: gray;
 }
@@ -175,24 +181,30 @@
 .left-sidebar-item {
     display: flex;
     align-items: center;
+
     .sidebar-icon {
         font-size: large;
         display: inline-block;
+
         i {
             width: 1.4em;
         }
     }
 }
+
 .left-sidebar-item:hover {
     background-color: #e3e3e3;
     cursor: pointer;
 }
+
 .left-sidebar-item.active:hover {
     background-color: lightgreen;
 }
+
 .sidebar-icon {
     color: black;
 }
+
 .left-sidebar-header {
     text-align: center;
     padding-bottom: 1em;
@@ -200,13 +212,27 @@
     color: black;
     border-radius: 0;
 }
+
 .feed-table {
     margin: 0;
 }
+
 .pre-expand-blog {
-    background-image: -webkit-linear-gradient(bottom, gray, lightgray 3%, transparent 8%, transparent 100%);
+    position: relative;
     padding-bottom: 0;
 }
+
+.pre-expand-blog::before {
+    position: absolute;
+    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;
+}
+
 .pre-expand-blog:hover {
     background-color: #f3f3f3;
 }
@@ -224,6 +250,7 @@
     .left-sidebar-header {
         display: none;
     }
+
     .left-sidebar-item {
         padding: 0.8em 0.2em 0.8em 0.2em;
         display: inline-block;
@@ -234,25 +261,32 @@
             display: none;
         }
     }
+
     .left-sidebar {
         text-align: center;
         margin-bottom: 1em;
         border-radius: 7px;
         display: flex;
     }
+
     .blog-box {
         padding-left: 5%;
         padding-right: 5%;
     }
+
     .post-title {
         font-size: 2em;
     }
 }
+
 @media (min-width: 800px) {
     .left-sidebar-item {
         padding: 0.8em 0.2em 0.8em 1em;
     }
-    .middle-content, .blog-sidebar, .right-sidebar {
+
+    .middle-content,
+    .blog-sidebar,
+    .right-sidebar {
         display: block !important;
     }
 
@@ -274,7 +308,8 @@
         width: -webkit-fill-available;
     }
 
-    .blog-sidebar, .right-sidebar {
+    .blog-sidebar,
+    .right-sidebar {
         width: 25%;
     }
 

templates/three-column-content.html

@@ -3,50 +3,55 @@
 {% block title_ruler %}{% endblock %}
 
 {% block media %}
-  <style>
+<style>
   @media(min-width: 800px) {
     #content {
       width: 98%;
       margin-left: 0;
     }
+
     .middle-right-content {
       margin-left: 13%;
       display: inline-flex;
     }
   }
+
   @media(max-width: 799px) {
     #content {
       width: 100%;
       margin-left: 0;
     }
+
     .middle-right-content {
       display: block;
     }
   }
-  </style>
+</style>
 {% endblock %}
 
 {% block js_media %}
-  <script type="text/javascript">
+<script type="text/javascript">
   function activateBlogBoxOnClick() {
-      $('.blog-box').on('click', function() {
+    $('.blog-box').on('click', function () {
       var $description = $(this).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();
       }
     })
-      $('.blog-box').each(function() {
+    $('.blog-box').each(function () {
-        if ($(this).prop('scrollHeight') > $(this).height() ) {
+      if ($(this).prop('scrollHeight') > $(this).height()) {
         $(this).addClass('pre-expand-blog');
         $(this).css('cursor', 'pointer');
+        $(this).find('.actionbar').hide();
       }
     });
   }
 
-    function navigateTo($elem, update_sidebar=false) {
+  function navigateTo($elem, update_sidebar = false) {
     var url = $elem.attr('data-href') || $elem.attr('href');
 
     if (url === '#') return;
@@ -55,7 +60,7 @@
       $elem.addClass('active');
     }
     $('.middle-right-content').html(loading_page);
-      $.get(url, function(data) {
+    $.get(url, function (data) {
       var reload_content = $(data).find('.middle-right-content');
 
       if (reload_content.length) {
@@ -77,7 +82,7 @@
   function registerNavigation() {
     const links = ['.pagination a', '.tabs li a', '.problem-feed-option a'];
     for (link of links) {
-        $(link).on('click', function(e) {
+      $(link).on('click', function (e) {
         e.preventDefault();
         navigateTo($(this));
       })
@@ -90,24 +95,24 @@
     });
     activateBlogBoxOnClick();
 
-      $('.left-sidebar-item').on('click', function() {
+    $('.left-sidebar-item').on('click', function () {
       navigateTo($(this), true);
     });
     registerNavigation();
   });
-  </script>
+</script>
 {% endblock %}
 
 {% macro make_tab_item(name, fa, url, text) %}
-  <div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
+<div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
   <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
   <span>{{ text }}</span>
-  </div>
+</div>
 {% endmacro %}
 
 {% block body %}
-  {% block before_posts %}{% endblock %}
+{% block before_posts %}{% endblock %}
-  <div id="three-col-container">
+<div id="three-col-container">
   {% block left_sidebar %}{% endblock %}
   <div class="middle-right-content">
     {% block three_col_media %}{% endblock %}
@@ -118,14 +123,14 @@
     </div>
     {% block right_sidebar %}{% endblock %}
   </div>
-  </div>
+</div>
-  {% block after_posts %}{% endblock %}
+{% block after_posts %}{% endblock %}
 {% endblock %}
 
 {% block bodyend %}
-  {{ super() }}
+{{ super() }}
-  {% if REQUIRE_JAX %}
+{% if REQUIRE_JAX %}
-    {% include "mathjax-load.html" %}
+{% include "mathjax-load.html" %}
-  {% endif %}
+{% endif %}
-  {% include "comments/math.html" %}
+{% include "comments/math.html" %}
 {% endblock %}