From 2ee279098fc3e1b786a7248598ba676d1a83c0ba Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Tue, 7 Feb 2023 23:14:48 -0600
Subject: [PATCH] Update layout UI

---
 resources/base.scss                 |  14 +-
 resources/blog.scss                 |  15 +-
 resources/chatbox.scss              |   9 +-
 resources/darkmode.css              |  38 ++++-
 resources/submission.scss           |  10 +-
 resources/table.scss                |   4 +
 resources/widgets.scss              |   5 +-
 templates/base.html                 |   2 +-
 templates/chat/chat.html            |   1 +
 templates/three-column-content.html | 229 ++++++++++++++--------------
 templates/two-column-content.html   |   1 +
 11 files changed, 193 insertions(+), 135 deletions(-)

diff --git a/resources/base.scss b/resources/base.scss
index f0a8f60..ed0d2f3 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -36,7 +36,7 @@ img {
 }
 
 * {
-  -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .full {
@@ -327,7 +327,7 @@ nav {
                     a {
                         color: black !important;
                     }
-                    
+
                     a, button {
                         padding: 8px 20px 8px 8px !important;
                         font-size: 0.8em;
@@ -377,7 +377,7 @@ hr {
 }
 
 #content {
-    margin: 4.5em auto 1em auto;
+    margin: 3.2em auto 1em auto;
 
     // Header
     width: 90%;
@@ -390,6 +390,12 @@ hr {
     }
 }
 
+#content.wrapper {
+    background: white;
+    padding: 2em;
+    border-radius: 1em;
+}
+
 footer {
     text-align: center;
     height: 40px;
@@ -558,7 +564,7 @@ noscript #noscript {
     margin: 0 auto;
     border-right: 1px solid $border_gray;
     border-left: 1px solid $border_gray;
-    background: white;
+    background: #f1f2f2;
 }
 
 // border-bottom: 1px solid rgb(204, 204, 204)
diff --git a/resources/blog.scss b/resources/blog.scss
index c720ad4..c268b13 100644
--- a/resources/blog.scss
+++ b/resources/blog.scss
@@ -257,6 +257,12 @@
     }
 }
 
