Skip to content

Commit 115e5a8

Browse files
dewanshDTdewanshDT
committed
Merge branch 'develop' of https://github.com/processing/p5.js-web-editor into dewanshmobile/stuff
2 parents 1f8a5ec + ca5db3d commit 115e5a8

File tree

6 files changed

+78
-46
lines changed

6 files changed

+78
-46
lines changed

‎client/common/icons.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import CircleFolder from '../images/circle-folder.svg';
2424
import CircleInfo from '../images/circle-info.svg';
2525
import Add from '../images/add.svg';
2626
import Filter from '../images/filter.svg';
27+
import Cross from '../images/cross.svg';
2728

2829
// HOC that adds the right web accessibility props
2930
// https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -95,6 +96,7 @@ export const TerminalIcon = withLabel(Terminal);
9596
export const CodeIcon = withLabel(Code);
9697
export const SaveIcon = withLabel(Save);
9798
export const FolderIcon = withLabel(Folder);
99+
export const CrossIcon = withLabel(Cross);
98100
export const CircleTerminalIcon = withLabel(CircleTerminal);
99101
export const CircleFolderIcon = withLabel(CircleFolder);
100102
export const CircleInfoIcon = withLabel(CircleInfo);

‎client/images/cross.svg

Lines changed: 3 additions & 0 deletions
Loading

‎client/modules/IDE/components/Header/MobileNav.jsx

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
AccountIcon,
1717
AddIcon,
1818
EditorIcon,
19-
MoreIcon
19+
MoreIcon,
20+
CrossIcon
2021
} from '../../../../common/icons';
2122
import {
2223
newFile,
@@ -237,27 +238,39 @@ const MobileNav = () => {
237238
<h5>by {project?.owner?.username}</h5>
238239
)}
239240
</Title>
240-
<Options>
241-
{pageName === 'myStuff' && <StuffMenu />}
242-
{user.authenticated ? (
243-
<AccountMenu />
244-
) : (
245-
<div>
246-
<Link to="/login">
247-
<IconButton icon={AccountIcon} />
248-
</Link>
249-
</div>
250-
)}
251-
{title === project.name ? (
252-
<MoreMenu />
253-
) : (
241+
{/* check if the user is in login page */}
242+
{pageName === 'login' || pageName === 'signup' ? (
243+
// showing the login page
244+
<Options>
254245
<div>
255246
<Link to={editorLink}>
256-
<IconButton icon={EditorIcon} />
247+
<IconButton icon={CrossIcon} />
257248
</Link>
258249
</div>
259-
)}
260-
</Options>
250+
</Options>
251+
) : (
252+
<Options>
253+
{pageName === 'myStuff' && <StuffMenu />}
254+
{user.authenticated ? (
255+
<AccountMenu />
256+
) : (
257+
<div>
258+
<Link to="/login">
259+
<IconButton icon={AccountIcon} />
260+
</Link>
261+
</div>
262+
)}
263+
{title === project.name ? (
264+
<MoreMenu />
265+
) : (
266+
<div>
267+
<Link to={editorLink}>
268+
<IconButton icon={EditorIcon} />
269+
</Link>
270+
</div>
271+
)}
272+
</Options>
273+
)}
261274
</Nav>
262275
);
263276
};

