studio-variable/geoproject-app
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: adjust iframe layout when editor panel opens

Browse source 
When editor panel tab-content is open, the preview iframe now scales down (0.7) and repositions with appropriate margins to provide optimal viewing alongside the editor panel. This creates a smooth transition between full-width preview and side-by-side editing mode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-05 11:02:18 +01:00
parent 8e3eb83431
commit 55881739ac
2 changed files with 41 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

26
src/App.vue
View file

@ -2,7 +2,7 @@
import PagedJsWrapper from './components/PagedJsWrapper.vue';
import EditorPanel from './components/editor/EditorPanel.vue';
import ElementPopup from './components/ElementPopup.vue';
import { onMounted, ref, watch, computed } from 'vue';
import { onMounted, ref, watch, computed, provide } from 'vue';
import { useStylesheetStore } from './stores/stylesheet';
import Coloris from '@melloware/coloris';
@ -10,6 +10,9 @@ const stylesheetStore = useStylesheetStore();
const previewFrame1 = ref(null);
const previewFrame2 = ref(null);
const elementPopup = ref(null);
const activeTab = ref('');
provide('activeTab', activeTab);
let savedScrollPercentage = 0;
const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
@ -133,8 +136,16 @@ onMounted(() => renderPreview(true));
<EditorPanel />
<iframe ref="previewFrame1" class="preview-frame"></iframe>
<iframe ref="previewFrame2" class="preview-frame"></iframe>
<iframe
ref="previewFrame1"
class="preview-frame"
:class="{ shifted: activeTab.length > 0 }"
></iframe>
<iframe
ref="previewFrame2"
class="preview-frame"
:class="{ shifted: activeTab.length > 0 }"
></iframe>
<ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
</template>
@ -147,7 +158,14 @@ onMounted(() => renderPreview(true));
width: 100vw;
height: 100vh;
border: none;
transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out, margin-left ease-in-out var(--curve),
transform ease-in-out var(--curve), height ease-in-out var(--curve);
}
.preview-frame.shifted {
margin-left: 19rem;
transform: scale(0.7) translateY(-30vh);
height: 142vh;
}
.preview-frame:nth-of-type(1) {

31
src/components/editor/EditorPanel.vue
View file

@ -27,7 +27,7 @@
</button>
</nav>
<div class="tab-content">
<div class="tab-content" :class="{ open: activeTab.length > 0 }">
<div v-if="activeTab === 'document'" class="tab-panel">
<PageSettings />
<TextSettings />
@ -45,21 +45,16 @@
</template>
<script setup>
import { ref, provide } from 'vue';
import { inject } from 'vue';
import PageSettings from './PageSettings.vue';
import TextSettings from './TextSettings.vue';
import StylesheetViewer from '../StylesheetViewer.vue';
// Tab management
const activeTab = ref('document');
// Provide activeTab to child components
provide('activeTab', activeTab);
const activeTab = inject('activeTab');
</script>
<style lang="scss" scoped>
#editor-panel {
padding: 1rem;
position: fixed;
top: 0;
left: 0;
@ -68,21 +63,33 @@ provide('activeTab', activeTab);
display: flex;
flex-direction: column;
z-index: 2;
background-color: var(--color-panel-bg);
box-shadow: -5px 0px 12px;
}
nav {
margin-bottom: 2rem;
position: absolute;
margin: 1rem 0 0 1rem;
display: flex;
gap: 0.5rem;
z-index: 2;
}
.tab-content {
flex: 1;
overflow: hidden;
position: relative;
left: -35rem;
padding: 4rem 1rem 1rem 1rem;
background-color: var(--color-panel-bg);
box-shadow: -5px 0px 12px;
transition: left ease-in-out var(--curve);
}
.tab-content.open {
left: 0rem;
}
.tab-panel {