aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2025-12-17 06:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: small visual improvements

Browse Source
This commit is contained in:
MTG2000
2022-09-12 10:27:56 +03:00
parent 090d096d42
commit c30c45ac44
7 changed files with 40 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Components/Card/Card.tsx
View File

@@ -21,8 +21,8 @@ const Card = React.forwardRef<HTMLDivElement, PropsWithChildren<Props>>(({
ref={ref}
className={`
${onlyMd ?
`md:bg-white md:rounded-16 md:outline outline-2 outline-gray-200 ${defaultPadding && "md:p-24"}` :
`bg-white rounded-12 md:rounded-16 outline outline-2 outline-gray-200 ${defaultPadding && "p-16 md:p-24"}`
`md:bg-white md:rounded-16 md:border-2 border-gray-200 ${defaultPadding && "md:p-24"}` :
`bg-white rounded-12 md:rounded-16 border-2 border-gray-200 ${defaultPadding && "p-16 md:p-24"}`
}
${className}
`}

2
src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
View File

@@ -33,7 +33,7 @@ export default function HackathonsPage() {
<div
className={`page-container`}
>
<div className={`pt-16 w-full ${styles.grid}`}>
<div className={`pt-16 w-full`}>
<Link to={createRoute({ type: "tournament", id: 1, tab: 'overview' })}>
<div className="rounded-16 min-h-[200px] md:min-h-[240px] relative overflow-hidden p-16 md:p-24 flex flex-col items-start justify-end">
<img

1
src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx
View File

@@ -32,7 +32,6 @@ export default function PopularTagsFilter({ value, onChange }: Props) {
<div className='overflow-hidden'>
{isMdScreen ?
<Card>
<p className="text-body2 font-bolder text-black mb-16">Popular Tags</p>
<ul className=' flex flex-col gap-16'>
{tagsQuery.loading ?

32
src/features/Profiles/pages/EditProfilePage/EditProfilePage.tsx
View File

@@ -67,22 +67,24 @@ export default function EditProfilePage() {
</ul>
</Card>
:
<div className="border-b-2 border-gray-200">
<Slider>
{links.map((link, idx) =>
<NavLink
to={link.path}
key={idx}
className={`flex items-start cursor-pointer font-bold py-12
<div className="overflow-hidden">
<div className="border-b-2 border-gray-200">
<Slider>
{links.map((link, idx) =>
<NavLink
to={link.path}
key={idx}
className={`flex items-start cursor-pointer font-bold py-12
active:scale-95 transition-transform`}
style={({ isActive }) => ({
boxShadow: isActive ? '0px 2px var(--primary)' : 'none'
})}
>
{link.text}
</NavLink>
)}
</Slider>
style={({ isActive }) => ({
boxShadow: isActive ? '0px 3px 1px -1px var(--primary)' : 'none'
})}
>
{link.text}
</NavLink>
)}
</Slider>
</div>
</div>
}
</aside>

2
src/features/Tournaments/pages/TournamentDetailsPage/Header/Header.tsx
View File

@@ -15,7 +15,7 @@ export default function Header() {
<Helmet>
<title>{tournamentDetails.title} Tournament</title>
</Helmet>
<div className="w-full p-16 md:p-24 flex flex-col min-h-[240px] md:min-h-[280px] relative">
<div className="w-full p-16 md:p-24 flex flex-col min-h-[240px] md:min-h-[280px] relative mb-[-1px]">
<img src={tournamentDetails.cover_image} className='absolute inset-0 h-full w-full object-cover object-top' alt="" />
<div className='absolute inset-0 h-full w-full bg-black bg-opacity-50 ' />
<div className="content-container text-white flex flex-col md:flex-row gap-16 md:gap-32 relative" style={{ marginTop: 'auto' }}>

28
src/features/Tournaments/pages/TournamentDetailsPage/Navigation/Navigation.tsx
View File

@@ -45,31 +45,33 @@ export default function Navigation() {
return (
<div className="w-full bg-white py-16 border-y border-gray-200 sticky-top-element z-10">
<div className="relative group content-container">
<div className="overflow-hidden" ref={viewportRef}>
<div className="select-none w-full flex gap-8 md:gap-16">
{links.map((link) => <NavLink
key={link.path}
to={link.path}
className={({ isActive }) => `
<div className="content-container">
<div className="relative group">
<div className="overflow-hidden" ref={viewportRef}>
<div className="select-none w-full flex gap-8 md:gap-16">
{links.map((link) => <NavLink
key={link.path}
to={link.path}
className={({ isActive }) => `
min-w-max rounded-48 px-16 py-8 cursor-pointer font-medium text-body5
active:scale-95 transition-transform
${isActive ? 'bg-primary-100 text-primary-600' : 'bg-gray-100 hover:bg-gray-200 text-gray-600'}
${link.isDisabled && "pointer-events-none opacity-60"}
`}
role='button'
>
{link.text}
</NavLink>)}
role='button'
>
{link.text}
</NavLink>)}
</div>
</div>
</div>
{/* <button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center left-0 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollPrev && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(-1)}>
{/* <button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center left-0 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollPrev && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(-1)}>
{"<"}
</button>
<button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center right-0 translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollNext && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(1)}>
{">"}
</button> */}
</div>
</div>
</div>
)

8
src/styles/index.scss
View File

@@ -28,10 +28,10 @@ body {
}
display: grid;
grid-template-columns: minmax(var(--padding), 1fr) minmax(auto, 1440px) minmax(
var(--padding),
1fr
);
grid-template-columns: minmax(var(--padding), 1fr) minmax(
auto,
var(--maxPageWidth, 1440px)
) minmax(var(--padding), 1fr);
> * {
grid-column: 2/3;