Commit 49df4118 authored by Eric Eastwood's avatar Eric Eastwood Committed by Jacob Schatz

Repo editor with flex layout

parent 22f452d0
...@@ -43,15 +43,18 @@ export default { ...@@ -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
......
...@@ -47,14 +47,26 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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;
} }
......
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