make breadcrumbs and section header fixed

This commit is contained in:
Kostiantyn Stoliarskyi 2023-05-08 11:24:26 +03:00
parent 2002e68643
commit 9e00300eb0
9 changed files with 47 additions and 41 deletions

View File

@ -10,7 +10,6 @@
font-size: 13px; font-size: 13px;
/* height: 100%; */ /* height: 100%; */
margin: 0px; margin: 0px;
position: relative;
} }
.ql-container.ql-disabled .ql-tooltip { .ql-container.ql-disabled .ql-tooltip {
visibility: hidden; visibility: hidden;
@ -563,7 +562,6 @@
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 24px; height: 24px;
position: relative;
vertical-align: middle; vertical-align: middle;
} }
.ql-snow .ql-picker-label { .ql-snow .ql-picker-label {
@ -572,7 +570,6 @@
height: 100%; height: 100%;
padding-left: 8px; padding-left: 8px;
padding-right: 2px; padding-right: 2px;
position: relative;
width: 100%; width: 100%;
} }
.ql-snow .ql-picker-label::before { .ql-snow .ql-picker-label::before {

File diff suppressed because one or more lines are too long

View File

@ -86,7 +86,7 @@
<!-- prettier-ignore --> <!-- prettier-ignore -->
<script src="{{ url_for('static', filename='js/flowbite.min.js') }}" defer></script> <script src="{{ url_for('static', filename='js/flowbite.min.js') }}" defer></script>
<div class="p-0 mt-16 h-full md:ml-64"> <div class="p-0 mt-16 h-auto md:ml-64">
<!-- Main Content --> <!-- Main Content -->
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>

View File

@ -1,5 +1,5 @@
<!-- prettier-ignore --> <!-- prettier-ignore -->
<nav class="flex mt-5 mb-3" aria-label="Breadcrumb"> <nav class="fixed flex p-4 pl-1 mt-1.5 z-49 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"> <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 %} {% for breadcrumb in breadcrumbs %}
<li class="inline-flex items-center"> <li class="inline-flex items-center">

View File

@ -17,12 +17,13 @@
{% block content %} {% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64"> <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
<h1 class="font-extrabold text-lg dark:text-white ml-4 mt-10">
{{book.label}}
</h1>
<!-- prettier-ignore --> <!-- prettier-ignore -->
<div class="mb-1 border-b border-gray-200 dark:border-gray-700"> <div class="fixed z-49 w-4/5 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<!-- prettier-ignore -->
<h1 class="font-extrabold text-lg dark:text-white ml-4 mt-5"> {{book.label}} </h1>
<!-- prettier-ignore -->
<div class="mb-1">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist"> <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
<li class="mr-2" role="presentation"> <li class="mr-2" role="presentation">
<button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false"> <button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
@ -37,8 +38,9 @@
</button> </button>
</li> </li>
</ul> </ul>
</div> </div>
<div id="myTabContent"> </div>
<div id="myTabContent" class="overflow-y-auto mt-24">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab"> <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"> <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">

View File

@ -13,13 +13,14 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64"> {% include 'book/breadcrumbs_navigation.html'%}
{% include 'book/breadcrumbs_navigation.html'%} <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
<h1 class="text-l font-extrabold dark:text-white ml-4">
Interpretations page
</h1>
<!-- prettier-ignore --> <!-- prettier-ignore -->
<div class="mb-1 border-b border-gray-200 dark:border-gray-700"> <div class="fixed z-45 w-full md:w-4/5 top-28 pt-3 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 -->
<div class="mb-1 border-b border-gray-200 dark:border-gray-700">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist"> <ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
<li class="mr-2" role="presentation"> <li class="mr-2" role="presentation">
<!-- prettier-ignore --> <!-- prettier-ignore -->
@ -36,7 +37,8 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="myTabContent"> </div>
<div id="myTabContent" class="mt-40">
<div <div
class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
id="section-text" id="section-text"
@ -69,7 +71,7 @@
{% else %} {% else %}
action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}" action="{{ url_for('book.interpretation_create', book_id=book.id, collection_id=collection.id,section_id=section.id) }}"
{% endif %} {% endif %}
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700"> method="post" class="bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }} {{ form_hidden_tag() }}
<input type="hidden" name="section_id" id="section_id" value="{{section.id}}" /> <input type="hidden" name="section_id" id="section_id" value="{{section.id}}" />
<input type="hidden" name="label" id="label" value="{{section.label}}" /> <input type="hidden" name="label" id="label" value="{{section.label}}" />

View File

@ -15,11 +15,14 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64"> {% include 'book/breadcrumbs_navigation.html'%}
{% include 'book/breadcrumbs_navigation.html'%} <div class="overflow-x-auto shadow-md mt-5 md:mr-64">
<h1 class="text-l font-extrabold dark:text-white ml-4"> <div class="ql-snow mt-20">
{{ interpretation.label }} <h1 class="text-l font-extrabold dark:text-white ml-4">
</h1> {{ interpretation.label }}
</h1>
<div class="quill-editor dark:text-white">{{interpretation.text|safe}}</div>
</div>
</div> </div>
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% endblock %} {% endblock %}

View File

@ -20,10 +20,11 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64"> {% include 'book/breadcrumbs_navigation.html'%}
{% include 'book/breadcrumbs_navigation.html'%} <div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
<div class="fixed z-45 w-full md:w-4/5 top-28 pt-3 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> <h1 class="text-l font-extrabold dark:text-white ml-4">Sections page</h1>
<div class="mb-1 border-b border-gray-200 dark:border-gray-700"> <div class="mb-1">
<!-- prettier-ignore --> <!-- 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 flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
<li class="mr-2" role="presentation"> <li class="mr-2" role="presentation">
@ -43,8 +44,8 @@
</li> </li>
</ul> </ul>
</div> </div>
</div>
<div id="myTabContent"> <div id="myTabContent" class="mt-36">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab"> <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"> <dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">

View File

@ -20,15 +20,15 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64"> {% include 'book/breadcrumbs_navigation.html'%}
{% include 'book/breadcrumbs_navigation.html'%} <div class="overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
<h1 class="text-l font-extrabold dark:text-white ml-4"> <!-- prettier-ignore -->
Sub collections page <div class="fixed z-45 w-full md:w-4/5 top-28 pt-3 bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
</h1>
<div class="mb-1 border-b border-gray-200 dark:border-gray-700">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist"> <h1 class="text-l font-extrabold dark:text-white ml-4"> Sub collections page </h1>
<div class="mb-1">
<!-- prettier-ignore -->
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
<li class="mr-2" role="presentation"> <li class="mr-2" role="presentation">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false"> <button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
@ -44,9 +44,10 @@
</button> </button>
</li> </li>
</ul> </ul>
</div>
</div> </div>
<div id="myTabContent"> <div id="myTabContent" class="mt-40">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab"> <div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
<!-- prettier-ignore --> <!-- prettier-ignore -->