studio-variable/geoproject-app
5
0
Fork 0
Code Issues 3 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) {