Skip to content

Commit 7383fb1

Browse files
HenrikhAbajyanHenrikhAbajyan
committed
Responsive Tables Page
1 parent 984d83c commit 7383fb1

File tree

5 files changed

+291
-2
lines changed

5 files changed

+291
-2
lines changed

‎src/Dashboard/TablesAndLists/ResponsiveTables/ResponsiveTables.page.hbs

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
---
2+
dirname: TablesAndLists # output dirname
3+
pagename: ItemsEditor
4+
layout: Dashboard/Dashboard.layout
5+
---
6+
7+
<article class="Page ResponsiveTables">
8+
<div class="PageContainer">
9+
10+
<header class="PageHeader">
11+
<h1 class="PageTitle">
12+
Responsive Tables
13+
</h1>
14+
<p class="TitleDescription>">When blocks responsive</p>
15+
</header>
16+
17+
{{!-- Section 1 --}}
18+
<div class="col-md">
19+
<div class="Card">
20+
21+
<div class="CardHeader">
22+
<div class="HeaderBlock">
23+
<h6 class="Title">Responsive simple</h6>
24+
</div>
25+
</div>
26+
27+
<div class="CardBlock">
28+
<section class="example">
29+
30+
<div class="table-responsive">
31+
<table class="table table-striped table-bordered table-hover">
32+
<thead>
33+
<tr>
34+
<th>#</th>
35+
<th>Table heading</th>
36+
<th>Table heading</th>
37+
<th>Table heading</th>
38+
<th>Table heading</th>
39+
<th>Table heading</th>
40+
<th>Table heading</th>
41+
</tr>
42+
</thead>
43+
<tbody>
44+
<tr>
45+
<td>Table cell</td>
46+
<td>Table cell</td>
47+
<td>Table cell</td>
48+
<td>Table cell</td>
49+
<td>Table cell</td>
50+
<td>Table cell</td>
51+
<td>Table cell</td>
52+
</tr>
53+
<tr>
54+
<td>Table cell</td>
55+
<td>Table cell</td>
56+
<td>Table cell</td>
57+
<td>Table cell</td>
58+
<td>Table cell</td>
59+
<td>Table cell</td>
60+
<td>Table cell</td>
61+
</tr>
62+
<tr>
63+
<td>Table cell</td>
64+
<td>Table cell</td>
65+
<td>Table cell</td>
66+
<td>Table cell</td>
67+
<td>Table cell</td>
68+
<td>Table cell</td>
69+
<td>Table cell</td>
70+
</tr>
71+
<tr>
72+
<td>Table cell</td>
73+
<td>Table cell</td>
74+
<td>Table cell</td>
75+
<td>Table cell</td>
76+
<td>Table cell</td>
77+
<td>Table cell</td>
78+
<td>Table cell</td>
79+
</tr>
80+
</tbody>
81+
</table>
82+
</div>
83+
</section>
84+
</div>
85+
86+
</div>
87+
</div>
88+
89+
{{!-- Section 2 --}}
90+
<div class="col-md">
91+
<div class="Card">
92+
93+
<div class="CardHeader">
94+
<div class="HeaderBlock">
95+
<h6 class="Title">Responsive flip-scroll</h6>
96+
</div>
97+
</div>
98+
99+
<div class="CardBlock">
100+
<section class="example">
101+
102+
<div class="table-flip-scroll">
103+
<table class="table table-striped table-bordered table-hover flip-content">
104+
<thead class="flip-header">
105+
<tr>
106+
<th>Rendering engine</th>
107+
<th>Browser</th>
108+
<th>Platform(s)</th>
109+
<th>Engine version</th>
110+
<th>CSS grade</th>
111+
</tr>
112+
</thead>
113+
<tbody>
114+
<tr class="odd gradeX">
115+
<td>Trident</td>
116+
<td>Internet Explorer 4.0</td>
117+
<td>Win 95+</td>
118+
<td class="center">4</td>
119+
<td class="center">X</td>
120+
</tr>
121+
<tr class="even gradeC">
122+
<td>Trident</td>
123+
<td>Internet Explorer 5.0</td>
124+
<td>Win 95+</td>
125+
<td class="center">5</td>
126+
<td class="center">C</td>
127+
</tr>
128+
<tr class="odd gradeA">
129+
<td>Trident</td>
130+
<td>Internet Explorer 5.5</td>
131+
<td>Win 95+</td>
132+
<td class="center">5.5</td>
133+
<td class="center">A</td>
134+
</tr>
135+
<tr class="even gradeA">
136+
<td>Trident</td>
137+
<td>Internet Explorer 6</td>
138+
<td>Win 98+</td>
139+
<td class="center">6</td>
140+
<td class="center">A</td>
141+
</tr>
142+
<tr class="odd gradeA">
143+
<td>Trident</td>
144+
<td>Internet Explorer 7</td>
145+
<td>Win XP SP2+</td>
146+
<td class="center">7</td>
147+
<td class="center">A</td>
148+
</tr>
149+
<tr class="even gradeA">
150+
<td>Trident</td>
151+
<td>AOL browser (AOL desktop)</td>
152+
<td>Win XP</td>
153+
<td class="center">6</td>
154+
<td class="center">A</td>
155+
</tr>
156+
<tr class="gradeA">
157+
<td>Gecko</td>
158+
<td>Firefox 1.0</td>
159+
<td>Win 98+ / OSX.2+</td>
160+
<td class="center">1.7</td>
161+
<td class="center">A</td>
162+
</tr>
163+
<tr class="gradeA">
164+
<td>Gecko</td>
165+
<td>Firefox 1.5</td>
166+
<td>Win 98+ / OSX.2+</td>
167+
<td class="center">1.8</td>
168+
<td class="center">A</td>
169+
</tr>
170+
<tr class="gradeA">
171+
<td>Gecko</td>
172+
<td>Firefox 2.0</td>
173+
<td>Win 98+ / OSX.2+</td>
174+
<td class="center">1.8</td>
175+
<td class="center">A</td>
176+
</tr>
177+
<tr class="gradeA">
178+
<td>Gecko</td>
179+
<td>Firefox 3.0</td>
180+
<td>Win 2k+ / OSX.3+</td>
181+
<td class="center">1.9</td>
182+
<td class="center">A</td>
183+
</tr>
184+
<tr class="gradeA">
185+
<td>Gecko</td>
186+
<td>Camino 1.0</td>
187+
<td>OSX.2+</td>
188+
<td class="center">1.8</td>
189+
<td class="center">A</td>
190+
</tr>
191+
<tr class="gradeA">
192+
<td>Gecko</td>
193+
<td>Camino 1.5</td>
194+
<td>OSX.3+</td>
195+
<td class="center">1.8</td>
196+
<td class="center">A</td>
197+
</tr>
198+
</tbody>
199+
</table>
200+
</div>
201+
202+
</section>
203+
</div>
204+
205+
</div>
206+
</div>
207+
208+
209+
</div>
210+
</article>

