Merge pull request #40 from Simple2B/kostia/feature/sidebar-topbar

added top nav bar and fix some styles
2023-05-10 15:07:47 +03:00 · 2023-05-10 15:07:47 +03:00 · ca98797e66
parent 6d378b4fd9 1336bbc460
commit ca98797e66
9 changed files with 88 additions and 49 deletions
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@ -1113,14 +1113,18 @@ input:checked + .toggle-bg {
  top: 2.5rem;
 }

-.top-28 {
-  top: 7rem;
-}
-
 .top-3 {
  top: 0.75rem;
 }

+.top-32 {
+  top: 8rem;
+}
+
+.top-44 {
+  top: 11rem;
+}
+
 .-z-10 {
  z-index: -10;
 }
@ -1189,6 +1193,11 @@ input:checked + .toggle-bg {
  margin-bottom: -0.375rem;
 }

+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mx-auto {
  margin-left: auto;
  margin-right: auto;
@ -1204,6 +1213,11 @@ input:checked + .toggle-bg {
  margin-bottom: 1rem;
 }

+.my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
 .-mb-px {
  margin-bottom: -1px;
 }
@ -1296,10 +1310,6 @@ input:checked + .toggle-bg {
  margin-top: 0.375rem;
 }

-.mt-16 {
-  margin-top: 4rem;
-}
-
 .mt-2 {
  margin-top: 0.5rem;
 }
@ -2919,10 +2929,6 @@ input:checked + .toggle-bg {
    margin-left: 0.75rem;
  }

-  .md\:ml-64 {
-    margin-left: 16rem;
-  }
-
  .md\:ml-auto {
    margin-left: auto;
  }
@ -2992,6 +2998,10 @@ input:checked + .toggle-bg {
    flex-direction: row;
  }

+  .md\:flex-wrap {
+    flex-wrap: wrap;
+  }
+
  .md\:space-x-3 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.75rem * var(--tw-space-x-reverse));
@ -3006,6 +3016,11 @@ input:checked + .toggle-bg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
+
+  .md\:text-sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
 }

