Mercurial > gemma
changeset 3022:0b19105c7c4b
client: panes: added flex display to panes
so that content can expand to full width and height automatically
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 12 Apr 2019 11:03:29 +0200 |
parents | 2e2a271c1026 |
children | 5d06629a14df |
files | client/src/components/Main.vue |
diffstat | 1 files changed, 31 insertions(+), 21 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Main.vue Thu Apr 11 18:57:40 2019 +0200 +++ b/client/src/components/Main.vue Fri Apr 12 11:03:29 2019 +0200 @@ -20,23 +20,25 @@ </div> <template v-if="panes.length === 1"> - <div id="pane1" class="pane wh-100"><component :is="panes[0]" /></div> + <div id="pane1" class="pane d-flex wh-100"> + <component :is="panes[0]" /> + </div> </template> <template v-if="panes.length === 2"> <template v-if="paneMode === 'horizontal'"> - <div id="pane1" class="pane w-100 h-50"> + <div id="pane1" class="pane d-flex w-100 h-50"> <component :is="panes[0]" /> </div> - <div id="pane2" class="pane w-100 h-50"> + <div id="pane2" class="pane d-flex w-100 h-50"> <component :is="panes[1]" /> </div> </template> <template v-if="paneMode === 'vertical'"> - <div id="pane1" class="pane w-50 h-100"> + <div id="pane1" class="pane d-flex w-50 h-100"> <component :is="panes[0]" /> </div> - <div id="pane2" class="pane w-50 h-100"> + <div id="pane2" class="pane d-flex w-50 h-100"> <component :is="panes[1]" /> </div> </template> @@ -44,56 +46,64 @@ <template v-if="panes.length === 3"> <template v-if="paneMode === 'top'"> - <div id="pane1" class="pane w-100 h-50"> + <div id="pane1" class="pane d-flex w-100 h-50"> <component :is="panes[0]" /> </div> - <div id="pane3" class="pane w-50 h-50"> + <div id="pane3" class="pane d-flex w-50 h-50"> <component :is="panes[2]" /> </div> - <div id="pane2" class="pane w-50 h-50"> + <div id="pane2" class="pane d-flex w-50 h-50"> <component :is="panes[1]" /> </div> </template> <template v-if="paneMode === 'right'"> - <div id="pane3" class="pane w-50 h-50"> + <div id="pane3" class="pane d-flex w-50 h-50"> <component :is="panes[2]" /> </div> - <div id="pane2" class="pane w-50 h-50"> + <div id="pane2" class="pane d-flex w-50 h-50"> <component :is="panes[1]" /> </div> - <div id="pane1" class="pane w-50 h-100"> + <div id="pane1" class="pane d-flex w-50 h-100"> <component :is="panes[0]" /> </div> </template> <template v-if="paneMode === 'bottom'"> - <div id="pane2" class="pane w-50 h-50"> + <div id="pane2" class="pane d-flex w-50 h-50"> <component :is="panes[1]" /> </div> - <div id="pane3" class="pane w-50 h-50"> + <div id="pane3" class="pane d-flex w-50 h-50"> <component :is="panes[2]" /> </div> - <div id="pane1" class="pane w-100 h-50"> + <div id="pane1" class="pane d-flex w-100 h-50"> <component :is="panes[0]" /> </div> </template> <template v-if="paneMode === 'left'"> - <div id="pane1" class="pane w-50 h-100"> + <div id="pane1" class="pane d-flex w-50 h-100"> <component :is="panes[0]" /> </div> - <div id="pane2" class="pane w-50 h-50"> + <div id="pane2" class="pane d-flex w-50 h-50"> <component :is="panes[1]" /> </div> - <div id="pane3" class="pane w-50 h-50"> + <div id="pane3" class="pane d-flex w-50 h-50"> <component :is="panes[2]" /> </div> </template> </template> <template v-if="panes.length === 4"> - <div id="pane1" class="pane w-50 h-50"><component :is="panes[0]" /></div> - <div id="pane2" class="pane w-50 h-50"><component :is="panes[1]" /></div> - <div id="pane4" class="pane w-50 h-50"><component :is="panes[3]" /></div> - <div id="pane3" class="pane w-50 h-50"><component :is="panes[2]" /></div> + <div id="pane1" class="pane d-flex w-50 h-50"> + <component :is="panes[0]" /> + </div> + <div id="pane2" class="pane d-flex w-50 h-50"> + <component :is="panes[1]" /> + </div> + <div id="pane4" class="pane d-flex w-50 h-50"> + <component :is="panes[3]" /> + </div> + <div id="pane3" class="pane d-flex w-50 h-50"> + <component :is="panes[2]" /> + </div> </template> </div> </template>