+.middle-right-content.wrapper {
+    padding: 1em 0;
+    background: white;
+    border-radius: 1em;
+}
+
 
 @media (max-width: 799px) {
     .actionbar-box {
@@ -332,14 +338,15 @@
 
     .left-sidebar {
         width: 11%;
+        max-width: 11%;
+        min-width: 11%;
         position: fixed;
         height: 100%;
         margin-top: -4em;
         padding-top: 4em;
-    }
-
-    .left-sidebar-item {
-        border-radius: 0 0.5em 0.5em 0;
+        border-right: 1px solid lightgray;
+        box-shadow: 0px -10px 2px 0px rgb(0 0 0 / 50%);
+        background: white;
     }
 
     .feed-table {
diff --git a/resources/chatbox.scss b/resources/chatbox.scss
index 979a239..a3d50d9 100644
--- a/resources/chatbox.scss
+++ b/resources/chatbox.scss
@@ -1,3 +1,6 @@
+.chat {
+    background: white;
+}
 #chat-log p {
     margin: 0;
     padding-top: 0.1em;
@@ -101,7 +104,7 @@
     margin-bottom: 1.5px;
 }
 .info-circle {
-    position: absolute; 
+    position: absolute;
     cx: 86%;
     cy: 80%;
     r: 6px;
@@ -146,8 +149,8 @@
     display: inline-flex;
 }
 .status-circle {
-    position: absolute; 
-    bottom: 0; 
+    position: absolute;
+    bottom: 0;
     right: 0;
     cx: 18px;
     cy: 18px;
diff --git a/resources/darkmode.css b/resources/darkmode.css
index 2045261..89f35e2 100644
--- a/resources/darkmode.css
+++ b/resources/darkmode.css
@@ -1622,6 +1622,10 @@ hr {
 #content .title {
     color: rgb(199, 194, 187);
 }
+#content.wrapper {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+}
 footer {
     border-top-color: rgb(62, 68, 70);
     background-image: initial;
@@ -1687,7 +1691,7 @@ noscript #noscript {
     border-right-color: rgb(62, 68, 70);
     border-left-color: rgb(62, 68, 70);
     background-image: initial;
-    background-color: rgb(24, 26, 27);
+    background-color: rgb(32, 34, 36);
 }
 .MathJax:focus {
     outline-color: initial;
@@ -1803,6 +1807,10 @@ noscript #noscript {
     background-image: initial;
     background-color: rgb(29, 31, 32);
 }
+.table.striped tr:nth-child(2n+1) {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+}
 .table td:first-child {
     border-color: rgb(62, 68, 70);
 }
@@ -1919,6 +1927,9 @@ noscript #noscript {
     border-top-color: rgb(60, 65, 68);
     background-color: rgb(24, 26, 27);
 }
+.blog-box:hover {
+    border-color: rgb(81, 88, 91);
+}
 .problem-feed-name a {
     color: rgb(102, 177, 250);
 }
@@ -1939,11 +1950,22 @@ noscript #noscript {
     color: rgb(232, 230, 227);
 }
 .show-more {
-    color: white;
-    background: linear-gradient(rgba(0, 0, 0, 0), rgb(24, 26, 27));
+    color: rgb(232, 230, 227);
+    background-image: linear-gradient(rgba(0, 0, 0, 0),
+    rgb(24, 26, 27));
+    background-color: initial;
+}
+.middle-right-content.wrapper {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
 }
-
 @media (min-width: 800px) {
+    .left-sidebar {
+        border-right-color: rgb(60, 65, 68);
+        box-shadow: rgba(0, 0, 0, 0.5) 0px -10px 2px 0px;
+        background-image: initial;
+        background-color: rgb(24, 26, 27);
+    }
     .blog-box {
         border-left-color: rgb(60, 65, 68);
         border-right-color: rgb(60, 65, 68);
@@ -2570,6 +2592,8 @@ a.close:hover {
     border-bottom-color: rgb(62, 68, 70);
     border-left-color: rgb(62, 68, 70);
     border-top-color: initial;
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
 }
 .sidebox-content.sidebox-table {
     border-color: initial;
@@ -2732,7 +2756,7 @@ a.voted {
 }
 #submissions-table {
     background-image: initial;
-    background-color: rgba(0, 0, 0, 0.01);
+    background-color: rgb(24, 26, 27);
 }
 .submission-row {
     border-left-color: rgb(62, 68, 70);
@@ -2971,6 +2995,10 @@ a.voted {
     background-color: rgba(204, 0, 0, 0.8);
     color: rgb(232, 230, 227);
 }
+.chat {
+    background-image: initial;
+    background-color: rgb(24, 26, 27);
+}
 #emoji-button {
     color: rgb(204, 200, 193);
 }
diff --git a/resources/submission.scss b/resources/submission.scss
index cf8f279..4288d5b 100644
--- a/resources/submission.scss
+++ b/resources/submission.scss
@@ -5,7 +5,7 @@
 }
 
 #submissions-table {
-    background: rgba(0, 0, 0, .01);
+    background: white;
 }
 
 .submission-row {
@@ -212,8 +212,8 @@ label[for="language"], label[for="status"] {
     }
 
     // .batch-cases .case-row td b {
-    //     font-weight: 500;
-    // }
+        //     font-weight: 500;
+        // }
 
     .case-info {
         margin: 0;
@@ -252,7 +252,7 @@ label[for="language"], label[for="status"] {
         td {
             padding: 0.6em 0.8em;
             width: 18.75%;
-            
+
         }
 
         .case-row td:nth-child(2) {
@@ -288,7 +288,7 @@ label[for="language"], label[for="status"] {
 }
 
 .overall-result-WA {
-    background: linear-gradient(45deg, yellow, red);   
+    background: linear-gradient(45deg, yellow, red);
 }
 
 .overall-result-TLE {
diff --git a/resources/table.scss b/resources/table.scss
index 08c714e..c72149d 100644
--- a/resources/table.scss
+++ b/resources/table.scss
@@ -12,6 +12,10 @@
         background: #f7f7f7;
     }
 
+    &.striped tr:nth-child(odd) {
+        background: white;
+    }
+
     td:first-child {
         border-color: $border_gray;
         border-width: 1px 1px 0 1px;
diff --git a/resources/widgets.scss b/resources/widgets.scss
index dec1bd6..892f76a 100644
--- a/resources/widgets.scss
+++ b/resources/widgets.scss
@@ -495,6 +495,7 @@ ul.select2-selection__rendered {
     border-top: none;
     margin: 0 -5px;
     padding: 1px 0.5em 3px;
+    background: white;
 
     &.sidebox-table {
         border: none;
@@ -591,7 +592,7 @@ ul.select2-selection__rendered {
 .control-button {
     background: lightgray;
     color: black !important;
-    border: 0;  
+    border: 0;
 }
 
 .control-button:hover {
@@ -701,7 +702,7 @@ ul.select2-selection__rendered {
 }
 
 #login-panel {
-    
+
     display: inline-block;
     position: relative;
     margin: 5em auto auto -10em;
diff --git a/templates/base.html b/templates/base.html
index e095b48..f69a8a8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -332,7 +332,7 @@
         <div id="noscript">{{ _('This site works best with JavaScript enabled.') }}</div>
       </noscript>
       <br>
-      <main id="content">
+      <main id="content" class="{{'wrapper' if layout != 'no_wrapper'}}">
         {% block title_row %}
           <h2 class="title-row">
             {% block content_title %}
diff --git a/templates/chat/chat.html b/templates/chat/chat.html
index 553ad5e..7e03526 100644
--- a/templates/chat/chat.html
+++ b/templates/chat/chat.html
@@ -1,3 +1,4 @@
+{% set layout = "no_wrapper" %}
 {% extends "base.html" %}
 {% block title_row %}{% endblock %}
 {% block title_ruler %}{% endblock %}
diff --git a/templates/three-column-content.html b/templates/three-column-content.html
index 06c8ee5..652a2ee 100644
--- a/templates/three-column-content.html
+++ b/templates/three-column-content.html
@@ -1,143 +1,150 @@
+{% set layout = 'no_wrapper' %}
 {% extends "base.html" %}
 {% block title_row %}{% endblock %}
 {% block title_ruler %}{% endblock %}
 
 {% block media %}
-<style>
-  @media(min-width: 800px) {
-    #content {
-      width: 98%;
-      margin-left: 0;
+  <style>
+    @media(min-width: 800px) {
+      #content {
+        width: 98%;
+        margin-left: 0;
+      }
+
+      .middle-right-content {
+        margin-left: 13%;
+        display: inline-flex;
+      }
     }
 
-    .middle-right-content {
-      margin-left: 13%;
-      display: inline-flex;
-    }
-  }
+    @media(max-width: 799px) {
+      #content {
+        width: 100%;
+        margin-left: 0;
+      }
 
-  @media(max-width: 799px) {
-    #content {
-      width: 100%;
-      margin-left: 0;
+      .middle-right-content {
+        display: block;
+      }
     }
-
-    .middle-right-content {
-      display: block;
-    }
-  }
-</style>
+  </style>
 {% endblock %}
 
 {% block js_media %}
-<script type="text/javascript">
-  function activateBlogBoxOnClick() {
-    $('.blog-box').on('click', function () {
-      var $description = $(this).children('.blog-description');
-      var max_height = $description.css('max-height');
-      if (max_height !== 'fit-content') {
-        $description.css('max-height', 'fit-content');
-        $(this).css('cursor', 'auto');
-        $(this).removeClass('pre-expand-blog');
-        $(this).children().children('.show-more').hide();
-      }
-    });
+  <script type="text/javascript">
+    function activateBlogBoxOnClick() {
+      $('.blog-box').on('click', function () {
+        var $description = $(this).children('.blog-description');
+        var max_height = $description.css('max-height');
+        if (max_height !== 'fit-content') {
+          $description.css('max-height', 'fit-content');
+          $(this).css('cursor', 'auto');
+          $(this).removeClass('pre-expand-blog');
+          $(this).children().children('.show-more').hide();
+        }
+      });
 
-    $('.blog-box').each(function () {
-      var $precontent = $(this).children('.blog-description').height();
-      var $content = $(this).children().children('.content-description').height();
-      if ($content == undefined) {
-        $content = $(this).children().children('.md-typeset').height()
-      }
-      if ($content > $precontent - 30) {
-        $(this).addClass('pre-expand-blog');
-        $(this).css('cursor', 'pointer');
-      } else {
-        $(this).children().children('.show-more').hide();
-      }
-    });
-  }
-
-  function navigateTo($elem, update_sidebar = false) {
-    var url = $elem.attr('data-href') || $elem.attr('href');
-
-    if (url === '#') return;
-    if (update_sidebar) {
-      $('.left-sidebar-item').removeClass('active');
-      $elem.addClass('active');
+      $('.blog-box').each(function () {
+        var $precontent = $(this).children('.blog-description').height();
+        var $content = $(this).children().children('.content-description').height();
+        if ($content == undefined) {
+          $content = $(this).children().children('.md-typeset').height()
+        }
+        if ($content > $precontent - 30) {
+          $(this).addClass('pre-expand-blog');
+          $(this).css('cursor', 'pointer');
+        } else {
+          $(this).children().children('.show-more').hide();
+        }
+      });
     }
-    $('.middle-right-content').html(loading_page);
-    $.get(url, function (data) {
-      var reload_content = $(data).find('.middle-right-content');
 
-      if (reload_content.length) {
-        window.history.pushState("", "", url);
-        $('.middle-right-content').html(reload_content.first().html());
-        $(document).prop('title', $(data).filter('title').text());
-        MathJax.typeset($('.middle-right-content')[0]);
-        onWindowReady();
-        activateBlogBoxOnClick();
-        $('.xdsoft_datetimepicker').hide();
-        registerNavigation();
-      }
-      else {
-        window.location.href = url;
-      }
-    });
-  }
+    function navigateTo($elem, update_sidebar = false) {
+      var url = $elem.attr('data-href') || $elem.attr('href');
 
-  function registerNavigation() {
-    const links = ['.pagination a', '.tabs li a', '.problem-feed-option a'];
-    for (link of links) {
-      $(link).on('click', function (e) {
-        e.preventDefault();
-        navigateTo($(this));
-      })
+      if (url === '#') return;
+      if (update_sidebar) {
+        $('.left-sidebar-item').removeClass('active');
+        $elem.addClass('active');
+      }
+      $('.middle-right-content').html(loading_page);
+      $.get(url, function (data) {
+        var reload_content = $(data).find('.middle-right-content');
+
+        if (reload_content.length) {
+          window.history.pushState("", "", url);
+          $('.middle-right-content').html(reload_content.first().html());
+          if (reload_content.hasClass("wrapper")) {
+            $('.middle-right-content').addClass("wrapper");
+          }
+          else {
+            $('.middle-right-content').removeClass("wrapper");
+          }
+          $(document).prop('title', $(data).filter('title').text());
+          MathJax.typeset($('.middle-right-content')[0]);
+          onWindowReady();
+          activateBlogBoxOnClick();
+          $('.xdsoft_datetimepicker').hide();
+          registerNavigation();
+        }
+        else {
+          window.location.href = url;
+        }
+      });
     }
-  }
 
-  $(function () {
-    window.addEventListener('popstate', (e) => {
-      window.location.href = e.currentTarget.location.href;
-    });
-    activateBlogBoxOnClick();
+    function registerNavigation() {
+      const links = ['.pagination a', '.tabs li a', '.problem-feed-option a'];
+      for (link of links) {
+        $(link).on('click', function (e) {
+          e.preventDefault();
+          navigateTo($(this));
+        })
+      }
+    }
 
-    $('.left-sidebar-item').on('click', function () {
-      navigateTo($(this), true);
+    $(function () {
+      window.addEventListener('popstate', (e) => {
+        window.location.href = e.currentTarget.location.href;
+      });
+      activateBlogBoxOnClick();
+
+      $('.left-sidebar-item').on('click', function () {
+        navigateTo($(this), true);
+      });
+      registerNavigation();
     });
-    registerNavigation();
-  });
-</script>
+  </script>
 {% endblock %}
 
 {% macro make_tab_item(name, fa, url, text) %}
-<div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
-  <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
-  <span>{{ text }}</span>
-</div>
+  <div class="left-sidebar-item {% if page_type == name %}active{% endif %}" data-href="{{ url }}" id="{{ name }}-tab">
+    <span class="sidebar-icon"><i class="{{ fa }}"></i></span>
+    <span>{{ text }}</span>
+  </div>
 {% endmacro %}
 
 {% block body %}
-{% block before_posts %}{% endblock %}
-<div id="three-col-container">
-  {% block left_sidebar %}{% endblock %}
-  <div class="middle-right-content">
-    {% block three_col_media %}{% endblock %}
-    {% block three_col_js %}{% endblock %}
-    <div class="middle-content">
-      {% block middle_title %}{% endblock %}
-      {% block middle_content %}{% endblock %}
+  {% block before_posts %}{% endblock %}
+  <div id="three-col-container">
+    {% block left_sidebar %}{% endblock %}
+    <div class="middle-right-content {{'wrapper' if is_two_column}}">
+      {% block three_col_media %}{% endblock %}
+      {% block three_col_js %}{% endblock %}
+      <div class="middle-content">
+        {% block middle_title %}{% endblock %}
+        {% block middle_content %}{% endblock %}
+      </div>
+      {% block right_sidebar %}{% endblock %}
     </div>
-    {% block right_sidebar %}{% endblock %}
   </div>
-</div>
-{% block after_posts %}{% endblock %}
+  {% block after_posts %}{% endblock %}
 {% endblock %}
 
 {% block bodyend %}
-{{ super() }}
-{% if REQUIRE_JAX %}
-{% include "mathjax-load.html" %}
-{% endif %}
-{% include "comments/math.html" %}
+  {{ super() }}
+  {% if REQUIRE_JAX %}
+    {% include "mathjax-load.html" %}
+  {% endif %}
+  {% include "comments/math.html" %}
 {% endblock %}
\ No newline at end of file
diff --git a/templates/two-column-content.html b/templates/two-column-content.html
index cebf64b..82899a7 100644
--- a/templates/two-column-content.html
+++ b/templates/two-column-content.html
@@ -1,3 +1,4 @@
+{% set is_two_column = true %}
 {% extends "three-column-content.html" %}
 
 {% block three_col_js %}