CSS: adjust media query breakpoint to improve tablet readability (#15199)
CSS: adjust media query breakpoint to improve tablet readability
This commit is contained in:
commit
fd9ff581e2
|
@ -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;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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()
|
||||
|
||||
|
|
Loading…
Reference in New Issue