Project

General

Profile

« Previous | Next » 

Revision 652e4476

Added by koszko over 1 year ago

improve styling of item preview

View differences:

html/item_list.html
73 73
      opacity: 0.75;
74 74
      cursor: not-allowed;
75 75
  }
76
  .item_preview_container .item_preview_main_div {
77
      margin: auto;
78
  }
76 79
  .list_buttons {
77 80
      margin: 1em auto;
78 81
      text-align: center;
html/item_preview.html
39 39
#LOADCSS html/grid.css
40 40
<style>
41 41
  .item_preview_main_div {
42
      margin: 1.3em 0.8em 1em 0.8em;
42
      padding: 1.3em 0.8em 1em 0.8em;
43
      display: grid;
44
      grid-template-columns: auto;
45
      max-width: 800px;
46
  }
47

  
48
  .item_preview_main_div > * {
49
      margin-top: 1.5em;
50
      margin-left: 1.8em;
51
      margin-right: 1em;
52
  }
53
  .item_preview_main_div > label {
54
      margin-left: 1em;
55
  }
56

  
57
  .item_preview_main_div h3 {
58
      text-align: center;
59

  
60
      margin-left: 1.8em;
61
  }
62

  
63
  .item_preview_main_div a, .item_preview_payload {
64
      word-break: break-word;
65
  }
66

  
67
  .item_preview_payload_id {
68
      margin: 0.1em 0 0.2em 1em;
43 69
  }
44 70
</style>
45 71
<template>
46 72
  <div id="resource_preview" data-template="main_div"
47
       class="grid_2 grid_form item_preview_main_div">
48
    <h3 class="grid_col_both">resource preview</h3>
49
    <label class="grid_col_1">conforms to:</label>
50
    <span data-template="conforms_to" class="grid_col_2">...</span>
51
    <label class="grid_col_1">identifier:</label>
52
    <span data-template="identifier" class="grid_col_2">...</span>
53
    <label class="grid_col_1">long name:</label>
54
    <span data-template="long_name" class="grid_col_2">...</span>
55
    <label class="grid_col_1">UUID:</label>
56
    <span data-template="uuid" class="grid_col_2">...</span>
57
    <label class="grid_col_1">version:</label>
58
    <span data-template="version" class="grid_col_2">...</span>
59
    <label class="grid_col_1">description:</label>
60
    <span data-template="description" class="grid_col_2">...</span>
61
    <label class="grid_col_1">dependencies:</label>
62
    <span class="grid_col_2"><ul data-template="dependencies"></ul></span>
63
    <label class="grid_col_1">scripts:</label>
64
    <span class="grid_col_2"><ul data-template="scripts"></ul></span>
65
    <label class="grid_col_1">source name:</label>
66
    <span data-template="source_name" class="grid_col_2">...</span>
67
    <label class="grid_col_1">copyright:</label>
68
    <span class="grid_col_2"><ul data-template="copyright"></ul></span>
73
       class="item_preview_main_div">
74
    <h3>resource preview</h3>
75
    <label>conforms to:</label>
76
    <span data-template="conforms_to">...</span>
77
    <label>identifier:</label>
78
    <span data-template="identifier">...</span>
79
    <label>long name:</label>
80
    <span data-template="long_name">...</span>
81
    <label>UUID:</label>
82
    <span data-template="uuid">...</span>
83
    <label>version:</label>
84
    <span data-template="version">...</span>
85
    <label>description:</label>
86
    <span data-template="description">...</span>
87
    <label>dependencies:</label>
88
    <span><ul data-template="dependencies"></ul></span>
89
    <label>scripts:</label>
90
    <span><ul data-template="scripts"></ul></span>
91
    <label>source name:</label>
92
    <span data-template="source_name">...</span>
93
    <label>copyright:</label>
94
    <span><ul data-template="copyright"></ul></span>
69 95
  </div>
70 96
  <div id="mapping_preview" data-template="main_div"
71
       class="grid_2 grid_form">
72
    <h3 class="grid_col_both">mapping preview</h3>
73
    <label class="grid_col_1">conforms to:</label>
74
    <span data-template="conforms_to" class="grid_col_2">...</span>
75
    <label class="grid_col_1">identifier:</label>
76
    <span data-template="identifier" class="grid_col_2">...</span>
77
    <label class="grid_col_1">long name:</label>
78
    <span data-template="long_name" class="grid_col_2">...</span>
79
    <label class="grid_col_1">UUID:</label>
80
    <span data-template="uuid" class="grid_col_2">...</span>
81
    <label class="grid_col_1">version:</label>
82
    <span data-template="version" class="grid_col_2">...</span>
83
    <label class="grid_col_1">description:</label>
84
    <span data-template="description" class="grid_col_2">...</span>
85
    <label class="grid_col_1">payloads:</label>
86
    <div data-template="payloads" class="grid_col_both grid_2"></div>
87
    <label class="grid_col_1">source name:</label>
88
    <span data-template="source_name" class="grid_col_2">...</span>
89
    <label class="grid_col_1">copyright:</label>
90
    <span class="grid_col_2"><ul data-template="copyright"></ul></span>
97
       class="item_preview_main_div">
98
    <h3>mapping preview</h3>
99
    <label>conforms to:</label>
100
    <span data-template="conforms_to">...</span>
101
    <label>identifier:</label>
102
    <span data-template="identifier">...</span>
103
    <label>long name:</label>
104
    <span data-template="long_name">...</span>
105
    <label>UUID:</label>
106
    <span data-template="uuid">...</span>
107
    <label>version:</label>
108
    <span data-template="version">...</span>
109
    <label>description:</label>
110
    <span data-template="description">...</span>
111
    <label>payloads:</label>
112
    <div data-template="payloads" class="item_preview_payload"></div>
113
    <label>source name:</label>
114
    <span data-template="source_name">...</span>
115
    <label>copyright:</label>
116
    <span><ul data-template="copyright"></ul></span>
117
  </div>
118
  <div id="pattern_payload_entry" data-template="main_div">
119
    <span data-template="pattern"></span>
120
    &#8594;
121
    <div data-template="payload" class="item_preview_payload_id"></div>
91 122
  </div>
92 123
</template>
93 124
#ENDIF
html/item_preview.js
129 129
	/* We use a non-breaking space because normal space would be ignored. */
130 130
	const [nbsp, rarrow] = [160, 0x2192].map(n => String.fromCodePoint(n));
131 131
	const texts = [`${pattern}${nbsp}`, `${rarrow}  ${payload.identifier}`];
132
	for (let i = 0; i < texts.length; i++) {
133
	    const span = document.createElement("span");
134
	    span.innerText = texts[i];
135
	    span.classList.add(`grid_col_${i + 1}`);
136
	    preview_object.payloads.append(span);
137
	}
132
	const payload_entry = clone_template("pattern_payload_entry");
133
	payload_entry.pattern.innerText = pattern;
134
	payload_entry.payload.innerText = payload.identifier;
135
	preview_object.payloads.append(payload_entry.main_div);
138 136
    }
139 137

  
140 138
    const link_maker = file_ref => link_cb(preview_object, file_ref);

Also available in: Unified diff