ui tweeks

app/templates/footer.html

@@ -1,5 +1,5 @@
             <footer class="text-center text-black w-full my-4 py-4 bg-gray-300 xl:text-xl">
-                <a href="https://github.com/odysseusmax" target="_blank"> @odysseusmax </a>
+                <a href="https://github.com/odysseusmax/tg-index" target="_blank"> @odysseusmax </a>
             </footer>
             
         </div>

app/templates/index.html

@@ -2,48 +2,50 @@
             
             <div class="block md:flex justify-between items-center px-4 text-center">
                 <div class="my-2 block md:flex items-center justify-center md:justify-start text-2xl md:text-right font-bold text-blue-500">
-                    <img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black" src="{{logo}}">
+                    <img class="mx-auto md:ml-0 md:mr-1 my-2 w-16 h-16 rounded-full bg-black outline-none" src="{{logo}}">
                     <h1> {{name}} </h1>
                 </div>
                 
                 <div class="my-2">
                     <form class="">
-                        <input class="border rounded p-2 border-indigo-500 placeholder-indigo-500 text-indigo-500" type="text" name="search" value="{% if search %}{{search}}{% endif %}" placeholder="search...">    
+                        <input class="border rounded-full px-4 py-2 border-indigo-500 placeholder-indigo-500 text-indigo-500" type="text" name="search" value="{% if search %}{{search}}{% endif %}" placeholder="search...">
-                        <button class="border rounded p-2 border-indigo-500 bg-indigo-500 text-white hover:text-indigo-500 hover:bg-white" type="submit">Search</button>
                     </form>
                 </div>
                 
             </div>
 
-            <div class="mx-auto my-2 w-full overflow-x-auto px-4 text-xs">
+            <div class="mx-auto my-2 w-full px-4">
             
-                <table class="m-auto rounded text-left shadow-md w-full">
+                <table class="rounded text-left shadow-md w-full text-sm md:text-base">
+                    <thead>
                         <tr class="border-t border-b bg-gray-200 border-gray-300 my-2 p-4">
-                        <th class="my-2 p-2">FileId</th>
+                            <th class="my-2 p-2 hidden md:table-cell">Media</th> 
-                        <th class="my-2 p-2">Media</th> 
+                            <th class="my-2 p-2 hidden md:table-cell">Type</th>
-                        <th class="my-2 p-2">Type</th>
                             <th class="my-2 p-2">Description</th>
-                        <th class="my-2 p-2">Date</th>
+                            <th class="my-2 p-2 hidden md:table-cell">DateTime</th>
-                        <th class="my-2 p-2">Size</th>
+                            <th class="my-2 p-2 hidden md:table-cell">Size</th>
                         </tr>
+                    </thead>
+
+                    <tbody>
 
                         {% for item in item_list %}
-                        <tr class="border-t border-b border-gray-300 my-2 p-4 rounded hover:bg-blue-100">
+                            <tr class="border-t border-b border-gray-300 my-4 p-4 rounded hover:bg-blue-100">
-                            <th class="my-2 p-2">{{item.file_id}}</th>
+                                <td class="my-2 p-2 hidden md:table-cell">{{item.media}}</td> 
-                            <th class="my-2 p-2">{{item.media}}</th> 
+                                <td class="my-2 p-2 hidden md:table-cell">{{item.mime_type}}</td>
-                            <th class="my-2 p-2">{{item.mime_type}}</th>
+                                <td class="my-2 p-2 rounded hover:text-blue-600 break-all"><a title="{{item.insight}}" href="{{item.url}}">{{item.insight}}</a></td>
-                            <th class="my-2 p-2 rounded hover:text-blue-600"><a href="{{item.url}}">{{item.insight}}</a></th>
+                                <td class="my-2 p-2 hidden md:table-cell" name="date" data-date="{{item.date}}"></td>
-                            <th class="my-2 p-2">{{item.date}}</th>
+                                <td class="my-2 p-2 hidden md:table-cell">{{item.size}}</td>
-                            <th class="my-2 p-2">{{item.size}}</th>
                             </tr>
                         {% endfor %}
