diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-10-12 11:16:55 +0000 |
---|---|---|
committer | Jan Provaznik <jprovaznik@gitlab.com> | 2018-10-15 13:25:53 +0200 |
commit | 714e7eb12e218b1707bcd6e4257426d59598a631 (patch) | |
tree | b4800a91e27c9e7be7e71392479776c3007af4fa | |
parent | 8edb5b5fb30be6c614372c732c00eca1a5c395fe (diff) | |
download | gitlab-ce-714e7eb12e218b1707bcd6e4257426d59598a631.tar.gz |
Merge branch '52361-fix-file-tree-mobile' into 'master'
Resolve "Make file browser hidden by default for mobile screens" and improve layout in small screens too
Closes #52361
See merge request gitlab-org/gitlab-ce!22273
-rw-r--r-- | app/assets/javascripts/diffs/store/modules/diff_state.js | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/mixins.scss | 9 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/diff.scss | 16 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/issuable.scss | 4 | ||||
-rw-r--r-- | changelogs/unreleased/52361-fix-file-tree-mobile.yml | 5 |
5 files changed, 34 insertions, 4 deletions
diff --git a/app/assets/javascripts/diffs/store/modules/diff_state.js b/app/assets/javascripts/diffs/store/modules/diff_state.js index ae8930c8968..1c5c35071de 100644 --- a/app/assets/javascripts/diffs/store/modules/diff_state.js +++ b/app/assets/javascripts/diffs/store/modules/diff_state.js @@ -1,5 +1,6 @@ import Cookies from 'js-cookie'; import { getParameterValues } from '~/lib/utils/url_utility'; +import bp from '~/breakpoints'; import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME, MR_TREE_SHOW_KEY } from '../../constants'; const viewTypeFromQueryString = getParameterValues('view')[0]; @@ -20,6 +21,7 @@ export default () => ({ diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType, tree: [], treeEntries: {}, - showTreeList: storedTreeShow === null ? true : storedTreeShow === 'true', + showTreeList: + storedTreeShow === null ? bp.getBreakpointSize() !== 'xs' : storedTreeShow === 'true', currentDiffFileId: '', }); diff --git a/app/assets/stylesheets/framework/mixins.scss b/app/assets/stylesheets/framework/mixins.scss index be41dbfc61f..1c84baf68ed 100644 --- a/app/assets/stylesheets/framework/mixins.scss +++ b/app/assets/stylesheets/framework/mixins.scss @@ -12,6 +12,15 @@ max-width: $max-width; } +/** + * Mixin for fixed width container + */ +@mixin fixed-width-container { + max-width: $limited-layout-width - ($gl-padding * 2); + margin-left: auto; + margin-right: auto; +} + /* * Mixin for markdown tables */ diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index 17b02c6e31e..cba5324ce53 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -1046,3 +1046,19 @@ left: auto; line-height: 0; } + +@media (max-width: map-get($grid-breakpoints, md)-1) { + .diffs .files { + @include fixed-width-container; + flex-direction: column; + + .diff-tree-list { + width: 100%; + } + + .tree-list-holder { + max-height: calc(50px + 50vh); + padding-right: 0; + } + } +} diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss index 62a9f97caa9..00b06aea898 100644 --- a/app/assets/stylesheets/pages/issuable.scss +++ b/app/assets/stylesheets/pages/issuable.scss @@ -1,8 +1,6 @@ // Limit MR description for side-by-side diff view .fixed-width-container { - max-width: $limited-layout-width - ($gl-padding * 2); - margin-left: auto; - margin-right: auto; + @include fixed-width-container; } .issuable-warning-icon { diff --git a/changelogs/unreleased/52361-fix-file-tree-mobile.yml b/changelogs/unreleased/52361-fix-file-tree-mobile.yml new file mode 100644 index 00000000000..fe978eeca2d --- /dev/null +++ b/changelogs/unreleased/52361-fix-file-tree-mobile.yml @@ -0,0 +1,5 @@ +--- +title: Improve MR file tree in smaller screens +merge_request: 22273 +author: +type: fixed |