Skip to content

Commit

Permalink
feat: mobile and tablet responsive code
Browse files Browse the repository at this point in the history
  • Loading branch information
@Chakravarthy7102
Chakravarthy7102 committed Oct 31, 2023
1 parent 20b5ae1 commit d8194d8
Show file tree
Hide file tree
Showing 18 changed files with 278 additions and 85 deletions.
6 changes: 6 additions & 0 deletions src/assets/hamburger-menu.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/images.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ import "./assets/eye-stroke.svg";
import "./assets/eye.svg";
import "./assets/favicon.ico";
import "./assets/form-field-error-icon.svg";
import "./assets/hamburger-menu.svg";
import "./assets/help-icon.png";
import "./assets/left-arrow-dark.svg";
import "./assets/loader.svg";
Expand Down
8 changes: 8 additions & 0 deletions src/ui/components/dialog/dialog.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,11 @@
justify-content: space-evenly;
}
}

@media (max-width: 485px) {
.dialog-container {
width: 95%;
padding-left: 14px;
padding-right: 14px;
}
}
96 changes: 95 additions & 1 deletion src/ui/components/header/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
* under the License.
*/

.st-header {
.st-header-desktop {
position: fixed;
width: 100%;
z-index: 100;
Expand All @@ -26,3 +26,97 @@
background: #fff;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
}

.st-header-mobile {
display: none;

.overlay {
background: rgba(0, 0, 0, 0.4);
position: fixed;
inset: 0;
height: 100vh;

z-index: 9999;

margin-top: 70px;
}

svg {
cursor: pointer;
}

.close-btn {
background: rgba(95, 95, 95, 0.08);
border-radius: 50%;
border: none;

height: 40px;
width: 40px;
}

.menu-container {
width: 95%;

height: fit-content;

border-radius: 12px;
background: #fff;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);

position: fixed;
inset: 0;
margin: auto;
margin-top: 80px;
z-index: 9999;

padding: 36px 40px;

.divider {
background: #aaa;
height: 1px;
width: 100%;
margin: 40px auto;
}

button {
width: 100%;
justify-content: center;
}
}

.menu-content {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;

.sidebar-list {
margin-top: 0;

& > li {
margin-left: 0;
margin-right: 0;
}
}
}
}

@media (max-width: 1024px) {
.st-header-desktop {
display: none;
}

.st-header-mobile {
position: fixed;
width: 100%;
z-index: 9999;
background: var(--color-white);

display: flex;
justify-content: start;
align-items: center;
gap: 14px;

padding: 14px 12px;
}
}
67 changes: 59 additions & 8 deletions src/ui/components/header/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,70 @@
import { getImageUrl } from "../../../utils";
import SignOutBtn from "../auth/SignOutBtn";

import { ReactComponent as CloseIcon } from "../../../assets/close.svg";
import { ReactComponent as HamburgerMenuIcon } from "../../../assets/hamburger-menu.svg";

import { useState } from "react";
import "../sidebar";
import { SideBarContent } from "../sidebar";
import "./header.scss";

export const LOGO_LIGHT = getImageUrl("ST_icon_light_theme.svg");

export default function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false);

function closeMenu() {
setIsMenuOpen(false);
}

function openMenu() {
setIsMenuOpen(true);
}

return (
<header className="st-header">
<img
className="logo"
src={LOGO_LIGHT}
alt="Supertokens"
/>
<SignOutBtn />
</header>
<>
<header className="st-header-desktop">
<img
className="logo"
src={LOGO_LIGHT}
alt="Supertokens"
/>
<SignOutBtn />
</header>
<header className="st-header-mobile">
{isMenuOpen ? (
<button
className="close-btn"
onClick={closeMenu}>
<CloseIcon />
</button>
) : (
<HamburgerMenuIcon onClick={openMenu} />
)}
<img
className="logo"
src={LOGO_LIGHT}
alt="Supertokens"
/>
{isMenuOpen ? (
<>
<div
className="overlay"
onClick={closeMenu}></div>

<div className="menu-container">
<div className="menu-content">
<div onClick={closeMenu}>
<SideBarContent />
</div>
</div>
<div className="divider" />
<SignOutBtn />
</div>
</>
) : null}
</header>
</>
);
}
33 changes: 19 additions & 14 deletions src/ui/components/sidebar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,29 @@ const sidebarItems = [
},
];

