From 265e036d2fea86137c8edb8b85cc82d5d7425326 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 10 Jan 2023 14:07:55 -0300 Subject: [PATCH 1/6] create: network page wireframe --- .../Functionalities/pages/Network/index.jsx | 16 +++++++++-- .../Functionalities/pages/Network/styled.jsx | 27 +++++++++++++++++-- 2 files changed, 39 insertions(+), 4 deletions(-) diff --git a/src/components/Functionalities/pages/Network/index.jsx b/src/components/Functionalities/pages/Network/index.jsx index c10b5bd..661059b 100644 --- a/src/components/Functionalities/pages/Network/index.jsx +++ b/src/components/Functionalities/pages/Network/index.jsx @@ -1,8 +1,20 @@ -// import { useEffect, useRef } from 'react'; import { Container } from "./styled"; +import Navbar from "../../../Navbar"; const Parallax = (props) => { - return ; + return ( + + +
+
+
+
+
+
+
+
+ + ); }; export default Parallax; diff --git a/src/components/Functionalities/pages/Network/styled.jsx b/src/components/Functionalities/pages/Network/styled.jsx index 1efd61e..c5bcfb1 100644 --- a/src/components/Functionalities/pages/Network/styled.jsx +++ b/src/components/Functionalities/pages/Network/styled.jsx @@ -1,6 +1,29 @@ import styled from "styled-components"; export const Container = styled.div` - outline: 1px solid red; - min-height: 100vh; + padding-top: calc(3rem - 5px); + border: 1px solid green; + &, + * { + box-sizing: border-box; + } + .wrapper { + width: 100%; + min-height: calc(100vh - 3rem + 3px); + max-width: 1300px; + margin: 0 auto; + display: flex; + .left-box { + outline: 1px solid blue; + flex: 0 1 300px; + .left-content { + } + } + .main-panel { + outline: 1px solid purple; + flex: 1 1 300px; + .main-content { + } + } + } `; From 469d12a39fb7699741e15b3e87884cd1b91930ba Mon Sep 17 00:00:00 2001 From: = Date: Tue, 10 Jan 2023 23:08:02 -0300 Subject: [PATCH 2/6] feature: partial work in users network --- .../Functionalities/pages/Network/api.js | 28 ++++ .../Functionalities/pages/Network/index.jsx | 61 ++++++- .../Functionalities/pages/Network/styled.jsx | 158 +++++++++++++++++- 3 files changed, 241 insertions(+), 6 deletions(-) create mode 100644 src/components/Functionalities/pages/Network/api.js diff --git a/src/components/Functionalities/pages/Network/api.js b/src/components/Functionalities/pages/Network/api.js new file mode 100644 index 0000000..37031a8 --- /dev/null +++ b/src/components/Functionalities/pages/Network/api.js @@ -0,0 +1,28 @@ +export const receivedRequests = [ + { + name: "Deanna Scott", + image: { + url: "https://randomuser.me/api/portraits/women/82.jpg", + }, + }, + { + name: "Erik Armstrong", + image: { + url: "https://randomuser.me/api/portraits/men/0.jpg", + }, + }, +]; +export const sentRequests = [ + { + name: "Deanna Scott", + image: { + url: "https://randomuser.me/api/portraits/women/82.jpg", + }, + }, + { + name: "Erik Armstrong", + image: { + url: "https://randomuser.me/api/portraits/men/0.jpg", + }, + }, +]; diff --git a/src/components/Functionalities/pages/Network/index.jsx b/src/components/Functionalities/pages/Network/index.jsx index 661059b..64975b5 100644 --- a/src/components/Functionalities/pages/Network/index.jsx +++ b/src/components/Functionalities/pages/Network/index.jsx @@ -1,16 +1,73 @@ import { Container } from "./styled"; import Navbar from "../../../Navbar"; +import { receivedRequests as RR, sentRequests as SR } from "./api"; +import { useState } from "react"; +import { IoClose, IoCheckmark } from "react-icons/io5"; const Parallax = (props) => { + const [sentRequests, useSentRequests] = useState(SR); + const [receivedRequests, setReceivedRequests] = useState(RR); + return (
-
+
+
+

Users Network

+
+
+
+ +
+
+
+ {sentRequests && ( +
+
+

Pending

+
+ {sentRequests.map((request) => { + return ( +
+
+ +
+ + {request.name} + +
+ + +
+
+ ); + })} +
+ )} + {receivedRequests && ( +
+
+
+ )} +
+
-
+
+
+

+ Results For Lorem Ipsum Dolor +

+
+
diff --git a/src/components/Functionalities/pages/Network/styled.jsx b/src/components/Functionalities/pages/Network/styled.jsx index c5bcfb1..d556afd 100644 --- a/src/components/Functionalities/pages/Network/styled.jsx +++ b/src/components/Functionalities/pages/Network/styled.jsx @@ -1,11 +1,18 @@ import styled from "styled-components"; export const Container = styled.div` + @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); padding-top: calc(3rem - 5px); border: 1px solid green; &, * { box-sizing: border-box; + transition: 120ms ease-in-out; + font-family: "Inter", sans-serif; + } + * ::selection { + background-color: #077a7a; + color: #ffffff; } .wrapper { width: 100%; @@ -13,16 +20,159 @@ export const Container = styled.div` max-width: 1300px; margin: 0 auto; display: flex; + flex-wrap: wrap; .left-box { - outline: 1px solid blue; - flex: 0 1 300px; + flex: 1 2 300px; + padding: 0.6rem; + margin: 0 auto; + max-width: 300px; .left-content { + background-color: #ebebeb; + height: 100%; + width: 100%; + position: relative; + .header-container { + & ::selection { + background-color: #ebebeb; + color: #077a7a; + } + &::before { + content: ""; + position: absolute; + width: 20px; + height: 20px; + background-color: #077a7a; + bottom: -10px; + left: 0; + transform: rotateY("45deg"); + clip-path: polygon(56% 0, 55% 100%, 3% 51%, 4% 0); + } + background-color: #077a7a; + width: calc(100% + 10px); + right: 0; + padding: 0.8rem 1rem; + display: flex; + transform: translateX(-10px); + justify-content: flex-start; + h1 { + font-weight: 500; + font-size: 1.8rem; + color: #ededed; + margin-left: 1rem; + } + } + .search-container { + display: flex; + padding: 1rem; + .outline { + width: 100%; + input { + width: 100%; + text-indent: 1rem; + &::placeholder { + font-size: 18px; + font-weight: 300; + color: #2e2e2e95; + } + height: 40px; + border: 2px solid #d9d9d9; + &:focus, + &:focus-visible, + &:focus-within { + outline: none; + transform: scale(1.01); + } + } + } + } + .sections { + .pending { + width: 100%; + display: flex; + flex-direction: column; + row-gap: 1rem; + margin-bottom: 2rem; + .sections-header-container { + background-color: #077a7a9e; + padding: 0.5rem; + & ::selection { + background-color: #ebebeb; + color: #077a7a; + } + h1 { + margin-left: 1rem; + color: #ffffff; + letter-spacing: 1.5px; + font-weight: 400; + } + } + .request-container { + background-color: #d2d2d2; + display: flex; + column-gap: 1rem; + justify-content: space-between; + align-items: center; + padding: 0 1rem; + .img-wrapper { + width: 40px; + img { + transform: scale(1.2) translateY(2px); + border: 2px solid #18939386; + width: 100%; + &:hover { + transform: scale(1.5) translateY(2px); + } + } + } + .name { + flex: 1 1 0; + font-size: 12px; + font-weight: 600; + color: #1c5c7e; + } + .options { + flex: 0 0 40px; + display: flex; + justify-content: space-between; + .icon { + transition: 50ms ease-in-out; + width: 18px; + height: 18px; + &:hover { + transform: scale(1.05); + opacity: 90%; + } + &:active { + transform: scale(0.98); + } + &.icon-reject { + background-color: white; + color: #009999; + &:hover { + border: 0.2px solid #009999; + } + } + &.icon-accept { + background-color: #009999; + color: white; + &:hover { + border: 0.2px solid #ffffff; + } + } + } + } + } + } + } } } .main-panel { - outline: 1px solid purple; - flex: 1 1 300px; + flex: 6 1 300px; + padding: 0.6rem; .main-content { + background-color: #ebebeb; + height: 100%; + width: 100%; } } } From a94cbab49d78e84e4719b898087304bbd77a9b3d Mon Sep 17 00:00:00 2001 From: = Date: Tue, 10 Jan 2023 23:17:10 -0300 Subject: [PATCH 3/6] fix: overflow --- .../Functionalities/pages/Network/index.jsx | 1 + .../Functionalities/pages/Network/styled.jsx | 33 +++++++++++++++++++ 2 files changed, 34 insertions(+) diff --git a/src/components/Functionalities/pages/Network/index.jsx b/src/components/Functionalities/pages/Network/index.jsx index 64975b5..e19bb07 100644 --- a/src/components/Functionalities/pages/Network/index.jsx +++ b/src/components/Functionalities/pages/Network/index.jsx @@ -67,6 +67,7 @@ const Parallax = (props) => { Results For Lorem Ipsum Dolor +
diff --git a/src/components/Functionalities/pages/Network/styled.jsx b/src/components/Functionalities/pages/Network/styled.jsx index d556afd..b3f100e 100644 --- a/src/components/Functionalities/pages/Network/styled.jsx +++ b/src/components/Functionalities/pages/Network/styled.jsx @@ -4,6 +4,9 @@ export const Container = styled.div` @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); padding-top: calc(3rem - 5px); border: 1px solid green; + background-color: #c1c1c1; + border: 1px solid red; + overflow: scroll; &, * { box-sizing: border-box; @@ -173,6 +176,36 @@ export const Container = styled.div` background-color: #ebebeb; height: 100%; width: 100%; + .header-container { + & ::selection { + background-color: #ebebeb; + color: #077a7a; + } + &::before { + content: ""; + position: absolute; + width: 20px; + height: 20px; + background-color: #077a7a; + bottom: -10px; + left: 0; + transform: rotateY("45deg"); + clip-path: polygon(56% 0, 55% 100%, 3% 51%, 4% 0); + } + background-color: #077a7a; + width: calc(100% + 10px); + right: 0; + padding: 0.8rem 1rem; + display: flex; + transform: translateX(-10px); + justify-content: flex-start; + h1 { + font-weight: 500; + font-size: 1.8rem; + color: #ededed; + margin-left: 1rem; + } + } } } } From 14f91e60ce6d9fdd4d666fed7ced3de96c094b24 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 10 Jan 2023 23:22:20 -0300 Subject: [PATCH 4/6] style: page box-shadow --- src/components/Functionalities/pages/Network/styled.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Functionalities/pages/Network/styled.jsx b/src/components/Functionalities/pages/Network/styled.jsx index b3f100e..b82e9d2 100644 --- a/src/components/Functionalities/pages/Network/styled.jsx +++ b/src/components/Functionalities/pages/Network/styled.jsx @@ -30,6 +30,7 @@ export const Container = styled.div` margin: 0 auto; max-width: 300px; .left-content { + box-shadow: 1px 1px 15px #046b6b28; background-color: #ebebeb; height: 100%; width: 100%; @@ -173,6 +174,7 @@ export const Container = styled.div` flex: 6 1 300px; padding: 0.6rem; .main-content { + box-shadow: 1px 1px 15px #046b6b28; background-color: #ebebeb; height: 100%; width: 100%; From 2c4d5c5b2c382a54b789582494e146e9d0e71412 Mon Sep 17 00:00:00 2001 From: = Date: Thu, 12 Jan 2023 03:21:52 -0300 Subject: [PATCH 5/6] network page popup and effects --- .../Functionalities/pages/Network/api.js | 8 +- .../Functionalities/pages/Network/index.jsx | 128 ++++++++++++++++-- .../Functionalities/pages/Network/styled.jsx | 117 +++++++++++++++- src/components/Navbar.jsx | 2 +- 4 files changed, 235 insertions(+), 20 deletions(-) diff --git a/src/components/Functionalities/pages/Network/api.js b/src/components/Functionalities/pages/Network/api.js index 37031a8..fc3c7a0 100644 --- a/src/components/Functionalities/pages/Network/api.js +++ b/src/components/Functionalities/pages/Network/api.js @@ -1,15 +1,17 @@ export const receivedRequests = [ { - name: "Deanna Scott", + name: "Leta Dean", image: { - url: "https://randomuser.me/api/portraits/women/82.jpg", + url: "https://randomuser.me/api/portraits/women/79.jpg", }, + bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. corrupti earum officiis. Ad cum error natus asperiores quidem?", }, { name: "Erik Armstrong", image: { url: "https://randomuser.me/api/portraits/men/0.jpg", }, + bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.", }, ]; export const sentRequests = [ @@ -18,11 +20,13 @@ export const sentRequests = [ image: { url: "https://randomuser.me/api/portraits/women/82.jpg", }, + bio: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Um officiis dolor vel molestias quidem dicta perferendis praesentium inventore", }, { name: "Erik Armstrong", image: { url: "https://randomuser.me/api/portraits/men/0.jpg", }, + bio: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. ex laudantium explicabo maxime! Nisi obcaecati et adipisci cum.", }, ]; diff --git a/src/components/Functionalities/pages/Network/index.jsx b/src/components/Functionalities/pages/Network/index.jsx index e19bb07..833e0cb 100644 --- a/src/components/Functionalities/pages/Network/index.jsx +++ b/src/components/Functionalities/pages/Network/index.jsx @@ -1,13 +1,18 @@ import { Container } from "./styled"; import Navbar from "../../../Navbar"; import { receivedRequests as RR, sentRequests as SR } from "./api"; -import { useState } from "react"; -import { IoClose, IoCheckmark } from "react-icons/io5"; +import { useEffect, useState } from "react"; +import { IoClose, IoCheckmark, IoSearch } from "react-icons/io5"; -const Parallax = (props) => { +const Network = (props) => { const [sentRequests, useSentRequests] = useState(SR); const [receivedRequests, setReceivedRequests] = useState(RR); + const [scrollPos, setScrollPos] = useState({ + start: true, + end: false, + }); + return ( @@ -21,16 +26,50 @@ const Parallax = (props) => {
+ -
+
{ + const calc = e.target.scrollHeight - e.target.offsetHeight; + if (e.target.scrollTop === calc) { + setScrollPos(({ start, end }) => { + return { start, end: true }; + }); + } else if (e.target.scrollTop === 0) { + setScrollPos(({ start, end }) => { + return { start: true, end }; + }); + } else { + setScrollPos(() => { + return { start: false, end: false }; + }); + } + }} + > +
{sentRequests && ( -
+
-

Pending

+

Requests

- {sentRequests.map((request) => { + {sentRequests.map((request, i) => { return ( -
+
{ />
- {request.name} + + {request.name} +
+
+ +
+
+
{request.name}
+
{request.bio}
+
+
+
@@ -53,9 +109,53 @@ const Parallax = (props) => {
)} {receivedRequests && ( -
-
-
+
+
+

Pending

+
+ {receivedRequests.map((request, i) => { + return ( +
+
+ +
+ +
+
+
+ +
+
+
{request.name}
+
{request.bio}
+
+
+ {request.name} + pending +
+ +
+ +
+
+ ); + })} +
)}
@@ -64,7 +164,7 @@ const Parallax = (props) => {

- Results For Lorem Ipsum Dolor + Results For Lorem Ipsum Dolor:

@@ -75,4 +175,4 @@ const Parallax = (props) => { ); }; -export default Parallax; +export default Network; diff --git a/src/components/Functionalities/pages/Network/styled.jsx b/src/components/Functionalities/pages/Network/styled.jsx index b82e9d2..4a86d18 100644 --- a/src/components/Functionalities/pages/Network/styled.jsx +++ b/src/components/Functionalities/pages/Network/styled.jsx @@ -5,8 +5,13 @@ export const Container = styled.div` padding-top: calc(3rem - 5px); border: 1px solid green; background-color: #c1c1c1; - border: 1px solid red; overflow: scroll; + .navbar { + * ::selection { + background-color: #ebebeb; + color: #077a7a; + } + } &, * { box-sizing: border-box; @@ -68,18 +73,22 @@ export const Container = styled.div` .search-container { display: flex; padding: 1rem; + column-gap: 0.2rem; .outline { + flex: 1 1 1; width: 100%; input { width: 100%; text-indent: 1rem; + font-size: 18px; + font-weight: 300; &::placeholder { font-size: 18px; font-weight: 300; color: #2e2e2e95; } height: 40px; - border: 2px solid #d9d9d9; + border: 2px solid #0087875d; &:focus, &:focus-visible, &:focus-within { @@ -88,9 +97,44 @@ export const Container = styled.div` } } } + .search-btn { + width: 40px; + height: 40px; + flex: 0 0 40px; + background-color: #009999; + border: none; + &:hover { + background-color: #008484; + } + &:active { + background-color: #009b9b; + transform: scale(0.95); + } + .icon { + border: none; + } + } } .sections { - .pending { + box-shadow: 0 0 5px #00000036; + position: relative; + .shadow-start { + width: 100%; + height: 5px; + position: absolute; + top: 430px; + box-shadow: 0 0 5px #000b29; + } + .shadow-end { + width: 100%; + height: 5px; + position: absolute; + top: 242px; + box-shadow: 0 0 5px #000b29; + } + max-height: 430px; + overflow-y: scroll; + .section { width: 100%; display: flex; flex-direction: column; @@ -128,12 +172,75 @@ export const Container = styled.div` } } } + .middle { + display: flex; + flex: 1 1 0; + flex-wrap: wrap; + flex-direction: column; + position: relative; + &:hover { + .popup { + display: flex; + } + } + .popup { + bottom: 0; + left: -50px; + } + .status { + font-size: 12px; + font-weight: 200; + } + } + .popup { + display: none; + background-color: #077a7a; + width: 180px; + height: 200px; + position: absolute; + z-index: 10; + padding: 0.5rem; + column-gap: 0.5rem; + + .img-wrapper { + flex: 1 0 45px; + height: 100%; + } + .content-wrapper { + display: flex; + flex-direction: column; + justify-content: flex-start; + row-gap: 0.4rem; + .name { + color: #ededed; + flex: 0 1 10px; + } + .bio { + flex: 1 1 10px; + font-size: 11px; + color: #d2d2d2; + font-weight: 200; + } + } + } + .name { flex: 1 1 0; font-size: 12px; font-weight: 600; color: #1c5c7e; + position: relative; + &:hover { + .popup { + display: flex; + } + } + .popup { + top: 0; + left: -50px; + } } + .options { flex: 0 0 40px; display: flex; @@ -164,6 +271,10 @@ export const Container = styled.div` } } } + + &.received { + justify-content: flex-end; + } } } } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index d9fae5d..24a2429 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -47,7 +47,7 @@ const Navbar = (props) => { }, []); return ( - + From 53521667c40d3bb7961d92930310f78b2c86cbbc Mon Sep 17 00:00:00 2001 From: = Date: Thu, 12 Jan 2023 14:49:01 -0300 Subject: [PATCH 6/6] removed shadow from network --- .../Functionalities/pages/Network/index.jsx | 5 ----- .../Functionalities/pages/Network/styled.jsx | 14 -------------- 2 files changed, 19 deletions(-) diff --git a/src/components/Functionalities/pages/Network/index.jsx b/src/components/Functionalities/pages/Network/index.jsx index 833e0cb..a3f5bbe 100644 --- a/src/components/Functionalities/pages/Network/index.jsx +++ b/src/components/Functionalities/pages/Network/index.jsx @@ -54,11 +54,6 @@ const Network = (props) => { } }} > -
{sentRequests && (
diff --git a/src/components/Functionalities/pages/Network/styled.jsx b/src/components/Functionalities/pages/Network/styled.jsx index 4a86d18..06b7244 100644 --- a/src/components/Functionalities/pages/Network/styled.jsx +++ b/src/components/Functionalities/pages/Network/styled.jsx @@ -118,20 +118,6 @@ export const Container = styled.div` .sections { box-shadow: 0 0 5px #00000036; position: relative; - .shadow-start { - width: 100%; - height: 5px; - position: absolute; - top: 430px; - box-shadow: 0 0 5px #000b29; - } - .shadow-end { - width: 100%; - height: 5px; - position: absolute; - top: 242px; - box-shadow: 0 0 5px #000b29; - } max-height: 430px; overflow-y: scroll; .section {