‎client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,15 @@ exports[`Nav renders dashboard version for mobile 1`] = `
4848
<DocumentFragment>
4949
<header>
5050
<nav
51-
class="sc-giAqHp deBDHC"
51+
class="sc-ezzafa bZzfr"
5252
>
5353
<div
54-
class="sc-ezzafa bKgrFx"
54+
class="sc-bYwzuL bIGdtt"
5555
>
5656
<test-file-stub />
5757
</div>
5858
<div
59-
class="sc-bYwzuL lkVxhY"
59+
class="sc-kLojOw btKDXx"
6060
>
6161
<h1>
6262
<span
@@ -89,7 +89,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
8989
</h1>
9090
</div>
9191
<div
92-
class="sc-kLojOw casOUg"
92+
class="sc-iklJeh jupmlX"
9393
>
9494
<div>
9595
<a
@@ -459,15 +459,15 @@ exports[`Nav renders editor version for mobile 1`] = `
459459
<DocumentFragment>
460460
<header>
461461
<nav
462-
class="sc-giAqHp deBDHC"
462+
class="sc-ezzafa bZzfr"
463463
>
464464
<div
465-
class="sc-ezzafa bKgrFx"
465+
class="sc-bYwzuL bIGdtt"
466466
>
467467
<test-file-stub />
468468
</div>
469469
<div
470-
class="sc-bYwzuL lkVxhY"
470+
class="sc-kLojOw btKDXx"
471471
>
472472
<h1>
473473
<span
@@ -500,7 +500,7 @@ exports[`Nav renders editor version for mobile 1`] = `
500500
</h1>
501501
</div>
502502
<div
503-
class="sc-kLojOw casOUg"
503+
class="sc-iklJeh jupmlX"
504504
>
505505
<div>
506506
<a

‎client/styles/components/_form-container.scss

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,29 @@
22
text-align: center;
33
display: flex;
44
flex-direction: column;
5-
align-items: center;
5+
align-items: center;
66
justify-content: center;
77
flex: 1;
8+
9+
@media (max-width: 550px) {
10+
text-align: left;
11+
justify-content: start;
12+
}
813
}
914

1015
.form-container--align-left {
11-
text-align: left;
16+
text-align: left;
1217
}
1318

1419
.form-container--align-top {
15-
height: unset;
20+
height: unset;
1621
}
1722

1823
.form-container__header {
1924
width: 100%;
2025
padding: #{15 / $base-font-size}rem #{34 / $base-font-size}rem;
2126
display: flex;
22-
justify-content: space-between;
27+
justify-content: space-between;
2328
}
2429

2530
.form-container__content {
@@ -31,28 +36,32 @@
3136
}
3237

3338
.form-container--align-left .form-container__content {
34-
align-items: left;
39+
align-items: left;
3540
}
3641

3742
.form-container__title {
3843
font-weight: normal;
3944
@include themify() {
40-
color: getThemifyVariable('form-title-color')
41-
}
45+
color: getThemifyVariable("form-title-color");
46+
}
47+
48+
@media (max-width: 770px) {
49+
display: none;
50+
}
4251
}
4352

4453
.form-container__context {
45-
@include themify() {
46-
color: getThemifyVariable('secondary-text-color')
47-
}
54+
@include themify() {
55+
color: getThemifyVariable("secondary-text-color");
56+
}
4857
}
4958

5059
.form-container__divider {
51-
padding: #{20 / $base-font-size}rem 0;
60+
padding: #{20 / $base-font-size}rem 0;
5261
}
5362

5463
.form-container__logo-button {
55-
@include icon();
64+
@include icon();
5665
}
5766

5867
.form-container__exit-button {

‎client/styles/components/_forms.scss

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
font-size: #{12 / $base-font-size}rem;
66
text-align: left;
77
@include themify() {
8-
color: getThemifyVariable('error-color');
8+
color: getThemifyVariable("error-color");
99
}
1010
}
1111

@@ -27,11 +27,16 @@
2727
margin-top: #{16 / $base-font-size}rem;
2828
font-size: #{12 / $base-font-size}rem;
2929
@include themify() {
30-
color: getThemifyVariable('form-navigation-options-color');
30+
color: getThemifyVariable("form-navigation-options-color");
31+
}
32+
33+
@media (max-width: 550px) {
34+
text-align: center;
35+
margin: #{12 / $base-font-size}rem;
3136
}
3237
}
3338

34-
.form__legend{
39+
.form__legend {
3540
font-size: #{21 / $base-font-size}rem;
3641
font-weight: bold;
3742
}
@@ -42,7 +47,7 @@
4247
margin-bottom: #{7 / $base-font-size}rem;
4348
display: block;
4449
@include themify() {
45-
color: getThemifyVariable('form-secondary-title-color');
50+
color: getThemifyVariable("form-secondary-title-color");
4651
}
4752
}
4853

@@ -56,8 +61,8 @@
5661
height: #{40 / $base-font-size}rem;
5762
font-size: #{16 / $base-font-size}rem;
5863
@include themify() {
59-
color: getThemifyVariable('form-input-text-color');
60-
background-color: getThemifyVariable('input-background-color');
64+
color: getThemifyVariable("form-input-text-color");
65+
background-color: getThemifyVariable("input-background-color");
6166
}
6267
}
6368

@@ -67,7 +72,7 @@
6772

6873
.form__input::placeholder {
6974
@include themify() {
70-
color: getThemifyVariable('form-input-placeholder-text-color');
75+
color: getThemifyVariable("form-input-placeholder-text-color");
7176
}
7277
}
7378

@@ -78,7 +83,7 @@
7883

7984
.form__status {
8085
@include themify() {
81-
color: getThemifyVariable('form-navigation-options-color');
86+
color: getThemifyVariable("form-navigation-options-color");
8287
}
8388
}
8489

0 commit comments

Comments
 (0)