Add smaller Mobile size values

This commit is contained in:
Rafael 2021-12-21 10:47:24 -03:00 committed by Thomas Zarebczan
parent 79a4fa55e0
commit 75a922b0c9
7 changed files with 66 additions and 12 deletions

View file

@ -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;

View file

@ -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),
}
: {}
}

View file

@ -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);
}
}

View file

@ -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));
}
}

View file

@ -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 {

View file

@ -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;

View file

@ -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);