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

fix: close Coloris picker on iframe clicks and improve editor styling

Browse source 
Add click handler on iframe to close Coloris color picker when user clicks
in the preview area. Also improve editor panel spacing and styling consistency.

Coloris Close Fix:
- Import Coloris in App.vue
- Add click listener on iframe document to call Coloris.close()
- Fixes issue where Coloris remained open when clicking in preview iframe
  (clicks in iframes don't bubble to parent document)

Editor Styling Improvements:
- Increase EditorPanel width from 30rem to 35rem for better readability
- Add CSS variable --space-xs (0.5rem) for consistent spacing
- Improve form field spacing with gaps and better padding
- Add row-gap to margins subsection
- Fix input-with-color width and button height (1.1rem)
- Add gap to unit-toggle buttons
- Better visual hierarchy with margins on h2 and h3

CSS Changes:
- _forms.scss: Consistent spacing, better input padding, gap utilities
- _variables.scss: Add --space-xs variable
- Compiled CSS updated with new styles

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
isUnknown 2025-12-04 16:14:50 +01:00
parent 6a01909b38
commit 3bd6c7ca19
8 changed files with 91 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

27
public/assets/css/src/_forms.scss
View file

@ -11,31 +11,49 @@ input[type="number"] {
.settings-section {
h2 {
border-bottom: 1px solid #000;
margin-bottom: var(--space-xs);
}
.settings-subsection:not(:last-child) {
border-bottom: 1px solid var(--color-browngray-050);
}
.settings-subsection {
padding: 0.5rem 0;
padding: var(--space-xs) 0;
h3 {
margin-bottom: var(--space-xs);
}
.field {
display: flex;
label {
label,
select {
width: 50%;
}
input {
padding: 0.1rem 0.1rem 0.1rem 0.3rem;
}
.input-with-unit {
display: flex;
gap: 0.3rem;
.unit-toggle {
display: flex;
gap: 0.3rem;
}
}
.input-with-color {
width: 50%;
.clr-field {
display: flex;
button {
position: absolute;
transform: none;
height: 1rem;
height: 1.1rem;
top: auto;
right: auto;
cursor: pointer;
@ -43,6 +61,7 @@ input[type="number"] {
input {
padding-left: 2.5rem;
width: 100%;
}
}
}
@ -51,6 +70,8 @@ input[type="number"] {
&.margins {
display: flex;
flex-wrap: wrap;
row-gap: var(--space-xs);
h3 {
width: 100%;
}

2
public/assets/css/src/_variables.scss
View file

@ -5,4 +5,6 @@
--color-browngray-300: #b5a9a1;
--border-radius: 0.2rem;
--space-xs: 0.5rem;
}

25
public/assets/css/style.css
View file

@ -31,6 +31,7 @@ button {
--color-browngray-200: #d0c4ba;
--color-browngray-300: #b5a9a1;
--border-radius: 0.2rem;
--space-xs: 0.5rem;
}
body,
@ -80,21 +81,37 @@ input[type=number] {
.settings-section h2 {
border-bottom: 1px solid #000;
margin-bottom: var(--space-xs);
}
.settings-section .settings-subsection:not(:last-child) {
border-bottom: 1px solid var(--color-browngray-050);
}
.settings-section .settings-subsection {
padding: 0.5rem 0;
padding: var(--space-xs) 0;
}
.settings-section .settings-subsection h3 {
margin-bottom: var(--space-xs);
}
.settings-section .settings-subsection .field {
display: flex;
}
.settings-section .settings-subsection .field label {
.settings-section .settings-subsection .field label,
.settings-section .settings-subsection .field select {
width: 50%;
}
.settings-section .settings-subsection .field input {
padding: 0.1rem 0.1rem 0.1rem 0.3rem;
}
.settings-section .settings-subsection .field .input-with-unit {
display: flex;
gap: 0.3rem;
}
.settings-section .settings-subsection .field .input-with-unit .unit-toggle {
display: flex;
gap: 0.3rem;
}
.settings-section .settings-subsection .field .input-with-color {
width: 50%;
}
.settings-section .settings-subsection .field .input-with-color .clr-field {
display: flex;
@ -102,17 +119,19 @@ input[type=number] {
.settings-section .settings-subsection .field .input-with-color .clr-field button {
position: absolute;
transform: none;
height: 1rem;
height: 1.1rem;
top: auto;
right: auto;
cursor: pointer;
}
.settings-section .settings-subsection .field .input-with-color .clr-field input {
padding-left: 2.5rem;
width: 100%;
}
.settings-section .settings-subsection.margins {
display: flex;
flex-wrap: wrap;
row-gap: var(--space-xs);
}
.settings-section .settings-subsection.margins h3 {
width: 100%;

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

@ -1 +1 @@
{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;AD2BF;;AEjCA;;;;;;;;;;;;;EAaE,uBAAA;AFoCF;;AGjDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHoDF;AGlDA;EACE,8BAAA;OAAA,kBAAA;AHoDF;;AGjDA;EACE;IACE,sBAAA;EHoDF;AACF;AGlDA;EACE,+BAAA;AHoDF;;AInEA;;;EAGE,4CAAA;AJsEF;;AInEA;EACE,YAAA;AJsEF;;AIlEE;EACE,6BAAA;AJqEJ;AInEE;EACE,mDAAA;AJqEJ;AIlEE;EACE,iBAAA;AJoEJ;AIlEI;EACE,aAAA;AJoEN;AInEM;EACE,UAAA;AJqER;AIlEM;EACE,aAAA;AJoER;AIhEQ;EACE,aAAA;AJkEV;AIjEU;EACE,kBAAA;EACA,eAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJmEZ;AIhEU;EACE,oBAAA;AJkEZ;AI5DI;EACE,aAAA;EACA,eAAA;AJ8DN;AI7DM;EACE,WAAA;AJ+DR;AI7DM;EACE,UAAA;AJ+DR;AI7DQ;EACE,UAAA;AJ+DV;AI3DU;EACE,UAAA;AJ6DZ;;AK9HA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;ALgIF;AK9HE;EACE,sBAAA;EACA,WAAA;ALgIJ;AK5HI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;AL8HN","file":"style.css"}
{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;AD0BF;;AElCA;;;;;;;;;;;;;EAaE,uBAAA;AFqCF;;AGlDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHqDF;AGnDA;EACE,8BAAA;OAAA,kBAAA;AHqDF;;AGlDA;EACE;IACE,sBAAA;EHqDF;AACF;AGnDA;EACE,+BAAA;AHqDF;;AIpEA;;;EAGE,4CAAA;AJuEF;;AIpEA;EACE,YAAA;AJuEF;;AInEE;EACE,6BAAA;EACA,8BAAA;AJsEJ;AIpEE;EACE,mDAAA;AJsEJ;AInEE;EACE,0BAAA;AJqEJ;AInEI;EACE,8BAAA;AJqEN;AIlEI;EACE,aAAA;AJoEN;AIlEM;;EAEE,UAAA;AJoER;AIjEM;EACE,oCAAA;AJmER;AIhEM;EACE,aAAA;EACA,WAAA;AJkER;AIhEQ;EACE,aAAA;EACA,WAAA;AJkEV;AI9DM;EACE,UAAA;AJgER;AI/DQ;EACE,aAAA;AJiEV;AIhEU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJkEZ;AI/DU;EACE,oBAAA;EACA,WAAA;AJiEZ;AI3DI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ6DN;AI3DM;EACE,WAAA;AJ6DR;AI3DM;EACE,UAAA;AJ6DR;AI3DQ;EACE,UAAA;AJ6DV;AIzDU;EACE,UAAA;AJ2DZ;;AKjJA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;ALmJF;AKjJE;EACE,sBAAA;EACA,WAAA;ALmJJ;AK/II;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALiJN","file":"style.css"}

5
public/assets/css/stylesheet.css
View file

@ -1,10 +1,13 @@
@page {
size: A4;
margin: 20mm 15mm 26mm 15mm;
background: rgba(255, 255, 255, 0);
}
@page {
@bottom-center { content: string(title); }
@bottom-center {
content: string(title);
}
}
h2 {