Commit f786833a authored by Manuel Tancoigne's avatar Manuel Tancoigne

Update layout, move sections to a right aside

parent d70002fb
<template>
<div id="app" v-bar="">
<i-layout>
<i-navbar variant="dark" class="_margin-bottom-1">
<div id="app" v-bar>
<div>
<i-navbar variant="dark" class="app__nav">
<i-navbar-brand to="/">
<logo variant="navbar" />
Typing Monkey
......@@ -24,8 +24,10 @@
</i-nav>
</i-navbar-items>
</i-navbar>
<router-view />
<i-layout-footer class="_margin-top-1">
<div class="app__main-layout">
<router-view />
</div>
<footer class="app__footer">
<i-container>
<i-row>
<i-column>
......@@ -43,8 +45,8 @@
</i-column>
</i-row>
</i-container>
</i-layout-footer>
</i-layout>
</footer>
</div>
</div>
</template>
<script>
......
body, html {
background-color: #f8f9fa;
}
table {
width: 100%;
}
#app{
#app {
height: 100vh;
overflow: hidden;
background-color: #F8F9FA;
}
.app {
&__main-layout {
display: flex;
min-height: calc(100vh - 8rem);
background-color: #FFF;
}
&__footer {
background: #F8F9FA;
height: 4rem;
}
}
.render-page{
.render-page {
&__content{
padding-top: 1rem;
}
&__raw pre {
font-size: .8em;
background: #CCC;
......@@ -10,18 +14,10 @@
padding: 1rem;
}
&__main-content {
max-height: calc(100vh - 13rem);
overflow-y: auto;
}
&__aside {
width: 20rem !important;
background-color: whitesmoke !important;
margin-top: -1rem;
margin-bottom: -1rem;
background-color: #ececec !important;
padding-top: 1rem;
padding-bottom: 1rem;
}
}
<template>
<i-layout vertical>
<i-layout-aside class="aside">
<i-layout class="render-page" vertical>
<i-layout-aside class="render-page__aside">
<i-container v-if="ready">
<section class="small _margin-bottom-1">
<strong>{{ $t('renderer.name') }}</strong> {{ templateMeta.name }}<br>
......@@ -22,17 +22,17 @@
v-model="variable.content"
:variable="variable" />
</section>
<section v-if="blocks.length > 0">
<h2 class="h3 _margin-y-0">
{{ $t('renderer.sections') }}
</h2>
<block v-for="block in blocks" :key="block.name" :block="block" @update="updateBlock" />
</section>
<!-- <section v-if="blocks.length > 0">-->
<!-- <h2 class="h3 _margin-y-0">-->
<!-- {{ $t('renderer.sections') }}-->
<!-- </h2>-->
<!-- <block v-for="block in blocks" :key="block.name" :block="block" @update="updateBlock" />-->
<!-- </section>-->
</i-form>
</i-container>
</i-layout-aside>
<i-layout-content>
<i-container>
<i-layout-content class="render-page__content">
<i-container :fluid="true">
<i-button-group class="_margin-bottom-1">
<i-button :active="displayTab === 'render'"
:variant="displayTab === 'render' ? 'primary' : ''"
......@@ -55,11 +55,8 @@
{{ $t('renderer.buttons.source') }}
</i-button>
</i-button-group>
<div class="main-content" :class="displayTab === 'render' ? 'render' : 'raw'">
<!-- <pre><strong>variables</strong>{{ variables }}</pre>-->
<!-- <pre><strong>blocks</strong>{{ blocks }}</pre>-->
<!-- <pre><strong>source</strong><br>{{ source }}</pre>-->
<!-- <pre><strong>preparedSource</strong><br>{{ preparedSource }}</pre>-->
<div class="render-page__main-content"
:class="displayTab === 'render' ? 'render-page__render' : 'render-page__raw'">
<pre v-show="displayTab === 'source'">{{ source }}</pre>
<pre v-if="ready" v-show="displayTab === 'md'">{{ renderedMd }}</pre>
<pre v-if="ready" v-show="displayTab === 'html'">{{ renderedText }}</pre>
......@@ -69,6 +66,18 @@
</div>
</i-container>
</i-layout-content>
<i-layout-aside v-if="blocks.length > 0" class="render-page__aside">
<i-container v-if="ready">
<i-form size="sm">
<section>
<h2 class="h3 _margin-y-0">
{{ $t('renderer.sections') }}
</h2>
<block v-for="block in blocks" :key="block.name" :block="block" @update="updateBlock" />
</section>
</i-form>
</i-container>
</i-layout-aside>
</i-layout>
</template>
......
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