mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-29 18:06:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #82 from RihanArfan/feature/mobile-ux-improvements

Browse source 
Feature/mobile-ux-improvements
This commit is contained in:
mrjvs 2022-05-17 11:59:01 +02:00 committed by GitHub
parent e392946751 16da0a0e16
commit 1332e78e24
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/buttons/IconPatch.tsx
View file

@ -14,7 +14,7 @@ export function IconPatch(props: IconPatchProps) {
<div
className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
props.clickable
? "hover:bg-denim-400 m-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
? "hover:bg-denim-400 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
: ""
} ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
>

8
src/components/layout/Navigation.tsx
View file

@ -11,16 +11,16 @@ export interface NavigationProps {
export function Navigation(props: NavigationProps) {
return (
<div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7">
<div className="flex items-center justify-center">
<div className="mr-6">
<div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7 min-h-[88px]">
<div className="flex items-center justify-center w-full sm:w-fit">
<div className="mr-auto sm:mr-6">
<Link to="/">
<BrandPill clickable />
</Link>
</div>
{props.children}
</div>
<div className="flex">
<div className={`${props.children ? "hidden sm:flex" : "flex"} flex-row gap-4`}>
<a
href={DISCORD_LINK}
target="_blank"

2
src/components/layout/Paper.tsx
View file

@ -7,7 +7,7 @@ export interface PaperProps {
export function Paper(props: PaperProps) {
return (
<div className={`bg-denim-200 rounded-xl p-12 ${props.className}`}>
<div className={`bg-denim-200 lg:rounded-xl px-4 sm:px-8 md:px-12 py-6 sm:py-8 md:py-12 ${props.className}`}>
{props.children}
</div>
)

2
src/components/media/VideoPlayer.tsx
View file

@ -14,7 +14,7 @@ export interface VideoPlayerProps {
export function SkeletonVideoPlayer(props: { error?: boolean }) {
return (
<div className="bg-denim-200 flex aspect-video w-full items-center justify-center rounded-xl">
<div className="bg-denim-200 flex aspect-video w-full items-center justify-center lg:rounded-xl">
{props.error ? (
<div className="flex flex-col items-center">
<IconPatch icon={Icons.WARNING} className="text-red-400" />

2
src/components/text/ArrowLink.tsx
View file

@ -26,7 +26,7 @@ export function ArrowLink(props: ArrowLinkProps) {
const isExternal = !!(props as IArrowLinkPropsExternal).url;
const isInternal = !!(props as IArrowLinkPropsInternal).to;
const content = (
<span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95">
<span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95 mt-1 pr-1">
{direction === "left" ? (
<span className="text-xl transition-transform group-hover:-translate-x-1">
<Icon icon={Icons.ARROW_LEFT} />

2
src/components/text/Title.tsx
View file

@ -3,5 +3,5 @@ export interface TitleProps {
}
export function Title(props: TitleProps) {
return <h1 className="text-4xl font-bold text-white">{props.children}</h1>;
return <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white">{props.children}</h1>;
}