Skip to content

Marko profile page header responsiveness ( userprofile img, searchbox, connectwallet) #151

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
markosavicmidusa wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Marko profile page header responsiveness ( userprofile img, searchbox, connectwallet) #151

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5167573
positioning elements from connect wallet -NavBar
Mar 4, 2022
ad32467
Merge branch 'main' of https://github.com/MinorityProgrammers/MPA-web…
Mar 4, 2022
5371d59
changing the margin in user not signed-in
Mar 5, 2022
60f7cca
adding functionallity onKeyDown, when user hits enter the function w…
Mar 8, 2022
9076069
removing orientation borders
Mar 10, 2022
31d408b
changing the style of the text
Mar 12, 2022
da93488
changing the size of the text
Mar 12, 2022
a8b9168
changing the size of the text
Mar 12, 2022
20789c9
changing the style of the connect button
Mar 13, 2022
f58f0e9
changing teh scale of the nav-bar input, connect-wallet and img.
Mar 13, 2022
7a4ced0
deleting the orientation-borders
Mar 13, 2022
a11780c
bringing back the old code for search-logic
Mar 14, 2022
b1a2857
connect button styling with small changesin text size between mobile …
Mar 14, 2022
1761cbb
commented searchbox input
Mar 14, 2022
a625009
commented the search box on mobile sreens
Mar 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/Account.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ const Account = () => {
<div className={styles.modalHeader}>
<div />
<div className={styles.modalWrapper}>
<div className={styles.modalImage}>
<div className={styles.modalImage}>
<img src="/assets/images/mpicon.svg" alt="logo" />
</div>
<h2 className="tw-flex-1 tw-text-white tw-text-center tw-w-full tw-font-bold tw-text-lg">
Expand Down
73 changes: 49 additions & 24 deletions components/homepage/HomepageNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,39 @@ const HomepageNav = ({
const regex = /\b\w+/;
if (!regex.test(e.target.value) && e.target.value !== '') return;
setSearch(e.target.value);
router.push({
/*router.push({
pathname: router.pathname,
query: { _q: encodeURI(e.target.value) },
Copy link
Collaborator

@Ebube111 Ebube111 Mar 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean up, if commented out code would not be used in the future

Copy link
Author

@markosavicmidusa markosavicmidusa Mar 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

solved

Copy link
Collaborator

@Ebube111 Ebube111 Mar 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool

});
});*/
};

const handleKeyDown = (e) => {
if (e.key === 'Enter') {
console.log('Enter is pressed !');
router.push({
pathname: router.pathname,
query: { _q: encodeURI(searchValue) },
});
}
}

const handleSearchIconSubmit = () => {
console.log(router.pathname)
console.log(searchValue)
router.push({
pathname: router.pathname,
query: { _q: encodeURI(searchValue) },
});
}


const handleSubmit = () => {
const regex = /\b\w+/;
if (!regex.test(searchValue)) return;
setSearch('');
router.push({
pathname: '/search',
query: { _q: searchValue },
pathname: router.pathname,
query: { _q: encodeURI(searchValue) },
});
};

Expand Down Expand Up @@ -191,6 +211,7 @@ const HomepageNav = ({
<div className="mobile-searchBox">
<input
onChange={handleSearch}
onKeyDown={handleKeyDown}
value={searchValue}
className="mobile-searchInput"
type="text"
Expand All @@ -200,8 +221,8 @@ const HomepageNav = ({
<button
type="button"
className="mobile-searchButton"
href="#"
onClick={onClickSearch}
onClick={handleSearchIconSubmit}

>
<i className="fas fa-search" />
</button>
Expand All @@ -215,8 +236,8 @@ const HomepageNav = ({
ref={dropdownMobileRef}
>
{userData !== null && userData !== undefined ? (
<div className="nav__mobile-profile tw:z-10">
<div className="nav__mobile-img">
<div style={{border:"1px solid red"}} className="nav__mobile-profile tw:z-10">
<div style={{border:"1px solid red"}} className="nav__mobile-img">
Copy link
Collaborator

@Ebube111 Ebube111 Mar 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since you're just adding a border and not manipulating the DOM, why not add it to the className instead, or better still use tailwind, so we can stick to classNames. for consistency. WDYT ??

Copy link
Author

@markosavicmidusa markosavicmidusa Mar 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

solved

Copy link
Author

@markosavicmidusa markosavicmidusa Mar 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these are my oriantation borders, before I was interducing tailwind...I forgot to delete them

Copy link
Collaborator

@Ebube111 Ebube111 Mar 13, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool

<img
src={
userData.profilePicture
Expand Down Expand Up @@ -300,7 +321,7 @@ const HomepageNav = ({
</a>
</ul>
{userData !== null && userData !== undefined ? (
<ul className="nav__mobile-items">
<ul className="nav__mobile-items" >
<a
href={`${
userData.userName
Expand All @@ -309,7 +330,7 @@ const HomepageNav = ({
}`}
onClick={closeMobileMenu}
>
<li className="nav-item">
<li style={{border:"1px solid red"}} className="nav-item" >
<div className="nav__mobile-link">Profile</div>
</li>
</a>
Expand All @@ -321,6 +342,8 @@ const HomepageNav = ({
</div>
);



return (
<header
className="homepage__header"
Expand All @@ -338,7 +361,7 @@ const HomepageNav = ({
}`}
>
{isLogin === true && (
<div
<div
className="hamburger-icon tw-cursor-pointer"
onClick={() => setOpen(!open)}
>
Expand Down Expand Up @@ -487,32 +510,33 @@ const HomepageNav = ({
</Link>
</li>
</ul>
<ul className="tw-flex tw-flex-row tw-justify-around tw-w-1/4 tw-my-8 navbar__right md:tw-hidden">
<li>
<div className="navbar__search tw-flex tw-flex-row tw-w-full tw-border tw-border-white tw-rounded-md tw-px-1 tw-text-white">
<ul className="tw-flex tw-flex-row tw-justify-end tw-w-5/12 navbar__right md:tw-hidden tw-h-full ">
<li className="tw-h-full tw-w-4/12">
<div className="tw-flex tw-flex-row tw-h-9 tw-mt-8 tw-bg-inputColor tw-border-2 tw-border-purple-800 tw-rounded-full tw-px-1 tw-text-white">
<input
onChange={handleSearch}
onKeyDown={handleKeyDown}
value={searchValue}
className="searchInput tw-bg-transparent tw-border-0 tw-text-white tw-py-1 xl:tw-w-10/12 tw-w-full tw-outline-none focus:tw-outline-none"
className="searchInput tw-text-sm tw-border-0 tw-text-white tw-p-4 xl:tw-w-9/12 tw-w-4/5 tw-outline-none focus:tw-outline-none"
// ${
// searchValue ? "expand" : ""
// }`}
type="text"
name=""
placeholder="Search..."
/>
<button type="submit" onClick={handleSubmit}>
<i className="fas fa-search" />
<button type="submit" onClick={handleSearchIconSubmit}>
<i className="fas fa-search tw-ml-2" />
</button>
</div>
</li>
<li>
<div className="tw-w-full tw-mx-2 tw-cursor-pointer">
<li className="tw-h-full tw-ml-5 tw-w-5/12 tw-pt-8">
<div className="tw-cursor-pointer tw-pl-1">
<Account />
</div>
</li>
{userData !== null && userData !== undefined ? (
<div className="tw-mx-2">
<div className=" tw-w-1/12 tw-pt-8">
<li>
{userData.profilePicture ? (
<img
Expand All @@ -523,7 +547,8 @@ const HomepageNav = ({
/>
) : (
<i
className="fa-user-circle fas tw-content-center tw-text-center NavIcon tw-cursor-pointer tw-mt-2"

className=" fa-user-circle fas tw-content-center tw-text-center NavIcon tw-cursor-pointer tw-mt-8"
onClick={onClick}
/>
)}
Expand All @@ -539,10 +564,10 @@ const HomepageNav = ({
</li>
</div>
) : (
<li className="">
<i
<li >
<i
aria-hidden
className="fas fa-user-circle tw-content-center tw-text-center NavIcon tw-cursor-pointer tw-mt-2"
className="fa-user-circle fas fa-5x tw-content-center tw-text-center NavIcon tw-cursor-pointer tw-mt-8"
onClick={onClick}
/>
{isActive ? (
Expand Down