Skip to content

Commit

Permalink
fix_layout
Browse files Browse the repository at this point in the history
  • Loading branch information
ismail-kharrobi committed Aug 26, 2023
1 parent 3628520 commit a93d5d4
Show file tree
Hide file tree
Showing 7 changed files with 38 additions and 26 deletions.
28 changes: 14 additions & 14 deletions frontend/code/src/components/Home/assets/Button.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import './css/style.css'
export const Button = () => {
return (
<div className="mystyle transition duration-500 hover:-translate-y-1 hover:scale-110 ease-in-out hover:cursor-pointer hover:fill-primary flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4 w-[22vw] sm:w-[17.5vw]">
<span className=" absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
<svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect className="" x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>

<div className="flex absolute justify-center items-center left-[40%] sm:left-[41.4%] top-[60%] sm:top-3/4 w-[22vw] sm:w-[17.5vw]">
<span className="absolute text-white font-montserrat text-[1.4vw]">PLAY NOW</span>
<svg width="211" height="57" viewBox="0 0 211 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.84375" width="209.158" height="57" rx="6" fill="url(#paint0_linear_377_5387)"/>

<defs>
<linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse">
<stop stopColor="#7940CF"/>
<stop offset="1" stopColor="#5921CB"/>
</linearGradient>
</defs>
<defs>
<linearGradient id="paint0_linear_377_5387" x1="105.423" y1="0" x2="105.423" y2="57" gradientUnits="userSpaceOnUse">
<stop stopColor="#7940CF"/>
<stop offset="1" stopColor="#5921CB"/>
</linearGradient>
</defs>

</svg>

</svg>

</div>
</div>
)
}
13 changes: 7 additions & 6 deletions frontend/code/src/components/Home/assets/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,16 @@ export const Table = () =>
const [users, setUsers] = useState<any | undefined>([])
useEffect( () => {
const fetchdata = async() =>{

for (let i = 0 ; i < 10 ; ++i)
{
let response = await fetch(`https://randomuser.me/api/`)
let data = await response.json()
if (data.results && data.results.length > 0) {
const newUser = data.results[0];
setUsers((oldUsers : any) => [...oldUsers, newUser]);
console.log(newUser)
}

}
}
fetchdata().catch(console.error)
},[])
Expand All @@ -32,16 +33,16 @@ export const Table = () =>
<th>Score</th>
</tr>
</thead>
<tbody className='flex flex-col justify-start items-center gap-2 sm:gap-4'>
<tbody className='flex flex-col justify-between items-center gap-2 sm:gap-4'>
{users.map((x: any, index: number) => (
<tr
key={index}
className='bg-accent border-base-200 rounded-3xl w-[80vw] flex justify-start sm:justify-between px-4 sm:px-10 items-center'
className='bg-accent border-base-200 rounded-xl w-[80vw] flex justify-between sm:justify-between px-4 sm:px-10 items-center'
>
<td>
<div className="flex items-center space-x-3">
<div className='flex justify-center items-center gap-x-3'>
<Trophy /> {index}
<Trophy /> {index + 1}
</div>
</div>
</td>
Expand All @@ -53,7 +54,7 @@ export const Table = () =>

<div className="flex font-montserrat w-12">{x.name.first}</div>
</td>
<td className='flex justify-between items-center'><Daimond/> 14</td>
<td className='flex justify-start items-center gap-x-1 w-16'><Daimond/> 14</td>
</tr>
))}
</tbody>
Expand Down
5 changes: 5 additions & 0 deletions frontend/code/src/components/Home/assets/css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.mystyle:hover > svg * ,
.mystyle:hover {
transition-duration: 300ms;
fill: hsl(var(--p) / 1);
}
6 changes: 3 additions & 3 deletions frontend/code/src/components/Layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const Layout : FC<myNodetype> = (Content) : JSX.Element =>
</div>
<div className='flex'>

<div className='sm:flex flex-col hidden justify-around items-stretch h-[92vh] bg-base-200 sm:w-[11vw] md:w-[8vw] xl:w-[7vw]'>
<div className='sm:flex flex-col hidden justify-around items-stretch h-[92vh] bg-base-200 sm:w-[11vw] md:w-[9vw] xl:w-[7vw]'>
<div className="flex flex-col pl-[1.4vw] justify-evenly content-start gap-y-10 pb-44 ">
<Dash/>
<Game/>
Expand All @@ -45,7 +45,7 @@ tart ">
<Out/>
</div>
</div>
<div className=" h-[8vh] sm:hidden btm-nav bg-base-200 ">
<div className=" h-[8vh] sm:hidden btm-nav bg-base-200 flex justify-end z-50">
<button className="">
<Dash/>
</button>
Expand All @@ -62,7 +62,7 @@ tart ">
<Settings/>
</button>
</div>
<div className='sm:absolute sm:w-[91vw] xl:w-[95vw] md:w-[93.5vw] w-screen right-0 z-10 h-[84vh] sm:h-[92vh] bg-base-100 sm:rounded-tl-2xl overflow-auto no-scrollbar'>
<div className='sm:absolute sm:w-[91vw] xl:w-[95vw] md:w-[92.5vw] w-screen right-0 z-10 h-[84vh] sm:h-[92vh] bg-base-100 sm:rounded-tl-2xl overflow-auto no-scrollbar'>
{Content.children}
</div>
</div>
Expand Down
8 changes: 6 additions & 2 deletions frontend/code/src/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,10 @@
}
}
}
@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&family=Montserrat:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend+Peta:wght@400;700&family=Montserrat:ital,wght@0,700;1,500&display=swap');
@layer base {
html {
font-family: Montserrat;
}
}
3 changes: 2 additions & 1 deletion frontend/code/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
<React.StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />}></Route>
Expand All @@ -23,7 +24,7 @@ root.render(

</Routes>
</BrowserRouter>

</React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
Expand Down
1 change: 1 addition & 0 deletions frontend/code/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ module.exports = {
poppins: ['Poppins', 'sans-serif'],
lexend: ['Lexend Peta', 'sans-serif'],
montserrat : ['Montserrat', 'sans-serif']

},
backgroundImage: {
'login': "url('./components/Login/Assets/bg.gif')",
Expand Down

0 comments on commit a93d5d4

Please sign in to comment.