Commit 52cf955b authored by André Luís's avatar André Luís

Improve MR file tree on small screens

parent 8f13e071
import Cookies from 'js-cookie'; import Cookies from 'js-cookie';
import { getParameterValues } from '~/lib/utils/url_utility'; 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'; import { INLINE_DIFF_VIEW_TYPE, DIFF_VIEW_COOKIE_NAME, MR_TREE_SHOW_KEY } from '../../constants';
const viewTypeFromQueryString = getParameterValues('view')[0]; const viewTypeFromQueryString = getParameterValues('view')[0];
...@@ -20,6 +21,7 @@ export default () => ({ ...@@ -20,6 +21,7 @@ export default () => ({
diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType, diffViewType: viewTypeFromQueryString || viewTypeFromCookie || defaultViewType,
tree: [], tree: [],
treeEntries: {}, treeEntries: {},
showTreeList: storedTreeShow === null ? true : storedTreeShow === 'true', showTreeList:
storedTreeShow === null ? bp.getBreakpointSize() !== 'xs' : storedTreeShow === 'true',
currentDiffFileId: '', currentDiffFileId: '',
}); });
...@@ -12,6 +12,15 @@ ...@@ -12,6 +12,15 @@
max-width: $max-width; 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 * Mixin for markdown tables
*/ */
......
...@@ -1046,3 +1046,19 @@ ...@@ -1046,3 +1046,19 @@
left: auto; left: auto;
line-height: 0; 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;
}
}
}
// Limit MR description for side-by-side diff view // Limit MR description for side-by-side diff view
.fixed-width-container { .fixed-width-container {
max-width: $limited-layout-width - ($gl-padding * 2); @include fixed-width-container;
margin-left: auto;
margin-right: auto;
} }
.issuable-warning-icon { .issuable-warning-icon {
......
---
title: Improve MR file tree in smaller screens
merge_request: 22273
author:
type: fixed
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment