Skip to content

Commit

Permalink
Merge pull request #38 from maite-l/dev
Browse files Browse the repository at this point in the history 
started mobile design for homepage
  • Loading branch information
@maite-l
maite-l committed Jun 20, 2023
2 parents b777d9b + 10e8526 commit b7963e5
Show file tree
Hide file tree
Showing 13 changed files with 294 additions and 123 deletions.
8 changes: 4 additions & 4 deletions client/src/components/home/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Header({ allMagazineSections, openModal }) {

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth >= 880); // Adjust the breakpoint as needed
setIsMobile(window.innerWidth <= 880); // Adjust the breakpoint as needed
};

// Listen for window resize events
Expand Down Expand Up @@ -45,7 +45,7 @@ export default function Header({ allMagazineSections, openModal }) {
</svg>

</div>
{isMobile ? (
{!isMobile ? (
<a href="#featured-submissions" className="scroll-button">
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M27 0C12.0883 0 0 12.0883 0 27C0 41.9117 12.0883 54 27 54C41.9117 54 54 41.9117 54 27C54 12.0883 41.9117 0 27 0ZM28.0607 37.8596L37.6066 28.3137C38.1924 27.7279 38.1924 26.7782 37.6066 26.1924C37.0208 25.6066 36.0711 25.6066 35.4853 26.1924L28.5 33.1777V17C28.5 16.1716 27.8284 15.5 27 15.5C26.1716 15.5 25.5 16.1716 25.5 17V33.1777L18.5147 26.1924C17.9289 25.6066 16.9792 25.6066 16.3934 26.1924C15.8076 26.7782 15.8076 27.7279 16.3934 28.3137L25.9393 37.8596C26.5251 38.4454 27.4749 38.4454 28.0607 37.8596Z" fill="#030027" />
Expand All @@ -56,15 +56,15 @@ export default function Header({ allMagazineSections, openModal }) {
)}
</div>
<RollingCards allMagazineSections={allMagazineSections} />
{!isMobile ? (
{/* {!isMobile ? (
<a href="#featured-submissions" className="scroll-button--mobile">
<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fillRule="evenodd" clipRule="evenodd" d="M27 0C12.0883 0 0 12.0883 0 27C0 41.9117 12.0883 54 27 54C41.9117 54 54 41.9117 54 27C54 12.0883 41.9117 0 27 0ZM28.0607 37.8596L37.6066 28.3137C38.1924 27.7279 38.1924 26.7782 37.6066 26.1924C37.0208 25.6066 36.0711 25.6066 35.4853 26.1924L28.5 33.1777V17C28.5 16.1716 27.8284 15.5 27 15.5C26.1716 15.5 25.5 16.1716 25.5 17V33.1777L18.5147 26.1924C17.9289 25.6066 16.9792 25.6066 16.3934 26.1924C15.8076 26.7782 15.8076 27.7279 16.3934 28.3137L25.9393 37.8596C26.5251 38.4454 27.4749 38.4454 28.0607 37.8596Z" fill="#030027" />
</svg>
</a>
) : (
null
)}
)} */}
</div>
);
}
Expand Down
152 changes: 107 additions & 45 deletions client/src/components/home/ProgressBar.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,131 @@
import { useState, useEffect } from 'react';


export default function ProgressBar({ date, progressBarPercentage }) {

let progressBar;

if (progressBarPercentage >= 0 && progressBarPercentage < 15) {
progressBar = (
<div className="progress">
<div className="progress-bar">
<div className="progress-bar__bar--wrapper">
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}></div>
<div className="progress-bar__info small">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth <= 880); // Adjust the breakpoint as needed
};

// Listen for window resize events
window.addEventListener('resize', handleResize);

// Initial check on component mount
handleResize();

// Clean up the event listener on component unmount
return () => window.removeEventListener('resize', handleResize);
}, []);


if (!isMobile) {
if (progressBarPercentage >= 0 && progressBarPercentage < 15) {
progressBar = (
<div className="progress">
<div className="progress-bar">
<div className="progress-bar__bar--wrapper">
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}></div>
<div className="progress-bar__info small">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>
</div>
</div>
</div>
</div>
<div className="progress-bar__cta">
<div className="progress-bar__cta--wrapper">
<p className="progress-bar__issue">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<a className="progress-bar__contribute" href="/submit">contribute now</a>
<div className="progress-bar__cta">
<div className="progress-bar__cta--wrapper">
<p className="progress-bar__issue">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<a className="progress-bar__contribute" href="/submit">contribute now</a>
</div>
</div>
</div>
</div>
</div>
);
} else if (progressBarPercentage >= 15 && progressBarPercentage <= 80) {
progressBar = (
<div className="progress">
<div className="progress-bar">
<div className="progress-bar__cta">
<div className="progress-bar__cta--wrapper">
<p className="progress-bar__issue">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<a className="progress-bar__contribute" href="/submit">contribute now</a>
);
} else if (progressBarPercentage >= 15 && progressBarPercentage <= 80) {
progressBar = (
<div className="progress">
<div className="progress-bar">
<div className="progress-bar__cta">
<div className="progress-bar__cta--wrapper">
<p className="progress-bar__issue">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<a className="progress-bar__contribute" href="/submit">contribute now</a>
</div>
</div>
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}>
<div className="progress-bar__info">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>
</div>
</div>
</div>
</div>
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}>
<div className="progress-bar__info">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>
</div>
);
} else {
progressBar = (
<div className="progress">
<p className="progress-bar__issue big">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<div className="progress-bar">
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}>
<div className="progress-bar__info">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>
</div>
</div>
</div>
</div>
<a className="progress-bar__contribute big" href="/submit">contribute now</a>
</div>
</div>
);
);
}
} else {
progressBar = (
<div className="progress">
<p className="progress-bar__issue big">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<div className="progress-bar">
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}>
<div className="progress-bar__info">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>
if (progressBarPercentage >= 0 && progressBarPercentage < 50) {
progressBar = (
<div className="progress">
<p className="progress-bar__issue big">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<div className="progress-bar">
<div className="progress-bar__bar--wrapper">
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}></div>
<div className="progress-bar__info small">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>
</div>
</div>
</div>
</div>
<a className="progress-bar__contribute big" href="/submit">contribute now</a>
</div>
<a className="progress-bar__contribute big" href="/submit">contribute now</a>
</div>
);
);
} else if (progressBarPercentage >= 50 && progressBarPercentage) {
progressBar = (
<div className="progress">
<p className="progress-bar__issue big">{date.split(' ')[0]} <span className="italic-semibold">klinkt.</span> issue</p>
<div className="progress-bar">
<div className="progress-bar__bar" style={{ width: `${progressBarPercentage}%` }}>
<div className="progress-bar__info">
<div className="progress-bar__info--wrapper">
<div className="progress-bar__percentage">{progressBarPercentage}%</div>
<div className="progress-bar__text">completed</div>
</div>
</div>
</div>
</div>
<a className="progress-bar__contribute big" href="/submit">contribute now</a>
</div>
);
}
}

