diff options
| author | Morris Jobke <hey@morrisjobke.de> | 2018-11-14 20:58:24 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-11-14 20:58:24 +0100 |
| commit | cbf90bf201ba5e61aee39dc6f0726153b833478a (patch) | |
| tree | 3e51c5d20fffb688ecb4b461b3814dd9a7df6bba /core | |
| parent | 1783fa71765132ac11a4dc21b299ebfa52756bca (diff) | |
| parent | f8bed7d58577685234a100cdb5f55d4cca94096f (diff) | |
| download | nextcloud-server-cbf90bf201ba5e61aee39dc6f0726153b833478a.tar.gz nextcloud-server-cbf90bf201ba5e61aee39dc6f0726153b833478a.zip | |
Merge pull request #12454 from nextcloud/list-shrink-fix
Fix breakpoint and shrinking of the content + list
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/apps.scss | 15 | ||||
| -rw-r--r-- | core/css/mobile.scss | 4 | ||||
| -rw-r--r-- | core/css/variables.scss | 5 |
3 files changed, 19 insertions, 5 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss index b7afc19705d..039374bf726 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -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 { diff --git a/core/css/mobile.scss b/core/css/mobile.scss index f7f3827eba5..3e21672df82 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -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 */ diff --git a/core/css/variables.scss b/core/css/variables.scss index a827629479c..2ec9ba333b4 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -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; |