Merge pull request #53 from zhaospei/master

Change pre-expand-blog style

locale/vi/LC_MESSAGES/dmoj-user.po

@@ -402,6 +402,9 @@ msgstr ""
 msgid "monotonic-queue"
 msgstr ""
 
+msgid "mst"
+msgstr ""
+
 msgid "multiplicative"
 msgstr ""
 
@@ -555,6 +558,9 @@ msgstr ""
 msgid "tortoise-hare"
 msgstr ""
 
+msgid "Training"
+msgstr ""
+
 msgid "treap/splay"
 msgstr ""
 

resources/blog.scss

@@ -222,20 +222,26 @@
     padding-bottom: 0;
 }
 
-.pre-expand-blog::before {
+.show-more {
+    color: black;
+    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;
         }
     }
-}
+}

resources/darkmode.css

@@ -1938,16 +1938,11 @@ noscript #noscript {
     border-bottom-color: rgb(140, 130, 115);
     color: rgb(232, 230, 227);
 }
-.pre-expand-blog::before {
-    background-image: -webkit-linear-gradient(bottom,
-    rgb(96, 104, 108),
-    rgb(49, 53, 55) 3%,
-    rgba(0, 0, 0, 0) 8%,
-    rgba(0, 0, 0, 0) 100%);
-}
-.pre-expand-blog:hover {
-    background-color: rgb(31, 33, 35);
+.show-more {
+    color: white;
+    background: linear-gradient(rgba(24, 26, 27, 0) 1%, rgb(31, 33, 35) 95%, rgb(31, 33, 35) 100%);
 }
+
 @media (min-width: 800px) {
     .blog-box {
         border-left-color: rgb(60, 65, 68);

templates/actionbar/list.html

@@ -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 %}

templates/blog/content.html

@@ -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 %}
       &#8226;
       {{ relative_time(post.publish_on, abs=_('on {time}'), rel=_('{time}')) -}}
       {%- if post.sticky %} &#8226;
-        <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 %}
-        &#8226;
-        <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 %}
+      &#8226;
+      <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"> {{_("...More")}} </div>
+  <div class="actionbar-box">
     {% set pagevote = post.pagevote %}
     {% set bookmark = post.bookmark %}
     {% set hide_actionbar_comment = True %}

templates/problem/feed.html

@@ -1,141 +1,150 @@
 {% extends "problem/list-base.html" %}
 {% block left_sidebar %}
-  {% include "problem/left-sidebar.html" %}
+{% include "problem/left-sidebar.html" %}
 {% endblock %}
 
 {% block middle_content %}
-  <div class="problem-feed-option">
-    <a href="{{url('problem_feed')}}" class="button small  {{'btn-midnightblue' if feed_type=='for_you' else 'btn-gray'}}">
-      {{_('FOR YOU')}}
+<div class="problem-feed-option">
+  <a href="{{url('problem_feed')}}"
+    class="button small  {{'btn-midnightblue' if feed_type=='for_you' else 'btn-gray'}}">
+    {{_('FOR YOU')}}
+  </a>
+  <a href="{{url('problem_feed_new')}}" class="button small {{'btn-midnightblue' if feed_type=='new' else 'btn-gray'}}">
+    {{_('NEW')}}
+  </a>
+  {% if request.user.has_perm('judge.suggest_problem_changes') %}
+  <a href="{{url('problem_feed_volunteer')}}"
+    class="button small {{'btn-midnightblue' if feed_type=='volunteer' else 'btn-gray'}}">
+    {{_('VOLUNTEER')}}
+  </a>
+  {% endif %}
+</div>
+{% if request.user.has_perm('judge.suggest_problem_changes') and feed_type == 'volunteer' %}
+<ul style="margin-bottom: 1em; margin-left: auto">
+  <li><a href="{{url('admin:judge_volunteerproblemvote_changelist')}}">{{_('View your votes')}}</a></li>
+</ul>
+{% endif %}
+{% for problem in problems %}
+<div class="blog-box">
+  <h3 class="problem-feed-name">
+    <a href="{{ url('problem_detail', problem.code) }}">
+      {{ problem.i18n_name }}
     </a>
