From f656ca69d958f8cf12bb266bb936ba98d6861dab Mon Sep 17 00:00:00 2001
From: cuom1999 <lephuocdinh99@gmail.com>
Date: Tue, 14 Feb 2023 18:05:58 -0600
Subject: [PATCH] Fix mobile css

---
 resources/base.scss           | 24 ++++++-------
 resources/comments.scss       |  6 ++++
 resources/darkmode.css        | 21 +++++------
 templates/actionbar/list.html | 68 +++++++++++++++++++----------------
 4 files changed, 66 insertions(+), 53 deletions(-)

diff --git a/resources/base.scss b/resources/base.scss
index ed0d2f3..7cfa09a 100644
--- a/resources/base.scss
+++ b/resources/base.scss
@@ -390,12 +390,6 @@ hr {
     }
 }
 
-#content.wrapper {
-    background: white;
-    padding: 2em;
-    border-radius: 1em;
-}
-
 footer {
     text-align: center;
     height: 40px;
@@ -564,7 +558,6 @@ noscript #noscript {
     margin: 0 auto;
     border-right: 1px solid $border_gray;
     border-left: 1px solid $border_gray;
-    background: #f1f2f2;
 }
 
 // border-bottom: 1px solid rgb(204, 204, 204)
@@ -601,7 +594,7 @@ math {
     }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 799px) {
     #navigation {
         height: 36px;
     }
@@ -865,17 +858,22 @@ select {
     }
 }
 
-@media (min-width: 800px) {
+@media(min-width: 800px) {
     .anon {
         padding-right: 1em;
     }
     .navbar-icons {
         margin-top: 6px;
     }
-}
-
-@media (min-width: 800px) {
+    #page-container {
+        background: #f1f2f2;
+    }
     #event-tab {
         display: none;
     }
-}
+    #content.wrapper {
+        background: white;
+        padding: 2em;
+        border-radius: 1em;
+    }
+}
\ No newline at end of file
diff --git a/resources/comments.scss b/resources/comments.scss
index 47620f0..54118e7 100644
--- a/resources/comments.scss
+++ b/resources/comments.scss
@@ -277,4 +277,10 @@ a {
     .bookmarked {
         color: rgb(180, 180, 7);
     }
+}
+
+@media (max-width: 799px) {
+    .hide_texts_on_mobile .actionbar-text {
+        display: none;
+    }
 }
\ No newline at end of file
diff --git a/resources/darkmode.css b/resources/darkmode.css
index 89f35e2..fbec22c 100644
--- a/resources/darkmode.css
+++ b/resources/darkmode.css
@@ -1622,10 +1622,6 @@ 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;
@@ -1690,8 +1686,6 @@ noscript #noscript {
 #page-container {
     border-right-color: rgb(62, 68, 70);
     border-left-color: rgb(62, 68, 70);
-    background-image: initial;
-    background-color: rgb(32, 34, 36);
 }
 .MathJax:focus {
     outline-color: initial;
@@ -1702,7 +1696,7 @@ noscript #noscript {
         border-right-color: initial;
     }
 }
