Browse Source

CSS: adjust media query breakpoint to improve tablet readability

see https://github.com/nextcloud/news/pull/467
tags/v17.0.0beta1
nacho 5 years ago
parent
commit
3c30d293fa
No account linked to committer's email address

+ 3
- 2
apps/files/css/mobile.scss View File

/* 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;

+ 1
- 1
apps/files_sharing/css/public.scss View File



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

+ 1
- 1
core/css/apps.scss View File



/** /**
* !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;

+ 2
- 2
core/css/variables.scss View File

$list-min-width: 200px; $list-min-width: 200px;
$list-max-width: 300px; $list-max-width: 300px;


// mobile
$breakpoint-mobile: 768px;
// mobile. Keep in sync with core/js/js.js
$breakpoint-mobile: 1024px;

+ 1
- 1
core/js/dist/main.js
File diff suppressed because it is too large
View File


+ 1
- 1
core/js/dist/main.js.map
File diff suppressed because it is too large
View File


+ 1
- 0
core/js/dist/main.js_BACKUP_14797.map
File diff suppressed because it is too large
View File


+ 1
- 0
core/js/dist/main.js_BASE_14797.map
File diff suppressed because it is too large
View File


+ 1
- 0
core/js/dist/main.js_LOCAL_14797.map
File diff suppressed because it is too large
View File


+ 1
- 0
core/js/dist/main.js_REMOTE_14797.map
File diff suppressed because it is too large
View File


+ 5
- 2
core/src/init.js View File

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


const toggleSnapperOnSize = () => { const toggleSnapperOnSize = () => {
if ($(window).width() > 768) {
if ($(window).width() > breakpoint_mobile_width) {
snapper.close() snapper.close()
snapper.disable() snapper.disable()



Loading…
Cancel
Save