Skip to content

Commit

Permalink
Merge pull request #33 from gdg-uberlandia/fix/mobile-company-imgs
Browse files Browse the repository at this point in the history 
Fix/mobile company imgs
  • Loading branch information
@taciomedeiros
taciomedeiros authored Oct 12, 2023
2 parents e98e55e + 1d1e2c6 commit efdf0de
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 103 deletions.
54 changes: 15 additions & 39 deletions src/components/sponsors-section/Sponsors.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,20 @@
.SponsorSection {}
.SponsorSection {
margin-bottom: 100px;
}

.SponsorSection h2 {
font-size: 2.5rem;
padding-left: 0.75rem;
}

.SponsorWrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(max(152px, 20%), 1fr));
grid-gap: 8px;
padding: 20px 0px;
margin: 0px 5px;
}

@media (min-width: 812px) {
.SponsorWrapper {
grid-template-columns: repeat(5, 1fr);
}
}


@media (min-width: 640px) {
.SponsorWrapper {
grid-template-columns: repeat(4, 1fr);
}

.StaffWrapper {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.StaffCardBody {
width: 130px;
}

.SponsorCardBodyImage {
width: 60%;
}
}

.StaffWrapper {
display: grid;
Expand All @@ -41,23 +24,16 @@
margin: 0px 5px;
}

.StaffCardBody {
position: relative;
width: 100px;
height: 90px;
display: flex;
justify-content: center;
align-items: center;
}

.SponsorCard {
background-color: var(--default-background-color);
box-shadow: 0 0 2px 0 rgb(0 0 0 / 7%), 0 2px 2px 0 rgb(0 0 0 / 15%);
transition: box-shadow var(--animation);
cursor: pointer;
padding: 15px;
padding: 24px 16px;
height: 120px;
display: flex;
justify-content: center;
width: 100%;
}

.SponsorCardBody {
Expand All @@ -69,9 +45,9 @@
}

.SponsorCardBodyImage {
padding: 0px 10px !important;
width: 90%;
object-fit: scale-down;
width: 100%;
max-width: 248px;
object-fit: contain;
}

#sponsors {
Expand Down
11 changes: 3 additions & 8 deletions src/components/sponsors-section/sponsor-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,16 +11,11 @@ interface SponsorCardProps extends Sponsor {

const SponsorCard: React.FC<SponsorCardProps> = (sponsor) => {
return (
<>
<a href={sponsor.url} target="_blank">
<div className={styles.SponsorCard}>
<a href={sponsor.url} target="_blank">
<div className={sponsor.isStaff ? styles.StaffCardBody : styles.SponsorCardBody}>
<img src={sponsor.logo}
className={styles.SponsorCardBodyImage}></img>
</div>
</a>
<img alt={`Logo da empresa ${sponsor.name}`} src={sponsor.logo} className={styles.SponsorCardBodyImage} />
</div>
</>
</a>
);
}

Expand Down
103 changes: 48 additions & 55 deletions src/components/sponsors-section/sponsors-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,10 @@ import {
Col,
} from "reactstrap";
import _supports from '../../hooks/userSupports';


import styles from './Sponsors.module.css'
import SponsorCard from "./sponsor-card";
import { SponsorLevel } from "models/sponsor-level";
import SponsorCard from "./sponsor-card";

import styles from './Sponsors.module.css'

interface StringMap { [key: string]: any; }

Expand All @@ -22,73 +20,68 @@ interface SponsorsSectionProps {
}

const SponsorsSection: React.FC<SponsorsSectionProps> = ({ sponsors }) => {

const supports: StringMap = _supports;

const mapSponsorCard = (sponsor: Sponsor, isStaff: boolean) => {
if (sponsor.logo)
return (<Col key={sponsor.id}><SponsorCard {...sponsor} isStaff={isStaff}></SponsorCard></Col>)
}

const mapSponsorLevel = (sponsorLevel: SponsorLevel, isStaff: boolean) => {
if (sponsorLevel?.items?.length > 0)
return (<div key={sponsorLevel.id}>
<h4>
{sponsorLevel.name}
</h4>
<Row>
<div className={isStaff ? styles.StaffWrapper : styles.SponsorWrapper}>
{
sponsorLevel.items.map((item) => mapSponsorCard(item, isStaff))
}
</div>
</Row>
</div>)
return (
<section key={sponsorLevel.id}>
<h4>
{sponsorLevel.name}
</h4>
<Row>
<div className={isStaff ? styles.StaffWrapper : styles.SponsorWrapper}>
{sponsorLevel.items.map((item) => (
<SponsorCard key={item.id} isStaff={isStaff} {...item} />
))}
</div>
</Row>
</section>
)
return <></>
}


return (
<>
<Container>
<div className={styles.SponsorSection}>
<Container style={{
marginLeft
: '0px'
}}>
<Row >

<Col lg={4} sm={12}><h1 style={{ paddingLeft: '10px' }}>Patrocinadores</h1></Col>
</Row>
</Container>

<Container fluid style={{ marginBottom: '100px', marginTop: '30px' }}>
<Container>
<section className={styles.SponsorSection}>
<Container>
<Row>
<Col lg={4} sm={12}>
<h2>
Patrocinadores
</h2>
</Col>
</Row>
</Container>

{sponsors && (
<Container fluid>
<div id="sponsors">
{SPONSORS_LIST.map((el) => {
if (sponsors != null && sponsors[el] != null)
if (sponsors[el] != null)
return mapSponsorLevel(sponsors[el], el === "staff")
return <></>
})}

{/*<h4>
Organização
</h4>
<div>
<Row>
<div className={styles.SponsorWrapper}>
{
supports.items.map((item: Sponsor) => mapSponsorCard(item, false))
}
</div>
</Row>
</div>*/}
Organização
</h4>
<div>
<Row>
<div className={styles.SponsorWrapper}>
{
supports.items.map((item: Sponsor) => mapSponsorCard(item, false))
}
</div>
</Row>
</div>*/}
</div>
</Container>
</div>
</Container>
</>
)}
</section>
</Container>
);
}

Expand Down
4 changes: 3 additions & 1 deletion src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@ const Home = ({ speakers, sponsors, schedule }: HomePageProps) => {

useEffect(() => {
window.addEventListener("scroll", reveal);
});

return () => window.removeEventListener('scroll', reveal)
}, []);

return (
<>
Expand Down

0 comments on commit efdf0de

Please sign in to comment.