marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 22:19:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: make tool responsive

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-06-26 00:47:21 +01:00
parent 21c6b8bc1f
commit dccfe16435
6 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
.idea/workspace.xml generated
View File

@@ -4,13 +4,13 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: merging branches"> <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: make responsive">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/ToolBreadcrumb.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolBreadcrumb.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/number/generate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/generate/meta.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -198,14 +198,6 @@
<workItem from="1719339559458" duration="303000" /> <workItem from="1719339559458" duration="303000" />
<workItem from="1719340295244" duration="772000" /> <workItem from="1719340295244" duration="772000" />
</task> </task>
<task id="LOCAL-00012" summary="feat: text split">
<option name="closed" value="true" />
<created>1719003559965</created>
<option name="number" value="00012" />
<option name="presentableId" value="LOCAL-00012" />
<option name="project" value="LOCAL" />
<updated>1719003559965</updated>
</task>
<task id="LOCAL-00013" summary="fix: text split try catch"> <task id="LOCAL-00013" summary="fix: text split try catch">
<option name="closed" value="true" /> <option name="closed" value="true" />
<created>1719005757859</created> <created>1719005757859</created>
@@ -590,7 +582,15 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1719350066784</updated> <updated>1719350066784</updated>
</task> </task>
<option name="localTasksCounter" value="61" /> <task id="LOCAL-00061" summary="feat: make responsive">
<option name="closed" value="true" />
<created>1719358195260</created>
<option name="number" value="00061" />
<option name="presentableId" value="LOCAL-00061" />
<option name="project" value="LOCAL" />
<updated>1719358195260</updated>
</task>
<option name="localTasksCounter" value="62" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@@ -611,7 +611,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" /> <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" /> <option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" /> <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="test: join service" />
<MESSAGE value="feat: result copy and download" /> <MESSAGE value="feat: result copy and download" />
<MESSAGE value="feat: contributors graph" /> <MESSAGE value="feat: contributors graph" />
<MESSAGE value="feat: create tool script" /> <MESSAGE value="feat: create tool script" />
@@ -636,7 +635,8 @@
<MESSAGE value="fix: ToolFileInput.tsx" /> <MESSAGE value="fix: ToolFileInput.tsx" />
<MESSAGE value="fix: generate numbers" /> <MESSAGE value="fix: generate numbers" />
<MESSAGE value="fix: merging branches" /> <MESSAGE value="fix: merging branches" />
<option name="LAST_COMMIT_MESSAGE" value="fix: merging branches" /> <MESSAGE value="feat: make responsive" />
<option name="LAST_COMMIT_MESSAGE" value="feat: make responsive" />
</component> </component>
<component name="XSLT-Support.FileAssociations.UIState"> <component name="XSLT-Support.FileAssociations.UIState">
<expand /> <expand />

2
src/components/ToolBreadcrumb.tsx
View File

