From b417c08bfe20dfe9e6b91ced00709d9e9e621367 Mon Sep 17 00:00:00 2001
From: Phuoc Anh Kha Le <76896393+anhkha2003@users.noreply.github.com>
Date: Mon, 25 Sep 2023 02:12:06 -0500
Subject: [PATCH 01/15] Update chat UI(#84)

---
 resources/base.scss                    | 13 ++++--
 resources/chatbox.scss                 | 53 +++++++++++-------------
 resources/contest.scss                 |  2 +-
 resources/vars.scss                    |  1 +
 templates/chat/chat.html               | 15 ++-----
 templates/chat/chat_css.html           | 46 +++++++++++++++------
 templates/chat/chat_js.html            | 56 +++++++++++++++-----------
 templates/chat/online_status.html      | 14 ++++---
 templates/chat/user_online_status.html | 13 ++++--
 9 files changed, 124 insertions(+), 89 deletions(-)

diff --git a/resources/base.scss b/resources/base.scss
index 70ad269..3ec3602 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -182,6 +182,9 @@ header {
         cursor: pointer;
         padding: 3.5px;
     }
+    img {
+        border-radius: 50%;
+    }
 }
 
 #nav-shadow {
@@ -539,7 +542,11 @@ math {
 
 @media (max-width: 799px) {
     #navigation {
-        height: 36px;
+        height: $navbar_height_mobile;
+    }
+
+    #content {
+        margin-top: $navbar_height_mobile;
     }
 
     #navicon {
@@ -637,11 +644,11 @@ math {
 }
 
 #chat-icon {
-    color: $theme_color;
+    color: darkgreen;
 }
 
 #chat-icon:hover {
-    color: green;
+    color: $theme_color;
 }
 
 #nav-lang-icon {
diff --git a/resources/chatbox.scss b/resources/chatbox.scss
index 89fef60..e4b3264 100644
--- a/resources/chatbox.scss
+++ b/resources/chatbox.scss
@@ -52,11 +52,15 @@
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     flex-grow: 1;
+    padding-left: 0.5em;
 }
 
 #chat-input {
     color: black;
-    border: 2px solid #e4a81c;
+    border: 2px solid black;
+}
+#chat-input::placeholder {
+    color: grey;
 }
 #chat-online-content {
     padding: 0;
@@ -81,7 +85,7 @@
     }
     #chat-online {
         margin: 0;
-        width: 35%;
+        width: 30%;
     }
     #chat-area {
         flex-grow: 1;
@@ -91,12 +95,12 @@
     font-family: "Noto Sans", Arial, "Lucida Grande", sans-serif;
 }
 .info-pic {
-    height: 100%;
+    height: 95%;
 }
 
 .info-name {
     margin-left: 10px;
-    font-size: 2em;
+    font-size: 1.8em;
     font-weight: bold !important;
     display: flex;
     align-items: center;
@@ -111,21 +115,6 @@
     position: relative;
     z-index: 100;
 }
-#refresh-button {
-    padding: 0;
-    margin-left: auto;
-    margin-right: 0.3em;
-    background: transparent;
-    border: none;
-    height: 1.5em;
-    width: 1.5em;
-}
-#refresh-button:hover {
-    background: lightgreen;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-    transition: 1.5s ease-in-out;
-}
 .status-pic {
     height: 32px;
     width: 32px;
@@ -135,6 +124,7 @@
     position: relative;
     display: inline-flex;
     flex: 0 0 auto;
+    align-items: center;
 }
 .status-circle {
     position: absolute;
@@ -166,11 +156,11 @@
 }
 .message-text {
     padding: 0.4em 0.6em 0.5em;
-    border-radius: 15px;
+    border-radius: 20px;
     max-width: 70%;
     width: fit-content;
-    font-size: 1.05rem;
-    line-height: 1.3;
+    font-size: 1rem;
+    line-height: 1.2;
 }
 .message-text-other {
     background: #eeeeee;
@@ -181,10 +171,11 @@
     color: white;
 }
 .chat-input-icon {
-    color: $theme_color;
+    color: white;
+    background-color: #3c8262;
 }
 .chat-input-icon:hover {
-    background: lightgray;
+    background: #57b28b;
 }
 .chat {
     .active-span {
@@ -193,12 +184,16 @@
     }
 
     .unread-count {
-        float: right;
         color: white;
         background-color: darkcyan;
-        border-radius: 2px;
-        padding: 0 0.5em;
-        align-self: flex-end;
+        border-radius: 50%;
+        align-self: center;
+        flex: 0 0 1.25rem;
+        height: 1.25rem;
+        font-size: smaller;
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
     #setting-content {
         display: none;
@@ -224,6 +219,6 @@
 
 @media (max-width: 799px) {
     #chat-area {
-        height: calc(100vh - 120px);
+        height: calc(100vh - $navbar_height_mobile);
     }
 }
diff --git a/resources/contest.scss b/resources/contest.scss
index 2bc2ab1..cfdd478 100644
--- a/resources/contest.scss
+++ b/resources/contest.scss
@@ -1,7 +1,7 @@
 @import "vars";
 
 .list-contest {
-    box-shadow: 0px 4px 8px rgba(4, 83, 67, 0.2), 0px 6px 20px rgba(4, 83, 67, 0.19);
+    box-shadow: 0px 1px 2px lightgrey, 0px 1px 5px lightgrey;
     border-radius: 15px;
     padding: 20px;
     margin-bottom: 20px;
diff --git a/resources/vars.scss b/resources/vars.scss
index ba1c0bf..70c30a6 100644
--- a/resources/vars.scss
+++ b/resources/vars.scss
@@ -12,3 +12,4 @@ $table_header_rounding: 6px;
 
 $monospace-fonts: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
 $navbar_height: 50px;
+$navbar_height_mobile: 36px;
diff --git a/templates/chat/chat.html b/templates/chat/chat.html
index 1991402..df6b0ca 100644
--- a/templates/chat/chat.html
+++ b/templates/chat/chat.html
@@ -59,17 +59,8 @@
 
 {% block body %}
   <div class="chat">
-    <div id="mobile" class="tabs">
-      <ul>
-        <li id="chat-tab" class="tab active"><a href="#">
-          <i class="tab-icon fa fa-comments"></i> {{ _('Chat') }}
-        </a></li>
-        <li id="online-tab" class="tab"><a href="#"><i class="tab-icon fa fa-wifi"></i> {{ _('Online Users') }}</a></li>
-      </ul>
-    </div>
-
     <div id="chat-container">
-      <div id="chat-online" class="chat-right-panel sidebox">
+      <div id="chat-online" class="chat-left-panel sidebox">
         <div id="chat-online-content">
           <div id="search-container">
             <form id="chat-search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
@@ -83,7 +74,7 @@
           </div>
         </div>
       </div>
-      <div id="chat-area" class="chat-left-panel">
+      <div id="chat-area" class="chat-right-panel">
         <div id="chat-info">
           {% include 'chat/user_online_status.html' %}
         </div>
@@ -98,7 +89,7 @@
           <div class="chat-input-icon" id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i>
           </div>
           <div class="chat-input-icon" id="submit-button">
-            <i class="fa fa-play"></i>
+            <i class="fa fa-arrow-right"></i>
           </div>
         </div>
         <div class="tooltip" role="tooltip">
diff --git a/templates/chat/chat_css.html b/templates/chat/chat_css.html
index 7c4777f..01929cd 100644
--- a/templates/chat/chat_css.html
+++ b/templates/chat/chat_css.html
@@ -6,6 +6,7 @@
 
     #content {
       padding-top: 0;
+      margin-bottom: 0;
     }
 
     ::-webkit-scrollbar {
@@ -57,7 +58,7 @@
     .profile-pic {
       height: 2.6em;
       width: 2.6em;
-      border-radius: 0.3em;
+      border-radius: 50%;
       margin-top: 0.1em;
       float: left;
     }
@@ -106,6 +107,16 @@
     #setting {
       position: relative;
     }
+    #setting-button {
+      height: 2.3em;
+      width: 2.5em;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      padding-top: 2px;
+    }
     .status-user {
       display: flex;
       flex-direction: column;
@@ -122,15 +133,20 @@
       align-items: center;
       gap: 1em;
     }
