mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

CSS: adjust media query breakpoint to improve tablet readability 

see https://github.com/nextcloud/news/pull/467
This commit is contained in:
nacho 2019-04-23 15:13:11 -06:00 committed by John Molakvoæ (skjnldsv)
parent 89c701382f
commit 3c30d293fa
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
11 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
apps/files/css/mobile.scss
View File

@ -1,7 +1,8 @@
/* 938 = table min-width(688) + app-navigation width: 250 /* 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 */ 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{ .app-files #app-content.dir-drop{
background-color: rgba(255, 255, 255, 1)!important; background-color: rgba(255, 255, 255, 1)!important;

2
apps/files_sharing/css/public.scss
View File

@ -195,7 +195,7 @@ thead {
// hide the download entry on the menu // hide the download entry on the menu
// on public share when NOT on mobile // 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 { #body-public {
.header-right { .header-right {
#header-actions-menu { #header-actions-menu {

2
core/css/apps.scss
View File

@ -592,7 +592,7 @@ kbd {
/** /**
* !Important. We are defining the minimum requirement we want for flex * !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 * -> 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; $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;

4
core/css/variables.scss
View File

@ -92,5 +92,5 @@ $sidebar-max-width: 500px;
$list-min-width: 200px; $list-min-width: 200px;
$list-max-width: 300px; $list-max-width: 300px;
// mobile // mobile. Keep in sync with core/js/js.js
$breakpoint-mobile: 768px; $breakpoint-mobile: 1024px;

2
core/js/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

2
core/js/dist/main.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
core/js/dist/main.js_BACKUP_14797.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
core/js/dist/main.js_BASE_14797.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
core/js/dist/main.js_LOCAL_14797.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
core/js/dist/main.js_REMOTE_14797.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
core/src/init.js
View File

@ -30,6 +30,9 @@ import {setUp as setUpMainMenu} from './components/MainMenu'
import {setUp as setUpUserMenu} from './components/UserMenu' import {setUp as setUpUserMenu} from './components/UserMenu'
import PasswordConfirmation from './OC/password-confirmation' import PasswordConfirmation from './OC/password-confirmation'
// keep in sync with core/css/variables.scss
const breakpoint_mobile_width = 1024;
const resizeMenu = () => { const resizeMenu = () => {
const appList = $('#appmenu li') const appList = $('#appmenu li')
const rightHeaderWidth = $('.header-right').outerWidth() const rightHeaderWidth = $('.header-right').outerWidth()
@ -37,7 +40,7 @@ const resizeMenu = () => {
const usePercentualAppMenuLimit = 0.33 const usePercentualAppMenuLimit = 0.33
const minAppsDesktop = 8 const minAppsDesktop = 8
let availableWidth = headerWidth - $('#nextcloud').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210) let availableWidth = headerWidth - $('#nextcloud').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210)
const isMobile = $(window).width() < 768 const isMobile = $(window).width() < breakpoint_mobile_width
if (!isMobile) { if (!isMobile) {
availableWidth = availableWidth * usePercentualAppMenuLimit availableWidth = availableWidth * usePercentualAppMenuLimit
} }
@ -279,7 +282,7 @@ export const initCore = () => {
} }
const toggleSnapperOnSize = () => { const toggleSnapperOnSize = () => {
if ($(window).width() > 768) { if ($(window).width() > breakpoint_mobile_width) {
snapper.close() snapper.close()
snapper.disable() snapper.disable()