djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

resizable elements

Browse Source
This commit is contained in:
Jonathan Baecker 2020-04-08 17:25:06 +02:00
parent de99bb5ebc
commit b7b0089e3d
1 changed files with 54 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ffplayout/frontend/pages/control.vue
View File

@ -2,8 +2,8 @@
<div> <div>
<b-container class="control-container"> <b-container class="control-container">
<b-row> <b-row>
<b-col cols="3" class="player-col"> <b-col cols="3">
<b-aspect aspect="16:9"> <b-aspect class="player-col" aspect="16:9">
Player Player
</b-aspect> </b-aspect>
</b-col> </b-col>
@ -11,8 +11,8 @@
control control
</b-col> </b-col>
</b-row> </b-row>
<b-row> <splitpanes class="default-theme pane-row">
<b-col cols="3" class="browser-col"> <pane min-size="20" size="24">
<div v-if="folderTree.tree" class="browser-div"> <div v-if="folderTree.tree" class="browser-div">
<div> <div>
<b-breadcrumb> <b-breadcrumb>
@ -34,16 +34,25 @@
class="browser-item" class="browser-item"
> >
<b-link @click="getPath(`${folderTree.tree[0]}/${folder}`)"> <b-link @click="getPath(`${folderTree.tree[0]}/${folder}`)">
{{ folder }} <b-icon-folder-fill class="browser-icons" /> {{ folder }}
</b-link>
</b-list-group-item>
<b-list-group-item
v-for="file in folderTree.tree[2]"
:key="file.key"
class="browser-item"
>
<b-link>
<b-icon-film class="browser-icons" /> {{ file }}
</b-link> </b-link>
</b-list-group-item> </b-list-group-item>
</b-list-group> </b-list-group>
</div> </div>
</b-col> </pane>
<b-col cols="9" class="playlist-col"> <pane>
playlist <h2>Playlist</h2>
</b-col> </pane>
</b-row> </splitpanes>
</b-container> </b-container>
</div> </div>
</template> </template>
@ -73,10 +82,11 @@ export default {
} }
</script> </script>
<style> <style lang="scss">
.control-container { .control-container {
max-width: 100%; max-width: 100%;
margin: .5em; margin: .5em;
padding: 0;
} }
.player-col { .player-col {
@ -84,9 +94,42 @@ export default {
min-width: 300px; min-width: 300px;
} }
.pane-row {
margin: 8px 0 0 0;
}
.browser-div {
width: 100%;
}
.browser-list { .browser-list {
max-height: 600px; max-height: 600px;
overflow-y: scroll; overflow-y: scroll;
} }
.splitpanes__pane {
width: 30%;
}
.splitpanes.default-theme .splitpanes__pane {
background-color: $dark;
box-shadow: 0 0 10px rgba(0, 0, 0, .2) inset;
justify-content: center;
align-items: center;
display: flex;
position: relative;
}
.default-theme.splitpanes--vertical > .splitpanes__splitter, .default-theme .splitpanes--vertical > .splitpanes__splitter {
border-left: 1px solid $dark;
}
.splitpanes.default-theme .splitpanes__splitter {
background-color: $dark;
}
.splitpanes.default-theme .splitpanes__splitter::after, .splitpanes.default-theme .splitpanes__splitter::before {
background-color: rgba(136, 136, 136, 0.38);
}
</style> </style>