Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

changes in mobile view #358

Merged
merged 1 commit into from
Oct 21, 2024
Merged

changes in mobile view #358

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 8 additions & 7 deletions frontend/src/Pages/Herosection.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from 'react';
import './Herosection.css';
import logo from '../assets/stationsaarthi.svg';
import navigationsvg from '../assets/svg/navigation.svg';
// import navigation from './navigation';
import bookingsvg from '../assets/svg/bookings.svg';
import stationsvg from '../assets/svg/station.svg';
import noticationsvg from '../assets/svg/notification.svg';
Expand Down Expand Up @@ -59,7 +58,7 @@ const Herosection = () => {

<div className='relative z-10 grid justify-items-center'>
<img src={logo} alt="" srcset="" style={{ height: "40vh" }} />
<h1 className='text-2xl font-extrabold text-white'>Station Saarthi : Your Platform Guide</h1>
<h1 className='text-2xl font-extrabold text-white text-center'>Station Saarthi : Your Platform Guide</h1>
</div>
{/* <img src={bg} alt="whitishbg" style={{ position: "absolute", bottom: 0 }} />
<img src={bgmobile} alt="" style={{ position: "absolute", bottom: 0, zIndex: "10" }} className="md:hidden" /> */}
Expand All @@ -70,7 +69,7 @@ const Herosection = () => {
<button type="submit" onClick={RegisterClick} className="w-20 py-2 ml-8 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">Register</button>
</div>

<div className='grid grid-cols-3 gap-4 pb-20 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center '>
<div className='grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center '>
<div
type="submit"
onClick={ContributorCLick}
Expand Down Expand Up @@ -112,10 +111,12 @@ const Herosection = () => {
<div type="submit" onClick={NotificationCLick} className='flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300'><img src={noticationsvg} alt="" srcset="" className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg " /> <button type='submit' onClick={NotificationCLick} className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50" > <h1 className='font-bold text-white'>Notification</h1></button></div>

</div>

<Chatbot/>


<div
className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer right-5 -bottom-8 md:-bottom-5"
>
<Chatbot/>
<h1 className="text-xs font-bold text-black">Saarthi</h1>
</div>
</>
);
};
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/Pages/hamburger.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ const BackButton = styled(FaArrowLeft)`

const SearchIcon = styled(FaSearch)`
font-size: 18px;
color: white;
color: rgb(6 25 47);
cursor: pointer;
transition: color 0.3s;
&:hover {
Expand All @@ -105,7 +105,7 @@ const SearchIcon = styled(FaSearch)`

const ClearIcon = styled(FaTimes)`
font-size: 16px;
color: white;
color: rgb(6 25 47);
cursor: pointer;
margin-left: 5px;
transition: color 0.3s;
Expand All @@ -123,7 +123,7 @@ const SearchContainer = styled.div`
right: 16px;
padding-block:6px;
padding-inline:10px;
background-color: #3B82F6;
background-color: rgb(191 219 254);
border-radius: 30px;

`;
Expand All @@ -132,14 +132,14 @@ const SearchInput = styled.input`


background-color: transparent;
color: white;
color: rgb(6 25 47);
outline: none;
width: ${({ isFocused }) => (isFocused ? "200px" : "0px")};
transition: width 0.4s ease;
opacity: ${({ show }) => (show ? 1 : 0)};
pointer-events: ${({ show }) => (show ? "auto" : "none")};
&::placeholder {
color: #C4E1F6;
color: rgb(6 25 47);
}
`;

Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const Navbar = () => {
</div>

{/* Sidebar Navigation (Covers 25% on larger screens, full width on mobile) */}
<div className={`fixed inset-y-0 left-0 bg-white shadow-lg ${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 w-full lg:w-1/4`}>
<div className={`fixed inset-y-0 left-0 bg-white shadow-lg ${isOpen ? 'translate-x-0' : '-translate-x-full'} transition-transform duration-300 w-[80%] lg:w-1/4`}>

{/* Close Button inside Sidebar */}
<div className="flex justify-end p-4">
Expand All @@ -113,7 +113,7 @@ const Navbar = () => {
{/* Profile Section */}
<FaUser className="text-6xl" />
<p className="mt-2 text-lg font-semibold">Yatree</p>
<p className="text-sm">3.9 ★</p>
<p className="text-sm">5.0 ★</p>
</div>

{/* Menu Items */}
Expand All @@ -137,7 +137,7 @@ const Navbar = () => {
</li>
<li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleOpenModal}>
<FaStar className="mr-3 text-blue-300" />
<span className="text-lg"> </span>
<span className="text-lg"> Feedback </span>
</li>
<li className="flex items-center px-4 py-2 text-black cursor-pointer hover:text-white hover:bg-blue-600" onClick={handleSettingsClick}>
<IoSettings className="mr-3 text-blue-300" />
Expand Down
Loading