summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorEric Eastwood <contact@ericeastwood.com>2017-08-15 11:41:03 -0500
committerEric Eastwood <contact@ericeastwood.com>2017-08-15 12:56:23 -0500
commita221465a23788ae57b081f6eb86a8f7d0367b8b8 (patch)
tree3ad2eea074bcd90650fb30e59b4de8ab0b169ddd
parentc182c140b1970b9644e5ad0b54b469f3de0c2fa7 (diff)
downloadgitlab-ce-repo-fixes-flex-solution1.tar.gz
WIP: Repo editor with flex layoutrepo-fixes-flex-solution1
-rw-r--r--app/assets/javascripts/repo/components/repo.vue20
-rw-r--r--app/assets/stylesheets/pages/repo.scss28
2 files changed, 30 insertions, 18 deletions
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 3d5e01c8ec0..f35d698e756 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -43,15 +43,17 @@ export default {
</script>
<template>
- <div class="repository-view tree-content-holder">
- <repo-sidebar/><div v-if="isMini"
- class="panel-right"
- :class="{'edit-mode': editMode}">
- <repo-tabs/>
- <component
- :is="currentBlobView"
- class="blob-viewer-container"/>
- <repo-file-buttons/>
+ <div class="repository-view">
+ <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isMini}">
+ <repo-sidebar/><div v-if="isMini"
+ class="panel-right"
+ :class="{'edit-mode': editMode}">
+ <repo-tabs/>
+ <component
+ :is="currentBlobView"
+ class="blob-viewer-container"/>
+ <repo-file-buttons/>
+ </div>
</div>
<repo-commit-section/>
<popup-dialog
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 7ef05f56d80..9d376621c5b 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -52,14 +52,25 @@
margin: 20px;
}
-.repository-view.tree-content-holder {
+.repository-view {
border: 1px solid $border-color;
border-radius: $border-radius-default;
color: $almost-black;
+ .tree-content-holder {
+ display: flex;
+ max-height: 100vh;
+ }
+
+ .tree-content-holder-mini {
+ height: 100vh;
+ }
+
.panel-right {
- display: inline-block;
+ display: flex;
+ flex-direction: column;
width: 80%;
+ height: 100%;
.monaco-editor.vs {
.line-numbers {
@@ -90,16 +101,17 @@
}
.blob-viewer-container {
- height: calc(100vh - 62px);
+ flex: 1;
overflow: auto;
}
#tabs {
+ flex-shrink: 0;
+ display: flex;
+ width: 100%;
padding-left: 0;
margin-bottom: 0;
- display: flex;
white-space: nowrap;
- width: 100%;
overflow-y: hidden;
overflow-x: auto;
@@ -228,14 +240,12 @@
}
#sidebar {
+ flex: 1;
+ height: 100%;
&.sidebar-mini {
- display: inline-block;
- vertical-align: top;
width: 20%;
border-right: 1px solid $white-normal;
- min-height: 475px;
- height: calc(100vh + 20px);
overflow: auto;
}