Design right sidebar of problem and organization home page (#117)

* Design right sidebar of problem and organization home page

* Change button small and message button

resources/widgets.scss

@@ -792,10 +792,34 @@ ul.errorlist {
     align-self: center !important;
 }
 
-.a-problem {
+.link-row {
-    font-size: 15px;
+    display: flex;
-    line-height: 1.8;
+    align-items: center;
+    padding: 6px;
     font-weight: normal;
+    cursor: pointer;
+    transition: background-color 0.3s;
+
+    a {
+        color: inherit;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        text-decoration: none;
+
+        i {
+            width: 1.5em;
+        }
+    }
+
+    span {
+        flex-grow: 1;
+    }
+
+    &:hover {
+        color: $theme_color;
+        background-color: #f8f8f2;
+    }
 }
 
 a {

templates/actionbar/list.html

@@ -53,7 +53,7 @@
     {% 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>
+          <i class="fa fa-flag" style="font-size: large;"></i>
           <span class="actionbar-text">{{_("Report")}}</span>
         </a>
       </span>

templates/organization/home.html

@@ -24,7 +24,8 @@
           </form>
         {% else %}
           <a href="{{ url('request_organization', organization.id, organization.slug) }}"
-            class="unselectable button">{{ _('Request membership') }}</a>
+            class="unselectable button">
+            {{ _('Request membership') }}</a>
         {% endif %}
       {% endif %}
     </div>

templates/organization/org-right-sidebar.html

@@ -4,71 +4,64 @@
       <h3><i class="fa fa-cog"></i>{{ _('Controls') }}</h3>
       <ul id="control-list" class="sidebox-content" style="margin: 0;">
         {% if can_edit %}
-          <li>
+          <div class="link-row">
-            <div>
+            <a href="{{ url('edit_organization', organization.id, organization.slug) }}">
-              <a href="{{ url('edit_organization', organization.id, organization.slug) }}">{{ _('Edit group') }}</a>
+              <i class="fa fa-edit"></i>{{ _('Edit group') }}</a>
-            </div>
+          </div>
-          </li>
         {% endif %}
         {% if can_edit and not organization.is_open %}
-          <li>
+          <div class="link-row">
-            <div>
+            <a href="{{ url('organization_requests_pending', organization.id, organization.slug) }}">
-              <a href="{{ url('organization_requests_pending', organization.id, organization.slug) }}">{{ _('View requests') }}</a>
+              <i class="fa fa-inbox"></i>{{ _('View requests') }}</a>
-              {% if pending_count > 0 %}
+            {% if pending_count > 0 %}
-                <span id="pending-count-box">
-                  {{pending_count}}
-                </span>
-              {% endif %}
-            </div>
-          </li>
-        {% endif %}
-        {% if can_edit %}
-          <li>
-            <div>
-              <a href="{{ url('add_organization_member', organization.id, organization.slug) }}">{{ _('Add members') }}</a>
-            </div>
-          </li>
-        {% endif %}
-        {% if is_member %}
-          <li>
-            <div>
-              <a href="{{ url('add_organization_blog', organization.id, organization.slug) }}">{{ _('Add blog') }}</a>
-            </div>
-          </li>
-        {% endif %}
-        <li>
-          <div>
-            <a href="{{ url('organization_pending_blogs', organization.id, organization.slug) }}">{{ _('Pending blogs') }}</a>
-            {% if pending_blog_count > 0 %}
               <span id="pending-count-box">
-                {{pending_blog_count}}
+                {{pending_count}}
               </span>
             {% endif %}
           </div>
-        </li>
+        {% endif %}
         {% if can_edit %}
-          <li>
+          <div class="link-row">
-            <div>
+            <a href="{{ url('add_organization_member', organization.id, organization.slug) }}">
-              <a href="{{ url('organization_contest_add', organization.id, organization.slug) }}">{{ _('Add contest') }}</a>
+              <i class="fa fa-user-plus"></i>{{ _('Add members') }}</a>
-            </div>
+          </div>
-          </li>
         {% endif %}
         {% if is_member %}
-          <li>
+          <div class="link-row">
-            <div>
+            <a href="{{ url('add_organization_blog', organization.id, organization.slug) }}">
-              <a href="{{ organization_subdomain }}" target="_blank">
+              <i class="fa fa-pencil"></i>{{ _('Add blog') }}</a>
-                {{_('Subdomain')}}
+          </div>
-              </a>
+        {% endif %}
-            </div>
+        <div class="link-row">
-          </li>
+          <a href="{{ url('organization_pending_blogs', organization.id, organization.slug) }}">
+            <i class="fa fa-clipboard-list"></i>{{ _('Pending blogs') }}</a>
+          {% if pending_blog_count > 0 %}
+            <span id="pending-count-box">
+              {{pending_blog_count}}
+            </span>
+          {% endif %}
+        </div>
+        {% if can_edit %}
+          <div class="link-row">
+            <a href="{{ url('organization_contest_add', organization.id, organization.slug) }}">
+              <i class="fa fa-calendar-plus"></i>{{ _('Add contest') }}</a>
+          </div>
+        {% endif %}
+        {% if is_member %}
+          <div class="link-row">
+            <a href="{{ organization_subdomain }}" target="_blank">
+              <i class="fa fa-globe"></i>{{_('Subdomain')}}
+            </a>
+          </div>
         {% endif %}
         {% if is_member and not is_admin %}
-          <li>
+          <div class="link-row" style="color: red;">
             <form method="post" action="{{ url('leave_organization', organization.id, organization.slug) }}">
               {% csrf_token %}
-              <a href="#" class="leave-organization">{{ _('Leave group') }}</a>
+              <a href="#" class="leave-organization">
+                <i class="fa fa-sign-out-alt"></i>{{ _('Leave group') }}</a>
             </form>
-          </li>
+          </div>
         {% endif %}
       </ul>
     </div>

templates/problem/problem.html

@@ -131,7 +131,7 @@
       <a id="pdf_button" class="view-pdf" href='#'>
     {% endif %}
     <span class="pdf-icon">
-      <span class="fa fa-file-pdf-o pdf-icon-logo"></span>
+      <span class="fa fa-file-pdf pdf-icon-logo"></span>
       <span class="pdf-icon-bar"></span>
     </span>
     {{ _('View as PDF') }}
@@ -147,7 +147,7 @@
         <button class="btn-green btn btn-primary btn-block btn-round">
           <span>{{ _('Submit') }}</span>
           <div class="icon icon-round d-flex align-items-center justify-content-center">
-            <i class="fa fa-send"></i>
+            <i class="fa fa-paper-plane"></i>
           </div>
         </button>
       </a>
@@ -162,7 +162,7 @@
       <button class="btn btn-disabled btn-block btn-round">
         <span>{{ _('Submit') }}</span>
         <div class="icon icon-round d-flex align-items-center justify-content-center">
-          <i class="fa fa-send"></i>
+          <i class="fa fa-paper-plane"></i>
         </div>
       </button>
       <div class="no-submissions-left submissions-left">{{ _('0 submissions left') }}</div>
@@ -172,7 +172,7 @@
       <button class="btn-green btn btn-primary btn-block btn-round">
         <span>{{ _('Submit') }}</span>
         <div class="icon icon-round d-flex align-items-center justify-content-center">
-          <i class="fa fa-send"></i>
+          <i class="fa fa-paper-plane"></i>
         </div>
       </button>
     </a>
@@ -181,155 +181,185 @@
   <hr style="padding-bottom: 0.3em">
 
   {% if request.user.is_authenticated and has_submissions %}
-    <div>
+    <div class="link-row">
-      <a class="a-problem" href="{{ url('user_submissions', problem.code, request.user.username) }}">{{ _('My submissions') }}</a>
+      <a href="{{url('user_submissions', problem.code, request.user.username) }}">
+        <i class="fa fa-address-book"></i><span> {{ _('My submissions') }}</span>
+      </a>
     </div>
   {% endif %}
-  <div><a class="a-problem" href="{{ url('chronological_submissions', problem.code) }}">{{ _('All submissions') }}</a></div>
+  <div class="link-row">
-  <div><a class="a-problem" href="{{ url('ranked_submissions', problem.code) }}">{{ _('Best submissions') }}</a></div>
+    <a href="{{ url('chronological_submissions', problem.code) }}">
-  {% if editorial and editorial.is_public and
+      <i class="fa fa-rectangle-list"></i><span> {{ _('All submissions') }}</span>
-  not (request.user.is_authenticated and request.in_contest_mode) %}
-  <hr>
-  <div><a class="a-problem" href="{{ url('problem_editorial', problem.code) }}">{{ _('Read editorial') }}</a></div>
-{% endif %}
-{% if can_edit_problem %}
-  <hr>
-  <div>
-    <a class="a-problem" href="{{ url('problem_ticket_list', problem.code) }}">{{ _('Manage tickets') }}
-      {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
     </a>
   </div>
-  <div><a class="a-problem" href="{{ url('admin:judge_problem_change', problem.id) }}">{{ _('Edit problem') }}</a></div>
+  <div class="link-row">
-  {% if not problem.is_manually_managed %}
+    <a href="{{ url('ranked_submissions', problem.code) }}">
-    <div><a class="a-problem" href="{{ url('problem_data', problem.code) }}">{{ _('Edit test data') }}</a></div>
+      <i class="fa fa-list-check"></i><span> {{ _('Best submissions') }}</span>
+    </a>
+  </div>
+  {% if editorial and editorial.is_public and not (request.user.is_authenticated and request.in_contest_mode) %}
+    <hr>
+    <div class="link-row">
+      <a href="{{ url('problem_editorial', problem.code) }}">
+        <i class="fa fa-newspaper"></i><span> {{ _('Read editorial') }}</span>
+      </a>
+    </div>
   {% endif %}
-{% elif request.user.is_authenticated and has_tickets %}
-  <hr>
-  <div>
-    <a class="a-problem" href="{{ url('problem_ticket_list', problem.code) }}">{{ _('My tickets') }}
-      {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
-    </a>
-  </div>
-{% endif %}
 
-{% if problem.is_subs_manageable_by(request.user) %}
+  {% if can_edit_problem %}
-  <div>
+    <hr>
-    <a class="a-problem" href="{{ url('problem_manage_submissions', problem.code) }}">{{ _('Manage submissions') }}</a>
+    <div class="link-row">
-  </div>
+      <a href="{{ url('problem_ticket_list', problem.code) }}">
-{% endif %}
+        <i class="fa fa-clipboard-list"></i><span> {{ _('Manage tickets') }}
-
+          {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
-{% if perms.judge.clone_problem %}
+        </span>
-  <div>
+      </a>
-    <a class="a-problem" href="{{ url('problem_clone', problem.code) }}">{{ _('Clone problem') }}</a>
+    </div>
-  </div>
+    <div class="link-row">
-{% endif %}
+      <a href="{{ url('admin:judge_problem_change', problem.id) }}">
-
+        <i class="fa fa-edit"></i><span> {{ _('Edit problem') }}</span>
-{% if problem.language_time_limit or problem.language_memory_limit %}
+      </a>
-  <hr style="padding-top: 0.3em">
+    </div>
-{% endif %}
+    {% if not problem.is_manually_managed %}
-{% if problem.language_time_limit %}
+      <div class="link-row">
-  <div class="problem-info-entry">
+        <a href="{{ url('problem_data', problem.code) }}">
-    <i class="fa fa-clock-o fa-fw"></i><span class="pi-name">{{ _('Time limit:') }}</span>
+          <i class="fa fa-database"></i><span> {{ _('Edit test data') }}</span>
-  </div>
+        </a>
-  <div class="problem-lang-limits">
-    {% for name, limit in problem.language_time_limit %}
-      <div class="lang-limit">
-        <span class="lang-name">{{ name }}</span>
-        <span class="lang-tl">{{ limit }}s</span>
       </div>
-    {% endfor %}
+    {% endif %}
-  </div>
+  {% elif request.user.is_authenticated and has_tickets %}
-{% endif %}
+    <hr>
-{% if problem.language_memory_limit %}
+    <div class="link-row">
-  <div class="problem-info-entry">
+      <a href="{{ url('problem_ticket_list', problem.code) }}">
-    <i class="fa fa-server fa-fw"></i><span class="pi-name">{{ _('Memory limit:') }}</span>
+        <i class="fa fa-inbox"></i><span> {{ _('My tickets') }}
-  </div>
+          {% if num_open_tickets %}<span class="badge">{{ num_open_tickets }}</span>{% endif %}
-  <div class="problem-lang-limits">
+        </span>
-    {% for name, limit in problem.language_memory_limit %}
+      </a>
-      <div class="lang-limit">
+    </div>
-        <span class="lang-name">{{ name }}</span>
+  {% endif %}
-        <span class="lang-ml">{{ limit|kbsimpleformat }}</span>
-      </div>
-    {% endfor %}
-  </div>
-{% endif%}
 
-<hr style="padding-top: 0.7em">
+  {% if problem.is_subs_manageable_by(request.user) %}
+    <div class="link-row">
+      <a href="{{ url('problem_manage_submissions', problem.code) }}">
+        <i class="fas fa-table"></i><span> {{ _('Manage submissions') }}</span>
+      </a>
+    </div>
+  {% endif %}
 
-{% with authors=problem.get_authors() %}
+  {% if perms.judge.clone_problem %}
-  {% if authors %}
+    <div class="link-row">
+      <a href="{{ url('problem_clone', problem.code) }}">
+        <i class="fas fa-clone"></i><span> {{ _('Clone problem') }}</span>
+      </a>
+    </div>
+  {% endif %}
+
+  {% if problem.language_time_limit or problem.language_memory_limit %}
+    <hr style="padding-top: 0.3em">
+  {% endif %}
+  {% if problem.language_time_limit %}
     <div class="problem-info-entry">
-      <i class="far fa-pen-to-square"></i><span
+      <i class="fa fa-clock"></i><span class="pi-name"> {{ _('Time limit:') }}</span>
-        class="pi-name">{% trans trimmed count=authors|length %}
+    </div>
-          Author:
+    <div class="problem-lang-limits">
-          {% pluralize count %}
+      {% for name, limit in problem.language_time_limit %}
-          Authors:
+        <div class="lang-limit">
-        {% endtrans %}</span>
+          <span class="lang-name">{{ name }}</span>
-      <div class="pi-value authors-value">{{ link_users(authors) }}</div>
+          <span class="lang-tl">{{ limit }}s</span>
+        </div>
+      {% endfor %}
     </div>
   {% endif %}
-{% endwith %}
+  {% if problem.language_memory_limit %}
-
+    <div class="problem-info-entry">
-{% if not contest_problem or not contest_problem.contest.hide_problem_tags %}
+      <i class="fa fa-server"></i><span class="pi-name"> {{ _('Memory limit:') }}</span>
-  <div id="problem-types">
-    {% with types=problem.types_list %}
-      <div class="toggle closed unselectable">
-        <i class="fa fa-chevron-right fa-fw"></i>{% trans trimmed count=problem.types_list|length %}
-          Problem type
-          {% pluralize count %}
-          Problem types
-        {% endtrans %}
-      </div>
-      <div style="display:none" class="toggled">{{ problem.types_list|join(", ") }}</div>
-    {% endwith %}
-  </div>
-{% endif %}
-{% if show_languages %}
-  <div id="allowed-langs">
-    <div class="toggle open unselectable">
-      <i class="fa fa-chevron-right fa-fw"></i>{{ _('Allowed languages') }}
     </div>
-    <div class="toggled">
+    <div class="problem-lang-limits">
-      {% with usable=problem.usable_common_names, langs=problem.languages_list() %}
+      {% for name, limit in problem.language_memory_limit %}
-        {% for lang in langs %}
+        <div class="lang-limit">
-          {%- if lang in usable -%}
+          <span class="lang-name">{{ name }}</span>
-            {{ lang }}
+          <span class="lang-ml">{{ limit|kbsimpleformat }}</span>
-          {%- else -%}
+        </div>
-            <s title="{{ _('No %(lang)s judge online', lang=lang) }}">{{ lang }}</s>
+      {% endfor %}
-          {%- endif -%}
+    </div>
-          {% if not loop.last %}, {% endif -%}
+  {% endif%}
-        {% endfor %}
+
+  <hr style="padding-top: 0.7em">
+
+  {% with authors=problem.get_authors() %}
+    {% if authors %}
+      <div class="problem-info-entry">
+        <i class="far fa-pen-to-square"></i><span
+          class="pi-name"> {% trans trimmed count=authors|length %}
+            Author:
+            {% pluralize count %}
+            Authors:
+          {% endtrans %}</span>
+        <div class="pi-value authors-value">{{ link_users(authors) }}</div>
+      </div>
+    {% endif %}
+  {% endwith %}
+
+  {% if not contest_problem or not contest_problem.contest.hide_problem_tags %}
+    <div id="problem-types">
+      {% with types=problem.types_list %}
+        <div class="toggle closed unselectable">
+          <i class="fa fa-chevron-right"></i> {% trans trimmed count=problem.types_list|length %}
+            Problem type
+            {% pluralize count %}
+            Problem types
+          {% endtrans %}
+        </div>
+        <div style="display:none" class="toggled">{{ problem.types_list|join(", ") }}</div>
       {% endwith %}
     </div>
-  </div>
+  {% endif %}
-{% endif %}
+  {% if show_languages %}
-{% if problem.is_editable_by(request.user) %}
+    <div id="allowed-langs">
-  <div id="available-judges">
+      <div class="toggle open unselectable">
-    <div class="toggle closed" id="judge-toggle">
+        <i class="fa fa-chevron-right"></i> {{ _('Allowed languages') }}
-      <i class="fa fa-chevron-right fa-fw"></i><span
+      </div>
-        class="pi-name">{% trans trimmed count=available_judges|length %}
+      <div class="toggled">
-          Judge
+        {% with usable=problem.usable_common_names, langs=problem.languages_list() %}
-          {% pluralize count %}
+          {% for lang in langs %}
-          Judges
+            {%- if lang in usable -%}
-        {% endtrans %}
+              {{ lang }}
-      </span>
+            {%- else -%}
-    </div>
+              <s title="{{ _('No %(lang)s judge online', lang=lang) }}">{{ lang }}</s>
-    <div class="pi-value judges-value toggled" style="display: none;">
+            {%- endif -%}
-      {% if available_judges %}
+            {% if not loop.last %}, {% endif -%}
-        {% if perms.judge.change_judge %}
-          {% for judge in available_judges %}
-            <a href="{{ url('admin:judge_judge_change', judge.id) }}">{{ judge.name }}</a>
-            {%- if not loop.last %}, {% endif %}
           {% endfor %}
-        {% else %}
+        {% endwith %}
-          {{ available_judges|join(", ") }}
+      </div>
-        {% endif %}
-      {% else %}
-        <i class="red">{{ _('none available') }}</i>
-      {% endif %}
     </div>
-  </div>
+  {% endif %}
-{% endif %}
+  {% if problem.is_editable_by(request.user) %}
+    <div id="available-judges">
+      <div class="toggle closed" id="judge-toggle">
+        <i class="fa fa-chevron-right"></i><span
+          class="pi-name"> {% trans trimmed count=available_judges|length %}
+            Judge
+            {% pluralize count %}
+            Judges
+          {% endtrans %}
+        </span>
+      </div>
+      <div class="pi-value judges-value toggled" style="display: none;">
+        {% if available_judges %}
+          {% if perms.judge.change_judge %}
+            {% for judge in available_judges %}
+              <a href="{{ url('admin:judge_judge_change', judge.id) }}">{{ judge.name }}</a>
+              {%- if not loop.last %}, {% endif %}
+            {% endfor %}
+          {% else %}
+            {{ available_judges|join(", ") }}
+          {% endif %}
+        {% else %}
+          <i class="red">{{ _('none available') }}</i>
+        {% endif %}
+      </div>
+    </div>
+  {% endif %}
 {% endblock %}
 
 {% block description %}
@@ -345,7 +375,7 @@
   {% endif %}
   <div class = "new-problem-info d-flex-problem">
     <span class="info-block">
-      <i class="fa fa-check fa-fw"></i><span class="pi-name">{{ _('Points:') }}</span>
+      <i class="fa fa-check"></i><span class="pi-name"> {{ _('Points:') }}</span>
       <span class="new-pi-value">
         {% if contest_problem %}
           {{ contest_problem.points }} {% if contest_problem.partial %}(p){% endif %}
@@ -356,24 +386,24 @@
     </span>
 
     <span class="info-block">
-      <i class="fa fa-clock-o fa-fw"></i><span class="pi-name">{{ _('Time limit:') }}</span>
+      <i class="fa fa-clock"></i><span class="pi-name"> {{ _('Time limit:') }}</span>
       <span class="new-pi-value">{{ problem.time_limit }}s</span>
     </span>
 
     <span class="info-block">
-      <i class="fa fa-server fa-fw"></i><span class="pi-name">{{ _('Memory limit:') }}</span>
+      <i class="fa fa-server"></i><span class="pi-name"> {{ _('Memory limit:') }}</span>
       <span class="new-pi-value">{{ problem.memory_limit|kbsimpleformat }}</span>
     </span>
 
     <span class="info-block">
-      <i class="fa fa-file-o fa-fw"></i><span class="pi-name">{{ _('Input:') }}</span>
+      <i class="fa fa-file"></i><span class="pi-name"> {{ _('Input:') }}</span>
       <span class="new-pi-value">
         {{ fileio_input or _('stdin') }}
       </span>
     </span>
 
     <span>
-      <i class="fa fa-file fa-fw"></i><span class="pi-name">{{ _('Output:') }}</span>
+      <i class="fa fa-file"></i><span class="pi-name"> {{ _('Output:') }}</span>
       <span class="new-pi-value">{{ fileio_output or _('stdout') }}</span>
     </span>
   </div>

templates/submission/status.html

@@ -135,19 +135,23 @@
 {% block body %}
   <div style="clear: both"></div>
   <br>
-  {% if request.profile == submission.user or perms.judge.resubmit_other %}
+  <div style="width: fit-content;">
-    <div><a href="{{ url('problem_submit', submission.problem.code, submission.id) }}">{{ _('Resubmit') }}</a></div>
+    {% if request.profile == submission.user or perms.judge.resubmit_other %}
-  {% endif %}
+      <div class="link-row"><a href="{{ url('problem_submit', submission.problem.code, submission.id) }}">
-  {% if perms.judge.rejudge_submission %}
+        <i class="fa fa-upload"></i>{{ _('Resubmit') }}</a></div>
-    <div>
+    {% endif %}
-      <form action="{{ url('submission_rejudge') }}" method="post">
+    {% if perms.judge.rejudge_submission %}
-        {% csrf_token %}
+      <div class="link-row">
-        <a href="#" onclick="parentNode.submit()">{{ _('Rejudge') }}</a>
+        <form action="{{ url('submission_rejudge') }}" method="post">
-        <input type="hidden" name="id" value="{{ submission.id }}">
+          {% csrf_token %}
-        <input type="hidden" name="path" value="{{ url('submission_status', submission.id) }}">
+          <a href="#" onclick="parentNode.submit()">
-      </form>
+            <i class="fa fa-rotate-right"></i>{{ _('Rejudge') }}</a>
-    </div>
+          <input type="hidden" name="id" value="{{ submission.id }}">
-  {% endif %}
+          <input type="hidden" name="path" value="{{ url('submission_status', submission.id) }}">
+        </form>
+      </div>
+    {% endif %}
+  </div>
 
   <br>
   <h3 id="source-header" class="toggle closed"><i class="fa fa-chevron-right fa-fw"></i>{{_('Source code')}}</h3>

templates/user/user-base.html

@@ -112,7 +112,7 @@
       {% if request.user.is_authenticated and request.profile != user %}
         <br>
         <button class="small btn-midnightblue" style="width:100%" id="message-button">
-          {{ _('Send message') }}
+          <i class="fa fa-envelope"></i> {{ _('Message') }}
         </button>
       {% endif %}