aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-10 09:54:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

change: change some products page comps, fix more QA problems

Browse Source
This commit is contained in:
MTG2000
2022-05-30 14:38:34 +03:00
parent 8353a3b19f
commit a247685f5b
12 changed files with 71 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/Components/Navbar/NavDesktop.tsx
View File

@@ -5,11 +5,13 @@ import ASSETS from "src/assets";
import Search from "./Search/Search";
import IconButton from "../IconButton/IconButton";
import { Link, useNavigate } from "react-router-dom";
import { useState } from "react";
import { useRef, useState } from "react";
import {
Menu,
MenuItem,
MenuButton,
useMenuState,
ControlledMenu,
} from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';
import { FiAward, FiChevronDown, FiFeather, FiMic } from "react-icons/fi";
@@ -17,6 +19,8 @@ import { FiAward, FiChevronDown, FiFeather, FiMic } from "react-icons/fi";
export default function NavDesktop() {
const [searchOpen, setSearchOpen] = useState(false)
const communityRef = useRef(null);
const [communitymenuProps, toggleCommunityMenu] = useMenuState({ transition: true });
const { isWalletConnected } = useAppSelector((state) => ({
isWalletConnected: state.wallet.isConnected,
@@ -45,7 +49,18 @@ export default function NavDesktop() {
</Link>
</li>
<li>
<Menu offsetY={28} menuClassName='!rounded-12 !p-8 !border-gray-200' menuStyle={{ border: '1px solid' }} menuButton={<MenuButton className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></MenuButton>}>
<button
ref={communityRef}
onMouseEnter={() => toggleCommunityMenu(true)}
className='text-body4 font-bold hover:text-primary-600'>Community <FiChevronDown className="ml-8" /></button>
<ControlledMenu {...communitymenuProps}
anchorRef={communityRef}
offsetY={28}
onMouseLeave={() => toggleCommunityMenu(false)}
onClose={() => toggleCommunityMenu(false)}
menuClassName='!rounded-12 !p-8 !border-gray-200'
menuStyle={{ border: '1px solid' }}
>
<MenuItem
href="/blog"
onClick={(e) => {
@@ -102,7 +117,7 @@ export default function NavDesktop() {
</p>
</div>
</MenuItem>
</Menu>
</ControlledMenu>
</li>
<li className="relative">
<a

20
src/Components/VoteButton/VoteButton.tsx
View File

@@ -5,6 +5,7 @@ import { ComponentProps, useRef, useState } from 'react'
import styles from './styles.module.scss'
import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
import { useDebouncedCallback, useThrottledCallback } from '@react-hookz/web'
import { UnionToObjectKeys } from 'src/utils/types/utils'
@@ -26,9 +27,22 @@ type Props = {
disableCounter?: boolean
disableShake?: boolean
dense?: boolean
size?: 'sm' | 'md'
resetCounterOnRelease?: boolean
} & Omit<ComponentProps<typeof Button>, 'children'>
const btnPadding: UnionToObjectKeys<Props, 'direction', any> = {
horizontal: {
sm: '',
md: '',
} as UnionToObjectKeys<Props, 'size'>,
vertical: {
sm: 'p-8',
md: '',
} as UnionToObjectKeys<Props, 'size'>
}
export default function VoteButton({
votes,
onVote = () => { },
@@ -169,7 +183,7 @@ export default function VoteButton({
dense ? "py-4 px-12" : "py-8 px-20"
:
dense ? "py-4 px-8" : "p-8"}
${incrementsCount && "outline"} active:outline outline-1 outline-red-500
${voteCntRef.current > 0 && "outline"} active:outline outline-1 outline-red-500
${btnShakeClass}
`}
@@ -187,11 +201,11 @@ export default function VoteButton({
</div>
<div className={`
relative z-10
${incrementsCount ? "text-red-800" : "text-gray-600"}
${incrementsCount ? "text-red-800" : "text-gray-500"}
flex justify-center items-center gap-8 text-left ${direction === 'vertical' && "flex-col !text-center"}
`}>
<MdLocalFireDepartment
className={`text-body2 ${incrementsCount ? "text-red-600" : "text-red-600"}`}
className={`text-body2 ${incrementsCount ? "text-red-600" : "text-gray-400"}`}
/><span className="align-middle w-[4ch]"> {numberFormatter(votes + voteCnt)}</span>
</div>

BIN
src/assets/images/explore_page_header_1.jfif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 619 KiB

After

Width:  |  Height:  |  Size: 519 KiB

BIN
src/assets/images/explore_page_header_2.jfif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 190 KiB

After

Width:  |  Height:  |  Size: 42 KiB

6
src/features/Hackathons/pages/HackathonsPage/styles.module.scss
View File

@@ -4,11 +4,7 @@
gap: 24px;
@media screen and (min-width: 768px) {
grid-template-columns: 1fr 2fr 0;
grid-template-columns: 1fr 3fr;
gap: 24px;
}
@media screen and (min-width: 1024px) {
grid-template-columns: calc(min(30%, 326px)) 1fr;
}
}

11
src/features/Posts/pages/FeedPage/styles.module.scss
View File

@@ -1,17 +1,14 @@
.grid {
display: grid;
grid-template-columns: 100%;
gap: 32px;
gap: 24px;
@media screen and (min-width: 768px) {
grid-template-columns: 1fr 2fr 0;
gap: 32px;
grid-template-columns: 1fr 3fr 0;
gap: 24px;
}
@media screen and (min-width: 1024px) {
grid-template-columns:
minmax(200px, 1fr)
minmax(50%, 70ch)
minmax(200px, 1fr);
grid-template-columns: 1fr 2fr 1fr;
}
}

5
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx
View File

@@ -3,12 +3,11 @@ import Skeleton from 'react-loading-skeleton'
export default function ProjectCardMiniSkeleton() {
return (
<div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 items-center" >
<Skeleton width={80} height={80} containerClassName='flex-shrink-0' />
<div className="bg-gray-25 select-none px-16 py-16 flex min-w-[300px] gap-16 border border-gray-200 rounded-10 items-center" >
<Skeleton circle width={64} height={64} containerClassName='flex-shrink-0' />
<div className="justify-around items-start min-w-0">
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"><Skeleton width="15ch" /></p>
<p className="text-body5 text-gray-600 font-light my-[5px]"><Skeleton width="10ch" /></p>
<span className="font-light text-body5"> <Skeleton width="5ch"></Skeleton> </span>
</div>
</div>
);

18
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
View File

@@ -1,5 +1,8 @@
import { MdLocalFireDepartment } from "react-icons/md";
import VoteButton from "src/Components/VoteButton/VoteButton";
import { Vote_Item_Type } from "src/graphql";
import { numberFormatter } from "src/utils/helperFunctions";
import { useVote } from "src/utils/hooks";
import { ProjectCard } from "src/utils/interfaces";
@@ -9,20 +12,25 @@ interface Props {
}
export default function ProjectCardMini({ project, onClick }: Props) {
const { vote } = useVote({
itemId: project.id,
itemType: Vote_Item_Type.Project
});
return (
<div
className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border-2 border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
onClick={() => onClick(project.id)}
className="py-16 select-none px-16 flex items-center gap-16 border-2 border-gray-100 rounded-16 hover:cursor-pointer bg-white hover:bg-gray-250"
onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
tabIndex={0}
>
<img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
<div className="justify-around items-start min-w-0">
<img src={project.thumbnail_image} alt={project.title} onClick={() => onClick(project.id)} draggable="false" className="flex-shrink-0 w-64 h-64 bg-gray-200 border-0 rounded-full"></img>
<div className="justify-around items-start min-w-0 flex-1" onClick={() => onClick(project.id)}>
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
<p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
<span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span>
{/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project.votes_count)} </span> */}
</div>
<VoteButton votes={project.votes_count} direction='vertical' dense onVote={vote}></VoteButton>
</div>
);
}

2
src/features/Projects/pages/ExplorePage/ExplorePage.tsx
View File

@@ -10,7 +10,7 @@ export default function ExplorePage() {
<title>{`Explore Lightning Products`}</title>
<meta property="og:title" content={`Explore Lightning Products`} />
</Helmet>
<div className="page-container">
<div className="page-container pt-16">
<Header />

21
src/features/Projects/pages/ExplorePage/Header/Header.tsx
View File

@@ -9,16 +9,19 @@ import styles from './styles.module.css'
const headerLinks = [
{
title: "A fun directory of Lightning Enabled Applications on the Open Web",
title: <p className="text-body1 font-bolder text-white">Explore a fun directory of lightning web apps</p>,
img: Assets.Images_ExploreHeader1,
link: {
content: "Submit App",
content: "Submit app",
url: "https://form.jotform.com/220301236112030",
},
},
{
title:
"Shock the web is back !! Join us from 16 to 19 June.",
<>
<p className="text-body1 font-bolder text-white">Take part in BOLT🔩FUN’s Shock the Web 2 ⚡️</p>
<p className="text-body3 font-medium text-white mt-8">22nd - 28th March, 2022</p>
</>,
img: Assets.Images_ExploreHeader2,
link: {
content: "Register Now",
@@ -59,11 +62,11 @@ export default function Header() {
alt=""
/>
<div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
<h3 className="text-white text-h4 lg:text-h3 max-w-[80%]">
<div className="max-w-[90%]">
{headerLinks[0].title}
</h3>
</div>
<Button href={headerLinks[0].link.url} newTab color="primary" className="font-regular mt-36">
<Button href={headerLinks[0].link.url} newTab color="white" className="mt-24">
{headerLinks[0].link.content}
</Button>
</div>
@@ -74,10 +77,10 @@ export default function Header() {
alt=""
/>
<div className="w-full h-full object-cover bg-gradient-to-t from-gray-900 absolute top-0 left-0 z-[-1]"></div>
<h3 className="text-white text-h4 lg:text-h3 max-w-[80%]">
<div className="max-w-[90%]">
{headerLinks[1].title}
</h3>
<Button href={headerLinks[1].link.url} newTab className="font-regular mt-36">
</div>
<Button color="white" href={headerLinks[1].link.url} newTab className="mt-24">
{headerLinks[1].link.content}
</Button>
</div>

4
src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
View File

@@ -31,7 +31,7 @@ const responsive = {
// }
function calcNumItems() {
const items = (((window.innerWidth - 2 * 32) / (296 + 20)));
const items = (((window.innerWidth - 2 * 32) / (300 + 20)));
return items;
}
@@ -110,7 +110,7 @@ export default function ProjectsRow({ title, link, projects }: Props) {
}
>
{projects.map((project, idx) =>
<div key={project.id} className='max-w-[296px]'>
<div key={project.id} className='max-w-[300px]' >
<ProjectCardMini project={project} onClick={handleClick} />
</div>
)}

2
src/styles/index.scss
View File

@@ -7,7 +7,7 @@ $screen-xs-min: 320px;
body {
overflow-x: hidden;
background-color: #f8fafc;
background-color: #ffffff;
}
.page-container {