Add smaller Mobile size values
This commit is contained in:
parent
79a4fa55e0
commit
75a922b0c9
7 changed files with 66 additions and 12 deletions
|
@ -31,6 +31,7 @@ import {
|
|||
STATUS_DOWN,
|
||||
} from 'web/effects/use-degraded-performance';
|
||||
import LANGUAGE_MIGRATIONS from 'constants/language-migrations';
|
||||
import { useIsMobile } from 'effects/use-screensize';
|
||||
|
||||
const FileDrop = lazyImport(() => import('component/fileDrop' /* webpackChunkName: "fileDrop" */));
|
||||
const NagContinueFirstRun = lazyImport(() => import('component/nagContinueFirstRun' /* webpackChunkName: "nagCFR" */));
|
||||
|
@ -122,6 +123,7 @@ function App(props: Props) {
|
|||
fetchModAmIList,
|
||||
} = props;
|
||||
|
||||
const isMobile = useIsMobile();
|
||||
const appRef = useRef();
|
||||
const isEnhancedLayout = useKonamiListener();
|
||||
const [hasSignedIn, setHasSignedIn] = useState(false);
|
||||
|
@ -154,7 +156,7 @@ function App(props: Props) {
|
|||
const shouldMigrateLanguage = LANGUAGE_MIGRATIONS[language];
|
||||
const hasActiveChannelClaim = activeChannelId !== undefined;
|
||||
const isPersonalized = !IS_WEB || hasVerifiedEmail;
|
||||
const renderFiledrop = !IS_WEB || isAuthenticated;
|
||||
const renderFiledrop = !isMobile && isAuthenticated;
|
||||
const isOnline = navigator.onLine;
|
||||
|
||||
let uri;
|
||||
|
|
|
@ -21,6 +21,7 @@ import AutoplayCountdown from 'component/autoplayCountdown';
|
|||
// scss/init/vars.scss
|
||||
// --header-height
|
||||
const HEADER_HEIGHT = 64;
|
||||
const HEADER_HEIGHT_MOBILE = 56;
|
||||
|
||||
const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
|
||||
const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100;
|
||||
|
@ -343,7 +344,11 @@ export default function FileRenderFloating(props: Props) {
|
|||
width: fileViewerRect.width,
|
||||
height: fileViewerRect.height,
|
||||
left: fileViewerRect.x,
|
||||
top: fileViewerRect.windowOffset + fileViewerRect.top - HEADER_HEIGHT - (IS_DESKTOP_MAC ? 24 : 0),
|
||||
top:
|
||||
fileViewerRect.windowOffset +
|
||||
fileViewerRect.top -
|
||||
(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT) -
|
||||
(IS_DESKTOP_MAC ? 24 : 0),
|
||||
}
|
||||
: {}
|
||||
}
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-xs);
|
||||
height: var(--header-height-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -67,13 +68,10 @@
|
|||
height: var(--header-height);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.card__actions--between {
|
||||
.header__menu--left {
|
||||
@media (max-width: $breakpoint-small) {
|
||||
max-width: 3rem;
|
||||
}
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-xs);
|
||||
height: var(--header-height-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -126,6 +124,10 @@
|
|||
&[aria-expanded='true'] {
|
||||
background-color: var(--color-header-button-active);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
height: var(--height-button-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigationItem--icon {
|
||||
|
@ -147,6 +149,7 @@
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin: 0;
|
||||
width: var(--height-button-mobile);
|
||||
}
|
||||
|
||||
span {
|
||||
|
@ -169,12 +172,26 @@
|
|||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin: 0;
|
||||
|
||||
.channel-thumbnail {
|
||||
height: var(--height-button-mobile);
|
||||
width: var(--height-button-mobile);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigationItem--iconSkeleton {
|
||||
@extend .header__navigationItem--icon;
|
||||
height: var(--height-button) !important;
|
||||
width: var(--height-button) !important;
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
height: var(--height-button-mobile) !important;
|
||||
width: var(--height-button-mobile) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigationItem--balance {
|
||||
|
@ -185,12 +202,23 @@
|
|||
&:hover {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigationItem--balanceLoading {
|
||||
margin: 0 var(--spacing-s);
|
||||
width: 4rem;
|
||||
background-color: var(--color-header-button);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
margin: 0 !important;
|
||||
width: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header__navigationItem--logo {
|
||||
|
@ -254,6 +282,5 @@
|
|||
.ReactModal__Overlay {
|
||||
.button--close {
|
||||
margin: 0;
|
||||
margin-top: var(--spacing-xxs);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
padding: var(--spacing-xs);
|
||||
padding-top: var(--spacing-m);
|
||||
margin-top: var(--header-height-mobile);
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-large) {
|
||||
|
@ -86,6 +86,7 @@
|
|||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - var(--header-height-mobile));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
.navigation__wrapper {
|
||||
width: var(--side-nav-width);
|
||||
height: calc(100vh - var(--header-height));
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
height: calc(100vh - var(--header-height-mobile));
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__wrapper--micro {
|
||||
|
@ -48,6 +52,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
top: var(--header-height-mobile);
|
||||
height: calc(100vh - var(--header-height-mobile));
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-bottom: var(--spacing-s);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
@ -294,6 +303,10 @@
|
|||
&.navigation__overlay--mac {
|
||||
top: calc(var(--header-height) + var(--mac-titlebar-height));
|
||||
}
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
top: var(--header-height-mobile);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation__overlay--active {
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
.wunderbar__wrapper--mobile {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
height: var(--header-height);
|
||||
height: var(--header-height-mobile);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
@ -113,10 +113,14 @@
|
|||
border-top: none;
|
||||
padding-top: var(--spacing-xs);
|
||||
margin: 0 var(--spacing-s);
|
||||
|
||||
@media (max-width: $breakpoint-small) {
|
||||
top: calc(var(--header-height-mobile) - (var(--height-input)) + 3px);
|
||||
}
|
||||
}
|
||||
|
||||
.wunderbar__suggestions--mobile {
|
||||
top: calc(var(--header-height) - var(--spacing-xs));
|
||||
top: calc(var(--header-height-mobile) - var(--spacing-xs));
|
||||
margin-top: var(--spacing-m);
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
--border-radius: 10px;
|
||||
--height-input: 2.5rem;
|
||||
--height-button: 2.5rem;
|
||||
--height-button-mobile: 2rem;
|
||||
--height-checkbox: 24px;
|
||||
--height-radio: 24px;
|
||||
--height-badge: 24px;
|
||||
|
@ -67,6 +68,7 @@
|
|||
// This is tied to the floating player so it knows where to attach to
|
||||
// ui/component/fileRenderFloating/view.jsx
|
||||
--header-height: 64px;
|
||||
--header-height-mobile: 56px;
|
||||
|
||||
// Inline Player
|
||||
--inline-player-max-height: calc(100vh - var(--header-height) - var(--spacing-l) * 4);
|
||||
|
|
Loading…
Reference in a new issue