beenull/runtipi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve layout for mobile devices

Browse source
This commit is contained in:
Nicolas Meienberger 2022-06-10 05:54:35 +00:00
parent ca43193eec
commit 6dc067e13b
5 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -2,8 +2,8 @@
[![License](https://img.shields.io/github/license/meienberger/runtipi)](https://github.com/meienberger/runtipi/blob/master/LICENSE)
[![Version](https://img.shields.io/github/v/release/meienberger/runtipi?color=%235351FB&label=version)](https://github.com/meienberger/runtipi/releases)
![Issues](https://img.shields.io/github/issues/meienberger/runtipi)
[![Docker Pulls](https://badgen.net/docker/pulls/meienberger/tipi-dashboard?icon=docker&label=pulls)](https://hub.docker.com/r/meienberger/tipi-dashboard/)
[![Docker Image Size](https://badgen.net/docker/size/meienberger/tipi-dashboard?icon=docker&label=image%20size)](https://hub.docker.com/r/meienberger/tipi-dashboard/)
[![Docker Pulls](https://badgen.net/docker/pulls/meienberger/runtipi?icon=docker&label=pulls)](https://hub.docker.com/r/meienberger/tipi-dashboard/)
[![Docker Image Size](https://badgen.net/docker/size/meienberger/runtipi?icon=docker&label=image%20size)](https://hub.docker.com/r/meienberger/tipi-dashboard/)
![Build](https://github.com/meienberger/runtipi/workflows/Tipi%20CI/badge.svg)
#### Join the discussion
[![Discord](https://img.shields.io/discord/976934649643294750?label=discord&logo=discord)](https://discord.gg/Bu9qEPnHsc)

4
packages/dashboard/src/components/AppTile/index.tsx
View file

@ -13,11 +13,11 @@ const AppTile: React.FC<{ app: AppConfig }> = ({ app }) => {
return (
<Link href={`/apps/${app.id}`} passHref>
<SlideFade in className="flex flex-1" offsetY="20px">
<Box minWidth={400} bg={bg} className="flex flex-1 border-2 drop-shadow-sm rounded-lg p-3 items-center cursor-pointer group hover:drop-shadow-md transition-all">
<Box bg={bg} className="flex flex-1 border-2 drop-shadow-sm rounded-lg p-3 items-center cursor-pointer group hover:drop-shadow-md transition-all">
<AppLogo alt={`${app.name} logo`} className="drop-shadow mr-3 group-hover:scale-105 transition-all" src={app.image} size={100} />
<div className="mr-3 flex-1">
<h3 className="font-bold text-xl">{app.name}</h3>
<span>{limitText(app.short_desc, 100)}</span>
<span>{limitText(app.short_desc, 50)}</span>
{app.installed && (
<div className="flex mt-1">
<AppStatus status={app.status} />

14
packages/dashboard/src/modules/Apps/components/AppActions.tsx
View file

@ -19,16 +19,16 @@ const AppActions: React.FC<IProps> = ({ app, onInstall, onUninstall, onStart, on
if (app?.installed && app.status === AppStatusEnum.STOPPED) {
return (
<div className="flex flex-wrap justify-center">
<Button onClick={onStart} width={160} colorScheme="green" className="mt-3 mr-2">
<Button onClick={onStart} width={150} colorScheme="green" className="mt-3 mr-2">
Start
<FiPlay className="ml-1" />
</Button>
<Button onClick={onUninstall} width={160} colorScheme="gray" className="mt-3 mr-2">
<Button onClick={onUninstall} width={150} colorScheme="gray" className="mt-3 mr-2">
Remove
<FiTrash2 className="ml-1" />
</Button>
{hasSettings && (
<Button onClick={onUpdate} width={160} colorScheme="gray" className="mt-3 mr-2">
<Button onClick={onUpdate} width={150} colorScheme="gray" className="mt-3 mr-2">
Settings
<FiSettings className="ml-1" />
</Button>
@ -38,11 +38,11 @@ const AppActions: React.FC<IProps> = ({ app, onInstall, onUninstall, onStart, on
} else if (app?.installed && app.status === AppStatusEnum.RUNNING) {
return (
<div>
<Button onClick={onOpen} width={160} colorScheme="gray" className="mt-3 mr-2">
<Button onClick={onOpen} width={150} colorScheme="gray" className="mt-3 mr-2">
Open
<FiExternalLink className="ml-1" />
</Button>
<Button onClick={onStop} width={160} colorScheme="red" className="mt-3">
<Button onClick={onStop} width={150} colorScheme="red" className="mt-3">
Stop
<FiPause className="ml-2" />
</Button>
@ -50,12 +50,12 @@ const AppActions: React.FC<IProps> = ({ app, onInstall, onUninstall, onStart, on
);
} else if (app.status === AppStatusEnum.INSTALLING || app.status === AppStatusEnum.UNINSTALLING || app.status === AppStatusEnum.STARTING || app.status === AppStatusEnum.STOPPING) {
return (
<div className="flex items-center flex-col md:flex-row">
<div className="flex items-center sm:items-start flex-col md:flex-row">
<Button isLoading onClick={() => null} width={160} colorScheme="green" className="mt-3">
Install
<FiPlay className="ml-1" />
</Button>
<span className="text-gray-500 text-sm ml-2 mt-3">{`App is ${app.status} please wait and don't refresh page...`}</span>
<span className="text-gray-500 text-sm ml-2 mt-3 self-center text-center sm:text-left">{`App is ${app.status} please wait and don't refresh page...`}</span>
</div>
);
}

2
packages/dashboard/src/modules/Apps/containers/AppDetails.tsx
View file

@ -114,7 +114,7 @@ const AppDetails: React.FC<IProps> = ({ app }) => {
)}
<p className="text-xs text-gray-600">By {app?.author}</p>
</div>
<div className="flex justify-center sm:absolute md:static top-0 right-5 self-center sm:self-auto">
<div className="flex justify-center xs:absolute md:static top-0 right-5 self-center sm:self-auto">
<AppActions
onUpdate={updateDisclosure.onOpen}
onOpen={handleOpen}

2
packages/dashboard/src/pages/apps/index.tsx
View file

@ -28,7 +28,7 @@ const Apps: NextPage = () => {
<h2>Visit the App Store to install your first app</h2>
</div>
)}
<SimpleGrid minChildWidth="375px" spacing="20px">
<SimpleGrid minChildWidth="340px" spacing="20px">
{installed.map((app) => (
<AppTile key={app.name} app={app} />
))}