CSS: adjust media query breakpoint to improve tablet readabilitytags/v17.0.0beta1
@@ -1,7 +1,8 @@ | |||
/* 938 = table min-width(688) + app-navigation width: 250 | |||
769 = size where app-navigation (768) is hidden +1 | |||
$breakpoint-mobile +1 = size where app-navigation is hidden +1 | |||
688 = table min-width */ | |||
@media only screen and (max-width: 938px) and (min-width: 769px), only screen and (max-width: 688px) { | |||
$min-table-width: 688px; | |||
@media only screen and (max-width: $min-table-width + $navigation-width) and (min-width: $breakpoint-mobile + 1), only screen and (max-width: $min-table-width) { | |||
.app-files #app-content.dir-drop{ | |||
background-color: rgba(255, 255, 255, 1)!important; |
@@ -195,7 +195,7 @@ thead { | |||
// hide the download entry on the menu | |||
// on public share when NOT on mobile | |||
@media only screen and (min-width: 769px) { | |||
@media only screen and (min-width: $mobile_breakpoint + 1) { | |||
#body-public { | |||
.header-right { | |||
#header-actions-menu { |
@@ -592,7 +592,7 @@ kbd { | |||
/** | |||
* !Important. We are defining the minimum requirement we want for flex | |||
* Just before the mobile breakpoint we have $breakpoint-mobile (768px) - $navigation-width | |||
* Just before the mobile breakpoint we have $breakpoint-mobile (1024px) - $navigation-width | |||
* -> 468px. In that case we want 200px for the list and 268px for the content | |||
*/ | |||
$min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width; |
@@ -92,5 +92,5 @@ $sidebar-max-width: 500px; | |||
$list-min-width: 200px; | |||
$list-max-width: 300px; | |||
// mobile | |||
$breakpoint-mobile: 768px; | |||
// mobile. Keep in sync with core/js/js.js | |||
$breakpoint-mobile: 1024px; |
@@ -30,6 +30,9 @@ import {setUp as setUpMainMenu} from './components/MainMenu' | |||
import {setUp as setUpUserMenu} from './components/UserMenu' | |||
import PasswordConfirmation from './OC/password-confirmation' | |||
// keep in sync with core/css/variables.scss | |||
const breakpoint_mobile_width = 1024; | |||
const resizeMenu = () => { | |||
const appList = $('#appmenu li') | |||
const rightHeaderWidth = $('.header-right').outerWidth() | |||
@@ -37,7 +40,7 @@ const resizeMenu = () => { | |||
const usePercentualAppMenuLimit = 0.33 | |||
const minAppsDesktop = 8 | |||
let availableWidth = headerWidth - $('#nextcloud').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210) | |||
const isMobile = $(window).width() < 768 | |||
const isMobile = $(window).width() < breakpoint_mobile_width | |||
if (!isMobile) { | |||
availableWidth = availableWidth * usePercentualAppMenuLimit | |||
} | |||
@@ -279,7 +282,7 @@ export const initCore = () => { | |||
} | |||
const toggleSnapperOnSize = () => { | |||
if ($(window).width() > 768) { | |||
if ($(window).width() > breakpoint_mobile_width) { | |||
snapper.close() | |||
snapper.disable() | |||