@@ -14,7 +14,7 @@ interface BreadcrumbComponentProps {
const ToolBreadcrumb: React.FC<BreadcrumbComponentProps> = ({ items }) => { const ToolBreadcrumb: React.FC<BreadcrumbComponentProps> = ({ items }) => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs>
{items.map((item, index) => { {items.map((item, index) => {
if (index === items.length - 1 || !item.link) { if (index === items.length - 1 || !item.link) {
return ( return (

46
src/components/ToolHeader.tsx
View File

@@ -2,6 +2,7 @@ import { Button, Box, Stack } from '@mui/material';
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import ToolBreadcrumb from './ToolBreadcrumb'; import ToolBreadcrumb from './ToolBreadcrumb';
import { capitalizeFirstLetter } from '../utils/string'; import { capitalizeFirstLetter } from '../utils/string';
import Grid from '@mui/material/Grid';
interface ToolHeaderProps { interface ToolHeaderProps {
title: string; title: string;
@@ -12,17 +13,23 @@ interface ToolHeaderProps {
function ToolLinks() { function ToolLinks() {
return ( return (
<Box display="flex" gap={2} my={2}> <Grid container spacing={2} mt={1}>
<Button variant="outlined" href="#tool"> <Grid item md={12} lg={4}>
Use This Tool <Button fullWidth variant="outlined" href="#tool">
</Button> Use This Tool
<Button variant="outlined" href="#examples"> </Button>
See Examples </Grid>
</Button> <Grid item md={12} lg={4}>
<Button variant="outlined" href="#tour"> <Button fullWidth variant="outlined" href="#examples">
Learn How to Use See Examples
</Button> </Button>
</Box> </Grid>
<Grid item md={12} lg={4}>
<Button fullWidth variant="outlined" href="#tour">
Learn How to Use
</Button>
</Grid>
</Grid>
); );
} }
@@ -44,16 +51,23 @@ export default function ToolHeader({
{ title } { title }
]} ]}
/> />
<Stack direction={'row'} alignItems={'center'} spacing={2}> <Grid mt={1} container spacing={2}>
<Box> <Grid item xs={12} md={8}>
<Typography mb={2} fontSize={30} color={'primary'}> <Typography mb={2} fontSize={30} color={'primary'}>
{title} {title}
</Typography> </Typography>
<Typography fontSize={20}>{description}</Typography> <Typography fontSize={20}>{description}</Typography>
<ToolLinks /> <ToolLinks />
</Box> </Grid>
{image && <img width={'250'} src={image} />}
</Stack> {image && (
<Grid item xs={12} md={4}>
<Box sx={{ display: 'flex', justifyContent: 'center' }}>
<img width={'250'} src={image} />
</Box>
</Grid>
)}
</Grid>
</Box> </Box>
); );
} }

4
src/components/ToolInputAndResult.tsx
View File

@@ -10,10 +10,10 @@ export default function ToolInputAndResult({
}) { }) {
return ( return (
<Grid id="tool" container spacing={2}> <Grid id="tool" container spacing={2}>
<Grid item xs={6}> <Grid item xs={12} md={6}>
{input} {input}
</Grid> </Grid>
<Grid item xs={6}> <Grid item xs={12} md={6}>
{result} {result}
</Grid> </Grid>
</Grid> </Grid>

2
src/components/allTools/AllTools.tsx
View File

@@ -21,7 +21,7 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
<Stack direction={'row'} alignItems={'center'} spacing={2}> <Stack direction={'row'} alignItems={'center'} spacing={2}>
<Grid container spacing={2}> <Grid container spacing={2}>
{toolCards.map((card, index) => ( {toolCards.map((card, index) => (
<Grid item xs={4} key={index}> <Grid item xs={12} md={6} lg={4} key={index}>
<ToolCard <ToolCard
title={card.title} title={card.title}
description={card.description} description={card.description}

9
src/components/options/ToolOptionGroups.tsx
View File

@@ -1,6 +1,7 @@
import Typography from '@mui/material/Typography'; import Typography from '@mui/material/Typography';
import React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import { Box, Stack } from '@mui/material'; import { Box, Stack } from '@mui/material';
import Grid from '@mui/material/Grid';
interface ToolOptionGroup { interface ToolOptionGroup {
title: string; title: string;
@@ -13,15 +14,15 @@ export default function ToolOptionGroups({
groups: ToolOptionGroup[]; groups: ToolOptionGroup[];
}) { }) {
return ( return (
<Stack direction={'row'} spacing={2}> <Grid container spacing={2}>
{groups.map((group) => ( {groups.map((group) => (
<Box key={group.title}> <Grid item xs={12} md={6} key={group.title}>
<Typography mb={1} fontSize={22}> <Typography mb={1} fontSize={22}>
{group.title} {group.title}
</Typography> </Typography>
{group.component} {group.component}
</Box> </Grid>
))} ))}
</Stack> </Grid>
); );
} }