Skip to content

Commit 1504313

Browse files
PckyDevPckyDev
committed
Introduced an account authentication system in preparation for new upcoming features
- Introduced backend account authentication architecture and login flow. - Added modules: auth.mjs, localStorage.mjs, leftNav.mjs, account.mjs - Updated editor to initialize leftNav, account, and auth. - Moved/renamed palette CSS into SidebarLeft folder - Added sidebar-left, login, modal and account styling - Adjusted RecRoom button layout. - Updated palette/palette.mjs and data.mjs to integrate with leftNav - Disabled legacy resize/open handlers - Updated editor.html to include the new styles. - Removed obsolete palette-media.css - Minor updates to index/editor HTML and assets.
1 parent 8e901f0 commit 1504313

19 files changed

Lines changed: 1105 additions & 249 deletions

File tree

‎RR Circuits API.bsdesign‎

5.91 KB
Binary file not shown.

‎Source/assets/css/Pages/Editor/Palette/palette-media.css‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎Source/assets/css/Pages/Editor/SidebarLeft/Account/account.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* NOT LOGGED IN */
2+
3+
.account .not-logged-in {
4+
width: 100%;
5+
height: calc(100vh - 4rem);
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
align-items: center;
10+
padding: 2rem;
11+
gap: 1rem;
12+
}
13+
14+
.account .not-logged-in p {
15+
font-family: 'Roboto';
16+
font-weight: 500;
17+
text-align: center;
18+
font-size: .9rem;
19+
margin: 0;
20+
}
21+
22+
.account .not-logged-in > svg {
23+
font-size: 2.5rem;
24+
}
25+
26+
/* LOGGED IN */
27+
28+
.account .logged-in {
29+
width: 100%;
30+
height: calc(100vh - 4rem);
31+
display: flex;
32+
flex-direction: column;
33+
}
34+
35+
/* HEADER */
36+
37+
.account .logged-in .head {
38+
background-color: var(--rr-color-bg-tertiary);
39+
border-bottom: var(--rr-border-width) solid var(--rr-color-outline);
40+
padding: 1rem;
41+
display: flex;
42+
flex-direction: row;
43+
align-items: center;
44+
}
45+
46+
.account .logged-in .head .profile-image {
47+
height: 100%;
48+
aspect-ratio: 1/1;
49+
margin-right: .5rem;
50+
border: var(--rr-border-width) solid var(--rr-color-outline);
51+
border-radius: calc(var(--rr-border-radius) * 2);
52+
background-size: cover;
53+
background-position: center;
54+
}
55+
56+
.account .logged-in .head .profile-name {
57+
font-family: 'Roboto';
58+
margin: 0;
59+
width: 100%;
60+
font-size: 1rem;
61+
font-weight: 500;
62+
padding-top: .7rem;
63+
height: 100%;
64+
overflow: hidden;
65+
text-overflow: ellipsis;
66+
white-space: nowrap;
67+
text-align: start;
68+
}
69+
70+
.account .logged-in .head .rr-btn {
71+
aspect-ratio: 1/1 !important;
72+
font-size: 1.5rem;
73+
padding: .65rem;
74+
margin-top: .35rem;
75+
display: flex;
76+
justify-content: center;
77+
align-items: center;
78+
}
79+
80+
/* BODY */
81+
82+
.account .logged-in .body {
83+
height: 100%;
84+
padding: 0 .5rem;
85+
overflow-y: auto;
86+
scrollbar-width: none;
87+
-ms-overflow-style: none;
88+
}
89+
90+
.account .logged-in .body::-webkit-scrollbar {
91+
display: none;
92+
}
93+

