gitadmin
/
jsoncv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fine-tune ui

This commit is contained in:
Reorx 2023-02-05 14:52:27 +08:00
parent ec9d2eb73d
commit 59595fe59e
5 changed files with 46 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/editor/_json-editor.scss
View File

@ -25,7 +25,7 @@
padding-left: calc(var(--gap) * 2); padding-left: calc(var(--gap) * 2);
padding-bottom: var(--gap); padding-bottom: var(--gap);
margin-left: 0; margin-left: 0;
border-left: 1px solid #ddd; border-left: 1px solid var(--grey-2);
margin-bottom: var(--gap); margin-bottom: var(--gap);
} }
@ -63,7 +63,7 @@
} }
.je-table { .je-table {
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px solid #ccc; border-bottom: 1px solid var(--grep-2);
} }
/* buttons */ /* buttons */

4
src/editor/_vars.scss
View File

@ -11,14 +11,14 @@
@mixin normal-button { @mixin normal-button {
@include button-base; @include button-base;
background-color: #eee; background-color: var(--grey-0);
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 2px; border-radius: 2px;
padding: 0px 8px; padding: 0px 8px;
line-height: 22px; line-height: 22px;
&:hover { &:hover {
background-color: #e1e1e1; background-color: var(--grey-1);
} }
&:active { &:active {
border-color: #555; border-color: #555;

6
src/editor/index.html
View File

@ -10,9 +10,9 @@
<body> <body>
<div id="main"> <div id="main">
<div class="sidebar column"> <div class="sidebar column">
<div> <div class="logo">
<div>JSONCV</div> <div><span style="display: inline-block; border: 1px solid #aaa; padding: 2px 4px;"><span style="color: #aaa;">JSON</span>CV</span></div>
<div>Editor</div> <div style="padding: 2px 5px;">Editor</div>
</div> </div>
<div class="editor-toc"></div> <div class="editor-toc"></div>
<div class="app-actions"> <div class="app-actions">

2
src/editor/main.js
View File

@ -50,6 +50,8 @@ propertiesInOrder.forEach((name, index) => {
}) })
basicsPropertiesInOrder.forEach((name, index) => { basicsPropertiesInOrder.forEach((name, index) => {
jsoncvSchema.properties.basics.properties[name].propertyOrder = index jsoncvSchema.properties.basics.properties[name].propertyOrder = index
// only add location and profiles to basics toc
if (!['location', 'profiles'].includes(name)) return
const li = createElement('li', {parent: basicsUl}) const li = createElement('li', {parent: basicsUl})
createElement('a', { createElement('a', {
text: name, text: name,

41
src/editor/styles.scss
View File

@ -12,14 +12,21 @@
--yellow-1: #FFEC99; --yellow-1: #FFEC99;
--green-0: #D3F9D8; --green-0: #D3F9D8;
--green-1: #B2F2BB; --green-1: #B2F2BB;
--grey-0: #eee;
--grey-1: #e1e1e1;
--grey-2: #ddd;
--font-default: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-default: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
--font-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace; --font-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
} }
html { html,
body * {
font-family: var(--font-default); font-family: var(--font-default);
} }
button {
font-size: 13px;
}
body { body {
margin: 0; margin: 0;
@ -35,7 +42,7 @@ body {
} }
.sidebar { .sidebar {
padding: var(--gap); padding: 0 var(--gap2) 0 var(--gap);
} }
.middle { .middle {
padding-right: var(--gap2); padding-right: var(--gap2);
@ -45,17 +52,37 @@ body {
background-color: #eee; background-color: #eee;
} }
} }
.editor-container { .editor-container {
[data-schemapath]:target { [data-schemapath]:target {
animation: bgFade 1s forwards; animation: bgFade 1s forwards;
} }
} }
.logo {
padding: var(--gap2) 0;
margin-bottom: var(--gap2);
border-bottom: 1px solid var(--grey-2);
font-weight: 700;
}
.editor-toc { .editor-toc {
padding-left: 5px;
padding-bottom: var(--gap2);
margin-bottom: var(--gap2);
border-bottom: 1px solid var(--grey-2);
font-size: 15px;
ul { ul {
margin: 0; margin: 0;
padding: 4px 0 4px 14px; padding: 0 0 0 12px;
li {
margin: 5px 0;
ul {
margin-left: 5px;
}
}
a { a {
text-decoration: none; text-decoration: none;
@ -67,6 +94,12 @@ body {
} }
} }
.app-actions {
button {
margin-bottom: 8px;
}
}
.output-html { .output-html {
width: 100%; width: 100%;
height: 100%; height: 100%;