ui: record_detail: click to expand compiler message

packages/ui-default/pages/record_detail.page.styl

@@ -6,6 +6,9 @@
     &:empty
       display: none
 
+  .compiler-text-mask
+    display: none
+
   .col--case
     width: rem(70px)
 
@@ -28,3 +31,25 @@
 
     .col--memory
       width: rem(100px)
+
+// dont hide compiler text if compile error
+.hasjs .collapsed #status:not([data-status="7"])
+  .compiler-text
+    max-height: rem(250px)
+    overflow: hidden
+    position: relative
+
+  .compiler-text-mask, .compiler-text-mask p
+    display: block
+    position: absolute
+    cursor: pointer
+    bottom: 0
+    left: 0
+    right: 0
+    z-index: 1
+
+  .compiler-text-mask
+    height: rem(50px)
+    background-image: linear-gradient(to bottom, transparent, #ffffff 25px)
+    p
+      text-align: center

packages/ui-default/pages/record_detail.page.tsx

@@ -5,6 +5,20 @@ import { NamedPage } from 'vj/misc/Page';
 import { tpl, withTransistionCallback } from 'vj/utils';
 
 export default new NamedPage('record_detail', async () => {
+  $(document).on('click', '.compiler-text', () => {
+    withTransistionCallback(() => {
+      $('.collapsed').removeClass('collapsed');
+    });
+  });
+  $(document).on('click', '.subtask-case', function () {
+    const text = $(this).find('.message').text();
+    const data = $(this).find('.message').html();
+    if (!text?.trim()) return;
+    new InfoDialog({
+      $body: tpl(<pre dangerouslySetInnerHTML={{ __html: data }} />),
+    }).open();
+  });
+
   if (!UiContext.socketUrl) return;
   const [{ default: WebSocket }, { DiffDOM }] = await Promise.all([
     import('../components/socket'),
@@ -25,12 +39,4 @@ export default new NamedPage('record_detail', async () => {
       dd.apply(oldSummary[0], dd.diff(oldSummary[0], newSummary[0]));
     });
   };
-  $(document).on('click', '.subtask-case', function () {
-    const text = $(this).find('.message').text();
-    const data = $(this).find('.message').html();
-    if (!text?.trim()) return;
-    new InfoDialog({
-      $body: tpl(<pre dangerouslySetInnerHTML={{ __html: data }} />),
-    }).open();
-  });
 });

packages/ui-default/templates/layout/html5.html

@@ -57,7 +57,7 @@
   {% if not isIE(handler.request.headers['user-agent']) and not handler.session.legacy %}
     <script type="text/javascript" src="/constant/{{ UiContext.constantVersion }}.js"></script>
     <script type="text/javascript" src="{{ UiContext.cdn_prefix }}resource/{{ global.Hydro.version['ui-default'] }}/lang-{{ _('__id') }}.js"></script>
-    <script type="text/javascript" src="{{ UiContext.cdn_prefix }}hydro-{{ global.Hydro.version['ui-default'] }}.js"></script>
+    <script type="text/javascript" src="{{ UiContext.cdn_prefix }}hydro-{{ global.Hydro.version['ui-default'] }}.js{% if process.env.DEV %}?version=dev{% endif %}"></script>
   {% endif %}
   {% block body %}{% endblock %}
   {% block script %}{% endblock %}

packages/ui-default/templates/record_detail.html

@@ -5,7 +5,7 @@
   {{ set(UiContext, 'socketUrl', "record-detail-conn?domainId=" + rdoc.domainId + "&rid=" + rdoc._id) }}
 {% endif %}
 <div class="row">
-  <div class="medium-9 columns">
+  <div class="medium-9 columns collapsed">
     {% if typeof(rdoc['status']) === 'number' %}
       {% include 'record_detail_status.html' %}
     {% endif %}

packages/ui-default/templates/record_detail_status.html

@@ -1,4 +1,4 @@
-<div class="section visible" id="status">
+<div class="section visible" id="status" data-status="{{ rdoc.status }}">
   <div class="section__header">
     <h1 class="section__title">
       <span class="icon record-status--icon {{ model.builtin.STATUS_CODES[rdoc['status']] }}"></span>
@@ -13,7 +13,7 @@
   </div>
 {% if rdoc.compilerTexts.length %}
   <div class="section__body">
-    <pre class="compiler-text">{{ rdoc.compilerTexts|join('\n')|ansi|safe }}</pre>
+    <pre class="compiler-text">{{ rdoc.compilerTexts|join('\n')|ansi|safe }}<div class="compiler-text-mask"><p><span class="icon icon-expand_more">{{ _('Expand') }}</span></p></div></pre>
   </div>
 {% endif %}
 {% if rdoc.judgeTexts.length %}
@@ -21,7 +21,7 @@
     <pre class="judge-text">{{ formatJudgeTexts(rdoc.judgeTexts)|ansi|safe }}</pre>
   </div>
 {% endif %}
-{% if rdoc.testCases.length %} 
+{% if rdoc.testCases.length %}
   <div class="section__body no-padding">
     <table class="data-table record_detail__table">
       <colgroup>