Skip to content

Commit a7415de

Browse files
Fan-iXFan-iX
committed
update page styles
1 parent f2092b5 commit a7415de

File tree

4 files changed

+184
-167
lines changed

4 files changed

+184
-167
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>VVPlot</title>
88
<link rel="stylesheet" href="web-docs/style/style.css">
9+
<link rel="stylesheet" href="web-docs/style/article.css">
910
</head>
1011

1112
<body>

‎web-docs/playground.vue‎

Lines changed: 36 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script setup>
22
import { createApp, ref, useTemplateRef, onMounted, computed } from 'vue'
3-
import { useTextareaAutosize, asyncComputed, useStorage } from '@vueuse/core'
3+
import { useTextareaAutosize, asyncComputed } from '@vueuse/core'
44
55
function read_table(text, { header = true, sep = ',' } = {}) {
66
function parse_value(v) {
@@ -225,13 +225,15 @@ onMounted(() => { useData('iris') })
225225
</script>
226226
227227
<template>
228-
<div class="grid grid-cols-2 grid-rows-3 grid-flow-col overflow-auto flex-1 gap-2 p-2">
229-
<div class="flex flex-col border">
230-
<h4>1. data</h4>
228+
<div
229+
class="grid grid-cols-2 grid-rows-3 grid-flow-col overflow-auto flex-1 gap-2 p-2 [&>div]:overflow-auto [&>div]:border playground">
230+
<div class="flex flex-col">
231+
<h2>1. data</h2>
231232
<label><input type="radio" name="data-input-mode" value="file" v-model="dataInputMode"> file</label>
232233
<div class="flex flex-row justify-between whitespace-nowrap">
233234
<input type="file" ref="file-input" @change="fileChanged" class="cursor-pointer">
234-
<button @click="previewFile" class="cursor-pointer">preview file content</button>
235+
<button @click="previewFile" class="cursor-pointer" v-if="dataInputMode == 'file'">preview file
236+
content</button>
235237
</div>
236238
<div v-if="dataInputMode == 'file'">
237239
presets:
@@ -245,35 +247,35 @@ onMounted(() => { useData('iris') })
245247
<textarea v-model="textInput" @blur="textBlur"
246248
class="border-2 border-[#cccccc] rounded-lg flex-1 resize-none"></textarea>
247249
</div>
248-
<div class="flex flex-col border">
249-
<h4>2. preprocess</h4>
250+
<div class="flex flex-col">
251+
<h2>2. preprocess</h2>
250252
<pre class="w-full h-full font-mono leading-none flex-1 flex flex-col">async function(text) {
251253
<textarea v-model="preprocessFunc" class="ml-[4ch] resize-none overflow-x flex-1"></textarea>}</pre>
252254
<div class="flex flex-row justify-between whitespace-nowrap">
253255
<span class="text-red-500 truncate">{{ dataErrorMessage }}</span>
254256
<button @click="previewData" class="cursor-pointer">preview processed data</button>
255257
</div>
256258
</div>
257-
<div class="flex flex-col border">
258-
<h4>3. plot definition</h4>
259-
<pre class="w-full h-full font-mono leading-none flex flex-col">&lt;VVPlot :data="data"
259+
<div class="flex flex-col overflow-none">
260+
<h2>3. plot definition</h2>
261+
<pre class="w-full flex-1 font-mono leading-none flex flex-col">&lt;VVPlot :data="data"
260262
<textarea ref="attrsTextarea" v-model="attrsText" class="ml-[2ch] resize-none"></textarea>
261263
<textarea class="ml-[4ch] flex-1 resize-none overflow-auto" v-model="templateText"></textarea>&lt;/VVPlot&gt;</pre>
262264
</div>
263-
<div class="border overflow-auto row-span-2">
265+
<div class="row-span-2">
264266
<div id="plot"></div>
265267
</div>
266-
<div class="border flex flex-col">
268+
<div class="flex flex-col">
267269
<div>
268-
<button @click="buildPlot">refresh plot</button>
270+
<button @click="buildPlot">reset plot</button>
269271
<button @click="exportSVG">download as SVG</button>
270272
<button @click="exportPNG">download as PNG</button>
271273
</div>
272274
</div>
273275
</div>
274-
<dialog ref="dialog" class="w-2/3 h-2/3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
276+
<dialog ref="dialog" class="w-2/3 h-2/3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 playground-dialog">
275277
<div class="flex flex-col overflow-auto h-full p-4">
276-
<h4>data</h4>
278+
<h2>data</h2>
277279
<div v-if="dialogContentColumns?.length" class="overflow-auto font-mono">
278280
<table
279281
class="whitespace-nowrap w-full [&_th,&_td]:p-1 [&_th,&_td]:text-center [&_td]:shadow-[-0.5px_-0.5px_0_0_black,_-0.5px_-0.5px_0_0_black_inset] [&_th]:sticky [&_th]:bg-white">
@@ -302,8 +304,26 @@ onMounted(() => { useData('iris') })
302304
</div>
303305
<pre v-else class="overflow-auto flex-1 whitespace-pre-wrap">{{ dialogContent }}</pre>
304306
<div>
305-
<button @click="closeDialog">close</button>
307+
<button @click="closeDialog" class="float-right">close</button>
306308
</div>
307309
</div>
308310
</dialog>
309311
</template>
312+
<style>
313+
.playground,
314+
.playground-dialog {
315+
h2 {
316+
font-weight: bold;
317+
font-size: large;
318+
}
319+
320+
button {
321+
background-color: #f0f0f0;
322+
border: 1px solid #ccc;
323+
padding: 2px 4px;
324+
border-radius: 4px;
325+
cursor: pointer;
326+
font-size: small;
327+
}
328+
}
329+
</style>

‎web-docs/style/article.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
article {
2+
margin: 0 auto;
3+
width: 100%;
4+
max-width: 100ch;
5+
min-width: 600px;
6+
7+
h2,
8+
h3,
9+
h4,
10+
h5,
11+
h6 {
12+
font-weight: bold;
13+
margin-block: 0.5em;
14+
}
15+
16+
h2 {
17+
font-size: xx-large
18+
}
19+
20+
h3 {
21+
font-size: x-large;
22+
}
23+
24+
h4 {
25+
font-size: large;
26+
}
27+
28+
p,
29+
details {
30+
margin-block: 0.5em;
31+
}
32+
33+
p:first-child {
34+
margin-block-start: 0;
35+
}
36+
37+
ul,
38+
ol {
39+
padding-left: 2em;
40+
}
41+
42+
code {
43+
background: #f0f0f0;
44+
padding-inline: 0.5ch;
45+
border-radius: 0.25em;
46+
}
47+
48+
kbd {
49+
display: inline-block;
50+
padding: 0.1em 0.5em;
51+
border: 1px solid #ccc;
52+
border-radius: 0.25em;
53+
background: #f9f9f9;
54+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
55+
font-size: 0.9em;
56+
line-height: 1.2;
57+
white-space: nowrap;
58+
}
59+
60+
pre-highlight {
61+
display: block;
62+
background: #f8f8f8;
63+
padding: 1em;
64+
overflow: auto;
65+
border-radius: 1em;
66+
}
67+
68+
blockquote {
69+
border-left: 0.25em solid #ccc;
70+
margin: 1em 0;
71+
padding-left: 1em;
72+
73+
&::before {
74+
display: block;
75+
}
76+
77+
&.warning {
78+
border-left: 0.25em solid orange;
79+
80+
&::before {
81+
content: '⚠️ Warning';
82+
color: darkorange;
83+
margin-block-end: 0.5em;
84+
}
85+
}
86+
87+
&.note {
88+
border-left: 0.25em solid teal;
89+
90+
&::before {
91+
content: '📝 Note';
92+
color: teal;
93+
margin-block-end: 0.5em;
94+
}
95+
}
96+
97+
&.info {
98+
border-left: 0.25em solid blue;
99+
100+
&::before {
101+
content: 'ℹ️ Info';
102+
color: royalblue;
103+
margin-block-end: 0.5em;
104+
}
105+
}
106+
107+
&.error {
108+
border-left: 0.25em solid red;
109+
110+
&::before {
111+
content: '❌ Error';
112+
color: red;
113+
margin-block-end: 0.5em;
114+
}
115+
}
116+
117+
&.tip {
118+
border-left: 0.25em solid green;
119+
120+
&::before {
121+
content: '💡 Tip';
122+
color: green;
123+
margin-block-end: 0.5em;
124+
}
125+
}
126+
}
127+
128+
fieldset {
129+
min-width: unset;
130+
padding: 1em;
131+
border: 1px solid #ccc;
132+
border-radius: 0.5em;
133+
margin-block: 0.5em;
134+
135+
legend {
136+
padding-inline: 0.5em;
137+
}
138+
}
139+
140+
figcaption {
141+
text-align: center;
142+
}
143+
144+
hr {
145+
margin: 1em auto;
146+
}
147+
}

0 commit comments

Comments
 (0)