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

Merge pull request #12454 from nextcloud/list-shrink-fix

Browse source 
Fix breakpoint and shrinking of the content + list
This commit is contained in:
Morris Jobke 2018-11-14 20:58:24 +01:00 committed by GitHub
commit cbf90bf201
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
@media only screen and (max-width: 768px) {
@media only screen and (max-width: $breakpoint-mobile) {
/* make header scroll up for single shares, more view of content on small screens */
#header.share-file {

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

@ -207,7 +207,7 @@ thead {
}
// hide the primary on public share on mobile
@media only screen and (max-width: 768px) {
@media only screen and (max-width: $breakpoint-mobile) {
#body-public {
.header-right {
#header-primary-action {

15
core/css/apps.scss
View file

@ -599,6 +599,14 @@ kbd {
/* APP-CONTENT AND WRAPPER ------------------------------------------ */
/* Part where the content will be loaded into */
/**
* !Important. We are defining the minimum requirement we want for flex
* Just before the mobile breakpoint we have $breakpoint-mobile (768px) - $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;
#app-content {
z-index: 1000;
background-color: var(--color-main-background);
@ -626,7 +634,7 @@ kbd {
/* CONTENT DETAILS AFTER LIST*/
.app-content-details {
/* grow full width */
flex-grow: 1;
flex: 1 1 $min-content-width;
#app-navigation-toggle-back {
display: none;
}
@ -1100,7 +1108,6 @@ $popovericon-size: 16px;
/* CONTENT LIST ------------------------------------------------------------ */
.app-content-list {
max-width: 300px;
@include position('sticky');
top: $header-height;
border-right: 1px solid var(--color-border);
@ -1111,7 +1118,9 @@ $popovericon-size: 16px;
max-height: calc(100vh - #{$header-height});
overflow-y: auto;
overflow-x: hidden;
flex: 0 1 300px;
flex: 1 1 $list-min-width;
min-width: $list-min-width;
max-width: $list-max-width;
/* Default item */
.app-content-list-item {

4
core/css/mobile.scss
View file

@ -1,4 +1,4 @@
@media only screen and (max-width: 768px) {
@media only screen and (max-width: $breakpoint-mobile) {
/* position share dropdown */
#dropdown {
@ -114,7 +114,7 @@
display: none;
}
#body-settings #controls {
min-width: 768px !important;
min-width: $breakpoint-mobile !important;
}
/* do not show dates in filepicker */

5
core/css/variables.scss
View file

@ -87,3 +87,8 @@ $header-height: 50px;
$navigation-width: 300px;
$sidebar-min-width: 300px;
$sidebar-max-width: 500px;
$list-min-width: 200px;
$list-max-width: 300px;
// mobile
$breakpoint-mobile: 768px;

2
settings/css/settings.scss
View file

@ -905,7 +905,7 @@ span.version {
}
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: $breakpoint-mobile) {
.store .section {
width: 50%;
}

2
tests/acceptance/features/bootstrap/FilesSharingAppContext.php
View file

@ -198,7 +198,7 @@ class FilesSharingAppContext implements Context, ActorAwareInterface {
PHPUnit_Framework_Assert::fail("The Share menu is not visible yet after $timeout seconds");
}
// The acceptance tests are run in a window wider than 768px, so the
// The acceptance tests are run in a window wider than the mobile breakpoint, so the
// download item should not be shown in the menu (although it will be in
// the DOM).
PHPUnit_Framework_Assert::assertFalse(