+    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+      text-align: left;
+    }
     #chat-input {
       padding: 10px 20px;
       font-size: 16px;
-      border-radius: 20px;
+      border-radius: 100px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
       transition: box-shadow 0.3s ease-in-out;
       width: 80%;
       resize: none;
-      height: 100%;
+      height: 80%;
+      max-height: 200px;
+      overflow-y: auto;
     }
     #chat-input:focus {
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
@@ -162,11 +178,13 @@
       stroke-width: 1;
     }
     .info-pic {
-      border-radius: 5px;
-      margin-left: 1em;
+      border-radius: 50%;
     }
     #chat-info {
       height: 3em;
+      padding-left: 0.75em;
+      display: flex;
+      align-items: center;
     }
 
     @media (min-width: 800px) {
@@ -175,26 +193,30 @@
         overflow:hidden;
       }
       #chat-input-container {
-        padding-left: 5%;
+        padding-left: 3%;
       }
       #chat-area {
         padding-bottom: 1.5em;
       }
+      .back-button {
+        display: none;
+      }
     }
     @media (max-width: 799px) {
       html, body {
         max-width: 100%;
         overflow-x: hidden;
       }
-      #mobile ul {
-        width: 100%;
-      }
-      .info-pic {
-        margin-left: 0.5em;
-      }
       .active-span {
         display: none;
       }
+      #chat-area {
+        display: none;
+      }
+      .back-button {
+        margin-right: 1em;
+        font-size: 1.5em;
+      }
     }
   </style>
 {% endcompress %}
\ No newline at end of file
diff --git a/templates/chat/chat_js.html b/templates/chat/chat_js.html
index be2abc7..5c467f8 100644
--- a/templates/chat/chat_js.html
+++ b/templates/chat/chat_js.html
@@ -279,6 +279,21 @@
     $("#click_space_" + window.other_user_id).addClass("selected-status-row");
   }
 
+  function show_right_panel() {
+    if (isMobile) {
+      $('.chat-left-panel').hide();
+      $('#chat-area').css('display', 'flex');
+      $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
+    }
+  }
+
+  function hide_right_panel() {
+    if (isMobile) {
+      $('.chat-left-panel').show();
+      $('#chat-area').hide();
+    }
+  }
+
   function load_room(encrypted_user) {
     if (window.lock_click_space) return;
 
@@ -288,6 +303,7 @@
       update_last_seen();
       refresh_status();
       $('#chat-input').focus();
+      show_right_panel();
     }
     window.lock_click_space = true;
     if (encrypted_user) {
@@ -314,6 +330,7 @@
   function register_click_space() {
     $('.click_space').on('click', function(e) {
       if ($(this).attr('id') == 'click_space_' + window.other_user_id) {
+        show_right_panel();
         return;
       }
       var other_user = $(this).attr('value');
@@ -323,10 +340,10 @@
       if (window.room_id) {
         load_room(null);
       }
+      else {
+        show_right_panel();
+      }
     });
-    if (isMobile) {
-      $('#chat-tab a').click();
-    }
   }
 
   function update_last_seen() {
@@ -439,26 +456,6 @@
       return true
     });
 
-    $('#chat-tab').find('a').click(function (e) {
-      e.preventDefault();
-      $('#chat-tab').addClass('active');
-      $('#online-tab').removeClass('active');
-      $('.chat-left-panel').show();
-      $('.chat-right-panel').hide();
-    });
-    $('#online-tab').find('a').click(function (e) {
-      e.preventDefault();
-      $('#online-tab').addClass('active');
-      $('#chat-tab').removeClass('active');
-      $('.chat-left-panel').hide();
-      $('.chat-right-panel').show();
-    });
-
-    $('#refresh-button').on('click', function(e) {
-      e.preventDefault();
-      refresh_status();
-    });
-
     setInterval(refresh_status, 2 * 60 * 1000);
 
     $('#chat-box').scrollTop($('#chat-box')[0].scrollHeight);
@@ -466,7 +463,7 @@
     const button = document.querySelector('#emoji-button');
     const tooltip = document.querySelector('.tooltip');
     Popper.createPopper(button, tooltip, {
-      placement: 'left-end',
+      placement: isMobile ? 'auto-end' : 'left-end',
     });
 
     function toggleEmoji() {
@@ -558,5 +555,16 @@
     }
     register_setting();
     color_selected_room();
+
+    $('#chat-input').on('input', function() {
+      if (this.scrollHeight > this.clientHeight) {
+        this.style.height = (this.scrollHeight) + 'px';
+        $(this).css('border-radius', '30px');
+      } else {
+        $(this).css('height', '80%');
+      }
+    });
+
+    $('#submit-button').on('click', submit_chat);
   });
 </script>
\ No newline at end of file
diff --git a/templates/chat/online_status.html b/templates/chat/online_status.html
index d82159d..73dea74 100644
--- a/templates/chat/online_status.html
+++ b/templates/chat/online_status.html
@@ -5,8 +5,10 @@
   <span style="padding-left:0.5em">
     <b>{{_('Lobby')}}</b>
   </span>
-  <span class="spacer">
-    <span class="unread-count" id="unread-count-lobby">{{unread_count_lobby if unread_count_lobby}}</span>
+  <span class="spacer" style="display:flex;justify-content: flex-end;">
+    {% if unread_count_lobby and unread_count_lobby > 0 %}
+      <span class="unread-count" id="unread-count-lobby">{{unread_count_lobby}}</span>
+    {% endif %}
   </span>
 </li>
 {% for section in status_sections %}
@@ -37,9 +39,11 @@
               </span>
             {% endif %}
           </div>
-          <span class="unread-count" id="unread-count-{{user.user.id}}">
-            {{user.unread_count if user.unread_count}}
-          </span>
+          {% if user.unread_count and user.unread_count > 0 %}
+            <span class="unread-count" id="unread-count-{{user.user.id}}">
+              {{user.unread_count}}
+            </span>
+          {% endif %}
         </li>
       {% endfor %}
     </ul>
diff --git a/templates/chat/user_online_status.html b/templates/chat/user_online_status.html
index 51ffa38..370d261 100644
--- a/templates/chat/user_online_status.html
+++ b/templates/chat/user_online_status.html
@@ -1,11 +1,18 @@
+<div onclick="hide_right_panel()" class="back-button">
+  <i class="fa fa-arrow-left"></i>
+</div>
 {% if other_user %}
-  <div class="status-container" style="height: 100%">
+  <div class="status-container" style="height: 3em; width: 3em;">
     <img src="{{ gravatar(other_user, 135) }}" class="info-pic">
     <svg style="position:absolute; height:100%; width: 100%; transform: rotate(180deg);" >
       <circle class="info-circle"
         fill="{{'green' if other_online else 'red'}}"/>
     </svg>
   </div>
+{% else %}
+  <div class="status-container" style="height: 3em;">
+    <img src="{{ static('icons/logo.png') }}" class="info-pic" style="border-radius: 0px;">
+  </div>
 {% endif %}
 <span class="info-name username">
   {% if other_user %}
@@ -21,9 +28,9 @@
 
 {% if other_user %}
   <span style="margin-right: 0.3em" id="setting">
-    <button class="control-button small" style="height:100%;" id="setting-button">
+    <div class="control-button small" style="" id="setting-button">
       <i class="fa fa-ellipsis-h"></i>
-    </button>
+    </div>
     <div id="setting-content">
       <li>
         <a href="{{url('toggle_ignore', other_user.id)}}" class=" {{'green' if is_ignored else 'red'}}">

From 1cbac6fb1c0fe374cb63b35f21b33f11d46d5a22 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Mon, 25 Sep 2023 02:13:49 -0500
Subject: [PATCH 02/15] Add darkmode

