From 5cbf3489b39873db2bf016d4239b236ff2a1f5dc Mon Sep 17 00:00:00 2001
From: Van Duc Le <121172468+yucyle@users.noreply.github.com>
Date: Thu, 16 Nov 2023 20:02:36 -0600
Subject: [PATCH] Update Problem UI (Problem Information) (#94)

---
 resources/problem.scss         | 16 +++++++
 templates/problem/problem.html | 83 ++++++++++++++--------------------
 2 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/resources/problem.scss b/resources/problem.scss
index ddb3690..ff2b8d1 100644
--- a/resources/problem.scss
+++ b/resources/problem.scss
@@ -416,3 +416,19 @@ ul.problem-list {
         }
     }
 }
+
+.new-problem-info {
+    background-color: #fff6dd;
+    border-radius: 25px;
+    font-size: 14px;
+    height: 25px;
+    width: 100%;
+    display: table;
+    padding: 5px;
+    margin-top: 12px;
+}
+
+.info-block {
+    display:table-cell;
+    vertical-align:middle;
+}
\ No newline at end of file
diff --git a/templates/problem/problem.html b/templates/problem/problem.html
index 29c923d..38d72dd 100644
--- a/templates/problem/problem.html
+++ b/templates/problem/problem.html
@@ -117,7 +117,6 @@
         {% endfor %}
       </span>
     {% endif %}
-
     <span class="spacer"></span>
     {% if has_render %}
       <a href="{{ url('problem_pdf', problem.code) }}" class="view-pdf" target="_blank">
@@ -135,6 +134,7 @@
   </div>
 {% endblock %}
 
+
 {% block info_float %}
   {% if request.user.is_authenticated and request.in_contest_mode and submission_limit %}
     {% if submissions_left > 0 %}
@@ -204,53 +204,6 @@
   </div>
 {% endif %}
 
-<hr style="padding-top: 0.3em">
-
-<div class="problem-info-entry">
-  <i class="fa fa-check fa-fw"></i><span class="pi-name">{{ _('Points:') }}</span>
-  <span class="pi-value">
-    {% if contest_problem %}
-      {{ contest_problem.points }}{% if contest_problem.partial %} {{ _('(partial)') }}{% endif %}
-    {% else %}
-      {{ problem.points|floatformat }}{% if problem.partial %} {{ _('(partial)') }}{% endif %}
-    {% endif %}
-  </span>
-</div>
-<div class="problem-info-entry">
-  <i class="fa fa-clock-o fa-fw"></i><span class="pi-name">{{ _('Time limit:') }}</span>
-  <span class="pi-value">{{ problem.time_limit }}s</span>
-</div>
-<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 %}
-</div>
-<div class="problem-info-entry">
-  <i class="fa fa-server fa-fw"></i><span class="pi-name">{{ _('Memory limit:') }}</span>
-  <span class="pi-value">{{ problem.memory_limit|kbsimpleformat }}</span>
-</div>
-<div class="problem-lang-limits">
-  {% for name, limit in problem.language_memory_limit %}
-    <div class="lang-limit">
-      <span class="lang-name">{{ name }}</span>
-      <span class="lang-ml">{{ limit|kbsimpleformat }}</span>
-    </div>
-  {% endfor %}
-</div>
-<div class="problem-info-entry">
-  <i class="fa fa-file-o fa-fw"></i><span class="pi-name">{{ _('Input:') }}</span>
-  <span class="pi-value">
-    {{ fileio_input or _('stdin') }}
-  </span>
-</div>
-<div class="problem-info-entry">
-  <i class="fa fa-file fa-fw"></i><span class="pi-name">{{ _('Output:') }}</span>
-  <span class="pi-value">{{ fileio_output or _('stdout') }}</span>
-</div>
-
 <hr style="padding-top: 0.7em">
 
 {% cache 86400 'problem_authors' problem.id LANGUAGE_CODE %}
@@ -342,6 +295,40 @@
       </a>
     </div>
   {% endif %}
+  <div class = "new-problem-info center">
+    <span class="info-block">
+      <i class="fa fa-check fa-fw"></i><span class="pi-name">{{ _('Points:') }}</span>
+      <span class="new-pi-value">
+        {% if contest_problem %}
+          {{ contest_problem.points }}{% if contest_problem.partial %} {{ _('(partial)') }}{% endif %}
+        {% else %}
+          {{ problem.points|floatformat }}{% if problem.partial %} {{ _('(partial)') }}{% endif %}
+        {% endif %}
+      </span>
+    </span>
+
+    <span class="info-block">
+      <i class="fa fa-clock-o fa-fw"></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>
+      <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>
+      <span class="new-pi-value">
+        {{ fileio_input or _('stdin') }}
+      </span>
+    </span>
+
+    <span class="info-block">
+      <i class="fa fa-file fa-fw"></i><span class="pi-name">{{ _('Output:') }}</span>
+      <span class="new-pi-value">{{ fileio_output or _('stdout') }}</span>
+    </span>
+  </div>
 
   {% cache 86400 'problem_html' problem.id MATH_ENGINE LANGUAGE_CODE %}
     {{ description|markdown(lazy_load=True)|reference|str|safe }}