Skip to content

The mobile Login Page 🚪 #2389

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

Merged
merged 7 commits into from
Aug 28, 2023
Merged

The mobile Login Page 🚪 #2389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f0acd48
made the style changes
dewanshDT Aug 17, 2023
8112233
the header cross
dewanshDT Aug 17, 2023
82d51a9
snapshots
dewanshDT Aug 17, 2023
aeedb99
lint warnings
dewanshDT Aug 19, 2023
46e7613
pascal case CrossIcon
dewanshDT Aug 19, 2023
71130b0
Merge branch 'develop' of https://github.com/processing/p5.js-web-edi…
dewanshDT Aug 19, 2023
4f43092
Merge branch 'develop' into dewanshmobile/login
lindapaiste Aug 27, 2023
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
4 changes: 2 additions & 2 deletions client/common/icons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import Folder from '../images/folder-padded.svg';
import CircleTerminal from '../images/circle-terminal.svg';
import CircleFolder from '../images/circle-folder.svg';
import CircleInfo from '../images/circle-info.svg';
import Cross from '../images/cross.svg';

// HOC that adds the right web accessibility props
// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
Expand Down Expand Up @@ -94,9 +95,8 @@ export const MoreIcon = withLabel(More);
export const TerminalIcon = withLabel(Terminal);
export const CodeIcon = withLabel(Code);
export const SaveIcon = withLabel(Save);

export const FolderIcon = withLabel(Folder);

