some responsive
This commit is contained in:
parent
3e68448f36
commit
d4d59bb5ac
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="146.76816mm"
|
||||
height="146.76816mm"
|
||||
viewBox="0 0 146.76816 146.76816"
|
||||
version="1.1"
|
||||
id="svg376"
|
||||
inkscape:version="1.2-beta (1b65182ce9, 2022-04-05)"
|
||||
sodipodi:docname="logo-only.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview378"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:pageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.74564394"
|
||||
inkscape:cx="361.43256"
|
||||
inkscape:cy="284.31801"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1017"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs373" />
|
||||
<g
|
||||
inkscape:label="Calque 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(412.61681,-70.306681)">
|
||||
<path
|
||||
d="m -287.75448,268.39575 c 13.33774,0 25.84187,-5.12074 35.24974,-14.52861 9.40787,-9.40787 14.52861,-21.912 14.52861,-35.24974 0,-13.33774 -5.12074,-25.84187 -14.52861,-35.24974 -9.40787,-9.40787 -21.912,-14.52861 -35.24974,-14.52861 -13.33774,0 -25.84187,5.12074 -35.24974,14.52861 -9.40787,9.40787 -14.52861,21.912 -14.52861,35.24974 0,13.33774 5.12074,25.84187 14.52861,35.24974 9.40787,9.40787 21.912,14.52861 35.24974,14.52861 z m 2.85809,-8.45517 c -0.9527,0.11908 -1.90539,0.11908 -2.85809,0.11908 -1.30996,0 -2.61991,-0.11908 -3.92987,-0.23817 -4.28713,-6.66887 -7.50248,-13.81409 -9.40787,-21.31657 h 21.07839 c 0.71452,1.78631 2.02448,3.45352 3.57261,4.52531 -2.02448,5.95435 -4.88256,11.55143 -8.45517,16.91035 z m 11.31326,-2.38174 c 2.26265,-4.16805 4.04896,-8.33609 5.478,-12.74231 3.45352,-0.71452 6.19252,-3.09626 7.50248,-6.31161 h 9.16969 c -4.76348,8.69335 -12.7423,15.48131 -22.15017,19.05392 z m 27.15183,-38.94144 c 0,3.92987 -0.59544,7.74065 -1.54813,11.43235 h -12.8614 c -0.71452,-1.54813 -1.90539,-2.97718 -3.33443,-4.04896 0.23817,-2.61991 0.35726,-5.23982 0.35726,-7.85974 0,-3.69169 -0.23817,-7.38339 -0.71452,-10.956 h 16.434 c 1.19087,3.57261 1.66722,7.50248 1.66722,11.43235 z m -5.00166,-19.88752 h -14.52861 c -1.54813,-6.54979 -3.81078,-12.74231 -6.90704,-18.69666 9.05061,3.45353 16.67217,10.24148 21.43565,18.69666 z m -20.72113,19.41117 c 0,2.02448 -0.11908,4.04896 -0.23817,6.07344 -3.33444,0.71452 -6.07344,2.85808 -7.38339,5.83526 h -22.98379 c -0.47634,-3.57261 -0.83361,-7.26431 -0.83361,-10.83692 0,-2.26265 0.11909,-4.5253 0.35727,-6.78795 3.09626,-0.59544 5.59708,-2.61992 7.14521,-5.23983 h 23.22196 c 0.47635,3.57261 0.71452,7.26431 0.71452,10.956 z m -18.69665,-40.72774 c 1.07178,-0.11909 2.14356,-0.11909 3.09626,-0.11909 1.19087,0 2.38174,0 3.57261,0.11909 4.28713,6.66887 7.50248,13.81409 9.40787,21.31657 h -20.72113 c -0.71452,-2.02448 -2.02448,-3.81079 -3.6917,-5.12074 2.14357,-5.71618 4.88257,-11.07509 8.33609,-16.19583 z m -11.31326,2.38174 c -2.02448,3.81078 -3.81079,7.85974 -5.23983,11.9087 -3.69169,0.71452 -6.66887,3.45352 -7.85974,6.90704 h -8.69335 c 4.6444,-8.45517 12.38505,-15.24313 21.79292,-18.81574 z m -26.91366,38.82235 c 0,-3.92987 0.59544,-7.85974 1.66722,-11.43235 h 12.98048 c 0.71452,1.30996 1.78631,2.50083 2.97717,3.45352 -0.23817,2.85809 -0.47634,5.71618 -0.47634,8.57426 0,3.6917 0.23817,7.26431 0.71452,10.83692 h -16.19583 c -1.19087,-3.6917 -1.66722,-7.50248 -1.66722,-11.43235 z m 19.29209,19.76844 c 1.54813,6.43069 3.81078,12.7423 6.90705,18.69665 -9.05061,-3.57261 -16.55309,-10.24148 -21.19748,-18.69665 z"
|
||||
id="path7"
|
||||
style="fill:#ffd7d7;fill-opacity:1;stroke-width:1.19087"
|
||||
transform="matrix(1.4676816,0,0,1.4676816,83.023709,-177.3159)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
|
|
@ -1,8 +1,9 @@
|
|||
import logo from '@assets/images/logo.svg';
|
||||
import logo from '@assets/images/logo-only.svg';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useCookies } from 'react-cookie';
|
||||
import Avatar from '@components/Avatar';
|
||||
import { getMeInfo } from '@controllers/UserController';
|
||||
import { FiLogOut } from 'react-icons/fi';
|
||||
|
||||
const AppHeader = () => {
|
||||
const meInfo = useQuery(['me'], getMeInfo, {
|
||||
|
|
@ -22,11 +23,12 @@ const AppHeader = () => {
|
|||
return (
|
||||
<header className="sticky top-0 z-100 w-full shadow-sm shadow-slate-900">
|
||||
<div className="min-h-80 flex items-center justify-between bg-grey-dark p-2">
|
||||
<div className="app-header__logo">
|
||||
<div className="app-header__logo flex items-center gap-3">
|
||||
<img src={logo} alt="logo" className="h-14" />
|
||||
<span className="w-0 transition-all duration-500 sm:w-full flex-shrink overflow-hidden text-red font-bold text-4xl">Groupomania</span>
|
||||
</div>
|
||||
<div className="right">
|
||||
<div className="flex items-center space-x-6">
|
||||
<div className="flex items-center gap-2 sm:gap-4">
|
||||
{meInfo.data && <Avatar user={meInfo.data} />}
|
||||
<div className="app-header__user__name">
|
||||
<span className="text-white">
|
||||
|
|
@ -37,7 +39,8 @@ const AppHeader = () => {
|
|||
className="group relative flex w-auto justify-center rounded-md border border-red bg-red py-2 px-2 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
|
||||
onClick={() => logOut()}
|
||||
>
|
||||
Deconnexion
|
||||
<FiLogOut className="h-5 w-5" />
|
||||
<span className="w-0 transition-all duration-500 sm:w-full sm:pl-2 origin-left overflow-hidden">Deconnexion</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const Avatar = ({ user }: any) => {
|
|||
|
||||
return (
|
||||
<div className="avatar shrink-0">
|
||||
<img src={avatar} alt="avatar" className="rounded-full w-16 h-16 cursor-pointer" />
|
||||
<img src={avatar} alt="avatar" className="rounded-full w-12 h-12 md:w-16 md:h-16 transition-all cursor-pointer" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ const MessageWrapper = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col max-h-[83vh] relative">
|
||||
<ScrollToBottom className="message-container overflow-y-scroll flex flex-col gap-4 w-full pt-4 pb-6 -mb-3">
|
||||
<main className="messages-wrapper rounded-md w-full max-w-3xl flex flex-col flex-shrink relative overflow-y-scroll">
|
||||
<ScrollToBottom className="message-container flex flex-col gap-4 w-full max-w-3xl pt-4 pb-6 -mb-3 px-2 md:px-0">
|
||||
{isLoading
|
||||
? ''
|
||||
: isError
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@ const NewMessage = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<footer className="new-message bg-grey-dark rounded-xl w-full max-w-3xl p-3 gap-5 shadow-md shadow-grey-dark z-10">
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<footer className="new-message z-10 flex justify-center w-full">
|
||||
<form onSubmit={handleSubmit} className="flex gap-2 bg-grey-dark rounded-xl w-full max-w-3xl p-2 mx-2 sm:p-3 md:mx-0 shadow-md shadow-grey-dark">
|
||||
<div className="file">
|
||||
<label htmlFor="image" className="cursor-pointer block p-2">
|
||||
<div className="rounded-full text-grey-dark bg-red-light text-lg p-2">
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
|
|||
container?.addEventListener('DOMNodeInserted', () => {
|
||||
if (node?.getBoundingClientRect() && node.getBoundingClientRect().y >= window.innerHeight) {
|
||||
node?.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
}
|
||||
});
|
||||
}, [node]);
|
||||
|
||||
|
|
@ -33,15 +33,15 @@ const ScrollToBottom = ({ children, className = '' }: { children: ReactNode; cla
|
|||
<div className={className}>
|
||||
{children}
|
||||
<div className="scroll-bottom" ref={bottom}></div>
|
||||
<button
|
||||
onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
|
||||
>
|
||||
<div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
|
||||
<FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => node?.scrollIntoView({ behavior: 'smooth' })}
|
||||
className={'absolute right-3 transition-all' + (show ? ' bottom-3' : ' -bottom-10')}
|
||||
>
|
||||
<div className="popup-btn cursor-pointer rounded-full shadow-lg shadow-slate-900 bg-grey-dark hover:bg-grey-light transition-all">
|
||||
<FaChevronDown className="fill-grey-light hover:fill-grey-dark transition-all text-xl w-10 h-10 p-2.5" />
|
||||
</div>
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import 'react-toastify/dist/ReactToastify.css';
|
|||
|
||||
const Home = () => {
|
||||
return (
|
||||
<div className="min-h-full max-h-full bg-grey flex flex-col items-center">
|
||||
<div className="min-h-full max-h-full bg-grey flex flex-col items-center overflow-y-hidden">
|
||||
<AppHeader />
|
||||
<MessageWrapper />
|
||||
<NewMessage />
|
||||
|
|
|
|||
Loading…
Reference in New Issue