summaryrefslogtreecommitdiff
path: root/html/item_preview.html
diff options
context:
space:
mode:
authorWojtek Kosior <koszko@koszko.org>2022-03-03 14:40:55 +0100
committerWojtek Kosior <koszko@koszko.org>2022-03-04 16:13:39 +0100
commit652e4476fdc2c7177145c0d993159f84a5f64c55 (patch)
treece4b77f2b64bb1e8d2586104e9c9515027dd69ef /html/item_preview.html
parent22fe27f0e1399deaf13b416f2d35a2e12ea0f358 (diff)
downloadbrowser-extension-652e4476fdc2c7177145c0d993159f84a5f64c55.tar.gz
browser-extension-652e4476fdc2c7177145c0d993159f84a5f64c55.zip
improve styling of item preview
Diffstat (limited to 'html/item_preview.html')
-rw-r--r--html/item_preview.html117
1 files changed, 74 insertions, 43 deletions
diff --git a/html/item_preview.html b/html/item_preview.html
index 356ee62..c9256a7 100644
--- a/html/item_preview.html
+++ b/html/item_preview.html
@@ -39,55 +39,86 @@
#LOADCSS html/grid.css
<style>
.item_preview_main_div {
- margin: 1.3em 0.8em 1em 0.8em;
+ padding: 1.3em 0.8em 1em 0.8em;
+ display: grid;
+ grid-template-columns: auto;
+ max-width: 800px;
+ }
+
+ .item_preview_main_div > * {
+ margin-top: 1.5em;
+ margin-left: 1.8em;
+ margin-right: 1em;
+ }
+ .item_preview_main_div > label {
+ margin-left: 1em;
+ }
+
+ .item_preview_main_div h3 {
+ text-align: center;
+
+ margin-left: 1.8em;
+ }
+
+ .item_preview_main_div a, .item_preview_payload {
+ word-break: break-word;
+ }
+
+ .item_preview_payload_id {
+ margin: 0.1em 0 0.2em 1em;
}
</style>
<template>
<div id="resource_preview" data-template="main_div"
- class="grid_2 grid_form item_preview_main_div">
- <h3 class="grid_col_both">resource preview</h3>
- <label class="grid_col_1">conforms to:</label>
- <span data-template="conforms_to" class="grid_col_2">...</span>
- <label class="grid_col_1">identifier:</label>
- <span data-template="identifier" class="grid_col_2">...</span>
- <label class="grid_col_1">long name:</label>
- <span data-template="long_name" class="grid_col_2">...</span>
- <label class="grid_col_1">UUID:</label>
- <span data-template="uuid" class="grid_col_2">...</span>
- <label class="grid_col_1">version:</label>
- <span data-template="version" class="grid_col_2">...</span>
- <label class="grid_col_1">description:</label>
- <span data-template="description" class="grid_col_2">...</span>
- <label class="grid_col_1">dependencies:</label>
- <span class="grid_col_2"><ul data-template="dependencies"></ul></span>
- <label class="grid_col_1">scripts:</label>
- <span class="grid_col_2"><ul data-template="scripts"></ul></span>
- <label class="grid_col_1">source name:</label>
- <span data-template="source_name" class="grid_col_2">...</span>
- <label class="grid_col_1">copyright:</label>
- <span class="grid_col_2"><ul data-template="copyright"></ul></span>
+ class="item_preview_main_div">
+ <h3>resource preview</h3>
+ <label>conforms to:</label>
+ <span data-template="conforms_to">...</span>
+ <label>identifier:</label>
+ <span data-template="identifier">...</span>
+ <label>long name:</label>
+ <span data-template="long_name">...</span>
+ <label>UUID:</label>
+ <span data-template="uuid">...</span>
+ <label>version:</label>
+ <span data-template="version">...</span>
+ <label>description:</label>
+ <span data-template="description">...</span>
+ <label>dependencies:</label>
+ <span><ul data-template="dependencies"></ul></span>
+ <label>scripts:</label>
+ <span><ul data-template="scripts"></ul></span>
+ <label>source name:</label>
+ <span data-template="source_name">...</span>
+ <label>copyright:</label>
+ <span><ul data-template="copyright"></ul></span>
</div>
<div id="mapping_preview" data-template="main_div"
- class="grid_2 grid_form">
- <h3 class="grid_col_both">mapping preview</h3>
- <label class="grid_col_1">conforms to:</label>
- <span data-template="conforms_to" class="grid_col_2">...</span>
- <label class="grid_col_1">identifier:</label>
- <span data-template="identifier" class="grid_col_2">...</span>
- <label class="grid_col_1">long name:</label>
- <span data-template="long_name" class="grid_col_2">...</span>
- <label class="grid_col_1">UUID:</label>
- <span data-template="uuid" class="grid_col_2">...</span>
- <label class="grid_col_1">version:</label>
- <span data-template="version" class="grid_col_2">...</span>
- <label class="grid_col_1">description:</label>
- <span data-template="description" class="grid_col_2">...</span>
- <label class="grid_col_1">payloads:</label>
- <div data-template="payloads" class="grid_col_both grid_2"></div>
- <label class="grid_col_1">source name:</label>
- <span data-template="source_name" class="grid_col_2">...</span>
- <label class="grid_col_1">copyright:</label>
- <span class="grid_col_2"><ul data-template="copyright"></ul></span>
+ class="item_preview_main_div">
+ <h3>mapping preview</h3>
+ <label>conforms to:</label>
+ <span data-template="conforms_to">...</span>
+ <label>identifier:</label>
+ <span data-template="identifier">...</span>
+ <label>long name:</label>
+ <span data-template="long_name">...</span>
+ <label>UUID:</label>
+ <span data-template="uuid">...</span>
+ <label>version:</label>
+ <span data-template="version">...</span>
+ <label>description:</label>
+ <span data-template="description">...</span>
+ <label>payloads:</label>
+ <div data-template="payloads" class="item_preview_payload"></div>
+ <label>source name:</label>
+ <span data-template="source_name">...</span>
+ <label>copyright:</label>
+ <span><ul data-template="copyright"></ul></span>
+ </div>
+ <div id="pattern_payload_entry" data-template="main_div">
+ <span data-template="pattern"></span>
+ &#8594;
+ <div data-template="payload" class="item_preview_payload_id"></div>
</div>
</template>
#ENDIF