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

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 {