Source/assets/css/Pages/Editor/Palette/palette-info-modal.css renamed to Source/assets/css/Pages/Editor/SidebarLeft/Palette/palette-info-modal.css

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,3 @@
1-
body.modal-open > *:not(.palette-info-modal) {
2-
filter: blur(.125rem);
3-
}
4-
5-
.palette-info-modal .modal-content {
6-
border-radius: calc(var(--rr-border-radius) * 3);
7-
border: var(--rr-border-width) solid var(--rr-color-outline);
8-
}
9-
10-
.palette-info-modal .modal-content .modal-header {
11-
border-bottom: var(--rr-border-width) solid var(--rr-color-outline);
12-
padding: .5rem;
13-
display: flex;
14-
justify-content: space-between;
15-
align-items: center;
16-
}
17-
18-
.palette-info-modal .modal-content .modal-header .chip-name {
19-
font-family: 'Roboto';
20-
line-height: 2rem;
21-
font-size: 1.25rem;
22-
margin: 0 0 0 .5rem;
23-
}
24-
25-
.palette-info-modal .modal-content .modal-header .close {
26-
font-family: 'Roboto';
27-
font-size: 1.5rem;
28-
aspect-ratio: 1/1;
29-
padding: .5rem;
30-
display: flex;
31-
justify-content: center;
32-
align-items: center;
33-
}
34-
35-
.palette-info-modal .modal-content .modal-body {
36-
padding: 1rem;
37-
}
38-
391
.palette-info-modal .modal-content .modal-body .chip-preview {
402
width: 100%;
413
height: 100%;

Source/assets/css/Pages/Editor/Palette/palette.css renamed to Source/assets/css/Pages/Editor/SidebarLeft/Palette/palette.css

Lines changed: 2 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
.palette {
2-
position: absolute;
3-
left: 0;
4-
top: 0;
5-
width: 240px;
6-
height: 100vh;
7-
background-color: var(--rr-color-bg-primary);
8-
box-shadow: 0 0 1rem 0 rgba(0,0,0,0.125);
2+
width: 100%;
3+
height: calc(100vh - 4rem);
94
display: flex;
105
flex-direction: column;
116
}
@@ -88,18 +83,6 @@
8883
color: var(--rr-color-text-secondary);
8984
}
9085

91-
.palette .resizeBar {
92-
position: absolute;
93-
top: 0;
94-
right: -.125rem;
95-
height: 100%;
96-
width: .25rem;
97-
}
98-
99-
.palette .resizeBar:hover {
100-
cursor: col-resize;
101-
}
102-
10386
.palette .body .row .col > div {
10487
position: relative;
10588
}

‎Source/assets/css/Pages/Editor/SidebarLeft/sidebar-left-media.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@media (max-width: 576px) {
2+
.sidebar-left.open {
3+
width: 100vw !important;
4+
bottom: 0 !important;
5+
height: 100vh !important;
6+
top: auto !important;
7+
}
8+
}
9+
10+
@media (max-width: 576px) {
11+
.sidebar-left:not(.open) {
12+
width: 100vw !important;
13+
bottom: 0 !important;
14+
height: 4rem !important;
15+
top: auto !important;
16+
}
17+
}
18+
19+
@media (max-width: 576px) {
20+
.sidebar-left .resizeBar {
21+
display: none;
22+
}
23+
}
24+

