Skip to content

Commit d8a235d

Browse files
samelhusseinisamelhusseini
authored
Documentation page updates (microsoft#4470)
* Documentation page updates fixing issues with scrolling and page print
1 parent 47a8193 commit d8a235d

14 files changed

Lines changed: 190 additions & 142 deletions

File tree

‎docfiles/docs.html‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,57 @@
22
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
33

44
<head>
5-
<meta charset="UTF-8">
6-
<title>@name@</title>
7-
<meta name="Description" content="@description@" />
5+
<meta charset="UTF-8">
6+
<title>@name@</title>
7+
<meta name="Description" content="@description@" />
88

9-
<!-- @include meta.html -->
10-
<!-- @include head.html -->
9+
<!-- @include meta.html -->
10+
<!-- @include head.html -->
1111

1212
</head>
1313

1414
<body id='root' class='root'>
1515

16-
<div id="accessibleMenu" class="ui accessibleMenu borderless fixed menu" role="menubar">
17-
@accMenu@
18-
</div>
16+
<div id="accessibleMenu" class="ui accessibleMenu borderless fixed menu" role="menubar">
17+
@accMenu@
18+
</div>
1919

2020

21-
<!-- @include tocheader.html -->
21+
<!-- @include tocheader.html -->
2222

23-
<div id="docs" class="pusher">
23+
<div id="docs" class="pusher">
2424

25-
<div class="full height">
25+
<!-- @include toc.html -->
2626

27-
<!-- @include toc.html -->
27+
<div class="article" id="maincontent">
28+
<div class="article-inner">
2829

29-
<div class="article" id="maincontent">
30+
<!-- @include header.html -->
3031

31-
<!-- @include header.html -->
32+
<div class="main ui container fluid mainbody">
33+
@printBtn@ @body@
34+
<div class="hideprint">@github@</div>
35+
</div>
3236

33-
<div class="main ui container mainbody">
34-
@printBtn@
35-
@body@
36-
<div class="hideprint">@github@</div>
37-
</div>
37+
<div class="showmobile hideprint">
38+
@prev@ @next@
39+
</div>
3840

39-
<div class="hideprint">
40-
@prev@
41-
@next@
42-
</div>
43-
</div>
44-
</div>
41+
<!-- @include footer.html -->
42+
</div>
4543

46-
</div>
44+
<div class="hidemobile hideprint">
45+
@prev@ @next@
46+
</div>
4747

48-
<!-- @include footer.html -->
48+
</div>
4949

50-
<!-- @include macros.html -->
51-
<!-- @include tracking.html -->
50+
</div>
51+
52+
53+
<!-- @include macros.html -->
54+
<!-- @include tracking.html -->
5255

5356
</body>
5457

55-
</html>
58+
</html>

‎docfiles/footer.html‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<footer class="ui inverted accent vertical footer segment hideprint" aria-hidden="false">
1+
<footer class="ui vertical footer segment hideprint" aria-hidden="false">
22
<div class="ui center aligned container">
3-
<div class="ui horizontal inverted link list">
3+
<div class="ui horizontal link list">
44
<a class="item" href="https://twitter.com/intent/follow?screen_name=MsMakeCode" title="Follow us on Twitter" target="_blank"
55
rel="noopener">
66
<i class="huge icon twitter"></i>
@@ -12,20 +12,19 @@
1212
target="_blank" rel="noopened">
1313
<i class="huge icon youtube"></i>
1414
</a>
15-
<a class="item" href="mailto:makecode@microsoft.com" title="Send us an Email"
16-
target="_blank" rel="noopened">
15+
<a class="item" href="mailto:makecode@microsoft.com" title="Send us an Email" rel="noopened">
1716
<i class="huge icon mail"></i>
1817
</a>
1918
</div>
20-
<div class="ui inverted section divider"></div>
21-
<div class="ui container horizontal inverted small divided link list">
19+
<div class="ui section divider"></div>
20+
<div class="ui container horizontal small divided link list">
2221
<!-- <a class="item" href="https://makecode.com/contact" target="_blank" rel="noopener">Contact Us</a> -->
2322
<a class="item" href="https://makecode.com/privacy" target="_blank" rel="noopener">Privacy &amp; Cookies</a>
2423
<a class="item" href="https://makecode.com/termsofuse" target="_blank" rel="noopener"> Terms Of Use</a>
2524
<a class="item" href="https://makecode.com/trademarks" target="_blank" rel="noopener">Trademarks</a>
2625
<div class="item">© 2018 Microsoft</div>
2726
</div>
28-
<div class="ui container horizontal inverted small divided link list">
27+
<div class="ui container horizontal small divided link list">
2928
<a class="ui centered item" href="https://makecode.com/" title="Microsoft MakeCode" target="_blank" rel="noopener">Powered by Microsoft MakeCode</a>
3029
</div>
3130
</div>

‎docfiles/header.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
<div class="ui secondary borderless menu hideprint">
2-
<div class="ui item">
1+
<div class="ui one column padded grid hideprint hidemobile">
2+
<div class="column">
33
@breadcrumb@
44
</div>
55
</div>

‎docfiles/style.css‎

Lines changed: 111 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -135,15 +135,16 @@ code.lang-namespaces,
135135
code.lang-codecard
136136
{
137137
background-color: rgba(0,0,0,0.04);
138-
color:transparent;
138+
color:transparent;
139139
}
140140

141141
/* Limit width of text so that it's readable
142142
*/
143143

144144
.ui.text p,
145-
.ui.text li {
146-
max-width: 45em;
145+
.ui.text li,
146+
.ui.container.mainbody {
147+
max-width: 1100px !important;
147148
}
148149

149150
/* wrap cards header */
@@ -197,51 +198,40 @@ svg {
197198
background: hsla(0,0%,100%,.9)!important;
198199
}
199200

200-
/* Styling the table of contents much like the Semantic UI documentation site: http://semantic-ui.com/introduction/getting-started.html */
201-
.pusher > .full.height {
202-
display: -webkit-box;
203-
display: -webkit-flex;
204-
display: -ms-flexbox;
205-
display: flex;
206-
-webkit-flex-direction: row;
207-
-ms-flex-direction: row;
208-
flex-direction: row;
201+
#docs {
202+
position: relative;
203+
width: 100%;
204+
height: 100%;
209205
}
210206

211-
.full.height > .toc {
212-
position: relative;
213-
z-index: 1;
214-
width: 300px;
215-
-webkit-box-flex: 0;
216-
-webkit-flex: 0 0 auto;
217-
-ms-flex: 0 0 auto;
218-
flex: 0 0 auto;
207+
.pusher .article {
208+
position: absolute;
209+
top: 0;
210+
right: 0;
211+
left: 300px;
212+
bottom: 0;
213+
overflow-y: auto;
214+
-webkit-box-flex: 1;
215+
216+
-webkit-flex: 1 1 auto;
217+
-ms-flex: 1 1 auto;
218+
flex: 1 1 auto;
219+
min-width: 0px;
219220
}
220221

221-
.full.height > .toc .ui.menu {
222-
border-radius: 0;
223-
border-width: 0 1px 0 0;
224-
box-shadow: none;
225-
margin: 0;
226-
width: inherit;
227-
overflow: hidden;
228-
will-change: transform;
222+
.pusher .article-inner {
223+
position: absolute;
224+
top: 0;
225+
right: 0;
226+
left: 0;
227+
bottom: 0;
228+
overflow-y: auto;
229229
}
230230

231231
.ui.vertical.menu .menu .item {
232232
font-size: 1em;
233233
}
234234

235-
.article {
236-
-webkit-box-flex: 1;
237-
238-
-webkit-flex: 1 1 auto;
239-
-ms-flex: 1 1 auto;
240-
flex: 1 1 auto;
241-
min-width: 0px;
242-
margin-bottom: 2em;
243-
}
244-
245235
#pagemenu {
246236
border-radius: 0;
247237
}
@@ -273,7 +263,7 @@ svg {
273263

274264
/* navigation */
275265
.navigation {
276-
position: fixed;
266+
position: absolute;
277267
top: 50px;
278268
bottom: 0;
279269
margin: 0;
@@ -301,17 +291,23 @@ svg {
301291

302292
.navigation.navigation-next {
303293
right: 0;
294+
margin-right: 15px;
304295
}
305296

306297
.navigation.navigation-prev {
307-
left: 300px;
298+
left: 0;
308299
}
309300

310301
.ui.menu.tocmenu {
302+
position: absolute;
303+
top: 0;
304+
bottom: 0;
311305
left: 0px;
312-
top: -5px;
313306
height: 100%;
314-
overflow: visible !important
307+
width: 300px;
308+
overflow-y: auto;
309+
overflow-x: hidden;
310+
border-radius: 0;
315311
}
316312

317313
.ui.menu.tocmenu .menuContainer {
@@ -322,30 +318,65 @@ svg {
322318
display: none;
323319
}
324320

325-
@media only screen and (max-width: 1272px) {
326-
.full.height > .toc {
321+
/* Search */
322+
.toc .item.search {
323+
margin: -.92857143em -1.14285714em;
324+
}
325+
326+
.toc .item.search input {
327+
border-radius: 0;
328+
}
329+
330+
.showmobile {
331+
display: none;
332+
}
333+
334+
@media only screen and (max-width: 1144px) {
335+
.pusher > .toc {
327336
width: 200px;
337+
position: absolute;
338+
top: 0;
339+
left: -300px;
340+
bottom: 0;
341+
z-index: 1;
342+
overflow-y: auto;
328343
}
329344
.navigation.navigation-prev {
330345
left: 200px;
331346
}
332-
}
333-
334-
@media only screen and (max-width: 1144px) {
335-
.full.height > .toc {
347+
.pusher > .toc {
336348
display: none;
337349
}
350+
.hidemobile {
351+
display: none !important;
352+
}
353+
.showmobile {
354+
display: block;
355+
}
356+
.pusher .article {
357+
left: 0;
358+
}
359+
.ui.container.mainbody {
360+
margin-top: 5rem;
361+
margin-left: 0!important;
362+
margin-right: 0!important;
363+
padding-left: 1em;
364+
padding-right: 1em;
365+
}
338366
.navigation {
339-
position: static;
367+
position: relative; /* IE doesn't support static */
368+
position: static;
340369
top: auto;
341-
max-width: 50%;
370+
max-width: 48%;
342371
width: 50%;
343-
display: inline-block;
344-
float: left;
372+
display: inline-block !important;
345373
}
346374
.navigation.navigation-prev {
347375
left: 0px;
348376
}
377+
.ui.vertical.segment.footer {
378+
margin-top: 4rem;
379+
}
349380
}
350381

351382
@media only screen and (min-width: 1145px) {
@@ -369,19 +400,42 @@ print only stuff
369400
}
370401

371402
@media only print {
372-
ui.segment, .nobreak, pre, code, blockquote {
403+
*,
404+
*:before,
405+
*:after,
406+
*:first-letter,
407+
p:first-line,
408+
div:first-line,
409+
blockquote:first-line,
410+
li:first-line {
411+
background: transparent !important;
412+
color: #000 !important;
413+
box-shadow: none !important;
414+
text-shadow: none !important;
415+
overflow: visible !important;
416+
}
417+
.injectionDiv {
418+
overflow: hidden !important;
419+
}
420+
.pusher .article {
421+
left: 0;
422+
position: relative;
423+
}
424+
.pusher .article-inner {
425+
position: relative;
426+
}
427+
.ui.segment, .ui.centered.card, .ui.content, iframe, .nobreak, pre, code, blockquote {
373428
page-break-inside: avoid;
374429
}
375430
h1, h2, h3, h4, h5, h6, img {
376431
page-break-inside: avoid;
377432
page-break-after: avoid;
378433
}
379434
ul, ol, dl {
380-
page-break-before: avoid;
435+
page-break-before: avoid !important;
381436
}
382-
383437
.showprint {
384-
display:block !important;
438+
display: block !important;
385439
}
386440
.hideprint,
387441
.ui.embed > .icon,
@@ -421,7 +475,7 @@ print only stuff
421475
font-weight:normal;
422476
}
423477
/* page breaks */
424-
ul, ol, img, h2, h3 {
478+
img, h2, h3 {
425479
page-break-inside: avoid;
426480
}
427481
/* headers, footers */

0 commit comments

Comments
 (0)