---
 resources/darkmode.css | 91 +++++++++---------------------------------
 1 file changed, 18 insertions(+), 73 deletions(-)

diff --git a/resources/darkmode.css b/resources/darkmode.css
index 36a4304..4947452 100644
--- a/resources/darkmode.css
+++ b/resources/darkmode.css
@@ -1712,10 +1712,10 @@ noscript #noscript {
     color: rgb(178, 171, 161);
 }
 #chat-icon {
-    color: rgb(249, 146, 97);
+    color: rgb(200, 196, 189);
 }
 #chat-icon:hover {
-    color: rgb(114, 255, 114);
+    color: rgb(249, 146, 97);
 }
 #nav-lang-icon {
     color: rgb(51, 125, 255);
@@ -2922,8 +2922,8 @@ a.voted {
     color: rgb(152, 143, 129);
 }
 .list-contest {
-    box-shadow: rgba(3, 66, 54, 0.2) 0px 4px 8px,
-    rgba(3, 66, 54, 0.19) 0px 6px 20px;
+    box-shadow: rgb(49, 53, 55) 0px 1px 2px,
+    rgb(49, 53, 55) 0px 1px 5px;
 }
 #contest-calendar th {
     border-bottom-color: rgb(62, 68, 70);
@@ -3058,7 +3058,13 @@ a.voted {
 }
 #chat-input {
     color: rgb(232, 230, 227);
-    border-color: rgb(159, 117, 19);
+    border-color: rgb(140, 130, 115);
+}
+#chat-input::-webkit-input-placeholder {
+    color: rgb(152, 143, 129);
+}
+#chat-input::placeholder {
+    color: rgb(152, 143, 129);
 }
 .selected-status-row {
     background-color: rgb(49, 53, 55);
@@ -3077,15 +3083,6 @@ a.voted {
 #chat-info {
     box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px;
 }
-#refresh-button {
-    background-image: initial;
-    background-color: transparent;
-    border-color: initial;
-}
-#refresh-button:hover {
-    background-image: initial;
-    background-color: rgb(40, 111, 17);
-}
 .status-circle {
     stroke: rgb(232, 230, 227);
 }
@@ -3104,11 +3101,12 @@ a.voted {
     color: rgb(232, 230, 227);
 }
 .chat-input-icon {
-    color: rgb(249, 146, 97);
+    color: rgb(232, 230, 227);
+    background-color: rgb(48, 104, 78);
 }
 .chat-input-icon:hover {
     background-image: initial;
-    background-color: rgb(49, 53, 55);
+    background-color: rgb(62, 136, 112);
 }
 .chat .active-span {
     color: rgb(169, 162, 151);
@@ -3873,64 +3871,11 @@ mjx-assistive-mml {
 mjx-stretchy-v > mjx-ext {
     border-color: transparent;
 }
-.noUi-target,
-.noUi-target * {
-    -webkit-tap-highlight-color: transparent;
+.recently-attempted ul {
+    list-style-image: initial;
 }
-.noUi-target {
-    background-image: initial;
-    background-color: rgb(27, 29, 30);
-    border-color: rgb(60, 65, 68);
-    box-shadow: rgb(32, 35, 37) 0px 1px 1px inset,
-    rgb(62, 68, 70) 0px 3px 6px -5px;
-}
-.noUi-connect {
-    background-image: initial;
-    background-color: rgb(50, 147, 140);
-    box-shadow: rgba(38, 42, 43, 0.45) 0px 0px 3px inset;
-}
-.noUi-handle {
-    border-color: rgb(59, 64, 66);
-    background-image: initial;
-    background-color: rgb(24, 26, 27);
-    box-shadow: rgb(24, 26, 27) 0px 0px 1px inset,
-    rgb(35, 38, 40) 0px 1px 7px inset,
-    rgb(62, 68, 70) 0px 3px 6px -3px;
-}
-.noUi-active {
-    box-shadow: rgb(24, 26, 27) 0px 0px 1px inset,
-    rgb(43, 47, 49) 0px 1px 7px inset,
-    rgb(62, 68, 70) 0px 3px 6px -3px;
-}
-.noUi-handle::after,
-.noUi-handle::before {
-    background-image: initial;
-    background-color: rgb(38, 41, 42);
-}
-[disabled] .noUi-connect {
-    background-image: initial;
-    background-color: rgb(64, 69, 72);
-}
-.noUi-pips {
-    color: rgb(168, 160, 149);
-}
-.noUi-value-sub {
-    color: rgb(200, 195, 188);
-}
-.noUi-marker {
-    background-image: initial;
-    background-color: rgb(53, 57, 59);
-}
-.noUi-marker-large,
-.noUi-marker-sub {
-    background-image: initial;
-    background-color: rgb(72, 78, 81);
-}
-.noUi-tooltip {
-    border-color: rgb(59, 64, 66);
-    background-image: initial;
-    background-color: rgb(24, 26, 27);
-    color: rgb(232, 230, 227);
+.organization-row:last-child {
+    border-bottom-color: initial;
 }
 
 /* Override Style */

From 555191009c9ca1e584ac66fd2821795395ea44ec Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Mon, 25 Sep 2023 02:16:51 -0500
Subject: [PATCH 03/15] Handle special case for loading bar

---
 resources/common.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/resources/common.js b/resources/common.js
index 65fb8b3..d9c7d1e 100644
--- a/resources/common.js
+++ b/resources/common.js
@@ -386,6 +386,9 @@ function onWindowReady() {
         });
     });
     $('a').click(function() {
+        if ($(this).attr('href') === '#') {
+            return;
+        }
         $("#loading-bar").show();
         $("#loading-bar").animate({ width: "100%" }, 2000, function() {
             $(this).hide().css({ width: 0});

From 66bf42cb6171966f72fc643335bb0ac19aa6021b Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Mon, 25 Sep 2023 03:50:30 -0500
Subject: [PATCH 04/15] Some hacky chat css

---
 resources/chatbox.scss       | 3 ++-
 templates/chat/chat_css.html | 3 ---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/chatbox.scss b/resources/chatbox.scss
index e4b3264..3f1a47b 100644
--- a/resources/chatbox.scss
+++ b/resources/chatbox.scss
@@ -78,7 +78,7 @@
     #chat-container {
         display: flex;
         width: 100%;
-        height: calc(100vh - 3em);
+        height: calc(100vh - $navbar_height);
         border: 1px solid #ccc;
         /*border-radius: 0 4px 0 0;*/
         border-bottom: 0;
@@ -220,5 +220,6 @@
 @media (max-width: 799px) {
     #chat-area {
         height: calc(100vh - $navbar_height_mobile);
+        max-height: -webkit-fill-available;
     }
 }
diff --git a/templates/chat/chat_css.html b/templates/chat/chat_css.html
index 01929cd..a03d481 100644
--- a/templates/chat/chat_css.html
+++ b/templates/chat/chat_css.html
@@ -195,9 +195,6 @@
       #chat-input-container {
         padding-left: 3%;
       }
-      #chat-area {
-        padding-bottom: 1.5em;
-      }
       .back-button {
         display: none;
       }

From 7d517e1a7d2b8e67c10a1185aaffe939cc01b169 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Tue, 26 Sep 2023 01:11:39 -0500
Subject: [PATCH 05/15] Render mathjax when loading more comments

---
 resources/common.js              | 4 +++-
 templates/comments/list.html     | 2 +-
 templates/comments/media-js.html | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/resources/common.js b/resources/common.js
index d9c7d1e..d34e259 100644
--- a/resources/common.js
+++ b/resources/common.js
@@ -386,9 +386,11 @@ function onWindowReady() {
         });
     });
     $('a').click(function() {
-        if ($(this).attr('href') === '#') {
+        var href = $(this).attr('href');
+        if (href === '#' || href.startsWith("javascript")) {
             return;
         }
+
         $("#loading-bar").show();
         $("#loading-bar").animate({ width: "100%" }, 2000, function() {
             $(this).hide().css({ width: 0});
diff --git a/templates/comments/list.html b/templates/comments/list.html
index d561210..fc0df78 100644
--- a/templates/comments/list.html
+++ b/templates/comments/list.html
@@ -3,7 +3,7 @@
   <h2 id="comment-header">
     <i style="padding-right: 0.3em" class="fa fa-comments"></i>{{ _('Comments') }}
     {% if can_comment %}
-      <a href="" id="write-comment" style="float: right; font-size: 0.6em; margin-right: -26px;"> {{ _('Write comment') }} </a>
+      <a href="#" id="write-comment" style="float: right; font-size: 0.6em; margin-right: -26px;"> {{ _('Write comment') }} </a>
     {% endif %}
   </h2>
   {% if can_comment %}
diff --git a/templates/comments/media-js.html b/templates/comments/media-js.html
index ccae804..608385c 100644
--- a/templates/comments/media-js.html
+++ b/templates/comments/media-js.html
@@ -186,6 +186,7 @@
               var $comment = $("#comment-" + id + "-children");
               $comment.append(data);
             }
+            MathJax.typeset($('#comments')[0]);
           }
         })
       }

