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

@@ -9,16 +9,19 @@
       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;
     }
@@ -36,12 +39,14 @@
         $description.css('max-height', 'fit-content');
         $(this).css('cursor', 'auto');
         $(this).removeClass('pre-expand-blog');
+        $(this).find('.actionbar').show();
       }
     })
     $('.blog-box').each(function () {
       if ($(this).prop('scrollHeight') > $(this).height()) {
         $(this).addClass('pre-expand-blog');
         $(this).css('cursor', 'pointer');
+        $(this).find('.actionbar').hide();
       }
     });
   }