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-bottom: var(--gap);
margin-left: 0;
border-left: 1px solid #ddd;
border-left: 1px solid var(--grey-2);
margin-bottom: var(--gap);
}
@ -63,7 +63,7 @@
}
.je-table {
margin-bottom: 5px;
border-bottom: 1px solid #ccc;
border-bottom: 1px solid var(--grep-2);
}
/* buttons */

4
src/editor/_vars.scss
View File

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

6
src/editor/index.html
View File

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

2
src/editor/main.js
View File

@ -50,6 +50,8 @@ propertiesInOrder.forEach((name, index) => {
})
basicsPropertiesInOrder.forEach((name, 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})
createElement('a', {
text: name,

41
src/editor/styles.scss
View File

@ -12,14 +12,21 @@
--yellow-1: #FFEC99;
--green-0: #D3F9D8;
--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-mono: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}
html {
html,
body * {
font-family: var(--font-default);
}
button {
font-size: 13px;
}
body {
margin: 0;
@ -35,7 +42,7 @@ body {
}
.sidebar {
padding: var(--gap);
padding: 0 var(--gap2) 0 var(--gap);
}
.middle {
padding-right: var(--gap2);
@ -45,17 +52,37 @@ body {
background-color: #eee;
}
}
.editor-container {
[data-schemapath]:target {
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 {
padding-left: 5px;
padding-bottom: var(--gap2);
margin-bottom: var(--gap2);
border-bottom: 1px solid var(--grey-2);
font-size: 15px;
ul {
margin: 0;
padding: 4px 0 4px 14px;
padding: 0 0 0 12px;
li {
margin: 5px 0;
ul {
margin-left: 5px;
}
}
a {
text-decoration: none;
@ -67,6 +94,12 @@ body {
}
}
.app-actions {
button {
margin-bottom: 8px;
}
}
.output-html {
width: 100%;
height: 100%;