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

use css grid layout

This commit is contained in:
Reorx 2023-02-03 11:49:23 +08:00
parent 0af19b36ac
commit 2ad28aaa84
3 changed files with 57 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
editor/_json-editor.scss
View File

@ -43,16 +43,6 @@
.editor-container { .editor-container {
font-size: 14px; font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
--gap: 8px;
--blue-0: #D0EBFF;
--blue-1: #A5D8FF;
--red-0: #FFE3E3;
--red-1: #FFC9C9;
--yellow-0: #FFF3BF;
--yellow-1: #FFEC99;
--green-0: #D3F9D8;
--green-1: #B2F2BB;
h1 {} h1 {}
h2 {} h2 {}

12
editor/index.html
View File

@ -8,13 +8,17 @@
<link rel="stylesheet" href="styles.scss" /> <link rel="stylesheet" href="styles.scss" />
</head> </head>
<body> <body>
<h1>JSONCV Editor</h1>
<div id="main"> <div id="main">
<div class="left editor-container"></div> <div class="sidebar">
<div class="right"> <div>
<div>JSONCV</div>
<div>Editor</div>
</div>
<div class="editor-toc"></div> <div class="editor-toc"></div>
</div> </div>
<div class="middle editor-container"></div>
<div class="right">
</div>
</div> </div>
<script src="main.js" type="module"></script> <script src="main.js" type="module"></script>

59
editor/styles.scss
View File

@ -1,33 +1,72 @@
@use 'json-editor'; @use 'json-editor';
#main { :root {
display: flex; --gap: 8px;
--gap2: calc(var(--gap) * 2);
--blue-0: #D0EBFF;
--blue-1: #A5D8FF;
--red-0: #FFE3E3;
--red-1: #FFC9C9;
--yellow-0: #FFF3BF;
--yellow-1: #FFEC99;
--green-0: #D3F9D8;
--green-1: #B2F2BB;
}
.left {
flex-grow: 1; html {
padding-right: 16px; font-family: 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";
}
body {
margin: 0;
}
#main {
display: grid;
grid-template-columns: 150px 1fr 1fr;
grid-template-rows: 100vh;
.sidebar {
padding: var(--gap);
}
.middle {
padding-right: var(--gap2);
margin-left: var(--sidebar-width);
overflow-y: auto;
} }
.right { .right {
width: 300px; background-color: #eee;
} }
} }
.editor-container { .editor-container {
[data-schemapath]:target { [data-schemapath]:target {
animation: bgFade 2s forwards; animation: bgFade 1s forwards;
} }
} }
.editor-toc { .editor-toc {
position: fixed; ul {
margin: 0;
padding: 4px 0 4px 14px;
a {
text-decoration: none;
color: #333;
&:hover {
text-decoration: underline;
}
}
}
} }
@keyframes bgFade { @keyframes bgFade {
0% { 0% {
background-color: #fff0a5; background-color: #FFF3BF;
} }
50% { 50% {
background-color: #fff6b3da; background-color: #FFF9DB;
} }
100% { 100% {
background-color: transparent; background-color: transparent;