Source/assets/css/Pages/Editor/Palette/palette-mobile-nav.css renamed to Source/assets/css/Pages/Editor/SidebarLeft/sidebar-left-nav.css

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
1-
.mobile-nav {
1+
.sidebar-left-nav {
22
position: absolute;
33
left: 0;
44
bottom: 0;
55
width: 100%;
66
height: 4rem;
7-
background-color: var(--rr-color-bg-primary);
8-
box-shadow: 0 0 1rem 0 rgba(0,0,0,0.125);
97
display: flex;
108
flex-direction: row;
119
justify-content: space-evenly;
1210
padding: .25rem;
11+
background-color: var(--rr-color-bg-tertiary);
12+
border-top: var(--rr-border-width) solid var(--rr-color-outline);
13+
z-index: 9999999;
1314
}
1415

15-
.mobile-nav .rr-btn {
16+
.sidebar-left-nav .rr-btn {
1617
display: flex;
1718
justify-content: center;
1819
align-items: center;
1920
flex-direction: column;
2021
padding: .5rem 1.5rem;
2122
}
2223

23-
.mobile-nav .rr-btn > svg {
24-
font-size: 1.5rem;
24+
.sidebar-left-nav .rr-btn > svg {
25+
font-size: 1.25rem;
2526
margin-bottom: .5rem;
2627
}
2728

28-
.mobile-nav .rr-btn > span {
29-
font-size: .75rem;
29+
.sidebar-left-nav .rr-btn > span {
30+
font-size: .6rem;
3031
line-height: 0.5rem;
3132
opacity: .75;
3233
}

‎Source/assets/css/Pages/Editor/SidebarLeft/sidebar-left.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.sidebar-left {
2+
position: absolute;
3+
left: 0;
4+
top: 0;
5+
width: 240px;
6+
height: 100vh;
7+
background-color: var(--rr-color-bg-primary);
8+
box-shadow: 0 0 1rem 0 rgba(0,0,0,0.125);
9+
overflow: hidden;
10+
}
11+
12+
.sidebar-left .resizeBar:hover {
13+
cursor: col-resize;
14+
}
15+
16+
.sidebar-left .resizeBar {
17+
position: absolute;
18+
top: 0;
19+
right: 0;
20+
height: 100%;
21+
width: .25rem;
22+
z-index: 99999;
23+
border-right: var(--rr-border-width) solid var(--rr-color-outline);
24+
}
25+

‎Source/assets/css/Pages/Editor/login.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
.recroom-login-modal .modal-body p {
2+
margin: 0;
3+
font-family: 'Roboto';
4+
}
5+
6+
/* STATE 0 */
7+
8+
.recroom-login-modal .modal-body #recroomLoginState0 > p {
9+
margin-bottom: 1rem;
10+
}
11+
12+
.recroom-login-modal .modal-body #recroomLoginState0 > div {
13+
display: flex;
14+
align-items: center;
15+
gap: .5rem;
16+
}
17+
18+
.recroom-login-modal .modal-body #recroomLoginState0 > div > p {
19+
font-size: 1.25rem;
20+
margin-bottom: .2rem;
21+
}
22+
23+
.recroom-login-modal .modal-body #recroomLoginState0 > div > .rr-text-input {
24+
width: 100%;
25+
}
26+
27+
.recroom-login-modal .modal-body #recroomLoginState0 > div > .rr-btn {
28+
height: 2.5rem;
29+
gap: 0.25rem;
30+
}
31+
32+
.recroom-login-modal .modal-body #recroomLoginState0 > div > .rr-btn > span {
33+
font-size: 1rem;
34+
margin-bottom: -.1rem;
35+
}
36+
37+
.recroom-login-modal .modal-body #recroomLoginState0 > div > .rr-btn > svg {
38+
font-size: 2rem;
39+
}
40+
41+
/* STATE 1 */
42+
43+
.recroom-login-modal .modal-body #recroomLoginState1 > p {
44+
margin-bottom: 1rem;
45+
}
46+
47+
.recroom-login-modal .modal-body #recroomLoginState1 > div {
48+
display: flex;
49+
align-items: center;
50+
gap: .5rem;
51+
}
52+
53+
.recroom-login-modal .modal-body #recroomLoginState1 > div > .rr-text-input {
54+
width: 100%;
55+
}
56+
57+
.recroom-login-modal .modal-body #recroomLoginState1 > div > .rr-btn {
58+
height: 2.5rem;
59+
gap: 0.25rem;
60+
}
61+
62+
.recroom-login-modal .modal-body #recroomLoginState1 > div > .rr-btn > span {
63+
font-size: 1rem;
64+
margin-bottom: -.1rem;
65+
}
66+
67+
.recroom-login-modal .modal-body #recroomLoginState1 > div > .rr-btn > svg {
68+
font-size: 2rem;
69+
}
70+
71+
/* STATE 2 */
72+
73+
.recroom-login-modal .modal-body #recroomLoginState2 > p {
74+
margin-bottom: 0;
75+
}
76+

‎Source/assets/css/RecRoom/button.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
overflow: hidden;
2020
position: relative;
2121
transition: transform .2s;
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
gap: 0.25rem;
2226
}
2327

2428
.rr-btn::before {

0 commit comments

Comments
 (0)