7x31/nginxconfig.io
1
0
Fork 0
mirror of https://github.com/digitalocean/nginxconfig.io.git synced 2025-08-08 09:49:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add toggle for column layout

Browse Source
This commit is contained in:
MattIPv4
2020-05-08 16:16:16 +01:00
parent ab3cb155d2
commit 627fc0cb7f
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/nginxconfig/templates/app.vue
View File

@@ -23,12 +23,14 @@ limitations under the License.
<template v-slot:header> <template v-slot:header>
</template> </template>
<template v-slot:buttons> <template v-slot:buttons>
<a v-if="splitColumn" class="button is-primary is-outline" @click="splitColumn = false">Single column mode</a>
<a v-else class="button is-primary" @click="splitColumn = true">Split column mode</a>
</template> </template>
</Header> </Header>
<div class="main container" :style="{ display: ready ? undefined : 'none' }"> <div class="main container" :style="{ display: ready ? undefined : 'none' }">
<div class="columns"> <div class="columns is-multiline">
<div class="column is-half is-full-mobile is-full-tablet"> <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
<h2>Per-website config</h2> <h2>Per-website config</h2>
<div class="tabs"> <div class="tabs">
@@ -59,7 +61,7 @@ limitations under the License.
<Setup :data="{ domains, global }"></Setup> <Setup :data="{ domains, global }"></Setup>
</div> </div>
<div class="column is-half is-full-mobile is-full-tablet"> <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
<h2>Config files</h2> <h2>Config files</h2>
<Prism language="json" :code="exportData"></Prism> <Prism language="json" :code="exportData"></Prism>
</div> </div>
@@ -102,6 +104,7 @@ limitations under the License.
global: Global.delegated, global: Global.delegated,
active: 0, active: 0,
ready: false, ready: false,
splitColumn: false,
}; };
}, },
computed: { computed: {