return progressBar;

}
}

2 changes: 1 addition & 1 deletion client/src/components/home/RollingCards.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function RollingCards({ allMagazineSections }) {

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth >= 880); // Adjust the breakpoint as needed
setIsMobile(window.innerWidth <= 880); // Adjust the breakpoint as needed
};

// if (!isMobile) {
Expand Down
48 changes: 37 additions & 11 deletions client/src/components/home/TotalSubmissions.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,47 @@
export default function TotalSubmissions({allSubmissionsAmount, cursorPosition}) {
import { useState, useEffect } from 'react';

export default function TotalSubmissions({ allSubmissionsAmount, cursorPosition }) {

const [isMobile, setIsMobile] = useState(false);

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth <= 880); // Adjust the breakpoint as needed
};

// Listen for window resize events
window.addEventListener('resize', handleResize);

// Initial check on component mount
handleResize();

// Clean up the event listener on component unmount
return () => window.removeEventListener('resize', handleResize);
}, []);

return (
<>
<a className="total-submissions" href="/submit">
<svg width="105" height="148" viewBox="0 0 105 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.9688 5C27.1116 5.35714 29.1123 6.72917 30.92 7.82431C41.474 14.2183 51.4832 21.5015 61.6343 28.5023C73.1514 36.4451 84.8272 44.5876 97.5938 50.3906" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M5 78.5327H99.4125" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M22.25 142.08C35.3878 136.368 48.9397 131.262 62.1938 125.739" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
</svg>
{!isMobile ? (
<svg width="105" height="148" viewBox="0 0 105 148" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M24.9688 5C27.1116 5.35714 29.1123 6.72917 30.92 7.82431C41.474 14.2183 51.4832 21.5015 61.6343 28.5023C73.1514 36.4451 84.8272 44.5876 97.5938 50.3906" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M5 78.5327H99.4125" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M22.25 142.08C35.3878 136.368 48.9397 131.262 62.1938 125.739" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
</svg>
) : (null)}

<div>
<p className="total-submissions__title">Total number of voices heard in <span className="italic">klinkt.</span></p>
<p className="total-submissions__number">{allSubmissionsAmount}</p>
</div>
<svg width="93" height="165" viewBox="0 0 93 165" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 60.395C24.7981 41.4218 45.5291 22.3641 66.7518 5" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M6.8125 90.3623H87.6347" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M5.90625 130.319C16.5451 136.122 26.4183 143.37 36.8831 149.491C43.1955 153.183 50.3114 158.153 57.6688 159.379" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
</svg>
{!isMobile ? (
<svg width="93" height="165" viewBox="0 0 93 165" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 60.395C24.7981 41.4218 45.5291 22.3641 66.7518 5" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M6.8125 90.3623H87.6347" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
<path d="M5.90625 130.319C16.5451 136.122 26.4183 143.37 36.8831 149.491C43.1955 153.183 50.3114 158.153 57.6688 159.379" stroke="#E55934" strokeWidth="10" strokeLinecap="round" />
</svg>
) : (null)}

</a>
<div
className="cursor-content"
Expand Down
2 changes: 1 addition & 1 deletion client/src/css/archive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
background-color: var(--color-orange);
box-shadow: var(--drop-shadow);
color: var(--color-white);
font-size: 1rem;
font-size: var(--font-size-0);
margin-block-start: -0.5rem;
margin-inline-start: -0.5rem;
}
3 changes: 2 additions & 1 deletion client/src/css/auth.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

.auth-wrapper h2 {
font-family: 'Metropolis Medium';
font-size: 1.8rem;
font-size: var(--font-size-3);
line-height: 1.2;
}

Expand Down Expand Up @@ -51,6 +51,7 @@
}
.auth-wrapper p:last-of-type a {
text-decoration: underline 2px var(--color-black);
-webkit-text-decoration-line: underline;
margin-inline-start: 0.4rem;
}

Expand Down
Loading

0 comments on commit b7963e5

Please sign in to comment.