+                    </tbody>
                     
                 </table>
             
             </div>
 
             <p class="my-2 text-center font-semibold">
-                {{item_list|length}} results
+                {{item_list|length}} items
             </p>
             
             <div class="mx-auto my-2 text-center flex text-white content-center justify-center">
@@ -56,4 +58,13 @@
                 {% endif %}
             </div>
 
+            <script>
+                const date_elements = document.getElementsByName('date');
+                date_elements.forEach((item) => {
+                    let dataDate = item.getAttribute("data-date");
+                    let date = new Date(dataDate);
+                    item.innerHTML = date.toLocaleString()
+                });
+            </script>
+
 {% include 'footer.html' %}

app/templates/info.html

@@ -20,8 +20,21 @@
                             
                             {% if caption %}
                             
-                                <div class="flex justify-center mt-1 text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
+                                <div class="mx-auto mt-0">
-                                    <p class="text-left rounded p-4 bg-gray-900 w-auto inline-block shadow-lg"> {{ caption|safe }} </p>
+                                    <div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg">
+                                        <p class="text-left w-full rounded p-4 bg-gray-900 shadow-lg"> {{ caption|safe }} </p>
+                                    </div>
+                                    {% if reply_btns %}
+                                        <div class="w-full block">
+                                            {% for row in reply_btns %}
+                                                <div class="flex justify-center">
+                                                    {% for btn in row %}
+                                                        <a class="p-4 mx-2 my-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white" href="{{ btn.url }}" target="_blank"> {{btn.text}} </a>
+                                                    {% endfor %}
+                                                </div>
+                                            {% endfor %}
+                                        </div>
+                                    {% endif %}
                                 </div>
                             
                             {% endif %}
@@ -34,8 +47,21 @@
                         
                         </div>
                     {% else %}
-                        <div class="mx-auto flex justify-center w-full md:w-3/4 mt-1 text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
+                        <div class="mx-auto flex flex-wrap justify-center w-full md:w-3/4 mt-1">
-                            <p class="text-left rounded p-4 bg-gray-900 w-auto inline-block shadow-lg"> {{ text|safe }} </p>
+                            <div class="flex justify-center text-gray-300 font-mono text-xs lg:text-sm xl:text-lg break-all">
+                                <p class="text-left rounded p-4 bg-gray-900 w-full shadow-lg"> {{ text|safe }} </p>
+                            </div>
+                            {% if reply_btns %}
+                                <div class="w-full block">
+                                    {% for row in reply_btns %}
+                                        <div class="flex justify-center">
+                                            {% for btn in row %}
+                                                <a class="p-4  mx-2 my-1 flex-1 border rounded bg-white border-blue-500 text-center text-blue-500 hover:bg-blue-500 hover:text-white" href="{{ btn.url }}" target="_blank"> {{btn.text}} </a>
+                                            {% endfor %}
+                                        </div>
+                                    {% endfor %}
+                                </div>
+                            {% endif %}
                         </div>
                     {% endif %}
                     

app/views.py

@@ -73,7 +73,7 @@ class Views:
                     media=True,
                     mime_type=m.file.mime_type,
                     insight = get_file_name(m)[:55],
-                    date = m.date.isoformat(),
+                    date = m.date,
                     size=get_human_size(m.file.size),
                     url=req.rel_url.with_path(f"/{alias_id}/{m.id}/view")
                 )
@@ -83,7 +83,7 @@ class Views:
                     media=False,
                     mime_type='text/plain',
                     insight = m.raw_text[:55],
-                    date = m.date.isoformat(),
+                    date = m.date,
                     size=get_human_size(len(m.raw_text)),
                     url=req.rel_url.with_path(f"/{alias_id}/{m.id}/view")
                 )
@@ -132,6 +132,15 @@ class Views:
                 'reason' : "Entry you are looking for cannot be retrived!",
             }
         return_val = {}
