Improve table horizontal scrolling on mobile

Thibaut Courouble committed 9 years ago

Commit 28587711 parent 302e3f15 files · +25 −22Browse files

Unified · Split

5 files

@@ -37,13 +37,15 @@ app.templates.aboutPage = -> """ · 36 unmodified lines
37	37	<li><a href="http://www.jeremykratz.com/">Jeremy Kratz</a> for the C/C++ logo
38	38	</ul>
39	39
40		− <table class="_credits">
41		− <tr>
42		− <th>Documentation
43		− <th>Copyright
44		− <th>License
45		− #{("<tr><td>#{c[0]}<td>© #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}
46		− </table>
	40	+ <div class="_table">
	41	+ <table class="_credits">
	42	+ <tr>
	43	+ <th>Documentation
	44	+ <th>Copyright
	45	+ <th>License
	46	+ #{("<tr><td>#{c[0]}<td>© #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}
	47	+ </table>
	48	+ </div>
47	49
48	50	<h2 class="_block-heading" id="faq">Questions & Answers</h2>
49	51	<dl>

@@ -10,15 +10,17 @@ app.templates.offlinePage = (docs) -> """ · 9 unmodified lines
10	10	</div>
11	11	</div>
12	12
13		− <table class="_docs">
14		− <tr>
15		− <th>Documentation</th>
16		− <th class="_docs-size">Size</th>
17		− <th>Status</th>
18		− <th>Action</th>
19		− </tr>
20		− #{docs}
21		− </table>
	13	+ <div class="_table">
	14	+ <table class="_docs">
	15	+ <tr>
	16	+ <th>Documentation</th>
	17	+ <th class="_docs-size">Size</th>
	18	+ <th>Status</th>
	19	+ <th>Action</th>
	20	+ </tr>
	21	+ #{docs}
	22	+ </table>
	23	+ </div>
22	24	<p class="_note"><strong>Note:</strong> your browser may delete DevDocs's offline data if your computer is running low on disk space and you haven't used the app in a while. Load this page before going offline to make sure the data is still there.
23	25	<h2 class="_block-heading">Questions & Answers</h2>
24	26	<dl>

@@ -373,6 +373,9 @@ · 372 unmodified lines
373	373	._code { @extend %code; }
374	374	._highlight { background: $highlightBackground !important; }
375	375
	376	+._table { width: 100%; }
	377	+._mobile ._table { overflow-x: auto; }
	378	+
376	379	._pre-clip {
377	380	display: none;
378	381	position: absolute;

@@ -105,12 +105,6 @@ · 104 unmodified lines
105	105	max-width: none;
106	106	margin-left: 0;
107	107	}
108		−
109		− // Responsive browser compatibility tables
110		− #compat-desktop,
111		− #compat-mobile {
112		− overflow-x: auto;
113		− }
114	108	}
115	109
116	110	//

@@ -102,4 +102,6 @@ · 101 unmodified lines
102	102	.cleared { clear: both; } // CSS/box-shadow
103	103
104	104	code > strong { font-weight: normal; }
	105	+
	106	+ #compat-desktop, #compat-mobile { @extend ._table; }
105	107	}