‎src/Dashboard/TablesAndLists/ResponsiveTables/ResponsiveTables.scss

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// .table-flip-scroll table {
2+
// width: 100%
3+
// }
4+
5+
6+
@media only screen and (max-width: 800px) {
7+
8+
.table-flip-scroll .flip-content:after,
9+
.table-flip-scroll .flip-header:after {
10+
visibility: hidden;
11+
display: block;
12+
font-size: 0;
13+
content: " ";
14+
clear: both;
15+
height: 0
16+
}
17+
.table-flip-scroll html .flip-content,
18+
.table-flip-scroll html .flip-header {
19+
-ms-zoom: 1;
20+
zoom: 1
21+
}
22+
.table-flip-scroll *:first-child+html .flip-content,
23+
.table-flip-scroll *:first-child+html .flip-header {
24+
-ms-zoom: 1;
25+
zoom: 1
26+
}
27+
.table-flip-scroll table {
28+
width: 100%;
29+
border-collapse: collapse;
30+
border-spacing: 0;
31+
display: block;
32+
position: relative
33+
}
34+
.table-flip-scroll th,
35+
.table-flip-scroll td {
36+
margin: 0;
37+
vertical-align: top
38+
}
39+
.table-flip-scroll th:last-child,
40+
.table-flip-scroll td:last-child {
41+
border-bottom: 1px solid #ddd
42+
}
43+
.table-flip-scroll th {
44+
border: 0 !important;
45+
border-right: 1px solid #ddd !important;
46+
//font-size: 13px !important;
47+
//padding: 5px;
48+
width: auto !important;
49+
display: block;
50+
text-align: right;
51+
}
52+
.table-flip-scroll td {
53+
display: block;
54+
text-align: left;
55+
border: 0 !important;
56+
border-bottom: 1px solid #ddd !important;
57+
}
58+
.table-flip-scroll thead {
59+
display: block;
60+
float: left
61+
}
62+
.table-flip-scroll thead tr {
63+
display: block;
64+
}
65+
.table-flip-scroll tbody {
66+
display: block;
67+
width: auto;
68+
position: relative;
69+
overflow-x: auto;
70+
white-space: nowrap
71+
}
72+
.table-flip-scroll tbody tr {
73+
display: inline-block;
74+
vertical-align: top;
75+
margin-left: -5px;
76+
border-left: 1px solid #ddd
77+
}
78+
}

‎src/Dashboard/TablesAndLists/ResponsiveTables/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import './ResponsiveTables.scss';

‎src/Dashboard/TablesAndLists/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import './TablesAndLists.scss';
22
import TablesAndLists from './TablesAndLists';
33
import './BasicTables';
4-
// import './ResponisiveTables';
4+
import './ResponsiveTables';
55
// import './ResponisiveLists';
66

77
export default TablesAndLists;

‎src/Dashboard/_common/DashboardSidebar/SidebarNav/SidebarNav.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@
168168
Basic Tables
169169
</span>
170170
</a>
171-
<a href="" class="NavLink" >
171+
<a href="/TablesAndLists/ResponsiveTables.html" class="NavLink" >
172172
<span>
173173
Responsive Tables
174174
</span>

0 commit comments

Comments
 (0)