core: show accepted problems

packages/ui-default/misc/typography.styl

@@ -31,11 +31,10 @@ dd
   margin-bottom: rem(10px)
 
 +above(rupture.desktop-cutoff)
-  dl.large.horizontal
+  dl.horizontal
     overflow: hidden
     dt
       float: left
-      width: 37%
       overflow: hidden
       clear: left
       text-align: left
@@ -45,12 +44,26 @@ dd
       padding-right: rem(10px)
     dd
       float: left
-      width: 62%
 
     dt, dd
       line-height: 1.2rem
       margin: rem(5px 0)
 
+    &.large
+      dt
+        width: 37%
+
+      dd
+        width: 62%
+
+    &.exlarge
+      dt
+        width: 62%
+
+      dd
+        width: 37%
+     
+
 article, aside, details, figcaption, figure, footer, header, menu, nav, section
   display: block
 

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.27.1",
+  "version": "4.27.2",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/templates/components/problem.html

@@ -1,9 +1,9 @@
-{% macro render_problem_title(pdoc, tdoc=none, show_tags=true, show_invisible_flag=true, invalid=false, inline=false) %}
+{% macro render_problem_title(pdoc, tdoc=none, show_tags=true, show_invisible_flag=true, invalid=false, inline=false, small=false) %}
 {%- if not invalid -%}
   {% set _linkArgs = { pid:pdoc.pid|default(pdoc.docId) } %}
   {% if tdoc %}{{ set(_linkArgs, 'query', {tid:tdoc.docId}) }}{% endif %}
   {% if pdoc.domainId !== handler.domainId %}{{ set(_linkArgs, 'domainId', pdoc.domainId) }}{% endif %}
-  <a href="{{ url('problem_detail', _linkArgs) }}">
+  <a href="{{ url('problem_detail', _linkArgs) }}"{% if small %}data-tooltip="{{ pdoc.title }}"{% endif %}>
 {%- endif -%}
 {%- if pdoc.domainId !== handler.domainId -%}
   {{ pdoc.domainId }}#
@@ -13,7 +13,7 @@
 {%- else -%}
   {{ 'P'+pdoc.docId if pdoc.domainId === handler.domainId else pdoc.docId }}
 {%- endif -%}
-. {{ pdoc.title }}
+{%- if not small -%}. {{ pdoc.title }}{%- endif -%}
 {%- if not invalid -%}
   </a>
 {%- endif -%}

packages/ui-default/templates/user_detail.html

@@ -1,4 +1,5 @@
 {% import "components/home.html" as home with context %}
+{% import "components/problem.html" as problem with context %}
 {% extends "layout/basic.html" %}
 {% block content %}
 {{ set(UiContext, 'udoc', udoc) }}
@@ -102,6 +103,48 @@
         </div>
       </div>
     </div>
+    <div class="section">
+      <div class="section__header">
+        <h2 class="section__title">{{ _('Accepted Problems') }}</h2>
+      </div>
+      <div class="typo section__body no-media">
+        {% set _mark = (pdocs.length/4)|int %}
+        {% set _one = pdocs.slice(0, _mark) %}
+        {% set _two = pdocs.slice(_mark, _mark*2) %}
+        {% set _three = pdocs.slice(_mark*2, _mark*3) %}
+        {% set _four = pdocs.slice(_mark*3, pdocs.length) %}
+        <div class="row">
+          <div class="medium-3 columns">
+            <ul>
+              {% for pdoc in _one %}
+                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
+              {% endfor %}
+            </ul>
+          </div>
+          <div class="medium-3 columns">
+            <ul>
+              {% for pdoc in _two %}
+                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
+              {% endfor %}
+            </ul>
+          </div>
+          <div class="medium-3 columns">
+            <ul>
+              {% for pdoc in _three %}
+                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
+              {% endfor %}
+            </ul>
+          </div>
+          <div class="medium-3 columns">
+            <ul>
+              {% for pdoc in _four %}
+                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
+              {% endfor %}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <div class="medium-3 columns">
   {% if isSelfProfile %}
@@ -131,6 +174,19 @@
         </div>
       </div>
     </div>
+    <div class="section side">
+      <div class="section__header">
+        <h2 class="section__title">{{ _('Problem Tags') }}</h2>
+      </div>
+      <div class="typo section__body no-media">
+        <dl class="exlarge horizontal">
+          {% for tag in tags %}
+            <dt>{{ tag[0] }}</dt>
+            <dd>{{ tag[1] }}</dd>
+          {% endfor %}
+        </dl>
+      </div>
+    </div>
   </div>
 </div>
 {% endblock %}