marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-19 14:09:31 +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" />
</component>
<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$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.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/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.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/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/ToolBreadcrumb.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolBreadcrumb.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/components/ToolInputAndResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" 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/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -198,14 +198,6 @@
<workItem from="1719339559458" duration="303000" />
<workItem from="1719340295244" duration="772000" />
</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">
<option name="closed" value="true" />
<created>1719005757859</created>
@@ -590,7 +582,15 @@
<option name="project" value="LOCAL" />
<updated>1719350066784</updated>
</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 />
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -611,7 +611,6 @@
<option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
<option name="CHECK_NEW_TODO" value="false" />
<option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
<MESSAGE value="test: join service" />
<MESSAGE value="feat: result copy and download" />
<MESSAGE value="feat: contributors graph" />
<MESSAGE value="feat: create tool script" />
@@ -636,7 +635,8 @@
<MESSAGE value="fix: ToolFileInput.tsx" />
<MESSAGE value="fix: generate numbers" />
<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 name="XSLT-Support.FileAssociations.UIState">
<expand />

2
src/components/ToolBreadcrumb.tsx
View File

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

32
src/components/ToolHeader.tsx
View File

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

4
src/components/ToolInputAndResult.tsx
View File

@@ -10,10 +10,10 @@ export default function ToolInputAndResult({
}) {
return (
<Grid id="tool" container spacing={2}>
<Grid item xs={6}>
<Grid item xs={12} md={6}>
{input}
</Grid>
<Grid item xs={6}>
<Grid item xs={12} md={6}>
{result}
</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}>
<Grid container spacing={2}>
{toolCards.map((card, index) => (
<Grid item xs={4} key={index}>
<Grid item xs={12} md={6} lg={4} key={index}>
<ToolCard
title={card.title}
description={card.description}

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

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