kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Repo editor with flex layout

Browse source
This commit is contained in:
Eric Eastwood 2017-08-16 17:03:58 +00:00 committed by Jacob Schatz
parent 22f452d049
commit 49df411876
2 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/assets/javascripts/repo/components/repo.vue
View file

@ -43,15 +43,18 @@ export default {
</script> </script>
<template> <template>
<div class="repository-view tree-content-holder"> <div class="repository-view">
<repo-sidebar/><div v-if="isMini" <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isMini}">
class="panel-right" <repo-sidebar/>
:class="{'edit-mode': editMode}"> <div v-if="isMini"
<repo-tabs/> class="panel-right"
<component :class="{'edit-mode': editMode}">
:is="currentBlobView" <repo-tabs/>
class="blob-viewer-container"/> <component
<repo-file-buttons/> :is="currentBlobView"
class="blob-viewer-container"/>
<repo-file-buttons/>
</div>
</div> </div>
<repo-commit-section/> <repo-commit-section/>
<popup-dialog <popup-dialog

29
app/assets/stylesheets/pages/repo.scss
View file

@ -47,14 +47,26 @@
margin: 20px; margin: 20px;
} }
.repository-view.tree-content-holder { .repository-view {
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: $border-radius-default; border-radius: $border-radius-default;
color: $almost-black; color: $almost-black;
.tree-content-holder {
display: flex;
max-height: 100vh;
min-height: 300px;
}
.tree-content-holder-mini {
height: 100vh;
}
.panel-right { .panel-right {
display: inline-block; display: flex;
flex-direction: column;
width: 80%; width: 80%;
height: 100%;
.monaco-editor.vs { .monaco-editor.vs {
.line-numbers { .line-numbers {
@ -85,16 +97,17 @@
} }
.blob-viewer-container { .blob-viewer-container {
height: calc(100vh - 62px); flex: 1;
overflow: auto; overflow: auto;
} }
#tabs { #tabs {
flex-shrink: 0;
display: flex;
width: 100%;
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
display: flex;
white-space: nowrap; white-space: nowrap;
width: 100%;
overflow-y: hidden; overflow-y: hidden;
overflow-x: auto; overflow-x: auto;
@ -222,14 +235,12 @@
} }
#sidebar { #sidebar {
flex: 1;
height: 100%;
&.sidebar-mini { &.sidebar-mini {
display: inline-block;
vertical-align: top;
width: 20%; width: 20%;
border-right: 1px solid $white-normal; border-right: 1px solid $white-normal;
min-height: 475px;
height: calc(100vh + 20px);
overflow: auto; overflow: auto;
} }