@media (min-width: 1024px) {
--- a/app/templates/base.html
+++ b/app/templates/base.html
@ -74,10 +74,6 @@

    {% block body %}

-    <!-- SideBar -->
-    <!-- prettier-ignore -->
-    {% include 'sidebar.html' %}
-
    {% block right_sidebar %} {% include 'right_sidebar.html' %} {% endblock %}

    {% include 'book/add_book_modal.html' %}
@ -85,7 +81,7 @@
    <!-- prettier-ignore -->
    <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript" defer></script>

-    <div class="p-0 mt-16 h-auto md:ml-64">
+    <div class="p-0 mt-36 h-auto">
      <!-- Main Content -->
      {% block content %}{% endblock %}
    </div>
--- a/app/templates/book/breadcrumbs_navigation.html
+++ b/app/templates/book/breadcrumbs_navigation.html
@ -1,5 +1,5 @@
 <!-- prettier-ignore -->
-<nav class="fixed flex p-4 pl-1 mt-1.5 z-40 w-full md:w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
+<nav class="fixed flex top-32 p-4 pl-1 mt-1.5 z-40 w-full md:w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1 md:space-x-3 ml-5 overflow-x-scroll md:overflow-auto p-0">
    {% for breadcrumb in breadcrumbs %}
    <li class="inline-flex items-center">
--- a/app/templates/book/interpretation_view.html
+++ b/app/templates/book/interpretation_view.html
@ -16,7 +16,7 @@
 {% include 'book/breadcrumbs_navigation.html'%}
 <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
  <!-- prettier-ignore -->
-  <div class="fixed z-30 w-full md:w-4/5 top-28 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <div class="fixed z-30 w-full md:w-4/5 top-44 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
    <!-- prettier-ignore -->
    <h1 class="text-l font-extrabold dark:text-white ml-4"> Interpretations page </h1>
    <!-- prettier-ignore -->
@ -39,13 +39,9 @@
  </div>
  </div>
  <div id="myTabContent" class="mt-40">
-    <div
-      class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
-      id="section-text"
-      role="tabpanel"
-      aria-labelledby="text-tab">
-      <dl
-        class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
+    <!-- prettier-ignore -->
+    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="section-text" role="tabpanel" aria-labelledby="text-tab">
+      <dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
        <div class="flex flex-col w-full">
          <!-- prettier-ignore -->
          <dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
@ -59,11 +55,8 @@
      </dl>
    </div>

-    <div
-      class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
-      id="interpretation"
-      role="tabpanel"
-      aria-labelledby="interpretation-tab">
+    <!-- prettier-ignore -->
+    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="interpretation" role="tabpanel" aria-labelledby="interpretation-tab">
      <!-- prettier-ignore -->
      <form
      {% if sub_collection %}
--- a/app/templates/book/section_view.html
+++ b/app/templates/book/section_view.html
@ -20,9 +20,8 @@
 {% endblock %}

 {% block content %}
-{% include 'book/breadcrumbs_navigation.html'%}
 <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
-<div class="fixed z-30 w-full md:w-4/5 top-28 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+<div class="fixed z-30 w-full top-32 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
  <h1 class="text-l font-extrabold dark:text-white ml-4">Sections page</h1>
  <div class="mb-1">
    <!-- prettier-ignore -->
@ -45,7 +44,7 @@
    </ul>
  </div>
 </div>
-  <div id="myTabContent" class="mt-36">
+  <div id="myTabContent" class="mt-20">
    <!-- prettier-ignore -->
    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
      <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
--- a/app/templates/book/sub_collection_view.html
+++ b/app/templates/book/sub_collection_view.html
@ -20,10 +20,9 @@
 {% endblock %}

 {% block content %}
-{% include 'book/breadcrumbs_navigation.html'%}
 <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
  <!-- prettier-ignore -->
-  <div class="fixed z-30 w-full md:w-4/5 top-28 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <div class="fixed z-30 w-full top-32 pt-6 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
    <!-- prettier-ignore -->
    <h1 class="text-l font-extrabold dark:text-white ml-4"> Sub collections page </h1>
    <div class="mb-1">
@ -47,7 +46,7 @@
    </div>
  </div>

-  <div id="myTabContent" class="mt-40">
+  <div id="myTabContent" class="mt-20">
    <!-- prettier-ignore -->
    <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
      <!-- prettier-ignore -->
--- a/app/templates/header.html
+++ b/app/templates/header.html
@ -1,5 +1,6 @@
 <nav
  class="fixed top-0 z-[55] w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+  <div>  
  <div class="px-3 py-3 lg:px-5 lg:pl-3">
    <div class="flex items-center justify-between">
      <div class="flex w-full items-center justify-between">
@ -25,11 +26,15 @@
          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path> </svg>
        </button>

-         <!-- prettier-ignore -->
-         {% if not current_user.is_authenticated %}
-          <button id="connectWalletBtn" type="button" class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center">Connect wallet</button>
-          {% endif %}
-        {% if current_user.is_authenticated %}
+        <!-- prettier-ignore -->
+        {% if not current_user.is_authenticated %}
+        <button
+          id="connectWalletBtn"
+          type="button"
+          class="text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center">
+          Connect wallet
+        </button>
+        {% endif %} {% if current_user.is_authenticated %}
        <div class="md:flex hidden">
          <div class="items-center md:ml-3 hidden md:flex">
            <!-- prettier-ignore -->
@ -75,10 +80,10 @@
  </div>

  {% if current_user.is_authenticated %}
-    <!-- Dropdown menu -->
-    <!--Those notification for now with dummy data-->
-    <!-- prettier-ignore -->
-    <div id="dropdownNotification" class="shadow-md z-20 hidden w-screen bg-white divide-y divide-gray-100 rounded-lg dark:bg-gray-800 dark:divide-gray-700 border border-gray-600 dark:shadow-gray-600 md:w-1/2" aria-labelledby="dropdownNotificationButton">
+  <!-- Dropdown menu -->
+  <!--Those notification for now with dummy data-->
+  <!-- prettier-ignore -->
+  <div id="dropdownNotification" class="shadow-md z-20 hidden w-screen bg-white divide-y divide-gray-100 rounded-lg dark:bg-gray-800 dark:divide-gray-700 border border-gray-600 dark:shadow-gray-600 md:w-1/2" aria-labelledby="dropdownNotificationButton">
      <div class="block px-4 py-2 font-medium text-center text-gray-700 rounded-t-lg bg-gray-50 dark:bg-gray-800 dark:text-white"> Notifications </div>
      <div class="divide-y divide-gray-100 dark:divide-gray-700">
        <a href="#" class="flex px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
@ -108,4 +113,36 @@
      </a>
    </div>
  {% endif %}
+</div>
+  <!-- Second top navbar -->
+  <div
+    class="px-3 py-3 lg:px-5 lg:pl-3 border-t border-gray-200 dark:border-gray-700">
+    <div class="flex items-center justify-between">
+      <div class="flex w-full items-center justify-between">
+        <ul class="flex font-medium items-center">
+          <li class="mx-2">
+            <a
+              href="#"
+              class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+              <span>My Library</span>
+            </a>
+          </li>
+          <li class="my-auto">
+            <a
+              href="#"
+              class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+              <span>My Contributions</span>
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
+              <span>Favorite Books</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
 </nav>
--- a/app/templates/home/index.html
+++ b/app/templates/home/index.html
@ -3,7 +3,7 @@
 {% block content %}
 <div class="border-b border-gray-200 dark:border-gray-700 md:mr-64">
  <!-- prettier-ignore -->
-  <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
+  <ul class="flex md:flex-wrap -mb-px text-xs md:text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
    <li class="mr-2 w-full md:w-auto" role="presentation">
      <!-- prettier-ignore -->
      <button class="inline-flex p-4 border-b-2 rounded-t-lg" id="last-sections-tab" data-tabs-target="#last-sections" type="button" role="tab" aria-controls="last-sections" aria-selected="false"> <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 mr-3"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> </svg>
--- a/app/views/main.py
+++ b/app/views/main.py
@ -1,4 +1,4 @@
-from flask import render_template, Blueprint
+from flask import redirect, url_for, Blueprint


 main_blueprint = Blueprint("main", __name__)
@ -6,4 +6,4 @@ main_blueprint = Blueprint("main", __name__)

@main_blueprint.route("/")
 def index():
-    return render_template("index.html")
+    return redirect(url_for("home.get_all"))