Skip to content

Commit

Permalink
Make profile view responsive (#704)
Browse files Browse the repository at this point in the history 
Closes: #...

## Checklist

- [x] I have made ProfileLayout responsive
- [x] I have made ProfileLanding responsive

## Changelog

- made ProfileLanding responsive
- made ProfileLayout responsive
- added resized StudentProgress for smaller screens
- added MobileMenuContainer for displaying profile menu links for
smaller screens

## How to test
- Run monoweb
- Navigate to <code>/profile</code>
- Resize window
  • Loading branch information
@madsab
madsab authored Nov 8, 2023
1 parent 56d6b43 commit cb3ac6b
Show file tree
Hide file tree
Showing 6 changed files with 142 additions and 61 deletions.
26 changes: 13 additions & 13 deletions apps/web/src/components/layout/ProfileLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,17 @@ import { type FC, type PropsWithChildren, useState } from "react"
import { Icon } from "@dotkomonline/ui"
import { usePathname } from "next/navigation"
import { profileItems } from "@/utils/profileLinks"
import { ProfileContext } from "../views/ProfileView/context/ProfileContext"
import MobileMenuContainer from "../organisms/Navbar/components/profile/ProfileMenu/MobileMenuContainer"
import ProfileMenuContainer from "../organisms/Navbar/components/profile/ProfileMenu/ProfileMenuContainer"
import { ProfileContext } from "../views/ProfileView/context/ProfileContext"

interface PageTitleProps {
title: string
icon: string
}

const PageTitle: FC<PageTitleProps> = ({ title, icon }) => (
<div className="flex h-10 space-x-2">
<div className="flex h-10 space-x-2 max-md:hidden">
<Icon icon={icon} width={"w-10"} />
<p className="text-3xl">{title}</p>
</div>
Expand All @@ -23,17 +24,16 @@ const ProfileLayout: FC<PropsWithChildren> = ({ children }) => {
const [editMode, setEditMode] = useState(false)

return (
<div className="m-x-auto mb-5 max-w-[1000px]">
<div className="shadow-slate-6 rounded-3xl px-6 shadow-lg">
<div className="flex w-full flex-row">
<ProfileMenuContainer />
<ProfileContext.Provider value={{ editMode, setEditMode }}>
<div className="mx-5 mt-16 md:min-w-[600px]">
{currentLink && <PageTitle title={currentLink?.title} icon={currentLink.icon} />}
<div className="my-2 ml-5">{children}</div>
</div>
</ProfileContext.Provider>
</div>
<div className="m-x-auto shadow-slate-6 relative mb-5 max-w-[1000px] rounded-3xl p-5 shadow-lg max-md:w-[90vw] md:mx-3 ">
<div className="md:flex">
<MobileMenuContainer />
<ProfileMenuContainer />
<ProfileContext.Provider value={{ editMode, setEditMode }}>
<div className="md:mx-5 md:mt-16 md:w-[550px]">
{currentLink && <PageTitle title={currentLink?.title} icon={currentLink.icon} />}
<div className="my-2 md:ml-5 ">{children}</div>
</div>
</ProfileContext.Provider>
</div>
</div>
)
Expand Down
31 changes: 22 additions & 9 deletions apps/web/src/components/molecules/StudentProgress/StudentProgress.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { cn } from "@dotkomonline/ui"

interface IStudentProgressComponent {
year: number
id: number
Expand All @@ -9,30 +11,41 @@ interface IStudentProgress {

const ProgressCircle: React.FC<IStudentProgressComponent> = ({ year, id }) => (
<div
className={`${year <= id ? "border-[#153e75]" : "border-[#36b37e]"}
flex h-[45px] w-[45px] items-center justify-around rounded-[50%] border-[4px] border-solid`}
className={cn(
year <= id ? "border-[#153e75]" : "border-[#36b37e]",
"flex h-[45px] w-[45px] items-center justify-around rounded-[50%] border-[4px] border-solid max-sm:h-[30px] max-sm:w-[30px]"
)}
>
<div
className={`${year < id ? "text-[#153e75]" : year === id ? "bg-[#153e75] text-white" : "bg-[#36b37e] text-white"}
h-[20px] w-[20px] rounded-[50%] text-center`}
className={cn(
year < id ? "text-[#153e75]" : year === id ? "bg-[#153e75] text-white" : "bg-[#36b37e] text-white",
"flex h-[20px] w-[20px] justify-center rounded-[50%] max-sm:h-[10px] max-sm:w-[10px] max-sm:items-center max-sm:p-2 max-sm:text-center"
)}
>
{id}
<p className="max-sm:text-[1rem]">{id}</p>
</div>
</div>
)

const HorizontalLine: React.FC<IStudentProgressComponent> = ({ year, id }) => (
<div className={`${year <= id ? "bg-[#153e75]" : "bg-[#36b37e]"} m-[-1px] h-[4px] w-[30px] self-center`} />
<div
className={cn(
year <= id ? "bg-[#153e75]" : "bg-[#36b37e]",
"m-[-1px] h-[4px] w-[30px] self-center max-sm:w-[20px]"
)}
/>
)

const VerticalLine: React.FC<IStudentProgressComponent> = ({ year, id }) => (
<div className={`${year <= id ? "bg-[#153e75]" : "bg-[#36b37e]"} z-10 h-[50px] w-[4px] self-center`} />
<div
className={cn(year <= id ? "bg-[#153e75]" : "bg-[#36b37e]", "z-10 h-10 w-1 self-center sm:h-[50px] sm:w-[4px]")}
/>
)

const StudentProgress: React.FC<IStudentProgress> = ({ year }) => (
<>
<div className="flex w-full items-center justify-between">
<div className="flex flex-row">
<div className="justify-evenl flex items-center">
<div className="relative flex flex-row items-center">
<ProgressCircle year={year} id={1} />
<HorizontalLine year={year} id={1} />
<ProgressCircle year={year} id={2} />
Expand Down
55 changes: 55 additions & 0 deletions ...eb/src/components/organisms/Navbar/components/profile/ProfileMenu/MobileMenuContainer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { useEffect, useState } from "react"
import { Icon } from "@dotkomonline/ui"
import * as Popover from "@radix-ui/react-popover"
import { usePathname } from "next/navigation"
import { profileItems } from "@/utils/profileLinks"
import ProfileMenuItem from "./ProfileMenuItem"

const MobileMenuContainer = () => {
const currentSlug = usePathname()
const currentLink = profileItems.find((item) => item.slug === currentSlug)
const [open, setOpen] = useState(false)

useEffect(() => {
if (open) {
document.body.classList.add("overflow-hidden")
} else {
document.body.classList.remove("overflow-hidden")
}
}, [open])

return (
<div className="mx-auto flex items-center md:hidden">
<Popover.Root open={open} onOpenChange={(val: boolean) => setOpen(val)}>
<Popover.Trigger>
<div className="mt-3 flex">
<span className="float-left">
{open ? (
<Icon icon={"tabler:chevron-down"} width={28} />
) : (
<Icon icon={"tabler:chevron-right"} width={28} />
)}
</span>
<p className="flex grow justify-center">
<Icon icon={currentLink?.icon ? currentLink.icon : ""} width={28} />
<span className="ml-2 mt-1 text-lg">{currentLink?.title}</span>
</p>
</div>
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="animate-in fade-in-10">
<div className="bg-indigo-1 shadow-slate-8 flex w-screen flex-col rounded-lg p-3 shadow-sm md:hidden">
{profileItems.map((item) => (
<Popover.Close key={item.title}>
<ProfileMenuItem menuItem={item} />
</Popover.Close>
))}
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
</div>
)
}

export default MobileMenuContainer
2 changes: 1 addition & 1 deletion ...b/src/components/organisms/Navbar/components/profile/ProfileMenu/ProfileMenuContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { profileItems } from "@/utils/profileLinks"
import ProfileMenuItem from "./ProfileMenuItem"

const ProfileMenuContainer = () => (
<div className=" border-slate-5 border-r-[1px] pr-5 pt-10 ">
<div className=" border-slate-5 pr-5 pt-10 max-md:hidden md:border-r-[1px]">
{profileItems.map((item) => (
<ProfileMenuItem key={item.title} menuItem={item} />
))}
Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/components/organisms/Navbar/components/profile/ProfileMenu/ProfileMenuItem.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Icon } from "@dotkomonline/ui"
import { Icon, cn } from "@dotkomonline/ui"
import Link from "next/link"
import { useRouter } from "next/router"
import React, { useEffect, useState } from "react"
Expand All @@ -16,15 +16,15 @@ const ProfileMenuItem: React.FC<ProfileMenuItemProps> = ({ menuItem }) => {

const { title, slug, icon } = menuItem

const [isCurrent, setIsCurrent] = useState(router.pathname === slug ? "opacity-1" : "opacity-50")
const [isCurrent, setCurrent] = useState("")

useEffect(() => {
setIsCurrent(router.pathname === slug ? "opacity-1" : "opacity-50")
setCurrent(router.pathname === slug ? "opacity-1" : "opacity-50 hover:text-slate-11")
}, [router.pathname, slug])

return (
<Link className="!hover:text-blue text-slate-12 mb-4 flex flex-row items-center hover:cursor-pointer" href={slug}>
<div className={`mr-4 ${isCurrent} h-6 w-6`}>
<Link href={slug} className="text-slate-12 hover:fade-in-50 mb-4 flex flex-row items-center hover:cursor-pointer">
<div className={cn("mr-4 h-6 w-6", isCurrent)}>
<Icon icon={icon} width="w-6" />
</div>
<p className={isCurrent}>{title}</p>
Expand Down
79 changes: 46 additions & 33 deletions apps/web/src/components/views/ProfileView/components/ProfileLanding.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
import { Icon, cn } from "@dotkomonline/ui"
import { Avatar } from "@radix-ui/react-avatar"
import { StudyYearAliases } from "@dotkomonline/types"
import { Avatar, AvatarFallback, AvatarImage, Icon, cn } from "@dotkomonline/ui"
import { type NextPage } from "next"
import { type User } from "next-auth"
import StudentProgress from "@/components/molecules/StudentProgress/StudentProgress"

interface IFormInput {
interface FormInputProps {
name: string
children?: JSX.Element
addMore?: string
clickable?: boolean
}

const FormInput: React.FC<IFormInput> = ({ name, children, addMore, clickable = true }) => (
<div className="my-10 ">
const FormInput: React.FC<FormInputProps> = ({ name, children, addMore, clickable = true }) => (
<div className="my-10">
<div className="ml-4">
<label>{name}</label>
</div>
<hr className="border-slate-12 w-full opacity-50" />
<div className="ml-10 w-2/3 space-y-3 ">
<div className="ml-10 space-y-3 max-md:ml-1.5">
<div
className={cn(
"mt-3 flex items-center justify-between rounded-lg pl-2",
Expand All @@ -27,42 +27,55 @@ const FormInput: React.FC<IFormInput> = ({ name, children, addMore, clickable =
{children}
{clickable ? <Icon icon="simple-line-icons:arrow-right" width={10} /> : ""}
</div>
<p className="text-blue-10 text-sm hover:cursor-pointer ">{addMore ? `+ ${addMore}` : ""}</p>
<p className="text-blue-10 text-sm hover:cursor-pointer ">{addMore && `+ ${addMore}`}</p>
</div>
</div>
)

const Landing: NextPage<{ user: User }> = ({ user }) => (
<div className="w-full">
<div className="flex w-full flex-col">
<p className="text-slate-10">Administrer dine kontoinnstillinger</p>
<FormInput name="Profil">
<div>
<Avatar></Avatar>
{user.name}
<div className="flex w-full flex-col">
<p className="text-slate-10">Administrer dine kontoinnstillinger</p>
<FormInput name="Profil">
<div className="sp flex items-center space-x-5">
<Avatar className="h-[90px] w-[90px]">
<AvatarImage
src={
user.image
? user.image
: "https://www.nicepng.com/png/detail/9-92047_pickle-rick-transparent-rick-and-morty-pickle-rick.png"
}
alt="@UserAvatar"
/>
<AvatarFallback>USER</AvatarFallback>
</Avatar>
<p>{user.name ? user.name : "No registred name"}</p>
</div>
</FormInput>
<FormInput name="Epost" addMore="Add Email Address">
<div>{user.email ? user.email : "No registred email"}</div>
</FormInput>
<FormInput name="Telefon" addMore="Add Phone Number">
<div> (+47) 482 49 100 </div>
</FormInput>
<FormInput name="Studie" clickable={false}>
<div className=" relative w-full space-y-8">
<div className="flex">
<p>Klassetrinn:</p>
{/* TODO - Get study year from User */}
<div className="flex w-full justify-center">{StudyYearAliases[0]}</div>
</div>
</FormInput>
<FormInput name="Epost" addMore="Add Email Address">
<div>{user.email}</div>
</FormInput>
<FormInput name="Telefon" addMore="Add Phone Number">
<div> (+47) 482 49 100</div>
</FormInput>
<FormInput name="Studie" clickable={false}>
<div className="space-y-8">
<div>
<p>Klassetrinn: </p>
</div>
<div>
<p>Startår:</p>
</div>
<div className="flex items-center space-x-10 ">
<p>Studieløp:</p>
<div className="flex w-full">
<p>Startår:</p>
</div>
<div className="flex w-full items-center">
<p>Studieløp:</p>
<div className="flex w-full justify-center">
{/* TODO - Get study years from User */}
<StudentProgress year={0} />
</div>
</div>
</FormInput>
</div>
</div>
</FormInput>
</div>
)

Expand Down

2 comments on commit cb3ac6b

@vercel
Copy link

@vercel vercel bot commented on cb3ac6b Nov 8, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

web – ./apps/web

web-dotkom.vercel.app
web-git-main-dotkom.vercel.app
web-pi-umber.vercel.app
dev.web.online.ntnu.no

@vercel
Copy link

@vercel vercel bot commented on cb3ac6b Nov 8, 2023

Choose a reason for hiding this comment

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

Successfully deployed to the following URLs:

rif – ./apps/rif

rif-two.vercel.app
rif-git-main-dotkom.vercel.app
rif-dotkom.vercel.app
dev.interesse.online.ntnu.no

Please sign in to comment.