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	<li><a href="http://www.jeremykratz.com/">Jeremy Kratz</a> for the C/C++ logo	37	<li><a href="http://www.jeremykratz.com/">Jeremy Kratz</a> for the C/C++ logo
38	</ul>	38	</ul>
39		39
40	<table class="_credits">	40	<div class="_table">
41	<tr>	41	<table class="_credits">
42	<th>Documentation	42	<tr>
43	<th>Copyright	43	<th>Documentation
44	<th>License	44	<th>Copyright
45	#{("<tr><td>#{c[0]}<td>© #{c[1]}<td><a href=\"#{c[3]}\">#{c[2]}</a>" for c in credits).join('')}	45	<th>License
46	</table>	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	<h2 class="_block-heading" id="faq">Questions & Answers</h2>	50	<h2 class="_block-heading" id="faq">Questions & Answers</h2>
49	<dl>	51	<dl>

@@ -10,15 +10,17 @@ app.templates.offlinePage = (docs) -> """ · 9 unmodified lines
10	</div>	10	</div>
11	</div>	11	</div>
12		12
13	<table class="_docs">	13	<div class="_table">
14	<tr>	14	<table class="_docs">
15	<th>Documentation</th>	15	<tr>
16	<th class="_docs-size">Size</th>	16	<th>Documentation</th>
17	<th>Status</th>	17	<th class="_docs-size">Size</th>
18	<th>Action</th>	18	<th>Status</th>
19	</tr>	19	<th>Action</th>
20	#{docs}	20	</tr>
21	</table>	21	#{docs}
		22	</table>
		23	</div>
22	<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.	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	<h2 class="_block-heading">Questions & Answers</h2>	25	<h2 class="_block-heading">Questions & Answers</h2>
24	<dl>	26	<dl>

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

     max-width: none;
     margin-left: 0;
   }
-  // Responsive browser compatibility tables
-  #compat-desktop,
-  #compat-mobile {
-    overflow-x: auto;
-  }
 }
 //

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