see https://github.com/nextcloud/news/pull/467tags/v17.0.0beta1
/* 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; |
// 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 { |
/** | /** | ||||
* !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; |
$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; |
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() | ||||