idanoo/autobrr
1
0
Fork 0
mirror of https://github.com/idanoo/autobrr synced 2025-07-23 16:59:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): make log files section responsive (#836)

Browse source 
* adapted Logs page in settings to be responsive
minor layout changes

* show headers on narrow screens

* adapted padding on Logs page

---------

Co-authored-by: soup <soup@r4tio.dev>
This commit is contained in:
martylukyy 2023-04-14 21:20:03 +02:00 • committed by GitHub
parent 969a9e7025
commit be999d88b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

31
web/src/screens/Logs.tsx
View file

@ -147,7 +147,7 @@ export const Logs = () => {
</div> </div>
<div className="max-w-screen-xl mx-auto pb-10 px-2 sm:px-4 lg:px-8"> <div className="max-w-screen-xl mx-auto pb-10 px-2 sm:px-4 lg:px-8">
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-2 sm:px-4 pt-3 sm:pt-4"> <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg px-4 sm:px-6 pt-3 sm:pt-4">
<LogFiles /> <LogFiles />
</div> </div>
</div> </div>
@ -179,16 +179,16 @@ export const LogFiles = () => {
{data && data.files.length > 0 ? ( {data && data.files.length > 0 ? (
<section className="py-3 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md"> <section className="py-3 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
<ol className="min-w-full relative"> <ol className="min-w-full relative">
<li className="hidden sm:grid grid-cols-12 gap-4 mb-2 border-b border-gray-200 dark:border-gray-700"> <li className="grid grid-cols-12 mb-2 border-b border-gray-200 dark:border-gray-700">
<div className="col-span-5 px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> <div className="hidden sm:block col-span-5 px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Name Name
</div> </div>
<div className="col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"> <div className="col-span-8 sm:col-span-4 px-1 sm:px-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Size
</div>
<div className="col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Last modified Last modified
</div> </div>
<div className="col-span-3 sm:col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
Size
</div>
</li> </li>
{data && data.files.map((f, idx) => <LogFilesItem key={idx} file={f} />)} {data && data.files.map((f, idx) => <LogFilesItem key={idx} file={f} />)}
@ -260,20 +260,19 @@ const LogFilesItem = ({ file }: LogFilesItemProps) => {
return ( return (
<li className="text-gray-500 dark:text-gray-400"> <li className="text-gray-500 dark:text-gray-400">
<div className="sm:grid grid-cols-12 gap-4 items-center py-2"> <div className="grid grid-cols-12 items-center py-2">
<div className="col-span-5 px-2 py-2 sm:py-0 truncate block sm:text-sm text-md font-medium text-gray-900 dark:text-gray-200"> <div className="col-span-4 sm:col-span-5 px-2 py-0 truncate hidden sm:block sm:text-sm text-md font-medium text-gray-900 dark:text-gray-200">
<div className="flex justify-between"> <div className="block truncate justify-between">
{file.filename} {file.filename}
</div> </div>
</div> </div>
<div className="col-span-2 flex items-center text-sm font-medium text-gray-900 dark:text-gray-200"> <div className="col-span-8 sm:col-span-4 block truncate px-1 sm:px-2 items-center text-sm font-medium text-gray-900 dark:text-gray-200" title={file.updated_at}>
{file.size}
</div>
<div className="col-span-4 flex items-center text-sm font-medium text-gray-900 dark:text-gray-200" title={file.updated_at}>
{simplifyDate(file.updated_at)} {simplifyDate(file.updated_at)}
</div> </div>
<div className="col-span-1 hidden sm:flex items-center justify-center text-sm font-medium text-gray-900 dark:text-white"> <div className="col-span-3 sm:col-span-2 flex items-center text-sm font-small sm:font-medium text-gray-900 dark:text-gray-200">
{file.size}
</div>
<div className="col-span-1 sm:col-span-1 pl-0 flex items-center justify-center text-sm font-medium text-gray-900 dark:text-white">
<div className="logFilesItem"> <div className="logFilesItem">
<button <button
className={classNames( className={classNames(