diff options
Diffstat (limited to 'html/item_preview.html')
| -rw-r--r-- | html/item_preview.html | 117 |
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> + → + <div data-template="payload" class="item_preview_payload_id"></div> </div> </template> #ENDIF |