+        reply_btns = []
+        if message.reply_markup:
+            if isinstance(message.reply_markup, types.ReplyInlineMarkup):
+                for button_row in message.reply_markup.rows:
+                    btns = []
+                    for button in button_row.buttons:
+                        if isinstance(button, types.KeyboardButtonUrl):
+                            btns.append({'url': button.url, 'text': button.text})
+                    reply_btns.append(btns)
         if message.file and not isinstance(message.media, types.MessageMediaWebPage):
             file_name = get_file_name(message)
             file_size = get_human_size(message.file.size)
@@ -159,7 +168,8 @@ class Views:
                 'size': file_size,
                 'media': media,
                 'caption': caption,
-                'title': f"Download | {file_name} | {file_size}" 
+                'title': f"Download | {file_name} | {file_size}",
+                'reply_btns': reply_btns
             }
         elif message.message:
             text = Markup.escape(message.raw_text).__str__().replace('\n', '<br>')
@@ -167,33 +177,18 @@ class Views:
                 'found': True,
                 'media': False,
                 'text': text,
+                'reply_btns': reply_btns
             }
         else:
             return_val = {
                 'found':False,
                 'reason' : "Some kind of entry that I cannot display",
             }
-        
+        #return_val.update({'reply_btns': reply_btns})
         log.debug(f"data for {file_id} in {chat_id} returned as {return_val}")
         return return_val
     
 
-    async def download_get(self, req):
-        return await self.handle_request(req)
-    
-    
-    async def download_head(self, req):
-        return await self.handle_request(req, head=True)
-    
-    
-    async def thumbnail_get(self, req):
-        return await self.handle_request(req, thumb=True)
-    
-
-    async def thumbnail_head(self, req):
-        return await self.handle_request(req, head=True, thumb=True)
-    
-    
     async def logo(self, req):
         alias_id = req.rel_url.path.split('/')[1]
         chat_id = chat_ids[alias_ids.index(alias_id)]
@@ -217,19 +212,35 @@ class Views:
         return r
 
     
+    async def download_get(self, req):
+        return await self.handle_request(req)
+    
+    
+    async def download_head(self, req):
+        return await self.handle_request(req, head=True)
+    
+    
+    async def thumbnail_get(self, req):
+        return await self.handle_request(req, thumb=True)
+    
+
+    async def thumbnail_head(self, req):
+        return await self.handle_request(req, head=True, thumb=True)
+
+
     async def handle_request(self, req, head=False, thumb=False):
         file_id = int(req.match_info["id"])
         alias_id = req.rel_url.path.split('/')[1]
         chat_id = chat_ids[alias_ids.index(alias_id)]
         message = await self.client.get_messages(entity=chat_id, ids=file_id)
         if not message or not message.file:
-            log.info(f"no result for {file_id} in {chat_id}")
+            log.debug(f"no result for {file_id} in {chat_id}")
             return web.Response(status=410, text="410: Gone. Access to the target resource is no longer available!")
         
         if thumb and message.document:
             thumbnail = message.document.thumbs
             if not thumbnail:
-                log.info(f"no thumbnail for {file_id} in {chat_id}")
+                log.debug(f"no thumbnail for {file_id} in {chat_id}")
                 return web.Response(status=404, text="404: Not Found")
             thumbnail = thumbnail[-1]
             mime_type = 'image/jpeg'
@@ -253,7 +264,6 @@ class Views:
             if (limit > size) or (offset < 0) or (limit < offset):
                 raise ValueError("range not in acceptable format")
         except ValueError:
-            log.info("Range Not Satisfiable", exc_info=True)
             return web.Response(
                 status=416,
                 text="416: Range Not Satisfiable",
@@ -262,10 +272,11 @@ class Views:
                 }
             )
         
-        body = None
         if not head:
             body = self.client.download(media, size, offset, limit)
-            log.info(f"Serving file {message.id} in {chat_id} ; Range: {offset} - {limit}")
+            log.info(f"Serving file in {message.id} (chat {chat_id}) ; Range: {offset} - {limit}")
+        else:
+            body = None
         
         headers = {
             "Content-Type": mime_type,