ulysses

Merge lp:~jonas-drange/ulysses/tables into lp:ulysses

  1. tables
  2. Merge into trunk
Proposed by Jonas G. Drange
Status: Merged
Approved by: Jonas G. Drange
Approved revision: 23
Merged at revision: 20
Proposed branch: lp:~jonas-drange/ulysses/tables
Merge into: lp:ulysses
Diff against target: 305 lines (+291/-0)
2 files modified
src/tables.css (+81/-0)
test/index.html (+210/-0)
To merge this branch: bzr merge lp:~jonas-drange/ulysses/tables
Reviewer Review Type Date Requested Status
Stephen Stewart (community) Approve
Review via email: mp+206128@code.launchpad.net

Commit message

ues-tables

To post a comment you must log in.
lp:~jonas-drange/ulysses/tables updated
23. By Jonas G. Drange

small table

Revision history for this message
Stephen Stewart (stephen-stewart) :
review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added file 'src/tables.css'
2--- src/tables.css 1970-01-01 00:00:00 +0000
3+++ src/tables.css 2014-02-13 10:34:13 +0000
4@@ -0,0 +1,81 @@
5+.ues-table {
6+ border-collapse: collapse;
7+ border-spacing: 0;
8+ empty-cells: show;
9+ border: 1px dotted #AEA79F;
10+}
11+
12+.ues-table caption {
13+ font-style: italic;
14+ font-size: 13px;
15+ line-height: 1;
16+ padding: 1em 0;
17+ text-align: center;
18+}
19+
20+.ues-table td,
21+.ues-table th {
22+ background-color: #F0EDEA;
23+ border-left: 1px dotted #AEA79F;
24+ border-width: 0 0 0 1px;
25+ padding: 15px 10px;
26+ overflow: visible;
27+}
28+
29+.ues-table-small td,
30+.ues-table-small th {
31+ padding: 5px 10px;
32+}
33+
34+.ues-table td:first-child,
35+.ues-table th:first-child {
36+ border-left-width: 0;
37+}
38+
39+.ues-table thead {
40+ background-color: #FEE3D2;
41+ color: #333;
42+ text-align: left;
43+ font-weight: normal;
44+ vertical-align: bottom;
45+
46+}
47+
48+.ues-table thead th {
49+ border-collapse: separate;
50+ border-spacing: 0 10px;
51+ background-color: transparent;
52+}
53+
54+.ues-table tfoot th,
55+.ues-table tbody th {
56+ font-weight: 300;
57+}
58+
59+/* bordered */
60+.ues-table-bordered th,
61+.ues-table-bordered td {
62+ border-bottom: 1px dotted #AEA79F;
63+}
64+
65+.ues-table-bordered tbody > tr:last-child td,
66+.ues-table-horizontal tbody > tr:last-child td {
67+ border-bottom-width: 0;
68+}
69+
70+/* horizontally bordered */
71+.ues-table-horizontal td,
72+.ues-table-horizontal th {
73+ border-width: 0 0 1px 0;
74+ border-bottom: 1px dotted #cbcbcb;
75+}
76+
77+.ues-table-horizontal tbody > tr:last-child td {
78+ border-bottom-width: 0;
79+}
80+
81+/* striped */
82+.ues-table-striped tr:nth-child(2n-1) td {
83+ background-color: #F7F7F7;
84+}
85+
86
87=== modified file 'test/index.html'
88--- test/index.html 2014-01-07 11:37:12 +0000
89+++ test/index.html 2014-02-13 10:34:13 +0000
90@@ -457,5 +457,215 @@
91 <p class="ues-message ues-message-bordered ues-warning">Warning with an <a href="#feedback">important link</a></p>
92 </section>
93
94+<section>
95+
96+ <h1>Tables</h1>
97+
98+ <h2>Default table</h2>
99+
100+ <table class="ues-table">
101+
102+ <thead>
103+ <tr>
104+ <th>Fruit</th>
105+ <th>Weight</th>
106+ <th>Colour</th>
107+ </tr>
108+ </thead>
109+
110+ <tbody>
111+ <tr>
112+ <td>Apple</td>
113+ <td>150g</td>
114+ <td>Red|Green</td>
115+ </tr>
116+ <tr>
117+ <td>Orange</td>
118+ <td>200g</td>
119+ <td>Orange</td>
120+ </tr>
121+ </tbody>
122+
123+ </table>
124+
125+ <h2>Small table</h2>
126+
127+ <table class="ues-table ues-table-small">
128+
129+ <thead>
130+ <tr>
131+ <th>Fruit</th>
132+ <th>Weight</th>
133+ <th>Colour</th>
134+ </tr>
135+ </thead>
136+
137+ <tbody>
138+ <tr>
139+ <td>Apple</td>
140+ <td>150g</td>
141+ <td>Red|Green</td>
142+ </tr>
143+ <tr>
144+ <td>Orange</td>
145+ <td>200g</td>
146+ <td>Orange</td>
147+ </tr>
148+ </tbody>
149+
150+ </table>
151+
152+ <h2>Bordered Table</h2>
153+
154+ <table class="ues-table ues-table-bordered">
155+
156+ <thead>
157+ <tr>
158+ <th>Fruit</th>
159+ <th>Weight</th>
160+ <th>Colour</th>
161+ </tr>
162+ </thead>
163+
164+ <tbody>
165+ <tr>
166+ <td>Apple</td>
167+ <td>150g</td>
168+ <td>Red|Green</td>
169+ </tr>
170+ <tr>
171+ <td>Orange</td>
172+ <td>200g</td>
173+ <td>Orange</td>
174+ </tr>
175+ </tbody>
176+
177+ </table>
178+
179+ <h2>Horizontal border</h2>
180+
181+ <table class="ues-table ues-table-horizontal">
182+
183+ <thead>
184+ <tr>
185+ <th>Fruit</th>
186+ <th>Weight</th>
187+ <th>Colour</th>
188+ </tr>
189+ </thead>
190+
191+ <tbody>
192+ <tr>
193+ <td>Apple</td>
194+ <td>150g</td>
195+ <td>Red|Green</td>
196+ </tr>
197+ <tr>
198+ <td>Orange</td>
199+ <td>200g</td>
200+ <td>Orange</td>
201+ </tr>
202+ </tbody>
203+
204+ </table>
205+
206+ <h2>Striped</h2>
207+
208+ <table class="ues-table ues-table-striped">
209+
210+ <thead>
211+ <tr>
212+ <th>Fruit</th>
213+ <th>Weight</th>
214+ <th>Colour</th>
215+ </tr>
216+ </thead>
217+
218+ <tbody>
219+ <tr>
220+ <td>Apple</td>
221+ <td>150g</td>
222+ <td>Red|Green</td>
223+ </tr>
224+ <tr>
225+ <td>Orange</td>
226+ <td>200g</td>
227+ <td>Orange</td>
228+ </tr>
229+ <tr>
230+ <td>Banana</td>
231+ <td>110g</td>
232+ <td>Yellow</td>
233+ </tr>
234+ <tr>
235+ <td>Strawberry</td>
236+ <td>5g</td>
237+ <td>Red</td>
238+ </tr>
239+ <tr>
240+ <td>Tomato</td>
241+ <td>80g</td>
242+ <td>Red</td>
243+ </tr>
244+ <tr>
245+ <td>Pineapple</td>
246+ <td>600g</td>
247+ <td>Greenyellow</td>
248+ </tr>
249+ <tr>
250+ <td>Basket</td>
251+ <td>130g</td>
252+ <td>Brown</td>
253+ </tr>
254+ </tbody>
255+
256+ </table>
257+
258+ <h2>Caption, colgroup, cols, tfoot</h2>
259+
260+ <table class="ues-table">
261+
262+ <caption>Fruits and their attributes</caption>
263+
264+ <colgroup>
265+ <col span="1" class="object">
266+ <col span="2" class="attributes">
267+ </colgroup>
268+
269+ <thead>
270+ <tr>
271+ <th>Fruit</th>
272+ <th>Weight</th>
273+ <th>Colour</th>
274+ </tr>
275+ </thead>
276+
277+ <tfoot>
278+ <tr>
279+ <td>Averages</td>
280+ <td>175g</td>
281+ <td>Bright colours</td>
282+ </tr>
283+ </tfoot>
284+
285+ <tbody>
286+ <tr>
287+ <td>Apple</td>
288+ <td>150g</td>
289+ <td>Red|Green</td>
290+ </tr>
291+ <tr>
292+ <td>Orange</td>
293+ <td>200g</td>
294+ <td>Orange</td>
295+ </tr>
296+ </tbody>
297+
298+
299+ </table>
300+
301+
302+</section>
303+
304 </body>
305 </html>

Subscribers

People subscribed via source and target branches