Skip to content
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

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

Open
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 all 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
6 changes: 3 additions & 3 deletions components/Account.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,12 +184,12 @@ const Account = () => {
return (
<>
<div
className="tw-text-white tw-text-center tw-font-bold tw-py-2 tw-px-5 tw-w-11/12 tw-cursor-pointer connect__button"
className="tw-text-white tw-text-center tw-font-bold tw-mx-auto tw-w-full tw-h-8 tw-cursor-pointer connect__button"
onClick={() => {
openAuthModal();
}}
>
<p className="tw-text-sm">Connect Wallet</p>
<p>Connect Wallet</p>
</div>
<div>
<Modal
Expand All @@ -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
59 changes: 31 additions & 28 deletions components/homepage/HomepageNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ const HomepageNav = ({
if (!regex.test(searchValue)) return;
setSearch('');
router.push({
pathname: '/search',
query: { _q: searchValue },
pathname: router.pathname,
query: { _q: encodeURI(searchValue) },
});
};

Expand Down Expand Up @@ -200,12 +200,10 @@ const HomepageNav = ({
<button
type="button"
className="mobile-searchButton"
href="#"
onClick={onClickSearch}
>
<i className="fas fa-search" />
</button>
</div>
</div>
</div>
);

Expand Down Expand Up @@ -300,7 +298,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,18 +307,22 @@ const HomepageNav = ({
}`}
onClick={closeMobileMenu}
>
<li className="nav-item">
<li className="nav-item" >
<div className="nav__mobile-link">Profile</div>
</li>
</a>
</ul>
) : (
''
)}
<Account />
<div className='tw-mb-8 tw-text-sm'>
<Account />
</div>
</div>
);



return (
<header
className="homepage__header"
Expand All @@ -338,7 +340,7 @@ const HomepageNav = ({
}`}
>
{isLogin === true && (
<div
<div
className="hamburger-icon tw-cursor-pointer"
onClick={() => setOpen(!open)}
>
Expand Down Expand Up @@ -389,7 +391,7 @@ const HomepageNav = ({
</ul>
</div>
{isActiveMobile ? menuMobile() : ''}
{isActiveSearch ? showSearchIconMobile() : ''}
{/*isActiveSearch ? showSearchIconMobile() : ''*/}

<ul className="nav-menu tw-py-0 md:tw-py-4">
{userData !== null && userData !== undefined ? (
Expand Down Expand Up @@ -487,43 +489,44 @@ 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-5/12">
{/* SearchBox

<div className="tw-flex tw-flex-row tw-h-8 tw-mt-8 tw-bg-inputColor tw-rounded-full tw-px-1 tw-text-white">
<input
onChange={handleSearch}
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"
// ${
// searchValue ? "expand" : ""
// }`}
className="searchInput tw-text-xs tw-text-white tw-pt-1 tw-pl-3 xl:tw-w-9/12 tw-w-4/5 tw-outline-none"
type="text"
name=""
placeholder="Search..."
/>
<button type="submit" onClick={handleSubmit}>
<i className="fas fa-search" />

<button type="submit">
<i className="fas fa-search fa-1x tw-ml-2" />
</button>
</div>
</div>*/}
</li>
<li>
<div className="tw-w-full tw-mx-2 tw-cursor-pointer">
<li className="tw-h-full tw-mx-1 tw-w-4/12 tw-pt-8">
<div className="tw-cursor-pointer tw-pl-1 tw-text-xs" >
<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
className="tw-content-center tw-text-center tw-cursor-pointer tw-h-9 tw-rounded-full tw-w-9"
className="tw-content-center tw-text-center tw-cursor-pointer tw-h-8 tw-rounded-full tw-w-8 tw-ml-2"
onClick={onClick}
src={userData.profilePicture}
alt="profile"
/>
) : (
<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 +542,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 tw-pt-1 "
onClick={onClick}
/>
{isActive ? (
Expand Down