octospacc
/
TelegramIndex-Fork
mirror of https://gitlab.com/octospacc/TelegramIndex-Fork.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Dark mode, UI improvement beta

This commit is contained in:
RedoX 2021-06-22 05:30:57 +00:00
parent d6694b74e5
commit 96f5b05e83
6 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/footer.html
View File

@ -5,7 +5,7 @@
</div> </div>
</footer> </footer>
<script> <script>
function toggleColorMode() { function toggleTheme() {
element = document.documentElement; element = document.documentElement;
if (element.className == "light") { if (element.className == "light") {
element.className = "dark"; element.className = "dark";

13
app/templates/header.html
View File

@ -38,10 +38,17 @@
<body class="dark:bg-black dark:text-white"> <body class="dark:bg-black dark:text-white">
<header class="bg-blue-300 dark:bg-red-700 text-white mb-2 p-4 w-full shadow"> <header class="bg-blue-300 dark:bg-red-500 text-white mb-2 p-4 w-full shadow">
<div class="mx-auto flex justify-between content-center max-w-screen-xl"> <div class="flex mx-auto justify-between content-center max-w-screen-xl">
<a href="/" id="title-a" class="text-left text-xl lg:text-2xl xl:text-3xl"> Telegram index </a> <a href="/" id="title-a" class="text-left text-xl lg:text-2xl xl:text-3xl"> Telegram index </a>
{% if authenticated %} <a href="/logout" class="text-right"> Logout </a> {% else %} {% endif %} <div class="flex flex-row space-x-2 p-2 rounded">
<button onclick="toggleTheme()">
<img src="https://s3.imgcdn.dev/nW9YV.png" class="rounded-full bg-white shadow hover:shadow-lg h-8" alt="Theme">
</button>
{% if authenticated %} <a href="/logout">
<img src="https://s3.imgcdn.dev/ndsjh.png" class="rounded-full bg-white shadow hover:shadow-lg h-8" alt="Logout">
</a> {% else %} {% endif %}
</div>
</div> </div>
</header> </header>

5
app/templates/home.html
View File

@ -5,11 +5,10 @@
</h1> </h1>
<div class="mx-auto my-1 p-1 w-full"> <div class="mx-auto my-1 p-1 w-full">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 place-items-stretch text-center break-words"> <div class="p-2 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 place-items-stretch text-center break-words">
{% for chat in chats %} {% for chat in chats %}
<a title="{{chat.name}}" href="/{{chat.page_id}}" <a title="{{chat.name}}" href="/{{chat.page_id}}"
class="p-2 rounded shadow hover:shadow-md hover:border hover:border-blue-300 hover:bg-blue-100 dark:bg-red-700 dark:hover:bg-red-500"> class="p-2 rounded shadow hover:shadow-md hover:border hover:border-blue-300 hover:bg-blue-100 dark:bg-red-500 dark:hover:bg-red-700">
<img id="chatimg" src="/{{chat.page_id}}/logo?big=1" onerror="chatImgAlt()" class="w-full rounded-full"> <img id="chatimg" src="/{{chat.page_id}}/logo?big=1" onerror="chatImgAlt()" class="w-full rounded-full">
<div class="p-2 rounded">{{chat.name}}</div> <div class="p-2 rounded">{{chat.name}}</div>

BIN
app/templates/icons/logout.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
app/templates/icons/sun.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

8
app/templates/index.html
View File

@ -19,8 +19,8 @@
<form class=""> <form class="">
<div class="p-0"> <div class="p-0">
<div class=" flex items-center rounded-full shadow"> <div class="bg-white flex items-center rounded-full shadow">
<input class=" rounded-l-full w-full py-1 px-6 text-gray-700 leading-tight focus:outline-none" <input class="rounded-l-full w-full py-1 px-6 text-gray-700 dark:text-black leading-tight focus:outline-none"
name="search" id="search" value="{% if search %}{{search}}{% endif %}" type="text" name="search" id="search" value="{% if search %}{{search}}{% endif %}" type="text"
placeholder="Search"> placeholder="Search">
<div class="p-1"> <div class="p-1">
@ -44,13 +44,13 @@
{% if item_list %} {% if item_list %}
<div class="mx-auto my-2 w-full px-4 "> <div class="mx-auto my-2 w-full px-4 ">
<div class="block md:flex md:flex-wrap md:justify-center text-center break-all "> <div class="block md:flex md:flex-wrap md:justify-center text-center break-all ">
{% for item in item_list %} {% for item in item_list %}
<!-- Card --> <!-- Card -->
<div title="{% if item.media %} {{item.mime_type}} | {{item.human_size}} {% else %} Text message {% endif %}" <div title="{% if item.media %} {{item.mime_type}} | {{item.human_size}} {% else %} Text message {% endif %}"
href="{{item.url}}" href="{{item.url}}"
class="text-sm flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow hover:shadow-md border-solid "> class="text-sm flex flex-col items-center justify-center w-full min-h-full md:w-1/5 lg:w-1/6 rounded my-4 md:mx-1 shadow hover:shadow-md border-solid dark:bg-red-500">
{% if item.media %} {% if item.media %}