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

correction page margins

Browse source
This commit is contained in:
Julie Blanc 2026-03-07 20:05:48 +01:00
parent 3ae2d0e310
commit 59f6716121
3 changed files with 32 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

54
public/assets/css/src/_panel-settings.scss
View file

@ -1,71 +1,75 @@
.panel-settings__container{ .panel-settings__container {
// margin-top: var(--space-m); // margin-top: var(--space-m);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
border: 1px solid var(--color-300); border: 1px solid var(--color-300);
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: var(--space-s); padding: var(--space-s);
.settings__header{ .settings__header {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-xs); gap: var(--space-xs);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
// border: 1px solid var(--color-300);
// border-radius: var(--border-radius);
// padding: 2px 1ch;
.icon{ .icon {
position: relative; position: relative;
top: 2px; top: 2px;
svg{
svg {
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: var(--color-600); fill: var(--color-600);
} }
} }
.title{
font-size: 1.2rem; .title {
color: var(--color-600); font-size: 1.2rem;
color: var(--color-600);
} }
} }
.setting__section{ .setting__section {
.setting__header{ .setting__header {
color: var(--color-600); color: var(--color-600);
} }
} }
.setting__section[data-setting="format"]{ .setting__section[data-setting="format"] {
border-bottom: none; border-bottom: none;
padding-bottom: var(--space-xs); padding-bottom: var(--space-xs);
} }
.setting__section[data-setting="dimensions"]{ .setting__section[data-setting="dimensions"] {
border-top: none; border-top: none;
padding-top: 0; padding-top: 0;
.setting__header{
.setting__header {
display: none; display: none;
} }
.setting__body{
.setting__body {
grid-column: 2; grid-column: 2;
width: 0; width: 0;
display: flex; display: flex;
gap: var(--space-s); gap: var(--space-s);
.field-size-page{
.field-size-page {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: var(--space-xs); gap: var(--space-xs);
} }
} }
.field-size-page:first-of-type .unit-toggle{ display: none; } .field-size-page:first-of-type .unit-toggle {
display: none;
}
} }
} }

2
public/assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

26
src/components/editor/PageSettings.vue
View file

@ -290,14 +290,7 @@ watch([customWidth, customHeight], () => {
const updateMargins = () => { const updateMargins = () => {
const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`; const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
stylesheetStore.updateProperty('@page', 'margin', marginValue, '');
const currentBlock = stylesheetStore.extractBlock('@page');
const updatedBlock = currentBlock.replace(
/(margin:\s*)[^;]+/,
`$1${marginValue}`
);
stylesheetStore.replaceBlock(currentBlock, updatedBlock);
}; };
// Watch margin values (number inputs) with debounce // Watch margin values (number inputs) with debounce
@ -330,22 +323,7 @@ watch(
const updateBackground = () => { const updateBackground = () => {
if (!background.value.value) return; if (!background.value.value) return;
stylesheetStore.updateProperty('@page', 'background', background.value.value, '');
const currentBlock = stylesheetStore.extractBlock('@page');
if (currentBlock.includes('background:')) {
const updatedBlock = currentBlock.replace(
/(background:\s*)[^;]+/,
`$1${background.value.value}`
);
stylesheetStore.replaceBlock(currentBlock, updatedBlock);
} else {
const updatedBlock = currentBlock.replace(
/(\s*})$/,
` background: ${background.value.value};\n$1`
);
stylesheetStore.replaceBlock(currentBlock, updatedBlock);
}
}; };
// Watch background value (text input) with debounce // Watch background value (text input) with debounce