wbrawner/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

CSS: adjust media query breakpoint to improve tablet readability

Browse source 
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 16 additions and 8 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
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;

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

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

2
core/css/apps.scss
View file

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

4
core/css/variables.scss
View file

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

BIN
core/js/dist/main.js vendored
View file

Binary file not shown.

BIN
core/js/dist/main.js.map vendored
View file

Binary file not shown.

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 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()