From 16b458932eb1c7ad13be50b2cf187af27c962daf Mon Sep 17 00:00:00 2001
From: SvyatoslavArtymovych <svyatoslav.artymovych@gmail.com>
Date: Wed, 21 Jun 2023 16:22:14 +0300
Subject: [PATCH] sort by btns

---
 app/__init__.py                               |  3 +
 .../book/components/header_buttons.html       | 58 +-----------------
 .../book/components/new_book_btn.html         |  3 +
 .../book/components/sort_by_btn.html          | 53 +++++++++++++++++
 app/templates/book/favorite_books.html        |  5 ++
 app/templates/book/my_contributions.html      |  9 ++-
 app/templates/book/my_library.html            | 35 ++++-------
 app/templates/header.html                     | 59 ++-----------------
 app/templates/home/explore_books.html         |  5 ++
 app/templates/home/index.html                 |  3 +
 app/templates/right_sidebar.html              | 30 ----------
 11 files changed, 100 insertions(+), 163 deletions(-)
 create mode 100644 app/templates/book/components/new_book_btn.html
 create mode 100644 app/templates/book/components/sort_by_btn.html
 delete mode 100644 app/templates/right_sidebar.html

diff --git a/app/__init__.py b/app/__init__.py
index ba5bf98..78b9567 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -1,5 +1,6 @@
 import os
 import warnings
+from uuid import uuid4
 
 from flask import Flask, render_template
 from flask_sqlalchemy import SQLAlchemy
@@ -81,6 +82,8 @@ def create_app(environment="development"):
 
     app.jinja_env.globals["type"] = type
     app.jinja_env.globals["m"] = m
+    app.jinja_env.globals["str"] = str
+    app.jinja_env.globals["uuid"] = uuid4
 
     app.jinja_env.globals["Access"] = m.Permission.Access
     app.jinja_env.globals["EntityType"] = m.Permission.Entity
diff --git a/app/templates/book/components/header_buttons.html b/app/templates/book/components/header_buttons.html
index 9e0c0ee..80adae6 100644
--- a/app/templates/book/components/header_buttons.html
+++ b/app/templates/book/components/header_buttons.html
@@ -2,64 +2,12 @@
   <ul class="flex font-medium">
     <li>
       {% if not selected_tab=='my_contributions' %}
-      <!-- prettier-ignore -->
-      <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="text-white ml-2 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
-        New book
-      </button>
+        <!-- prettier-ignore -->
+        {% include 'book/components/new_book_btn.html'  %}
       {% endif %}
     </li>
     <li>
