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 { 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: '',
});
......@@ -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
*/
......
......@@ -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;
}
}
}
// 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 {
......
---
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