Merge branch 'develop' into kostia/feature/sidebar-topbar

This commit is contained in:
Kostiantyn Stoliarskyi 2023-05-10 15:04:19 +03:00
commit 1336bbc460
7 changed files with 206 additions and 91 deletions

View File

@ -1113,30 +1113,14 @@ input:checked + .toggle-bg {
top: 2.5rem;
}
.top-28 {
top: 7rem;
}
.top-3 {
top: 0.75rem;
}
.top-\[100\] {
top: 100;
}
.top-32 {
top: 8rem;
}
.top-\[30\] {
top: 30;
}
.top-20 {
top: 5rem;
}
.top-44 {
top: 11rem;
}
@ -1169,6 +1153,10 @@ input:checked + .toggle-bg {
z-index: 50;
}
.z-\[55\] {
z-index: 55;
}
.col-span-6 {
grid-column: span 6 / span 6;
}
@ -1205,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;
@ -1225,11 +1218,6 @@ input:checked + .toggle-bg {
margin-bottom: auto;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.-mb-px {
margin-bottom: -1px;
}
@ -1322,10 +1310,6 @@ input:checked + .toggle-bg {
margin-top: 0.375rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
@ -1366,22 +1350,6 @@ input:checked + .toggle-bg {
margin-top: auto;
}
.mt-32 {
margin-top: 8rem;
}
.mt-28 {
margin-top: 7rem;
}
.mt-\[40\] {
margin-top: 40;
}
.mt-64 {
margin-top: 16rem;
}
.block {
display: block;
}
@ -2051,6 +2019,11 @@ input:checked + .toggle-bg {
background-color: rgb(200 30 30 / var(--tw-bg-opacity));
}
.bg-slate-600 {
--tw-bg-opacity: 1;
background-color: rgb(71 85 105 / var(--tw-bg-opacity));
}
.bg-teal-700 {
--tw-bg-opacity: 1;
background-color: rgb(3 102 114 / var(--tw-bg-opacity));
@ -2230,10 +2203,6 @@ input:checked + .toggle-bg {
padding-top: 1.5rem;
}
.pt-80 {
padding-top: 20rem;
}
.text-left {
text-align: left;
}
@ -2242,10 +2211,6 @@ input:checked + .toggle-bg {
text-align: center;
}
.align-middle {
vertical-align: middle;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
@ -2964,10 +2929,6 @@ input:checked + .toggle-bg {
margin-left: 0.75rem;
}
.md\:ml-64 {
margin-left: 16rem;
}
.md\:ml-auto {
margin-left: auto;
}

File diff suppressed because one or more lines are too long

View File

@ -15,7 +15,6 @@
<link href="{{ url_for('static', filename='css/styles.css') }}" rel="stylesheet" />
<!-- prettier-ignore -->
<link href="{{ url_for('static', filename='css/quill.snow.css') }}" rel="stylesheet" />
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (

View File

@ -38,7 +38,7 @@
{{ form_hidden_tag() }}
<div class="relative z-0 w-full mb-6 group">
<!-- prettier-ignore -->
<input autocomplete="off" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<input autocomplete="off" maxlength="256" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<!-- prettier-ignore -->
<label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6" >Comment</label >
</div>
@ -106,8 +106,21 @@
</div>
<div class="p-5 m-3">
{% for child in comment.children %}<div class="p-1 mb-2">
- {{child.text}}<span> - <span class="text-blue-500">{{child.user.username}}</span> {{child.created_at.strftime('%B %d, %Y')}}</span>
{% for child in comment.children %}<div class="p-5 mb-2 flex justify-between items-end bg-slate-600 rounded-lg"><div>
<div class="inline-block mb-4">- {{child.text}}</div><span><div>by <span class="text-blue-500">{{child.user.username}}</span> {{child.created_at.strftime('%B %d, %Y')}}</div></span></div>
{% if child.user_id == current_user.id %}
<div class="relative ml-2">
<button id="delete_comment_btn" data-popover-target="popover-delete" data-comment-id="{{child.id}}" type="button" data-modal-target="delete_comment_modal" data-modal-toggle="delete_comment_modal" class="space-x-0.5 flex items-center">
<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>
</button>
<div data-popover id="popover-delete" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2">
<p>Delete this comment</p>
</div>
<div data-popper-arrow></div>
</div>
</div>
{% endif %}
</div>
{% endfor %}
</div>
@ -123,7 +136,7 @@
<input type="hidden" name="parent_id" id="parent_id" value="{{comment.id}}" />
<div class="relative z-0 w-full mb-6 group">
<!-- prettier-ignore -->
<input autocomplete="off" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<input autocomplete="off" maxlength="256" type="text" name="text" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer" placeholder=" " required />
<!-- prettier-ignore -->
<label for="floating_email" class="peer-focus:font-medium absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6" >Comment</label >
</div>

View File

@ -1,5 +1,5 @@
<nav
class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
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">
@ -28,9 +28,13 @@
<!-- 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 %}
<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 -->
@ -111,22 +115,29 @@
{% 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="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">
<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">
<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">
<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>

View File

@ -4,6 +4,7 @@ import {initWallet} from './wallet';
import {initQuill} from './initQuill';
import {initQuillValueToInput} from './quillValueToInput';
import {initComments} from './comment';
import {initTheme} from './theme';
initBooks();
initContributors();
@ -11,3 +12,4 @@ initQuill();
initQuillValueToInput();
initWallet();
initComments();
initTheme();

60
src/theme.ts Normal file
View File

@ -0,0 +1,60 @@
export function initTheme() {
//# sourceMappingURL=flowbite.min.js.map
var themeToggleDarkIcons = document.querySelectorAll(
'#theme-toggle-dark-icon',
);
var themeToggleLightIcons = document.querySelectorAll(
'#theme-toggle-light-icon',
);
// Change the icons inside the button based on previous settings
if (
localStorage.getItem('color-theme') === 'dark' ||
(!('color-theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
themeToggleLightIcons.forEach(function (el) {
el.classList.remove('hidden');
});
} else {
themeToggleDarkIcons.forEach(function (el) {
el.classList.remove('hidden');
});
}
var themeToggleBtns = document.querySelectorAll('#theme-toggle');
themeToggleBtns.forEach(function (themeToggleBtn) {
themeToggleBtn.addEventListener('click', function () {
// toggle icons inside button
themeToggleDarkIcons.forEach(function (themeToggleDarkIcon) {
themeToggleDarkIcon.classList.toggle('hidden');
});
themeToggleLightIcons.forEach(function (themeToggleLightIcon) {
themeToggleLightIcon.classList.toggle('hidden');
});
// if set via local storage previously
if (localStorage.getItem('color-theme')) {
if (localStorage.getItem('color-theme') === 'light') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
}
// if NOT set via local storage previously
} else {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');
}
}
});
});
}