From c535ae4415e974e9a0eca02ef2ed1a8b93fb4cff Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Tue, 26 Sep 2023 13:05:00 -0500
Subject: [PATCH 06/15] Fix bug for <a> without href

---
 resources/common.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/common.js b/resources/common.js
index d34e259..185eb7c 100644
--- a/resources/common.js
+++ b/resources/common.js
@@ -387,7 +387,7 @@ function onWindowReady() {
     });
     $('a').click(function() {
         var href = $(this).attr('href');
-        if (href === '#' || href.startsWith("javascript")) {
+        if (!href || href === '#' || href.startsWith("javascript")) {
             return;
         }
 

From cbcbbc5277829b32eb7b4c40cfdec6b4d230495f Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Wed, 27 Sep 2023 18:07:24 -0500
Subject: [PATCH 07/15] Add chunk upload dir to settings

---
 dmoj/settings.py             | 3 +++
 judge/utils/fine_uploader.py | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/dmoj/settings.py b/dmoj/settings.py
index d5cfa38..e136a4d 100644
--- a/dmoj/settings.py
+++ b/dmoj/settings.py
@@ -485,6 +485,9 @@ META_REMOTE_ADDRESS_KEY = "REMOTE_ADDR"
 
 DEFAULT_AUTO_FIELD = "django.db.models.AutoField"
 
+# Chunk upload
+CHUNK_UPLOAD_DIR = "/tmp/chunk_upload_tmp"
+
 try:
     with open(os.path.join(os.path.dirname(__file__), "local_settings.py")) as f:
         exec(f.read(), globals())
diff --git a/judge/utils/fine_uploader.py b/judge/utils/fine_uploader.py
index a9909a7..2a22ccf 100644
--- a/judge/utils/fine_uploader.py
+++ b/judge/utils/fine_uploader.py
@@ -35,7 +35,7 @@ def save_upload(f, path):
 
 # pass callback function to post_upload
 def handle_upload(f, fileattrs, upload_dir, post_upload=None):
-    chunks_dir = os.path.join(tempfile.gettempdir(), "chunk_upload_tmp")
+    chunks_dir = settings.CHUNK_UPLOAD_DIR
     if not os.path.exists(os.path.dirname(chunks_dir)):
         os.makedirs(os.path.dirname(chunks_dir))
     chunked = False

From 0e1a3992ebcec6343f371f80143282f4b422f250 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 28 Sep 2023 18:23:39 -0500
Subject: [PATCH 08/15] Comment page speed

---
 judge/comments.py                    |  7 ++++---
 judge/views/comment.py               | 15 ++++-----------
 templates/comments/content-list.html |  9 +++------
 templates/comments/media-js.html     |  2 +-
 4 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/judge/comments.py b/judge/comments.py
index be33a4e..65d8f7e 100644
--- a/judge/comments.py
+++ b/judge/comments.py
@@ -168,7 +168,7 @@ class CommentedDetailView(TemplateResponseMixin, SingleObjectMixin, View):
         )
 
     def _get_queryset(self, target_comment):
-        if target_comment != None:
+        if target_comment:
             queryset = target_comment.get_descendants(include_self=True)
             queryset = (
                 queryset.select_related("author__user")
@@ -217,11 +217,11 @@ class CommentedDetailView(TemplateResponseMixin, SingleObjectMixin, View):
 
         context["has_comments"] = queryset.exists()
         context["comment_lock"] = self.is_comment_locked()
-        context["comment_list"] = queryset
+        context["comment_list"] = list(queryset)
 
         context["vote_hide_threshold"] = settings.DMOJ_COMMENT_VOTE_HIDE_THRESHOLD
         if queryset.exists():
-            context["comment_root_id"] = queryset[0].id
+            context["comment_root_id"] = context["comment_list"][0].id
         else:
             context["comment_root_id"] = 0
         context["comment_parent_none"] = 1
@@ -234,4 +234,5 @@ class CommentedDetailView(TemplateResponseMixin, SingleObjectMixin, View):
 
         context["limit"] = DEFAULT_OFFSET
         context["comment_count"] = comment_count
+        context["profile"] = self.request.profile
         return context
diff --git a/judge/views/comment.py b/judge/views/comment.py
index 03285ad..58ba3fc 100644
--- a/judge/views/comment.py
+++ b/judge/views/comment.py
@@ -15,12 +15,11 @@ from django.http import (
     HttpResponseBadRequest,
     HttpResponseForbidden,
 )
-from django.shortcuts import get_object_or_404
+from django.shortcuts import get_object_or_404, render
 from django.utils.translation import gettext as _
 from django.views.decorators.http import require_POST
 from django.views.generic import DetailView, UpdateView
 from django.urls import reverse_lazy
-from django.template import loader
 from reversion import revisions
 from reversion.models import Version
 
@@ -42,11 +41,6 @@ __all__ = [
 
 
 @login_required
-
-# def get_more_reply(request, id):
-#     queryset = Comment.get_pk(id)
-
-
 def vote_comment(request, delta):
     if abs(delta) != 1:
         return HttpResponseBadRequest(
@@ -164,10 +158,11 @@ def get_comments(request, limit=10):
 
     new_offset = offset + min(len(queryset), limit)
 
-    comment_html = loader.render_to_string(
+    return render(
+        request,
         "comments/content-list.html",
         {
-            "request": request,
+            "profile": profile,
             "comment_root_id": comment_root_id,
             "comment_list": queryset,
             "vote_hide_threshold": settings.DMOJ_COMMENT_VOTE_HIDE_THRESHOLD,
@@ -181,8 +176,6 @@ def get_comments(request, limit=10):
         },
     )
 
-    return HttpResponse(comment_html)
-
 
 def get_show_more(request):
     return get_comments(request)
diff --git a/templates/comments/content-list.html b/templates/comments/content-list.html
index c08fd46..ebf0c31 100644
--- a/templates/comments/content-list.html
+++ b/templates/comments/content-list.html
@@ -1,13 +1,10 @@
-{% set logged_in = request.user.is_authenticated %}
-{% set profile = request.profile if logged_in else None %}
-
 {% for node in mptt_tree(comment_list) recursive %}
   <li id="comment-{{ node.id }}" data-revision="{{ node.revisions - 1 }}" data-max-revision="{{ node.revisions - 1 }}"
     data-revision-ajax="{{ url('comment_revision_ajax', node.id) }}" class="comment">
     <div class="comment-display{% if node.score <= vote_hide_threshold %} bad-comment{% endif %}">
       <div class="info">
         <div class="vote">
-          {% if logged_in %}
+          {% if profile %}
             <a href="javascript:comment_upvote({{ node.id }})"
               class="upvote-link fa fa-chevron-up fa-fw{% if node.vote_score == 1 %} voted{% endif %}"></a>
           {% else %}
@@ -16,7 +13,7 @@
           {% endif %}
           <br>
           <div class="comment-score">{{ node.score }}</div>
-          {% if logged_in %}
+          {% if profile %}
             <a href="javascript:comment_downvote({{ node.id }})"
               class="downvote-link fa fa-chevron-down fa-fw{% if node.vote_score == -1 %} voted{% endif %}"></a>
           {% else %}
@@ -55,7 +52,7 @@
             <a href="?comment-id={{node.id}}#comment-{{ node.id }}" title="{{ _('Link') }}" class="comment-link">
               <i class="fa fa-link fa-fw"></i>
             </a>
-            {% if logged_in and not comment_lock %}
+            {% if profile and not comment_lock %}
               {% set can_edit = node.author.id == profile.id and not profile.mute %}
               {% if can_edit %}
                 <a data-featherlight="{{ url('comment_edit_ajax', node.id) }}"
diff --git a/templates/comments/media-js.html b/templates/comments/media-js.html
index 608385c..862dbee 100644
--- a/templates/comments/media-js.html
+++ b/templates/comments/media-js.html
@@ -30,7 +30,7 @@
   {% endif %}
   <script type="text/javascript">
     $(document).ready(function () {
-      let loading_gif = "<img src=\"{{static('loading.gif')}}\" style=\"height: 1.5em; margin-bottom: 3px\" class=\"loading\">";
+      let loading_gif = "<img src=\"{{static('loading.gif')}}\" style=\"height: 3em; margin-bottom: 3px\" class=\"loading\">";
       window.reply_comment = function (parent) {
         var $comment_reply = $('#comment-' + parent + '-reply');
         var reply_id = 'reply-' + parent;

From 21905fd1db60c3e4a6503f5ee2acd09ef1218477 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Fri, 29 Sep 2023 00:37:28 -0500
Subject: [PATCH 09/15] Fix local var error

---
 judge/views/comment.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/judge/views/comment.py b/judge/views/comment.py
index 58ba3fc..6965201 100644
--- a/judge/views/comment.py
+++ b/judge/views/comment.py
@@ -150,6 +150,7 @@ def get_comments(request, limit=10):
             revisions=Count("versions", distinct=True),
         )[offset : offset + limit]
     )
+    profile = None
     if request.user.is_authenticated:
         profile = request.profile
         queryset = queryset.annotate(

From 067214b587670e508f52cc5968ca0c4b7a5fcd05 Mon Sep 17 00:00:00 2001
From: Bao Le <127121163+BaoLe106@users.noreply.github.com>
Date: Tue, 3 Oct 2023 02:30:46 +0800
Subject: [PATCH 10/15] Markdown Editor (#85)

---
 dmoj/urls.py                                  |   6 +
 judge/views/markdown_editor.py                |  14 ++
 locale/vi/LC_MESSAGES/django.po               |  13 ++
 locale/vi/LC_MESSAGES/dmoj-user.po            |   7 +
 .../markdown_editor/markdown_editor.html      | 134 ++++++++++++++++++
 5 files changed, 174 insertions(+)
 create mode 100644 judge/views/markdown_editor.py
 create mode 100644 templates/markdown_editor/markdown_editor.html

diff --git a/dmoj/urls.py b/dmoj/urls.py
index 402a569..4e0691e 100644
--- a/dmoj/urls.py
+++ b/dmoj/urls.py
@@ -44,6 +44,7 @@ from judge.views import (
     language,
     license,
     mailgun,
+    markdown_editor,
     notification,
     organization,
     preview,
@@ -405,6 +406,11 @@ urlpatterns = [
             ]
         ),
     ),
+    url(
+        r"^markdown_editor/",
+        markdown_editor.MarkdownEditor.as_view(),
+        name="markdown_editor",
+    ),
     url(
         r"^submission_source_file/(?P<filename>(\w|\.)+)",
         submission.SubmissionSourceFileView.as_view(),
diff --git a/judge/views/markdown_editor.py b/judge/views/markdown_editor.py
new file mode 100644
index 0000000..a014ba6
--- /dev/null
+++ b/judge/views/markdown_editor.py
@@ -0,0 +1,14 @@
+from django.views import View
+from django.shortcuts import render
+from django.utils.translation import gettext_lazy as _
+
+
+class MarkdownEditor(View):
+    def get(self, request):
+        return render(
+            request,
+            "markdown_editor/markdown_editor.html",
+            {
+                "title": _("Markdown Editor"),
+            },
+        )
diff --git a/locale/vi/LC_MESSAGES/django.po b/locale/vi/LC_MESSAGES/django.po
index a4dde83..4497f98 100644
--- a/locale/vi/LC_MESSAGES/django.po
+++ b/locale/vi/LC_MESSAGES/django.po
@@ -130,6 +130,18 @@ msgstr "Thể thức"
 msgid "Rating"
 msgstr ""
 
+#: templates/markdown_editor/markdown_editor.html:107
+msgid "Insert Image"
+msgstr "Chèn hình ảnh"
+
+#: templates/markdown_editor/markdown_editor.html:110
+msgid "From the web"
+msgstr "Từ web" 
+
+#: templates/markdown_editor/markdown_editor.html:116
+msgid "From your computer"
+msgstr "Từ máy tính của bạn"
+
 #: judge/admin/contest.py:201
 msgid "Access"
 msgstr "Truy cập"
@@ -6255,3 +6267,4 @@ msgstr "Chọn tất cả"
 
 #~ msgid "Hard"
 #~ msgstr "Khó"
+
diff --git a/locale/vi/LC_MESSAGES/dmoj-user.po b/locale/vi/LC_MESSAGES/dmoj-user.po
index ffd36e9..4ea605c 100644
--- a/locale/vi/LC_MESSAGES/dmoj-user.po
+++ b/locale/vi/LC_MESSAGES/dmoj-user.po
@@ -39,6 +39,12 @@ msgstr "Đăng ký tên"
 msgid "Report"
 msgstr "Báo cáo"
 
+msgid "Insert Image"
+msgstr "Chèn hình ảnh"
+
+msgid "Save"
+msgstr "Lưu"
+
 msgid "2sat"
 msgstr ""
 
@@ -593,3 +599,4 @@ msgstr ""
 
 msgid "z-function"
 msgstr ""
+
diff --git a/templates/markdown_editor/markdown_editor.html b/templates/markdown_editor/markdown_editor.html
new file mode 100644
index 0000000..04418e4
--- /dev/null
+++ b/templates/markdown_editor/markdown_editor.html
@@ -0,0 +1,134 @@
+{% extends "base.html" %}
+
+{% block media %}
+  <style>
+    main {
+      overflow: hidden;
+    }
+    #content {
+      width: 100%;
+    }
+    #content.wrapper {
+      padding: 0;
+    }
+    .form-area {
+      float: left;
+      width: 47%;
+      height: 100%
+
+    }
+    .wmd-preview{
+      float: right;
+      margin-top: 0;
+    }
+    .width-controller{
+      width: 51%;
+    }
+    .wmd-input {
+      height: calc(100vh - 114px);
+    }
+    .right-markdown{
+      height: calc(100vh - 69px);
+      overflow-y: scroll;
+    }
+  </style>
+{% endblock %}
+
+{% block js_media %}
+  <script>
+    $(document).ready(function(){
+      $("#wmd-input-id_body").on("keyup", function() {
+        const csrfToken = "{{ csrf_token }}";
+        $.ajax({
+          url: "{{url('blog_preview')}}",
+          type: 'POST',
+          headers: {
+            'X-CSRFToken': csrfToken,  // Include the CSRF token in the headers
+          },
+          data: {
+            preview: $(this).val()
+          },
+          success: function(data) {
+            $('#display').html(data)
+          },
+          error: function(error) {
+            alert(error);
+            console.log(error.message)
+          }
+        })
+      });
+    });
+  </script>
+
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      const leftDiv = document.getElementById("wmd-input-id_body");
+      const rightDiv = document.getElementById("display");
+
+      leftDiv.addEventListener("scroll", function() {
+        rightDiv.scrollTop = leftDiv.scrollTop;
+      });
+
+      rightDiv.addEventListener("scroll", function() {
+        leftDiv.scrollTop = rightDiv.scrollTop;
+      });
+    });
+  </script>
+
+  <script src="{{ static('pagedown/Markdown.Converter.js') }}"></script>
+  <script src="{{ static('pagedown-extra/pagedown/Markdown.Converter.js') }}"></script>
+  <script src="{{ static('pagedown/Markdown.Sanitizer.js') }}"></script>
+  <script src="{{ static('pagedown/Markdown.Editor.js') }}"></script>
+  <script src="{{ static('pagedown-extra/Markdown.Extra.js') }}"></script>
+  <script src="{{ static('pagedown_init.js') }}"></script>
+  <script src="{{ static('mathjax3_config.js') }}"></script>
+  <script src="http://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>
+  <script src="{{ static('pagedown_math.js') }}"></script>
+{% endblock %}
+
+{% block title_row %}
+{% endblock %}
+
+{% block body %}
+  <div id="new-comment" class="form-area" style="">
+    <input type="hidden" name="parent" id="id_parent">
+    <div class="comment-post-wrapper">
+      <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
+        <div class="wmd-panel">
+          <div id="wmd-button-bar-id_body"></div>
+          <textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea>
+        </div>
+        <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
+          <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div>
+          <div class="dmmd-preview-content content-description"></div>
+        </div>
+        <div class="pagedown-image-upload">
+          <h2>{{_('Insert Image')}}</h2>
+          <div class="form-row">
+            <div>
+              <label class="label">{{_('From the web')}}</label>
+              <input class="url-input" type="text" placeholder="http://">
+            </div>
+          </div>
+          <div class="form-row">
+            <div>
+              <label class="label">{{_('From your computer')}}</label>
+              <input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
+            </div>
+          </div>
+          <div class="submit-row">
+            <div class="submit-loading"></div>
+            <input class="submit-input show" type="submit" value="{{_('Save')}}" name="_addanother">
+            <p class="deletelink-box"><a href="#" class="close-image-upload deletelink">{{_('Cancel')}}</a></p>
+          </div>
+        </div>
+      </div></div>
+    </div>
+  </div>
+
+  <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
+    <div class="right-markdown dmmd-preview-content content-description" id="display"></div>
+  </div>
+{% endblock %}
+

From c64baad181232dd4baacd17f490545fa708f7f5a Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 5 Oct 2023 01:09:09 -0500
Subject: [PATCH 11/15] Fix xss

---
 templates/contest/list.html | 96 ++++++++++++++++++-------------------
 1 file changed, 47 insertions(+), 49 deletions(-)

diff --git a/templates/contest/list.html b/templates/contest/list.html
index 226b219..184a70e 100644
--- a/templates/contest/list.html
+++ b/templates/contest/list.html
@@ -112,56 +112,54 @@
 {% endblock %}
 
 {% macro contest_head(contest) %}
-  {% spaceless %}
-    <a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
-      {{- contest.name -}}
-    </a>
-    <br>
-    <div class="contest-tags" style="margin-top: 5px;">
-      {% if not contest.is_visible %}
-        <span class="contest-tag contest-tag-hidden">
-          <i class="fa fa-eye-slash"></i> {{ _('hidden') }}
-        </span>
+  <a href="{{ url('contest_view', contest.key) }}" class="contest-list-title" style="margin-right: 5px;">
+    {{contest.name}}
+  </a>
+  <br>
+  <div class="contest-tags" style="margin-top: 5px;">
+    {% if not contest.is_visible %}
+      <span class="contest-tag contest-tag-hidden">
+        <i class="fa fa-eye-slash"></i> {{ _('hidden') }}
+      </span>
+    {% endif %}
+    {% if contest.is_editable %}
+      <span class="contest-tag contest-tag-edit">
+        <a href="{{ url('organization_contest_edit', organization.id, organization.slug, contest.key) }}" class="white">
+          <i class="fa fa-edit"></i> {{ _('Edit') }}
+        </a>
+      </span>
+    {% endif %}
+    {% if contest.is_private %}
+      <span class="contest-tag contest-tag-private">
+        <i class="fa fa-lock"></i> {{ _('private') }}
+      </span>
+    {% endif %}
+    {% if not hide_contest_orgs %}
+      {% if contest.is_organization_private %}
+        {% for org in contest.organizations.all() %}
+          <span class="contest-tag contest-tag-org">
+            <a href="{{ org.get_absolute_url() }}">
+              <i class="fa fa-lock"></i> {{ org.name }}
+            </a>
+          </span>
+        {% endfor %}
       {% endif %}
-      {% if contest.is_editable %}
-        <span class="contest-tag contest-tag-edit">
-          <a href="{{ url('organization_contest_edit', organization.id, organization.slug, contest.key) }}" class="white">
-            <i class="fa fa-edit"></i> {{ _('Edit') }}
-          </a>
-        </span>
-      {% endif %}
-      {% if contest.is_private %}
-        <span class="contest-tag contest-tag-private">
-          <i class="fa fa-lock"></i> {{ _('private') }}
-        </span>
-      {% endif %}
-      {% if not hide_contest_orgs %}
-        {% if contest.is_organization_private %}
-          {% for org in contest.organizations.all() %}
-            <span class="contest-tag contest-tag-org">
-              <a href="{{ org.get_absolute_url() }}">
-                <i class="fa fa-lock"></i> {{ org.name }}
-              </a>
-            </span>
-          {% endfor %}
-        {% endif %}
-      {% endif %}
-      {% if contest.is_rated %}
-        <span class="contest-tag contest-tag-rated">
-          <i class="fa fa-bar-chart"></i> {{ _('rated') }}
-        </span>
-      {% endif %}
-      {% for tag in contest.tags.all() %}
-        <span style="background-color: {{ tag.color }}" class="contest-tag">
-          <a href="{{ url('contest_tag', tag.name) }}"
-            style="color: {{ tag.text_color }}"
-            data-featherlight="{{ url('contest_tag_ajax', tag.name) }}">
-            {{- tag.name -}}
-          </a>
-        </span>
-      {% endfor %}
-    </div>
-  {% endspaceless %}
+    {% endif %}
+    {% if contest.is_rated %}
+      <span class="contest-tag contest-tag-rated">
+        <i class="fa fa-bar-chart"></i> {{ _('rated') }}
+      </span>
+    {% endif %}
+    {% for tag in contest.tags.all() %}
+      <span style="background-color: {{ tag.color }}" class="contest-tag">
+        <a href="{{ url('contest_tag', tag.name) }}"
+          style="color: {{ tag.text_color }}"
+          data-featherlight="{{ url('contest_tag_ajax', tag.name) }}">
+          {{- tag.name -}}
+        </a>
+      </span>
+    {% endfor %}
+  </div>
 {% endmacro %}
 
 {% macro time_left(contest, padding_top = true) %}

From 458b9e425efd3e2a23f10dff589c73126b60b186 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=B5=20Trung=20Ho=C3=A0ng=20H=C6=B0ng?=
 <89190591+HungBacktracking@users.noreply.github.com>
Date: Fri, 6 Oct 2023 01:06:21 +0700
Subject: [PATCH 12/15] fix color in pagination of contest page (#86)

---
 resources/widgets.scss | 30 +++++++-----------------------
 1 file changed, 7 insertions(+), 23 deletions(-)

diff --git a/resources/widgets.scss b/resources/widgets.scss
index 3f2ea95..942b39e 100644
--- a/resources/widgets.scss
+++ b/resources/widgets.scss
@@ -322,7 +322,7 @@ input {
 // Bootstrap-y pagination
 ul.pagination a:hover {
     color: #FFF;
-    background: #0aa082;
+    background: #cc4e17;
     border: none;
 }
 
@@ -338,22 +338,6 @@ ul.pagination {
         li {
             display: inline;
 
-            // &:first-child > {
-                //     a, span {
-                    //         margin-left: 0;
-                    //         border-top-left-radius: $widget_border_radius;
-                    //         border-bottom-left-radius: $widget_border_radius;
-                    //     }
-                // }
-
-            // &:last-child > {
-                //     a, span {
-                    //         margin-left: 0;
-                    //         border-top-right-radius: $widget_border_radius;
-                    //         border-bottom-right-radius: $widget_border_radius;
-                    //     }
-                // }
-
             > {
                 a, span {
                     position: relative;
@@ -373,15 +357,15 @@ ul.pagination {
 
         .disabled-page > {
             a {
-                color: #888;
-                background-color: #04534380;
-                border-color: #04534380;
+                color: #f1efef;
+                background-color: #ab6247;
+                border-color: #6a240b;
             }
 
             span {
-                color: #888;
-                background-color: #04534380;
-                border-color: #04534380;
+                color: #f1efef;
+                background-color: #ab6247;
+                border-color: #6a240b;
             }
         }
 

From 49d1bc2e1bbf1c7ac20ae970716e7a554b710e68 Mon Sep 17 00:00:00 2001
From: Bao Le <127121163+BaoLe106@users.noreply.github.com>
Date: Fri, 6 Oct 2023 02:08:24 +0800
Subject: [PATCH 13/15] Markdown editor improvements (#87)

---
 .../markdown_editor/markdown_editor.html      | 103 ++++++++++--------
 1 file changed, 56 insertions(+), 47 deletions(-)

diff --git a/templates/markdown_editor/markdown_editor.html b/templates/markdown_editor/markdown_editor.html
index 04418e4..c56a6c5 100644
--- a/templates/markdown_editor/markdown_editor.html
+++ b/templates/markdown_editor/markdown_editor.html
@@ -2,20 +2,19 @@
 
 {% block media %}
   <style>
-    main {
+    main{
       overflow: hidden;
     }
-    #content {
+    #content{
       width: 100%;
     }
-    #content.wrapper {
+    #content.wrapper{
       padding: 0;
     }
-    .form-area {
+    .form-area{
       float: left;
       width: 47%;
       height: 100%
-
     }
     .wmd-preview{
       float: right;
@@ -24,13 +23,16 @@
     .width-controller{
       width: 51%;
     }
-    .wmd-input {
-      height: calc(100vh - 114px);
+    .wmd-input{
+      height: calc(100vh - 72px);
     }
     .right-markdown{
-      height: calc(100vh - 69px);
+      height: calc(100vh - 72px);
       overflow-y: scroll;
     }
+    .wrap{
+      display: flex;
+    }
   </style>
 {% endblock %}
 
@@ -49,13 +51,15 @@
             preview: $(this).val()
           },
           success: function(data) {
-            $('#display').html(data)
+            $('#display').html(data);
+            MathJax.typeset();
           },
           error: function(error) {
             alert(error);
             console.log(error.message)
           }
         })
+
       });
     });
   </script>
@@ -90,45 +94,50 @@
 {% block title_row %}
 {% endblock %}
 
-{% block body %}
-  <div id="new-comment" class="form-area" style="">
-    <input type="hidden" name="parent" id="id_parent">
-    <div class="comment-post-wrapper">
-      <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
-        <div class="wmd-panel">
-          <div id="wmd-button-bar-id_body"></div>
-          <textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea>
-        </div>
-        <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
-          <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div>
-          <div class="dmmd-preview-content content-description"></div>
-        </div>
-        <div class="pagedown-image-upload">
-          <h2>{{_('Insert Image')}}</h2>
-          <div class="form-row">
-            <div>
-              <label class="label">{{_('From the web')}}</label>
-              <input class="url-input" type="text" placeholder="http://">
-            </div>
-          </div>
-          <div class="form-row">
-            <div>
-              <label class="label">{{_('From your computer')}}</label>
-              <input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
-            </div>
-          </div>
-          <div class="submit-row">
-            <div class="submit-loading"></div>
-            <input class="submit-input show" type="submit" value="{{_('Save')}}" name="_addanother">
-            <p class="deletelink-box"><a href="#" class="close-image-upload deletelink">{{_('Cancel')}}</a></p>
-          </div>
-        </div>
-      </div></div>
-    </div>
-  </div>
+{% block title_ruler %}
+{% endblock %}
 
-  <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
-    <div class="right-markdown dmmd-preview-content content-description" id="display"></div>
+{% block body %}
+  <div class="wrap">
+    <div id="new-comment" class="form-area">
+      <input type="hidden" name="parent" id="id_parent">
+      <div class="comment-post-wrapper">
+        <div id="comment-form-body"><div class="wmd-wrapper image-upload-enabled">
+          <div class="wmd-panel">
+            <div id="wmd-button-bar-id_body"></div>
+            <textarea id="wmd-input-id_body" class="wmd-input" name="body" required=""></textarea>
+          </div>
+          <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="wmd-panel wmd-preview dmmd-preview dmmd-no-button">
+            <div class="dmmd-preview-update"><i class="fa fa-refresh"></i> {{_('Update Preview')}}</div>
+            <div class="dmmd-preview-content content-description"></div>
+          </div>
+          <div class="pagedown-image-upload">
+            <h2>{{_('Insert Image')}}</h2>
+            <div class="form-row">
+              <div>
+                <label class="label">{{_('From the web')}}</label>
+                <input class="url-input" type="text" placeholder="http://">
+              </div>
+            </div>
+            <div class="form-row">
+              <div>
+                <label class="label">{{_('From your computer')}}</label>
+                <input class="file-input" type="file" name="image" id="file" data-action="/pagedown/image-upload/" accept="image/*">
+              </div>
+            </div>
+            <div class="submit-row">
+              <div class="submit-loading"></div>
+              <input class="submit-input show" type="submit" value="{{_('Save')}}" name="_addanother">
+              <p class="deletelink-box"><a href="#" class="close-image-upload deletelink">{{_('Cancel')}}</a></p>
+            </div>
+          </div>
+        </div></div>
+      </div>
+    </div>
+
+    <div id="id_body-preview" data-preview-url="{{url('comment_preview')}}" data-textarea-id="wmd-input-id_body" data-timeout="1000" class="width-controller wmd-panel wmd-preview dmmd-preview dmmd-no-button dmmd-preview-has-content">
+      <div class="right-markdown dmmd-preview-content content-description" id="display"></div>
+    </div>
   </div>
 {% endblock %}
 

From 44aca3c2e56ab568badd264e077653eda857b2b9 Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 5 Oct 2023 13:11:58 -0500
Subject: [PATCH 14/15] Add darkmode

---
 resources/darkmode.css | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/resources/darkmode.css b/resources/darkmode.css
index 4947452..f9e4d3a 100644
--- a/resources/darkmode.css
+++ b/resources/darkmode.css
@@ -2552,7 +2552,7 @@ input[type="text"]:focus, input[type="password"]:focus {
 ul.pagination a:hover {
     color: rgb(232, 230, 227);
     background-image: initial;
-    background-color: rgb(8, 128, 104);
+    background-color: rgb(163, 62, 18);
     border-color: initial;
 }
 ul.pagination > li > a,
@@ -2563,14 +2563,14 @@ ul.pagination > li > span {
     border-color: rgb(199, 70, 8);
 }
 ul.pagination > .disabled-page > a {
-    color: rgb(157, 148, 136);
-    background-color: rgba(3, 66, 54, 0.5);
-    border-color: rgba(126, 117, 103, 0.5);
+    color: rgb(223, 220, 215);
+    background-color: rgb(137, 78, 57);
+    border-color: rgb(199, 68, 21);
 }
 ul.pagination > .disabled-page > span {
-    color: rgb(157, 148, 136);
-    background-color: rgba(3, 66, 54, 0.5);
-    border-color: rgba(126, 117, 103, 0.5);
+    color: rgb(223, 220, 215);
+    background-color: rgb(137, 78, 57);
+    border-color: rgb(199, 68, 21);
 }
 ul.pagination > .active-page > a {
     color: rgb(232, 230, 227);
@@ -3868,14 +3868,9 @@ mjx-merror {
 mjx-assistive-mml {
     border-color: initial !important;
 }
-mjx-stretchy-v > mjx-ext {
-    border-color: transparent;
-}
-.recently-attempted ul {
-    list-style-image: initial;
-}
-.organization-row:last-child {
-    border-bottom-color: initial;
+#users-table td:nth-child(2),
+#users-table th:nth-child(2) {
+    border-right-color: initial;
 }
 
 /* Override Style */

From 9decd112186fdc662407920946c4e5cc221ec39d Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Thu, 5 Oct 2023 14:00:20 -0500
Subject: [PATCH 15/15] Change textarea css

---
 resources/comments.scss        |  2 +-
 resources/darkmode.css         | 20 ++++++-------
 resources/dmmd-preview.css     |  5 ++--
 resources/pagedown_widget.css  |  2 +-
 resources/pagedown_widget.scss | 54 +++++++++++++++++-----------------
 resources/widgets.scss         | 10 +++----
 6 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/resources/comments.scss b/resources/comments.scss
index c606f26..42dc90b 100644
--- a/resources/comments.scss
+++ b/resources/comments.scss
@@ -214,7 +214,7 @@ a {
     input, textarea {
         min-width: 100%;
         max-width: 100%;
-        font-size: 1em;
+        font-size: 15px;
     }
 }
 
diff --git a/resources/darkmode.css b/resources/darkmode.css
index f9e4d3a..f9a4884 100644
--- a/resources/darkmode.css
+++ b/resources/darkmode.css
@@ -2471,16 +2471,13 @@ input[type="text"], input[type="password"], input[type="email"], input[type="num
     box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px inset;
 }
 textarea {
-    color: rgb(178, 172, 162);
     background-image: none;
     background-color: rgb(24, 26, 27);
     border-color: rgb(62, 68, 70);
     box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px inset;
 }
 textarea:hover {
-    border-color: rgba(16, 87, 144, 0.8);
-    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px inset,
-    rgba(16, 91, 150, 0.6) 0px 0px 4px; 
+    border-color: rgb(140, 130, 115); 
 }
 input[type="text"]:hover, input[type="password"]:hover {
     border-color: rgba(16, 87, 144, 0.8);
@@ -2488,9 +2485,7 @@ input[type="text"]:hover, input[type="password"]:hover {
     rgba(16, 91, 150, 0.6) 0px 0px 4px;
 }
 textarea:focus {
-    border-color: rgba(16, 87, 144, 0.8);
-    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px inset,
-    rgba(16, 91, 150, 0.6) 0px 0px 8px; outline-color: initial; 
+    border-color: rgb(140, 130, 115); outline-color: initial; 
 }
 input[type="text"]:focus, input[type="password"]:focus {
     border-color: rgba(16, 87, 144, 0.8);
@@ -3868,9 +3863,14 @@ mjx-merror {
 mjx-assistive-mml {
     border-color: initial !important;
 }
-#users-table td:nth-child(2),
-#users-table th:nth-child(2) {
-    border-right-color: initial;
+mjx-stretchy-v > mjx-ext {
+    border-color: transparent;
+}
+.recently-attempted ul {
+    list-style-image: initial;
+}
+.organization-row:last-child {
+    border-bottom-color: initial;
 }
 
 /* Override Style */
diff --git a/resources/dmmd-preview.css b/resources/dmmd-preview.css
index 7a7fd1d..c768a0e 100644
--- a/resources/dmmd-preview.css
+++ b/resources/dmmd-preview.css
@@ -13,7 +13,7 @@ div.dmmd-preview-update {
 }
 
 div.dmmd-preview-content {
-  padding: 0 7px;
+  padding: 0 8px;
 }
 
 div.dmmd-preview.dmmd-preview-has-content div.dmmd-preview-update {
@@ -21,7 +21,8 @@ div.dmmd-preview.dmmd-preview-has-content div.dmmd-preview-update {
 }
 
 div.dmmd-preview-has-content div.dmmd-preview-content {
-  padding-bottom: 7px;
+  padding-bottom: 8px;
+  padding-top: 8px;
 }
 
 div.dmmd-no-button div.dmmd-preview-update {
diff --git a/resources/pagedown_widget.css b/resources/pagedown_widget.css
index f20c5e2..3601240 100644
--- a/resources/pagedown_widget.css
+++ b/resources/pagedown_widget.css
@@ -14,7 +14,7 @@
   width: 100%;
   background: #fff;
   border: 1px solid DarkGray;
-  font-family: Consolas, "Liberation Mono", Monaco, "Courier New", monospace !important;
+  font-family: "Noto Sans",Arial,"Lucida Grande",sans-serif !important;
 }
 
 .wmd-preview {
diff --git a/resources/pagedown_widget.scss b/resources/pagedown_widget.scss
index b6d2333..fa97abe 100644
--- a/resources/pagedown_widget.scss
+++ b/resources/pagedown_widget.scss
@@ -14,7 +14,7 @@
     width: 100%;
     background: #fff;
     border: 1px solid DarkGray;
-    font-family: Consolas, "Liberation Mono", Monaco, "Courier New", monospace !important;
+    font-family: "Noto Sans",Arial,"Lucida Grande",sans-serif !important;
 }
 
 .wmd-preview {
@@ -174,51 +174,51 @@
 
 /* Extra styles to allow for image upload */
 .pagedown-image-upload {
-  display: none;
-  z-index: 10001;
-  position: fixed;
-  background: white;
-  top: 50%;
-  left: 50%;
-  padding: 10px;
-  width: 400px;
-  max-width: 90%;
-  transform: translate3d(-50%, -50%, 0);
-  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
+    display: none;
+    z-index: 10001;
+    position: fixed;
+    background: white;
+    top: 50%;
+    left: 50%;
+    padding: 10px;
+    width: 400px;
+    max-width: 90%;
+    transform: translate3d(-50%, -50%, 0);
+    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.5);
 }
 
 .pagedown-image-upload .submit-row {
-  margin: 10px 0 0 0;
+    margin: 10px 0 0 0;
 }
 
 .pagedown-image-upload.show {
-  display: block;
+    display: block;
 }
 
 .pagedown-image-upload .submit-loading {
-  display: none;
-  vertical-align: middle;
-  border: 4px solid #f3f3f3; /* Light grey */
-  border-top: 4px solid #79aec8; /* Blue */
-  border-radius: 50%;
-  width: 24px;
-  height: 24px;
-  animation: spin 1s linear infinite;
+    display: none;
+    vertical-align: middle;
+    border: 4px solid #f3f3f3; /* Light grey */
+    border-top: 4px solid #79aec8; /* Blue */
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
 }
 
 .pagedown-image-upload .submit-loading.show {
-  display: inline-block;
+    display: inline-block;
 }
 
 .pagedown-image-upload .submit-input {
-  display: none;
+    display: none;
 }
 
 .pagedown-image-upload .submit-input.show {
-  display: inline-block;
+    display: inline-block;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
 }
\ No newline at end of file
diff --git a/resources/widgets.scss b/resources/widgets.scss
index 942b39e..42e8c8e 100644
--- a/resources/widgets.scss
+++ b/resources/widgets.scss
@@ -161,8 +161,7 @@ input {
 }
 
 textarea {
-    padding: 4px 8px;
-    color: #555;
+    padding: 8px;
     background: #FFF none;
     border: 1px solid $border_gray;
     border-radius: $widget_border_radius;
@@ -172,8 +171,7 @@ textarea {
 }
 
 textarea:hover {
-    border-color: rgba(82, 168, 236, 0.8);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(82, 168, 236, 0.6);
+    border-color: black;
 }
 
 input {
@@ -184,8 +182,8 @@ input {
 }
 
 textarea:focus {
-    border-color: rgba(82, 168, 236, 0.8);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+    border-color: black;
+    border-width: unset;
     outline: 0;
 }