Changeset f727252


Ignore:
Timestamp:
02/10/26 01:23:31 (5 months ago)
Author:
Mihail <mihail2.naumov@…>
Branches:
main
Children:
546a194
Parents:
b348db4
Message:

Optimizations & Layout/Text changes

Files:
5 edited

Legend:

Unmodified
Added
Removed

  • components/BuildDetailsDialog.tsx

    rb348db4 rf727252  
    11import React, {useEffect, useState} from 'react';
    22import {
    3     Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Box, Typography,
     3    Dialog, DialogTitle, DialogContent, DialogActions, Button, Box, Typography,
    44    IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip, Alert
    55} from '@mui/material';
    … …  
    3434    const [ratingVal, setRatingVal] = useState(5);
    3535
    36     // Main details fetch
    3736    useEffect(() => {
    38         if (open && buildId !== null && typeof buildId === 'number') {
     37        if (open && buildId !== null) {
    3938            setLoading(true);
    4039            setReviewText("");
    … …  
    5251
    5352    useEffect(() => {
    54         if (open && buildId !== null && typeof buildId === 'number') {
     53        if (open && buildId !== null) {
    5554            onGetBuildState({buildId})
    5655                .then(state => {
    … …  
    6362    }, [open, buildId]);
    6463
     64    useEffect(() => {
     65        if (open) {
     66            setTabIndex(0);
     67        }
     68    }, [open, buildId]);
     69
     70
    6571    const handleFavorite = async () => {
    6672        if (!currentUser || buildId === null) return alert("Please login to favorite builds.");
    … …  
    103109    return (
    104110        <>
    105             <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="paper">
     111            <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth scroll="body">
    106112                {loading || !details ? (
    107113                    <Box sx={{p: 5, textAlign: 'center'}}>Loading Forge Schematics...</Box>
    … …  
    146152                            <Box sx={{p: 3}}>
    147153                                {tabIndex === 0 && (
    148                                     <Grid container spacing={2}>
    149                                         <Grid item xs={12} md={8}>
     154                                    <Box
     155                                        sx={{
     156                                            display: 'grid',
     157                                            gridTemplateColumns: {
     158                                                xs: '1fr',
     159                                                md: '2fr 1fr'
     160                                            },
     161                                            gap: 2,
     162                                            width: '100%'
     163                                        }}
     164                                    >
     165                                        <Box>
    150166                                            <Table size="small">
    151167                                                <TableBody>
    … …  
    193209                                                </TableBody>
    194210                                            </Table>
    195                                         </Grid>
    196 
    197                                         <Grid item xs={12} md={4}>
     211                                        </Box>
     212
     213                                        <Box>
    198214                                            <Box sx={{bgcolor: '#424343', p: 2, borderRadius: 2, mb: 2}}>
    199                                                 <Typography color="primary.main" gutterBottom fontWeight="bold">Builder's
    200                                                     Notes</Typography>
     215                                                <Typography color="primary.main" gutterBottom fontWeight="bold">
     216                                                    Builder's Notes
     217                                                </Typography>
    201218                                                <Typography color="primary.main" variant="body2"
    202219                                                            sx={{fontStyle: 'italic'}}>
    … …  
    243260                                                </Button>
    244261                                            </Box>
    245                                         </Grid>
    246                                     </Grid>
     262                                        </Box>
     263                                    </Box>
    247264                                )}
    248265
    … …  
    313330                                            ))}
    314331                                            {details.reviews.length === 0 && (
    315                                                 <Typography color="text.secondary" align="center">No reviews yet. Be the
    316                                                     first!</Typography>
     332                                                <Typography color="text.secondary" align="center">
     333                                                    No reviews yet. Be the first!
     334                                                </Typography>
    317335                                            )}
    318336                                        </Box>

  • components/ComponentDetailsDialog.tsx

    rb348db4 rf727252  
    22import {
    33    Dialog, DialogTitle, DialogContent, DialogActions, Button,
    4     Typography, Box, Grid, Chip, CircularProgress, IconButton,
     4    Typography, Box, Chip, CircularProgress, IconButton,
    55    Table, TableBody, TableCell, TableContainer, TableRow, Paper
    66} from '@mui/material';
    … …  
    9292            open={open}
    9393            onClose={onClose}
    94             maxWidth="lg"
    95             // fullWidth
     94            maxWidth="md"
     95            fullWidth
     96            scroll="body"
    9697            sx={{zIndex: 1400}}
    9798        >
    … …  
    116117            </DialogTitle>
    117118
    118             <DialogContent dividers>
     119            <DialogContent
     120                sx={{
     121                    p: 1,
     122                    overflow: 'visible'
     123                }}
     124            >
    119125                {loading ? (
    120126                    <Box sx={{display: 'flex', justifyContent: 'center', p: 5}}>
    … …  
    122128                    </Box>
    123129                ) : (
    124                     <Grid container spacing={4}>
    125                         <Grid item xs={12} md={4} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
     130                    <Box
     131                        sx={{
     132                            display: 'grid',
     133                            gridTemplateColumns: {
     134                                xs: '1fr',
     135                                md: '1fr 1fr'
     136                            },
     137                            gap: 4,
     138                            width: '100%'
     139                        }}
     140                    >
     141                        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
    126142                            <Box
    127143                                component="img"
    128                                 // src={`https://placehold.co/400x400?text=${encodeURIComponent(displayData.name)}`}
    129144                                src={displayData.imgUrl}
    130145                                alt={displayData.name}
    … …  
    133148                                    maxHeight: 300,
    134149                                    objectFit: 'contain',
    135                                     mb: 2,
    136                                     // border: '1px solid #eee',
    137                                     // borderRadius: 2,
    138                                     p: 2
     150                                    mb: 1,
     151                                    mt: 7,
     152                                    p: 1
    139153                                }}
    140154                            />
    … …  
    144158                                sx={{fontWeight: 'bold'}}
    145159                            />
    146                         </Grid>
    147 
    148                         <Grid item xs={12} md={8}>
    149                             <Typography variant="subtitle1" fontWeight="bold" gutterBottom
    150                                         sx={{borderBottom: '2px solid #ff8201', display: 'inline-block', mb: 0.5}}>
     160                        </Box>
     161
     162                        <Box sx={{
     163                            display: 'flex',
     164                            flexDirection: 'column',
     165                            alignItems: 'center',
     166                            width: '70%'
     167                        }}>
     168                            <Typography
     169                                variant="subtitle1"
     170                                fontWeight="bold"
     171                                gutterBottom
     172                                sx={{
     173                                    borderBottom: '2px solid #ff8201',
     174                                    mb: 1,
     175                                    mt: 1,
     176                                    textAlign: 'center',
     177                                    width: '100%'
     178                                }}
     179                            >
    151180                                Technical Specifications
    152181                            </Typography>
    153182
    154                             <TableContainer component={Paper} variant="outlined">
    155                                 <Table size="small">
     183                            <TableContainer
     184                                component={Paper}
     185                                variant="outlined"
     186                                sx={{
     187                                    maxWidth: '100%',
     188                                    width: '100%'
     189                                }}
     190                            >
     191                                <Table size="medium">
    156192                                    <TableBody>
    157193                                        <TableRow>
    158                                             <TableCell component="th" scope="row"
    159                                                        sx={{fontWeight: 'bold', width: '30%', bgcolor: '#1e1e1e'}}>
     194                                            <TableCell
     195                                                component="th"
     196                                                scope="row"
     197                                                sx={{
     198                                                    fontWeight: 'bold',
     199                                                    width: '50%',
     200                                                    bgcolor: '#1e1e1e',
     201                                                    textAlign: 'center',
     202                                                    px: 2
     203                                                }}
     204                                            >
    160205                                                Brand
    161206                                            </TableCell>
    162                                             <TableCell>{displayData.brand}</TableCell>
     207                                            <TableCell sx={{
     208                                                textAlign: 'center',
     209                                                px: 2,
     210                                                width: '50%'
     211                                            }}>
     212                                                {displayData.brand}
     213                                            </TableCell>
    163214                                        </TableRow>
    164215
    … …  
    168219                                            return (
    169220                                                <TableRow key={key}>
    170                                                     <TableCell component="th" scope="row" sx={{
    171                                                         fontWeight: 'bold',
    172                                                         width: '30%',
    173                                                         bgcolor: '#1e1e1e'
    174                                                     }}>
     221                                                    <TableCell
     222                                                        component="th"
     223                                                        scope="row"
     224                                                        sx={{
     225                                                            fontWeight: 'bold',
     226                                                            width: '50%',
     227                                                            bgcolor: '#1e1e1e',
     228                                                            textAlign: 'center',
     229                                                            px: 2
     230                                                        }}
     231                                                    >
    175232                                                        {formatKey(key)}
    176233                                                    </TableCell>
    177                                                     <TableCell>{renderValue(key, val)}</TableCell>
     234                                                    <TableCell sx={{
     235                                                        textAlign: 'center',
     236                                                        px: 2,
     237                                                        width: '50%'
     238                                                    }}>
     239                                                        {renderValue(key, val)}
     240                                                    </TableCell>
    178241                                                </TableRow>
    179242                                            );
    … …  
    182245                                </Table>
    183246                            </TableContainer>
    184                             <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5}}>
     247
     248                            <Box sx={{
     249                                display: 'flex',
     250                                justifyContent: 'center',
     251                                alignItems: 'center',
     252                                mt: 1,
     253                                width: '100%'
     254                            }}>
    185255                                <Typography variant="h4" color="primary.main" fontWeight="bold">
    186256                                    {formatMoney(displayData.price)}
    187257                                </Typography>
    188258                            </Box>
    189                         </Grid>
    190                     </Grid>
     259                        </Box>
     260                    </Box>
    191261                )}
    192262            </DialogContent>
    … …  
    198268                            color: 'white',
    199269                            borderColor: '#ff8201',
    200                             onHover: {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
     270                            '&:hover': {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
    201271                        }}
    202272                >Close</Button>

  • components/ComponentDialog.tsx

    rb348db4 rf727252  
    5757        return () => clearTimeout(timeoutId);
    5858    }, [tempSearchQuery]);
     59
     60    useEffect(() => {
     61        if (open && category) {
     62            setSelectedBrands([]);
     63            setSortOrder('price_desc');
     64            setTempSearchQuery('');
     65            setSearchQuery('');
     66            setPriceRange([0, 2000]);
     67        }
     68    }, [open, category]);
     69
    5970
    6071    useEffect(() => {
    … …  
    297308                                Browsing:
    298309                            </Box>
    299                             <b> {category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()}</b>
     310                            <b> {category === 'gpu' ? 'GRAPHICS CARDS' : category === 'memory_card' ? 'STORAGE EXPANSION CARDS' : category?.toUpperCase()}</b>
    300311                            {mode === 'forge' && currentBuildId && (
    301312                                <Typography

  • components/Navbar.tsx

    rb348db4 rf727252  
    6464    { id: 'sound_card', label: 'Sound Cards', icon: <SpeakerIcon fontSize="small" /> },
    6565    { id: 'optical_drive', label: 'Optical Drives', icon: <AlbumIcon fontSize="small" /> },
    66     { id: 'memory_card', label: 'Memory Cards', icon: <SdCardIcon fontSize="small" /> },
     66    { id: 'memory_card', label: 'Storage Cards', icon: <SdCardIcon fontSize="small" /> },
    6767    { id: 'cables', label: 'Cables', icon: <CableIcon fontSize="small" /> },
    6868];

  • pages/index/+Page.tsx

    rb348db4 rf727252  
    1010import BuildCard from '../../components/BuildCard';
    1111
    12 import {onGetApprovedBuilds, onGetAuthState, onCloneBuild} from '../+Layout.telefunc';
     12import {onGetApprovedBuilds, onGetAuthState} from '../+Layout.telefunc';
    1313
    1414export default function HomePage() {
    … …  
    4646        }
    4747
    48         loadSite();
     48        void loadSite();
    4949    }, []);
    50 
    51     const handleCloneWrapper = async (buildId: number) => {
    52         if (!data?.isLoggedIn) return alert("Please login to clone builds!");
    53         if (confirm(`Clone this build to your dashboard?`)) {
    54             await onCloneBuild({buildId});
    55             alert("Build cloned! Check your dashboard.");
    56             setSelectedBuildId(null);
    57         }
    58     };
    5950
    6051    if (!data) return <Box sx={{p: 10, textAlign: 'center'}}>Loading Forge...</Box>;
    … …  
    160151                currentUser={data.userId}
    161152                onClose={() => setSelectedBuildId(null)}
    162                 onClone={handleCloneWrapper}
    163153            />
    164154
Note: See TracChangeset for help on using the changeset viewer.