mirrors/jellyseerr
1
0
Fork 0
mirror of https://github.com/fallenbagel/jellyseerr.git synced 2026-01-07 15:18:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): experimental status bar style change for ios pwa app

Browse Source 
this might break things. just an experiment. :)
This commit is contained in:
sct
2021-03-22 01:22:24 +09:00
parent 8ebc829250
commit 958cdf98fd
11 changed files with 110 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Common/ImageFader/index.tsx
View File

@@ -1,8 +1,8 @@
import React, {
useState,
useEffect,
HTMLAttributes,
ForwardRefRenderFunction,
HTMLAttributes,
useEffect,
useState,
} from 'react';
import CachedImage from '../CachedImage';
@@ -59,7 +59,7 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
{backgroundImages.map((imageUrl, i) => (
<div
key={`banner-image-${i}`}
className={`absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
className={`absolute absolute-top-shift inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
i === activeIndex ? 'opacity-100' : 'opacity-0'
}`}
{...props}

13
src/components/Common/Modal/index.tsx
View File

@@ -1,12 +1,12 @@
import React, { MouseEvent, ReactNode, useRef } from 'react';
import ReactDOM from 'react-dom';
import Button, { ButtonType } from '../Button';
import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
import LoadingSpinner from '../LoadingSpinner';
import useClickOutside from '../../../hooks/useClickOutside';
import { useIntl } from 'react-intl';
import useClickOutside from '../../../hooks/useClickOutside';
import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
import globalMessages from '../../../i18n/globalMessages';
import Transition from '../../Transition';
import Button, { ButtonType } from '../Button';
import LoadingSpinner from '../LoadingSpinner';
interface ModalProps {
title?: string;
@@ -98,11 +98,14 @@ const Modal: React.FC<ModalProps> = ({
show={!loading}
>
<div
className="inline-block w-full max-h-full px-4 pt-5 pb-4 overflow-auto text-left align-bottom transition-all transform bg-gray-700 shadow-xl sm:rounded-lg sm:my-8 sm:align-middle sm:max-w-3xl"
className="relative inline-block w-full px-4 pt-5 pb-4 overflow-auto text-left align-bottom transition-all transform bg-gray-700 shadow-xl sm:rounded-lg sm:my-8 sm:align-middle sm:max-w-3xl"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
ref={modalRef}
style={{
maxHeight: 'calc(100% - env(safe-area-inset-top) * 2)',
}}
>
<div className="sm:flex sm:items-center">
{iconSvg && (

6
src/components/Common/SlideOver/index.tsx
View File

@@ -1,8 +1,8 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useState, useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import Transition from '../../Transition';
import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
import Transition from '../../Transition';
interface SlideOverProps {
show?: boolean;
@@ -70,7 +70,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
onClick={(e) => e.stopPropagation()}
>
<div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
<header className="px-4 py-6 space-y-1 bg-indigo-600">
<header className="px-4 space-y-1 bg-indigo-600 slideover">
<div className="flex items-center justify-between space-x-3">
<h2 className="text-lg font-medium leading-7 text-white">
{title}