export const CrossIcon = withLabel(Cross);
export const CircleTerminalIcon = withLabel(CircleTerminal);
export const CircleFolderIcon = withLabel(CircleFolder);
export const CircleInfoIcon = withLabel(CircleInfo);
3 changes: 3 additions & 0 deletions client/images/cross.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 36 additions & 17 deletions client/modules/IDE/components/Header/MobileNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@ import NavMenuItem from '../../../../components/Nav/NavMenuItem';
import { prop, remSize } from '../../../../theme';
import AsteriskIcon from '../../../../images/p5-asterisk.svg';
import IconButton from '../../../../components/mobile/IconButton';
import { AccountIcon, EditorIcon, MoreIcon } from '../../../../common/icons';
import {
AccountIcon,
EditorIcon,
MoreIcon,
CrossIcon
} from '../../../../common/icons';
import {
newFile,
newFolder,
Expand Down Expand Up @@ -237,26 +242,40 @@ const MobileNav = () => {
<h5>by {project?.owner?.username}</h5>
)}
</Title>
<Options>
{user.authenticated ? (
<AccountMenu />
) : (
<div>
<Link to="/login">
<IconButton icon={AccountIcon} />
</Link>
</div>
)}
{title === project.name ? (
<MoreMenu />
) : (

{/* check if the user is in login page */}
{pathname === '/login' || pathname === '/signup' ? (
// showing the login page
<Options>
<div>
<Link to={editorLink}>
<IconButton icon={EditorIcon} />
<IconButton icon={CrossIcon} />
</Link>
</div>
)}
</Options>
</Options>
) : (
<Options>
{/* checking if user is logged in or not */}
{user.authenticated ? (
<AccountMenu />
) : (
<div>
<Link to="/login">
<IconButton icon={AccountIcon} />
</Link>
</div>
)}
{title === project.name ? (
<MoreMenu />
) : (
<div>
<Link to={editorLink}>
<IconButton icon={EditorIcon} />
</Link>
</div>
)}
</Options>
)}
</Nav>
);
};
Expand Down
16 changes: 8 additions & 8 deletions client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,15 +48,15 @@ exports[`Nav renders dashboard version for mobile 1`] = `
<DocumentFragment>
<header>
<nav
class="sc-giAqHp deBDHC"
class="sc-ezzafa bZzfr"
>
<div
class="sc-ezzafa bKgrFx"
class="sc-bYwzuL bIGdtt"
>
<test-file-stub />
</div>
<div
class="sc-bYwzuL lkVxhY"
class="sc-kLojOw btKDXx"
>
<h1>
<span
Expand Down Expand Up @@ -89,7 +89,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
</h1>
</div>
<div
class="sc-kLojOw casOUg"
class="sc-iklJeh jupmlX"
>
<div>
<a
Expand Down Expand Up @@ -459,15 +459,15 @@ exports[`Nav renders editor version for mobile 1`] = `
<DocumentFragment>
<header>
<nav
class="sc-giAqHp deBDHC"
class="sc-ezzafa bZzfr"
>
<div
class="sc-ezzafa bKgrFx"
class="sc-bYwzuL bIGdtt"
>
<test-file-stub />
</div>
<div
class="sc-bYwzuL lkVxhY"
class="sc-kLojOw btKDXx"
>
<h1>
<span
Expand Down Expand Up @@ -500,7 +500,7 @@ exports[`Nav renders editor version for mobile 1`] = `
</h1>
</div>
<div
class="sc-kLojOw casOUg"
class="sc-iklJeh jupmlX"
>
<div>
<a
Expand Down
33 changes: 21 additions & 12 deletions client/styles/components/_form-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,29 @@
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
align-items: center;
justify-content: center;
flex: 1;

@media (max-width: 550px) {
text-align: left;
justify-content: start;
}
}

.form-container--align-left {
text-align: left;
text-align: left;
}

.form-container--align-top {
height: unset;
height: unset;
}

.form-container__header {
width: 100%;
padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
display: flex;
justify-content: space-between;
justify-content: space-between;
}

.form-container__content {
Expand All @@ -31,28 +36,32 @@
}

.form-container--align-left .form-container__content {
align-items: left;
align-items: left;
}

.form-container__title {
font-weight: normal;
@include themify() {
color: getThemifyVariable('form-title-color')
}
color: getThemifyVariable("form-title-color");
}

@media (max-width: 770px) {
display: none;
}
}

.form-container__context {
@include themify() {
color: getThemifyVariable('secondary-text-color')
}
@include themify() {
color: getThemifyVariable("secondary-text-color");
}
}

.form-container__divider {
padding: #{20 / $base-font-size}rem 0;
padding: #{20 / $base-font-size}rem 0;
}

.form-container__logo-button {
@include icon();
@include icon();
}

.form-container__exit-button {
Expand Down
21 changes: 13 additions & 8 deletions client/styles/components/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
font-size: #{12 / $base-font-size}rem;
text-align: left;
@include themify() {
color: getThemifyVariable('error-color');
color: getThemifyVariable("error-color");
}
}

Expand All @@ -27,11 +27,16 @@
margin-top: #{16 / $base-font-size}rem;
font-size: #{12 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
color: getThemifyVariable("form-navigation-options-color");
}

@media (max-width: 550px) {
text-align: center;
margin: #{12 / $base-font-size}rem;
Copy link
Collaborator

Choose a reason for hiding this comment

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

It seems like all this media query does is increase the gap between the "sign up" and "forgot your password" lines?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

yes

}
}

.form__legend{
.form__legend {
font-size: #{21 / $base-font-size}rem;
font-weight: bold;
}
Expand All @@ -42,7 +47,7 @@
margin-bottom: #{7 / $base-font-size}rem;
display: block;
@include themify() {
color: getThemifyVariable('form-secondary-title-color');
color: getThemifyVariable("form-secondary-title-color");
}
}

Expand All @@ -56,8 +61,8 @@
height: #{40 / $base-font-size}rem;
font-size: #{16 / $base-font-size}rem;
@include themify() {
color: getThemifyVariable('form-input-text-color');
background-color: getThemifyVariable('input-background-color');
color: getThemifyVariable("form-input-text-color");
background-color: getThemifyVariable("input-background-color");
}
}

Expand All @@ -67,7 +72,7 @@

.form__input::placeholder {
@include themify() {
color: getThemifyVariable('form-input-placeholder-text-color');
color: getThemifyVariable("form-input-placeholder-text-color");
}
}

Expand All @@ -78,7 +83,7 @@

.form__status {
@include themify() {
color: getThemifyVariable('form-navigation-options-color');
color: getThemifyVariable("form-navigation-options-color");
}
}

Expand Down