ui: highlight upcoming and current contest

packages/ui-default/package.json

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

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

@@ -13,6 +13,16 @@ $highlight-button-color = #F6DF45
   .contest__info-attended
     color: $success-color
 
+  .contest__item
+    border-left: rem(5px) solid transparent
+    padding-left: rem(5px)
+    
+    &.live
+      border-left: rem(5px) solid #E98696
+
+    &.ready
+      border-left: rem(5px) solid #469DCF
+
   .section--contest
     &.live
       background: #E98696

packages/ui-default/templates/partials/homepage/contest.html

@@ -5,7 +5,7 @@
     </div>
     <ol class="section__list contest__list">
       {%- for tdoc in tdocs -%}
-        <li class="section__list__item contest__item contest-type--{{ tdoc.rule }}">
+        <li class="section__list__item contest__item contest-type--{{ tdoc.rule }} {% if model.contest.isOngoing(tdoc) %}{{ 'live' }}{% elif model.contest.isUpcoming(tdoc) %}{{ 'ready' }}{% endif %}">
           <div class="media">
             <div class="media__left medium">
               <div class="contest__date numbox">