-    <a href="{{url('problem_feed_new')}}" class="button small {{'btn-midnightblue' if feed_type=='new' else 'btn-gray'}}">
-      {{_('NEW')}}
-    </a>
-    {% if request.user.has_perm('judge.suggest_problem_changes') %}
-      <a href="{{url('problem_feed_volunteer')}}" class="button small {{'btn-midnightblue' if feed_type=='volunteer' else 'btn-gray'}}">
-        {{_('VOLUNTEER')}}
-      </a>
+    {% if problem.id in completed_problem_ids %}
+    <i class="solved-problem-color fa fa-check-circle"></i>
+    {% elif problem.id in attempted_problems %}
+    <i class="attempted-problem-color fa fa-minus-circle"></i>
+    {% else %}
+    <i class="unsolved-problem-color fa fa-minus-circle"></i>
+    {% endif %}
+  </h3>
+  {% with authors=problem.authors.all() %}
+  {% if authors %}
+  <div class="problem-feed-info-entry">
+    <i class="fa fa-pencil-square-o fa-fw"></i>
+    <span class="pi-value">{{ link_users(authors) }}</span>
+  </div>
+  {% endif %}
+  {% endwith %}
+  {% if show_types %}
+  <div class="problem-feed-types">
+    <i class="fa fa-tag"></i>
+    {% for type in problem.types_list %}
+    <span class="type-tag">{{ type }}</span>{% if not loop.last %}, {% endif %}
+    {% endfor %}, *{{problem.points | int}}
+  </div>
+  {% endif %}
+  <div class="blog-description">
+    <div class='content-description'>
+      {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
+      {{ problem.description|markdown(lazy_load=True)|reference|str|safe }}
+      {% endcache %}
+      {% if problem.pdf_description %}
+      <embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf"
+        style="margin-top: 0.5em">
+      {% endif %}
+    </div>
+    {% if feed_type=='volunteer' and request.user.has_perm('judge.suggest_problem_changes') %}
+    <br>
+    <a href="#" class="view-statement-src">{{ _('View source') }}</a>
+    <pre class="statement-src" style="display: none">{{ problem.description|str }}</pre>
+    <hr>
+    <center>
+      <h3>{{_('Volunteer form')}}</h3>
+    </center>
+    <br>
+    <button class="edit-btn" id="edit-{{problem.id}}" pid="{{problem.id}}" style="float: right">{{_('Edit')}}</button>
+    <form class="volunteer-form" id="form-{{problem.id}}" pid="{{problem.id}}" style="display: none;" method="POST">
+      <input type="submit" class="volunteer-submit-btn" id="submit-{{problem.id}}" pid="{{problem.id}}"
+        pcode="{{problem.code}}" style="float: right" value="{{_('Submit')}}">
+      <table class="table">
+        <thead>
+          <tr>
+            <th>
+            </th>
+            <th>
+              {{_('Value')}}
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td width="30%">
+              <label for="knowledge_point-{{problem.id}}"><i>{{ _('Knowledge point') }}</i></label>
+            </td>
+            <td>
+              <input id="knowledge_point-{{problem.id}}" type="number" class="point-input" required>
+            </td>
+          </tr>
+          <tr>
+            <td width="30%">
+              <label for="thinking_point-{{problem.id}}"><i>{{ _('Thinking point') }}</i></label>
+            </td>
+            <td>
+              <input id="thinking_point-{{problem.id}}" type="number" class="point-input" required>
+            </td>
+          </tr>
+          <tr>
+            <td width="30%">
+              <label for="types"><i>{{ _('Problem types') }}</i></label>
+            </td>
+            <td>
+              <select id="volunteer-types-{{problem.id}}" name="types" multiple>
+                {% for type in problem_types %}
+                <option value="{{ type.id }}" {% if type in problem.types.all() %} selected{% endif %}>
+                  {{ type.full_name }}
+                </option>
+                {% endfor %}
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td width="30%">
+              <label for="feedback"><i>{{ _('Feedback') }}</i></label>
+            </td>
+            <td>
+              <textarea id="feedback-{{problem.id}}" rows="2" style="width: 100%"
+                placeholder="{{_('Any additional note here')}}"></textarea>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </form>
+    <center id="thank-{{problem.id}}" style="display: none; margin-top: 3em"></center>
     {% endif %}
   </div>
-  {% if request.user.has_perm('judge.suggest_problem_changes') and feed_type == 'volunteer' %}
-    <ul style="margin-bottom: 1em; margin-left: auto">
-      <li><a href="{{url('admin:judge_volunteerproblemvote_changelist')}}">{{_('View your votes')}}</a></li>
-    </ul>
-  {% endif %}
-  {% for problem in problems %}
-    <div class="blog-box">
-      <h3 class="problem-feed-name">
-        <a href="{{ url('problem_detail', problem.code) }}">
-          {{ problem.i18n_name }}
-        </a>
-        {% if problem.id in completed_problem_ids %}
-          <i class="solved-problem-color fa fa-check-circle"></i>
-        {% elif problem.id in attempted_problems %}
-          <i class="attempted-problem-color fa fa-minus-circle"></i>
-        {% else %}
-          <i class="unsolved-problem-color fa fa-minus-circle"></i>
-        {% endif %}
-      </h3>
-      {% with authors=problem.authors.all() %}
-        {% if authors %}
-          <div class="problem-feed-info-entry">
-            <i class="fa fa-pencil-square-o fa-fw"></i>
-            <span class="pi-value">{{ link_users(authors) }}</span>
-          </div>
-        {% endif %}
-      {% endwith %}
-      {% if show_types %}
-        <div class="problem-feed-types">
-          <i class="fa fa-tag"></i>
-          {% for type in problem.types_list %}
-            <span class="type-tag">{{ type }}</span>{% if not loop.last %}, {% endif %}
-          {% endfor %}, *{{problem.points | int}}
-        </div>
-      {% endif %}
-      <div class="blog-description">
-        <div class='content-description'>
-          {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
-            {{ problem.description|markdown(lazy_load=True)|reference|str|safe }}
-          {% endcache %}
-          {% if problem.pdf_description %}
-            <embed src="{{url('problem_pdf_description', problem.code)}}" width="100%" height="500" type="application/pdf" style="margin-top: 0.5em">
-          {% endif %}
-        </div>
-        {% set include_hr = True %}
-        {% set hide_actionbar_comment = True %}
-        {% set pagevote = problem.pagevote %}
-        {% set bookmark = problem.bookmark %}
-        {% set share_url = request.build_absolute_uri(problem.get_absolute_url()) %}
-        {% include "actionbar/list.html" %}
-
-        {% if feed_type=='volunteer' and request.user.has_perm('judge.suggest_problem_changes') %}
-          <br>
-          <a href="#" class="view-statement-src">{{ _('View source') }}</a>
-          <pre class="statement-src" style="display: none">{{ problem.description|str }}</pre>
-          <hr>
-          <center><h3>{{_('Volunteer form')}}</h3></center>
-          <br>
-          <button class="edit-btn" id="edit-{{problem.id}}" pid="{{problem.id}}" style="float: right">{{_('Edit')}}</button>
-          <form class="volunteer-form" id="form-{{problem.id}}" pid="{{problem.id}}" style="display: none;" method="POST">
-            <input type="submit" class="volunteer-submit-btn" id="submit-{{problem.id}}" pid="{{problem.id}}" pcode="{{problem.code}}" style="float: right" value="{{_('Submit')}}">
-            <table class="table">
-              <thead>
-                <tr>
-                  <th>
-                  </th>
-                  <th>
-                    {{_('Value')}}
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td width="30%">
-                    <label for="knowledge_point-{{problem.id}}"><i>{{ _('Knowledge point') }}</i></label>
-                  </td>
-                  <td>
-                    <input id="knowledge_point-{{problem.id}}" type="number" class="point-input" required>
-                  </td>
-                </tr>
-                <tr>
-                  <td width="30%">
-                    <label for="thinking_point-{{problem.id}}"><i>{{ _('Thinking point') }}</i></label>
-                  </td>
-                  <td>
-                    <input id="thinking_point-{{problem.id}}" type="number" class="point-input" required>
-                  </td>
-                </tr>
-                <tr>
-                  <td width="30%">
-                    <label for="types"><i>{{ _('Problem types') }}</i></label>
-                  </td>
-                  <td>
-                    <select id="volunteer-types-{{problem.id}}" name="types" multiple>
-                      {% for type in problem_types %}
-                        <option value="{{ type.id }}"{% if type in problem.types.all() %} selected{% endif %}>
-                          {{ type.full_name }}
-                        </option>
-                      {% endfor %}
-                    </select>
-                  </td>
-                </tr>
-                <tr>
-                  <td width="30%">
-                    <label for="feedback"><i>{{ _('Feedback') }}</i></label>
-                  </td>
-                  <td>
-                    <textarea id="feedback-{{problem.id}}" rows="2" style="width: 100%" placeholder="{{_('Any additional note here')}}"></textarea>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </form>
-          <center id="thank-{{problem.id}}" style="display: none; margin-top: 3em"></center>
-        {% endif %}
-      </div>
-    </div>
-  {% endfor %}
-  {% if page_obj.num_pages > 1 %}
-    <div style="margin-top:10px;">{% include "list-pages.html" %}</div>
-  {% endif %}
+  <div class="show-more"> {{_("...More")}} </div>
+  <div class="actionbar-box">
+    {% set pagevote = problem.pagevote %}
+    {% set bookmark = problem.bookmark %}
+    {% set hide_actionbar_comment = True %}
+    {% set include_hr = True %}
+    {% set share_url = request.build_absolute_uri(problem.get_absolute_url()) %}
+    {% include "actionbar/list.html" %}
+  </div>
+</div>
+{% endfor %}
+{% if page_obj.num_pages > 1 %}
+<div style="margin-top:10px;">{% include "list-pages.html" %}</div>
+{% endif %}
 {% endblock %}

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