-      <!-- prettier-ignore -->
-      <button id="dropdownDelayButton" data-dropdown-toggle="dropdownDelay" data-dropdown-delay="500" data-dropdown-trigger="hover" class="text-white ml-4 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
-        Sort by
-        {{request.args.get('sort',"")}}
-        <!-- prettier-ignore -->
-        <svg class="w-4 h-4 ml-auto" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg>
-      </button>
-
-      <!-- Dropdown menu -->
-      <!-- prettier-ignore -->
-      <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-        <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
-          <!-- prettier-ignore -->
-          {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
-            <li>
-              <a href="?sort=upvoted" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                Most upvoted
-              </a >
-            </li>
-          {% endif %}
-
-          {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
-            <li>
-              <a href="?sort=favorited" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                Most favorited
-              </a>
-            </li>
-          {% endif %}
-
-          <li>
-            <a href="?sort=recent" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-              Most recent
-            </a >
-          </li>
-          {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
-            <li>
-              <a href="?sort=commented" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                Most comments
-              </a >
-            </li>
-          {% endif %}
-
-          {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
-            <li>
-              <a href="?sort=interpretations" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                Most interpretations
-              </a >
-            </li>
-          {% endif %}
-        </ul>
-      </div>
+      {% include 'book/components/sort_by_btn.html'  %}
     </li>
   </ul>
 </div>
diff --git a/app/templates/book/components/new_book_btn.html b/app/templates/book/components/new_book_btn.html
new file mode 100644
index 0000000..0c9f216
--- /dev/null
+++ b/app/templates/book/components/new_book_btn.html
@@ -0,0 +1,3 @@
+<button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="text-white md:ml-2 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
+    New book
+</button>
\ No newline at end of file
diff --git a/app/templates/book/components/sort_by_btn.html b/app/templates/book/components/sort_by_btn.html
new file mode 100644
index 0000000..021b8aa
--- /dev/null
+++ b/app/templates/book/components/sort_by_btn.html
@@ -0,0 +1,53 @@
+{% set unique_id = str(uuid()) %}
+
+<!-- prettier-ignore -->
+<button id="dropdownDelayButton" data-dropdown-toggle="dropdownDelay-{{unique_id}}" data-dropdown-delay="500" data-dropdown-trigger="hover" class="text-white ml-4 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
+    Sort by
+    {{request.args.get('sort',"")}}
+    <!-- prettier-ignore -->
+    <svg class="w-4 h-4 ml-auto" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg>
+</button>
+
+<!-- Dropdown menu -->
+<!-- prettier-ignore -->
+<div id="dropdownDelay-{{unique_id}}" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
+    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
+        <!-- prettier-ignore -->
+        {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
+        <li>
+            <a href="?sort=upvoted" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+            Most upvoted
+            </a >
+        </li>
+        {% endif %}
+
+        {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
+        <li>
+            <a href="?sort=favorited" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+            Most favorited
+            </a>
+        </li>
+        {% endif %}
+
+        <li>
+        <a href="?sort=recent" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+            Most recent
+        </a >
+        </li>
+        {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
+        <li>
+            <a href="?sort=commented" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+            Most comments
+            </a >
+        </li>
+        {% endif %}
+
+        {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
+        <li>
+            <a href="?sort=interpretations" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
+            Most interpretations
+            </a >
+        </li>
+        {% endif %}
+    </ul>
+</div>
\ No newline at end of file
diff --git a/app/templates/book/favorite_books.html b/app/templates/book/favorite_books.html
index bde83e8..ab11d25 100644
--- a/app/templates/book/favorite_books.html
+++ b/app/templates/book/favorite_books.html
@@ -30,6 +30,11 @@
     </div>
   {% endif %}
 
+  <div class="md:hidden flex justify-between border-b py-3 px-4 border-gray-200 dark:border-gray-700">
+    {% include 'book/components/new_book_btn.html'  %}
+    {% include 'book/components/sort_by_btn.html' %}
+  </div>
+
   {% for book in books %}
     {% include 'book/components/book_list_item.html' %}
   {% endfor %}
diff --git a/app/templates/book/my_contributions.html b/app/templates/book/my_contributions.html
index 2e33c7d..e684a0d 100644
--- a/app/templates/book/my_contributions.html
+++ b/app/templates/book/my_contributions.html
@@ -6,7 +6,8 @@
 
 {% block content %}
 <div
-  class="pt-1 relative sm:rounded-lg mt-1 h-box flex">
+  class="pt-1 relative sm:rounded-lg mt-1 h-box flex"
+>
   {% if not current_user.is_authenticated %}
   <!-- prettier-ignore -->
   <div class="mx-auto my-auto h-full w-full p-2">
@@ -27,9 +28,13 @@
         {% if current_user.is_authenticated %}
           {% include 'book/components/header_buttons.html' %}
         {% endif %}
-      </div>
+    </div>
   {% endif %}
 
+  <div class="md:hidden flex justify-end border-b py-3 px-4 border-gray-200 dark:border-gray-700">
+    {% include 'book/components/sort_by_btn.html' %}
+  </div>
+
 
   {% for interpretation in interpretations %}
     {% with show_control_btns=True %}
diff --git a/app/templates/book/my_library.html b/app/templates/book/my_library.html
index 10fe451..858fa5f 100644
--- a/app/templates/book/my_library.html
+++ b/app/templates/book/my_library.html
@@ -22,27 +22,7 @@
   </div>
   {% endif %} {% if current_user.is_authenticated and not books.total %}
   <div class="mx-auto my-auto h-full w-full p-2">
-    <button
-      type="button"
-      data-modal-target="add-book-modal"
-      data-modal-toggle="add-book-modal"
-      class="w-full h-full text-black dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-100 font-medium rounded-lg text-sm px-4 py-2.5 justify-center text-center inline-flex items-center border border-gray-200 dark:border-gray-700">
-      <div class="my-auto flex items-center space-x-2">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-6 h-6">
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M12 4.5v15m7.5-7.5h-15" />
-        </svg>
-        <span>New book</span>
-      </div>
-    </button>
+    {% include 'book/components/new_book_btn.html'  %}
   </div>
   {% endif %}
 
@@ -56,8 +36,17 @@
       {% endif %}
     </div>
   </div>
-  {% endif %} {% for book in books if not book.is_deleted %} {% include
-  'book/components/book_list_item.html' %} {% endfor %}
+  {% endif %}
+
+  <div class="md:hidden flex justify-between border-b py-3 px-4 border-gray-200 dark:border-gray-700">
+    {% include 'book/components/new_book_btn.html' %}
+    {% include 'book/components/sort_by_btn.html' %}
+  </div>
+
+  <!-- prettier-ignore -->
+  {% for book in books if not book.is_deleted %}
+    {% include 'book/components/book_list_item.html' %}
+  {% endfor %}
 
   <!-- prettier-ignore -->
   {% if current_user.is_authenticated and page.pages > 1 %}
diff --git a/app/templates/header.html b/app/templates/header.html
index e11c909..21c3b15 100644
--- a/app/templates/header.html
+++ b/app/templates/header.html
@@ -11,60 +11,13 @@
           <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path> </svg>
         </button>
         <!-- prettier-ignore -->
-        <a href="/" class="flex ml-32 md:ml-2  md:mr-24"> <img src="{{url_for('static',filename='img/logo.svg')}}" class="h-8 md:mr-3" alt="OpenLaw Logo" /> <span class="hidden md:inline-block self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white" >OpenLaw</span > </a>
+        <a href="/" class="flex ml-32 md:ml-2  md:mr-24">
+          <img src="{{url_for('static',filename='img/logo.svg')}}" class="h-8 md:mr-3" alt="OpenLaw Logo" />
+          <span class="hidden md:inline-block self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white" >
+            OpenLaw
+          </span >
+        </a>
           <!-- prettier-ignore -->
-          {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books' or selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
-          <button id="dropdownDelayButton" data-dropdown-toggle="dropdownDelay" data-dropdown-delay="500" data-dropdown-trigger="hover" class="md:hidden text-white ml-auto bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
-            Sort by
-            {{request.args.get('sort',"")}}
-            <!-- prettier-ignore -->
-            <svg class="w-4 h-4 ml-auto" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg>
-          </button>
-
-          <!-- Dropdown menu -->
-          <!-- prettier-ignore -->
-          <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-            <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
-              <!-- prettier-ignore -->
-              {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
-                <li>
-                  <a href="?sort=upvoted" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                    Most upvoted
-                  </a >
-                </li>
-              {% endif %}
-
-              {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
-                <li>
-                  <a href="?sort=favorited" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                    Most favorited
-                  </a>
-                </li>
-              {% endif %}
-
-              <li>
-                <a href="?sort=recent" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                  Most recent
-                </a >
-              </li>
-              {% if selected_tab=='latest_interpretations' or selected_tab=='my_contributions' %}
-                <li>
-                  <a href="?sort=commented" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                    Most comments
-                  </a >
-                </li>
-              {% endif %}
-
-              {% if selected_tab=='my_library' or selected_tab=='favorite_books' or selected_tab=='explore_books'%}
-                <li>
-                  <a href="?sort=interpretations" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >
-                    Most interpretations
-                  </a >
-                </li>
-              {% endif %}
-            </ul>
-          </div>
-          {% endif %}
           {% include 'sidebar.html' %}
           {% include 'searchbar.html' %}
         <!-- prettier-ignore -->
diff --git a/app/templates/home/explore_books.html b/app/templates/home/explore_books.html
index eb28cfe..cda8a99 100644
--- a/app/templates/home/explore_books.html
+++ b/app/templates/home/explore_books.html
@@ -33,6 +33,11 @@
     </li>
   </ul>
 </div>
+
+<div class="md:hidden flex justify-end border-b py-3 px-4 border-gray-200 dark:border-gray-700">
+  {% include 'book/components/sort_by_btn.html' %}
+</div>
+
 <div id="myTabContent">
   <!-- prettier-ignore -->
   <div class="hidden md:p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="last-interpretations" role="tabpanel" aria-labelledby="last-interpretations-tab"></div>
diff --git a/app/templates/home/index.html b/app/templates/home/index.html
index 08d70e7..98716b1 100644
--- a/app/templates/home/index.html
+++ b/app/templates/home/index.html
@@ -32,6 +32,9 @@
     </li>
   </ul>
 </div>
+<div class="md:hidden flex justify-end border-b py-3 px-4 border-gray-200 dark:border-gray-700">
+  {% include 'book/components/sort_by_btn.html' %}
+</div>
 <div id="myTabContent">
   <!-- prettier-ignore -->
   <div class="hidden md:p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="last-interpretations" role="tabpanel" aria-labelledby="last-interpretations-tab">
diff --git a/app/templates/right_sidebar.html b/app/templates/right_sidebar.html
deleted file mode 100644
index a1144bb..0000000
--- a/app/templates/right_sidebar.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<aside
-  id="logo-right-sidebar"
-  class="fixed top-10 right-0 left-auto z-40 w-64 h-screen pt-28 transition-transform translate-x-96 bg-white border-r border-gray-200 md:translate-x-0 dark:bg-gray-800 dark:border-gray-700"
-  aria-label="Right-sidebar">
-  <div class="h-full pb-4 overflow-y-auto bg-white dark:bg-gray-800">
-    <ul class="space-y-4 font-medium">
-      <li>
-        <!-- prettier-ignore -->
-        <button type="button" data-modal-target="add-book-modal" data-modal-toggle="add-book-modal" class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg> New book </button>
-      </li>
-      <li>
-        <!-- prettier-ignore -->
-        <button id="dropdownDelayButton" data-dropdown-toggle="dropdownDelay" data-dropdown-delay="500" data-dropdown-trigger="hover" class="text-white ml-2 w-11/12 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
-          Sort by
-          <!-- prettier-ignore -->
-          <svg class="w-4 h-4 ml-auto" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> </svg>
-        </button>
-        <!-- Dropdown menu -->
-        <!-- prettier-ignore -->
-        <div id="dropdownDelay" class="z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
-          <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDelayButton">
-            <!-- prettier-ignore -->
-            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Dashboard</a > </li>
-            <li> <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white" >Settings</a > </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-  </div>
-</aside>