projects / online-glom:gwt-glom.git / blob
? search:
summary | shortlog | log | commit | commitdiff | tree
history | raw | HEAD
Add missing file.
[online-glom:gwt-glom.git] / mockups / details-view-html-tables-text-entries.html
1 <html>
2 <head>
3 <style type="text/css">
4
5 .details-cell {
6
7 }
8
9 div#document-title {
10     color: #333333;
11     font-size: x-large;
12     font-weight: bold;
13     margin-bottom: 0.5em;
14     margin-left: 0.5em;
15 }
16
17 #headbox, #footbox {
18     background-color: #EEEEEE;
19     border: 1px solid #AAAAAA;
20     border-radius: 3px 3px 3px 3px;
21     overflow: hidden;
22     padding: 0.2em;
23 }
24
25 /* Headbox Contents */
26 .tablechooser {
27     float: left;
28     font-family: sans-serif;
29     font-size: 13.3333px;
30     margin-left: 0.5em;
31 }
32
33 .backlink {
34     float: right;
35     margin: 0.2em 0.5em;
36 }
37
38 /* Footbox Contents */
39 .records {
40     color: #333333;
41     float: left;
42     margin: 0.2em 0.5em;
43 }
44
45 .details-bottom-navigation {
46     float: right;
47     margin: 0.2em 0.5em;
48 }
49
50 a {
51     color: #333333;
52     font-weight: bold;
53     text-decoration: none;
54 }
55
56
57 h2.group-title {
58     border-bottom: 1px dashed #000000;
59     font-size: 100%;
60     margin: 0 0 0.8em;
61     padding: 0;
62 }
63
64 .subgroup-title {
65     font-size: 100%;
66     font-weight: bold;
67     margin: 0 0 0.6em;
68     padding: 0;
69 }
70
71 .group {
72     background-color: #EEEEEE;
73     border-radius: 7px 7px 7px 7px;
74     margin: 1em 0;
75     padding: 0.8em;
76 }
77
78 h2.group-title {
79     border-bottom: 1px dashed #000000;
80     font-size: 100%;
81     margin: 0 0 0.8em;
82     padding: 0;
83 }
84
85 .group-contents {
86     padding-left: 0.8em;
87 }
88
89 .details-label {
90     padding-right: 0.5em;
91     padding-top: 3px;
92 }
93
94 .details-data {
95     padding-bottom: 0.8em;
96 }
97
98 .details-navigation {
99     padding-left: 0.25em;
100 }
101
102 .hideextra { font-family: sans-serif; font-size: 0.9em; white-space: nowrap; overflow: hidden; text-overflow:ellipsis; }
103
104 textarea {
105     width: 100%;
106 }
107
108 input {
109     width: 100%;
110 }
111
112 table {
113     border-collapse: collapse;
114 }
115
116 </style>
117 </head>
118
119 <body >
120
121 <div id="document-title">Music Collection</div>
122
123
124 <div id="headbox">
125 <select class="tablechooser"><option value="albums">Albums</option><option value="artists">Artists</option><option value="publishers">Publishers</option><option selected="selected" value="songs">Songs</option></select>
126 <a class="backlink" href="listview-songs.html" style="">Back to List</a>
127 </div>
128
129 <div class="group">
130   <h2 class="group-title">Overview</h2>
131   <div class="group-contents">
132
133
134 <!-- the flowtable: a table -->
135 <table style="width: 100%">
136 <col width="49%"/>
137 <col width="49%"/>
138 <tr style="vertical-align: top;">
139
140   <!-- the first column: a table -->
141   <!-- the column gap is set using padding on the td of the flowtable -->
142   <td style="padding-right: 0.5%;">
143   <table>
144      <!-- details cell: a table row -->
145      <tr>
146         <!-- Setting the padding dynamically using GWT could make alignment of the text boxes between groups match Glom. For example using 'padding-right: 34px;' on the details-label. -->
147         <!-- But this an advanced feature that can be implemented later. -->
148         <td class="details-label" style="vertical-align: top; white-space: nowrap;">Song ID:</td>
149         <td class="details-data" colspan="2" style="vertical-align: top; width: 100%;"><input class="hideextra" value="0"/></td>
150      </tr>
151   </table>
152   </td>
153
154   <!-- the second column -->
155   <td style="padding-left: 0.5%;">
156   <table>
157      
158      <!-- details cell -->
159      <tr>
160         <!-- Setting the padding dynamically using GWT could make alignment of the text boxes between groups match Glom. For example using 'padding-right: 60px;' on the details-label. -->
161         <!-- But this an advanced feature that can be implemented later. -->
162         <td class="details-label" style="vertical-align: top; white-space: nowrap;">Name:</td>
163         <td class="details-data" colspan="2" style="vertical-align: top; width: 100%; colspan: 2"><input class="hideextra" value="Thunder Road"/></td>
164      </tr>
165
166   </table>
167   </td>
168
169 </tr>
170 </table>
171 </div>
172 </div>
173
174 <div class="group">
175   <h2 class="group-title">Details</h2>
176   <div class="group-contents">
177
178 <!-- the second flowtable -->
179 <table style="width: 100%">
180 <col width="49%"/>
181 <col width="49%"/>
182 <tr style="vertical-align: top;">
183
184   <!-- the first column -->
185   <td style="padding-right: 0.5%;">
186   <div class="subgroup">
187   <div class="subgroup-title">Album</div>
188   <div class="group-contents">
189   <table>
190
191      <!-- details cell -->
192      <tr>
193         <td class="details-label" style="vertical-align: top; white-space: nowrap;">Album ID:</td>
194         <td class="details-data" style="vertical-align: top; width: 100%;"><input class="hideextra" value="0"/></td>
195         <td class="details-navigation" style="vertical-align: top;"><button type="button">Open</button></td>
196      </tr>
197
198      <!-- details cell -->
199      <tr>
200         <td class="details-label" style="vertical-align: top; white-space: nowrap;">Name:</td>
201         <td class="details-data" colspan="2" style="vertical-align: top; width: 100%;"><input class="hideextra" value="Born To Run"/></td>
202      </tr>
203
204      <!-- details cell -->
205      <tr>
206         <td class="details-label" style="vertical-align: top; white-space: nowrap; padding-top: 0px">Favourite Song:</td>
207         <td class="details-data" colspan="2"  style="vertical-align: top;"><input type="checkbox" checked=""></td>
208
209      </tr>
210
211   </table>
212   </div>
213   </div>
214   </td>
215
216   <!-- the second column -->
217   <td style="padding-left: 0.5%;">
218   <div class="subgroup">
219   <div class="subgroup-title">Album</div>
220   <div class="group-contents">
221   <table>
222
223      <!-- details cell -->
224      <tr>
225         <td class="details-label" style="vertical-align: top; white-space: nowrap;">Artist ID:</td>
226         <td class="details-data" style="vertical-align: top; width: 100%;"><input class="hideextra" value="0"/></td>
227         <td class="details-navigation" style="vertical-align: top;"><button type="button">Open</button></td>
228      </tr>
229
230      <!-- details cell -->
231      <tr>
232         <td class="details-label" style="vertical-align: top; white-space: nowrap;">Name:</td>
233         <td class="details-data" colspan="2" style="vertical-align: top; width: 100%;"><input class="hideextra" value="Bruce Springsteen"/></td>
234      </tr>
235      
236      <!-- details cell -->
237      <tr>
238         <td class="details-label" style="vertical-align: top; white-space: nowrap;">Comments:</td>
239         <td class="details-data" colspan="2" style="vertical-align: top; width: 100%;"><textarea class="hideextra" rows="5"  style="resize: none;">
240 Amazing song!
241
242 Rock on!</textarea></td>
243      </tr>
244
245   </table>
246   </div>
247   </div>
248   </td>
249
250 </tr>
251 </table>
252 </div>
253 </div>
254
255 <div id="footbox">
256                 <span class="records">Displaying record 1 of 8</span>
257         
258                 <span class="details-bottom-navigation">
259                         <a href="">First</a>
260                         <a href="">Back</a>
261                         <a href="">Forward</a>
262                         <a href="">Last</a>
263                 </span>
264 </div>
265
266 </body>
267 </html>
3588367351ee6b8a4fb5bb546975a07e72