-@media (max-width: 760px) {
+@media (max-width: 799px) {
     #navicon {
         color: rgb(129, 175, 255);
     }
@@ -1799,6 +1793,16 @@ noscript #noscript {
 .background-footer {
     color: rgb(152, 143, 129);
 }
+@media (min-width: 800px) {
+    #page-container {
+        background-image: initial;
+        background-color: rgb(32, 34, 36);
+    }
+    #content.wrapper {
+        background-image: initial;
+        background-color: rgb(24, 26, 27);
+    }
+}
 .table {
     background-image: initial;
     background-color: rgba(0, 0, 0, 0.01);
@@ -3813,9 +3817,6 @@ mjx-merror {
 mjx-assistive-mml {
     border-color: initial !important;
 }
-.recently-attempted ul {
-    list-style-image: initial;
-}
 
 /* Override Style */
 .vimvixen-hint {
diff --git a/templates/actionbar/list.html b/templates/actionbar/list.html
index ea046a4..3abb5b3 100644
--- a/templates/actionbar/list.html
+++ b/templates/actionbar/list.html
@@ -1,9 +1,11 @@
 {% set logged_in = request.user.is_authenticated %}
 {% set profile = request.profile if logged_in else None %}
+{% set hide_texts_on_mobile = (not hide_actionbar_comment) or actionbar_report_url %}
 {% if logged_in %}
   {% if include_hr %}
-    <hr>{% endif %}
-  <div class="page-vote actionbar">
+    <hr>
+  {% endif %}
+  <div class="page-vote actionbar {{'hide_texts_on_mobile' if hide_texts_on_mobile}} ">
     <span class="actionbar-block" style="justify-content: flex-start;">
       <span id="like-button-{{pagevote.id}}"
         class="like-button actionbar-button {% if pagevote.vote_score(request.profile) == 1 %}voted{% endif %}"
@@ -22,33 +24,39 @@
       <span class="actionbar-block">
         <span class="actionbar-button actionbar-comment">
           <i class="fa fa-comment-o" style="font-size: large;"></i>
-          <span class="actionbar-text">{{_("Comment")}} {% if comment_list.count() %} ({{comment_list.count()}}) {% endif
-            %}</span>
-            </span>
+          <span class="actionbar-text">
+            {{_("Comment")}}
+          </span>
+          {% if comment_list.count() %}
+            <span>
+              ({{comment_list.count()}})
             </span>
           {% endif %}
-            <span class="actionbar-block">
-              <span id="bookmark-button-{{bookmark.id}}"
-                class="bookmark-button actionbar-button {% if bookmark.get_bookmark(request.profile) == True %} bookmarked {% endif %}"
-                onclick="javascript:bookmark({{ bookmark.id }}, event)">
-                <i class="fa fa-bookmark-o" style="font-size: large;"></i>
-                <span class="actionbar-text">{{_("Bookmark")}}</span>
-              </span>
-            </span>
-            <span class="actionbar-block" style="justify-content: flex-end;">
-              <span class="actionbar-button actionbar-share" style="position: relative"
-                {{"share-url=" + share_url if share_url else ""}}>
-                <i class=" fa fa-share" style="font-size: large;"></i>
-                <span class="actionbar-text">{{_("Share")}}</span>
-              </span>
-            </span>
-            {% if actionbar_report_url %}
-              <span class="actionbar-block">
-                <a class="actionbar-button black" href="{{actionbar_report_url}}">
-                  <i class="fa fa-flag-o" style="font-size: large;"></i>
-                  <span class="actionbar-text">{{_("Report")}}</span>
-                </a>
-              </span>
-            {% endif %}
-          </div>
-    {% endif %}
\ No newline at end of file
+        </span>
+      </span>
+    {% endif %}
+    <span class="actionbar-block">
+      <span id="bookmark-button-{{bookmark.id}}"
+        class="bookmark-button actionbar-button {% if bookmark.get_bookmark(request.profile) == True %} bookmarked {% endif %}"
+        onclick="javascript:bookmark({{ bookmark.id }}, event)">
+        <i class="fa fa-bookmark-o" style="font-size: large;"></i>
+        <span class="actionbar-text">{{_("Bookmark")}}</span>
+      </span>
+    </span>
+    <span class="actionbar-block" style="justify-content: flex-end;">
+      <span class="actionbar-button actionbar-share" style="position: relative"
+        {{"share-url=" + share_url if share_url else ""}}>
+        <i class=" fa fa-share" style="font-size: large;"></i>
+        <span class="actionbar-text">{{_("Share")}}</span>
+      </span>
+    </span>
+    {% if actionbar_report_url %}
+      <span class="actionbar-block">
+        <a class="actionbar-button black" href="{{actionbar_report_url}}">
+          <i class="fa fa-flag-o" style="font-size: large;"></i>
+          <span class="actionbar-text">{{_("Report")}}</span>
+        </a>
+      </span>
+    {% endif %}
+  </div>
+{% endif %}
\ No newline at end of file