export default function SideBar() {
export function SideBarContent() {
const location = useLocation();

return (
<ul className="sidebar-list">
{sidebarItems.map((item) => {
return (
<li key={item.id}>
<Link
className={`${location.pathname === item.href ? "active" : ""}`}
to={item.href}>
{item.icon} <span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
);
}
export default function SideBar() {
return (
<aside className="sidebar">
<ul>
{sidebarItems.map((item) => {
return (
<li key={item.id}>
<Link
className={`${location.pathname === item.href ? "active" : ""}`}
to={item.href}>
{item.icon} <span>{item.title}</span>
</Link>
</li>
);
})}
</ul>
<SideBarContent />
</aside>
);
}
70 changes: 38 additions & 32 deletions src/ui/components/sidebar/sidebar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,50 +6,56 @@
border-right: 1px solid var(--light-borders-border-base, #e5e7eb);
background-color: var(--color-window-bg);
z-index: 10;
}

ul {
margin-top: 50px;
list-style-type: none;
}
.sidebar-list {
margin-top: 50px;
list-style-type: none;
}

ul > li {
margin: 14px 16px;
.sidebar-list > li {
margin: 14px 16px;

& .active {
border-radius: 6px;
border: 1px solid rgba(255, 153, 51, 0.15);
background: rgba(255, 153, 51, 0.1);
& .active {
border-radius: 6px;
border: 1px solid rgba(255, 153, 51, 0.15);
background: rgba(255, 153, 51, 0.1);

color: #f93;
font-weight: 500;
color: #f93;
font-weight: 500;

& > svg {
stroke: var(--color-primary);
}
& > svg {
stroke: var(--color-primary);
}
}
}

ul > li > a {
display: block;
padding: 6px 8px;
border-radius: 6px;
.sidebar-list > li > a {
display: block;
padding: 6px 8px;
border-radius: 6px;

color: var(--light-foregrounds-fg-subtle, #4b5563);
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 20px;
color: var(--light-foregrounds-fg-subtle, #4b5563);
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 20px;

border: 1px solid transparent;
border: 1px solid transparent;

text-decoration: none;
text-decoration: none;

display: flex;
justify-content: flex-start;
gap: 12px;
display: flex;
justify-content: flex-start;
gap: 12px;

&:hover:not(.active) {
background: #eee;
}
&:hover:not(.active) {
background: #eee;
}
}

@media (max-width: 1024px) {
.sidebar {
display: none;
}
}
4 changes: 4 additions & 0 deletions src/ui/components/table/table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,10 @@
font-weight: 500;
text-transform: uppercase;
padding: 18px 14px 18px 36px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 126px;
}

&:last-child {
Expand Down
15 changes: 15 additions & 0 deletions src/ui/components/userDetail/loginMethods/loginMethods.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,21 @@
}
}

@media (max-width: 480px) {
.method {
.method-header {
padding: 16px 8px;
}
.method-body {
padding: 18px 8px;
}

.left {
flex-direction: column;
}
}
}

.send-mail-icon {
cursor: pointer;
& > :first-child {
Expand Down
6 changes: 6 additions & 0 deletions src/ui/components/userDetail/userDetail.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,3 +293,9 @@ $container-width: 829;
.pill {
margin-top: 4px;
}

@media (max-width: 425px) {
.user-detail {
padding: 72px 12px 48px;
}
}
2 changes: 1 addition & 1 deletion src/ui/components/userDetail/userRoles/userRolesList.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.user-roles-list-wrapper {
& > ul {
padding: 4px 0 24px 0;
padding: 0px 24px 24px 24px;
border-bottom: 1px solid var(--color-border);

li {
Expand Down
Loading

0 comments on commit d8194d8

Please sign in to comment.