bravo68web
/
url-minify
mirror of https://github.com/BRAVO68WEB/url-minify.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

contributor page made responsive (#130)

This commit is contained in:
Lethal_Moana 2022-03-25 18:11:33 +05:30 committed by GitHub
parent 49d97f6108
commit aef49bf228
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 36 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/components/Contributors/Contributors.jsx
View File

@ -4,6 +4,9 @@ import styles from '../../styles/Contributors.module.css'
import Image from 'next/image'
import profilepic from 'assets/ContributorsImages/sampleImage.jpg'
import { GitHub } from '@mui/icons-material'
import Head from "next/head";
import Script from "next/script";
export default function Contributors() {
const [contributors, setContributors] = useState([
{
@ -62,13 +65,24 @@ export default function Contributors() {
},
])
return (
<>
<Head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossOrigin="anonymous"
/>
</Head>
<Script
id="bootstrap-cdn"
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" />
<ContributorsStyle>
<>
<div className={styles.head}>CONTRIBUTORS</div>
<div className="contributor-cards">
<div class="conatiner contributor-cards">
<div className="contributor-cards row">
{contributors.map((contributor) => {
return (
<div className="contributor-card" key={contributor.id}>
<div className="contributor-card col-3" key={contributor.id}>
<div className="contributor-cardPointerStart">
<div id="circle"></div>
</div>
@ -89,10 +103,13 @@ export default function Contributors() {
</div>
</div>
</div>
)
})}
</div>
</div>
</div>
</>
</ContributorsStyle>
</>
</ContributorsStyle>
)
}

74
frontend/components/Contributors/Contributors.style.js
View File

@ -3,24 +3,25 @@ export default styled.section`
display: flex;
flex-direction: column;
justify-content: center;
.contributor-cards {
margin-top: 100px;
display: grid;
grid-template-columns: auto auto auto auto;
justify-content: space-around;
align-items: center;
grid-gap: 20px;
overflow: scroll;
.contributor-cards{
display: flex;
width: 85%;
align-item: center;
justify-content: center;
margin:20px;
margin-left: 6%
}
.contributor-card {
width: 190px;
height: 210px;
width: 240px;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: #ffffff;
border-radius: 10px;
margin: 15px;
padding: 5px;
}
.contributor-cardPointerStart {
width: 180px;
@ -62,56 +63,5 @@ export default styled.section`
font-weight: bold;
padding-left: 4px;
}
@media (max-width: 600px) {
.contributor-cards {
margin-top: 10px;
display: grid;
grid-template-columns: auto auto auto;
justify-content: space-around;
align-items: center;
grid-gap: 10px;
overflow: scroll;
}
.contributor-card {
width: 170px;
height: 190px;
}
.contributor-cardPointerEnd {
width: 150px;
}
.contributor-cardPointerStart {
width: 150px;
}
.contributor-Name {
font-size: 20px;
}
.contributor-GithubUsername {
font-size: 16px;
}
}
@media (max-width: 400px) {
.contributor-cards {
display: grid;
grid-template-columns: auto auto;
justify-content: space-around;
grid-gap: 10px;
overflow: scroll;
}
.contributor-card {
width: 130px;
height: 190px;
}
.contributor-cardPointerEnd {
width: 120px;
}
.contributor-cardPointerStart {
width: 120px;
}
.contributor-Name {
font-size: 15px;
}
.contributor-GithubUsername {
font-size: 15px;
}
}
`

11
frontend/yarn.lock
View File

@ -401,14 +401,9 @@
"resolved" "https://registry.npmjs.org/@next/env/-/env-12.0.9.tgz"
"version" "12.0.9"
"@next/swc-linux-x64-gnu@12.0.9":
"integrity" "sha512-bJZ9bkMkQzsY+UyWezEZ77GWQ4TzwKeXdayX3U3+aEkL8k5C6eKBXlidWdrhu0teLmaUXIyWerWrLnJzwGXdfw=="
"resolved" "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-12.0.9.tgz"
"version" "12.0.9"
"@next/swc-linux-x64-musl@12.0.9":
"integrity" "sha512-SR9p0R+v1T32DTXPVAXZw31pmJAkSDotC6Afy+mfC0xrEL3pp95R8sGXYAAUCEPkQp0MEeUOVy2LrToe92X7hQ=="
"resolved" "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-12.0.9.tgz"
"@next/swc-win32-x64-msvc@12.0.9":
"integrity" "sha512-1c/sxp/4Qz4F6rCxiYqAnrmghCOFt5hHZ9Kd+rXFW5Mqev4C4XDOUMHdBH55HgnJZqngYhOE0r/XNkCtsIojig=="
"resolved" "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-12.0.9.tgz"
"version" "12.0.9"
"@popperjs/core@^2.10.1", "@popperjs/core@^2.10.2", "@popperjs/core@^2.4.4":