diff options
| author | Felix Mulder <felix.mulder@gmail.com> | 2015-12-24 18:32:29 +0100 |
|---|---|---|
| committer | Felix Mulder <felix.mulder@gmail.com> | 2016-01-04 18:18:04 +0100 |
| commit | 30959e5b6b9267286d10c0a7ef2f7cc17f43fcbd (patch) | |
| tree | b5b28b7b84fb8abbf5c93af947410715b026202a /src/scaladoc/scala/tools/nsc/doc | |
| parent | 73d8306424931acb301c9c00b19d72d31f51037e (diff) | |
| download | scala-30959e5b6b9267286d10c0a7ef2f7cc17f43fcbd.tar.gz scala-30959e5b6b9267286d10c0a7ef2f7cc17f43fcbd.tar.bz2 scala-30959e5b6b9267286d10c0a7ef2f7cc17f43fcbd.zip | |
add mobile CSS rules for updated scaladoc look
This commit addresses the need for an improved mobile viewing
experience. Specifically it introduces CSS media queries to adjust
sizing and indentation of elements on mobile devices. This includes
the following changes:
- replace absolute font sizing with relative font sizing
- fix font-resizing issues for mobile by fixing viewport
- hide related links when viewport too small
- fix missing trigram from heaven on Android
- remove indentation on annotations e.g. `@throws` and place associated
text on a separate line
- fix bottom scoll-bar appearing on code-snippets
- add spacing between entity icons in browser
- add dynamic top offset for entity description
- fix long entity names corrupting style
- remove "EXPERIMENTAL" button from shortcomment divs on mobile
Diffstat (limited to 'src/scaladoc/scala/tools/nsc/doc')
5 files changed, 270 insertions, 86 deletions
diff --git a/src/scaladoc/scala/tools/nsc/doc/html/HtmlPage.scala b/src/scaladoc/scala/tools/nsc/doc/html/HtmlPage.scala index 503f101b53..16a2fc59d4 100644 --- a/src/scaladoc/scala/tools/nsc/doc/html/HtmlPage.scala +++ b/src/scaladoc/scala/tools/nsc/doc/html/HtmlPage.scala @@ -47,6 +47,8 @@ abstract class HtmlPage extends Page { thisPage => val html = <html> <head> + <meta http-equiv="X-UA-Compatible" content="IE=edge"/> + <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>{ title }</title> <meta name="description" content={ description }/> <meta name="keywords" content={ keywords }/> @@ -269,7 +271,8 @@ abstract class HtmlPage extends Page { thisPage => <div> Related Docs: <a href={relativeLinkTo(tpl.companion.get)} title={docEntityKindToCompanionTitle(tpl)}>{objClassTrait}</a> - | {templateToHtml(tpl.inTemplate, s"package ${tpl.inTemplate.name}")} + <span class="divider">|</span> + {templateToHtml(tpl.inTemplate, s"package ${tpl.inTemplate.name}")} </div> case None => <div>Related Doc: diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.css b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.css index 9b8a11e76a..1260d860d0 100644 --- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.css +++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.css @@ -23,7 +23,6 @@ * { color: inherit; - font-size: 10pt; text-decoration: none; font-family: "Lato", Arial, sans-serif; border-width: 0px; @@ -43,10 +42,11 @@ a:hover { } html { - box-sizing: border-box; + background-color: #364550; + box-sizing: border-box; } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } textarea, input { outline: none; } @@ -56,7 +56,7 @@ textarea, input { outline: none; } } #browser { - width: 20em; + width: 16.75em; top: 0px; left: 0; bottom: 0px; @@ -66,7 +66,7 @@ textarea, input { outline: none; } } #browser.full-screen { - left: -18em; + left: -15em; } #filter { @@ -80,7 +80,7 @@ textarea, input { outline: none; } border-left:0; border-right:0; z-index: 99; - min-height: 6.1em; + min-height: 5.5em; } #filter.scrolled { @@ -110,16 +110,33 @@ textarea, input { outline: none; } #filter > span.toggle-sidebar { position: absolute; - top: 0.66em; - right: 0.4em; - font-size: 1.2em; + top: 0.8em; + right: 0.2em; color: #fff; z-index: 99; + width: 1.5em; + height: 1.5em; } #filter > span.toggle-sidebar:hover { cursor: pointer; - color: #c2c2c2; +} + +/* Pseudo element replacing UTF8-symbol "Trigram From Heaven" */ +#filter > span.toggle-sidebar:before { + position: absolute; + top: -0.45em; + left: 0.45em; + content: ""; + display: block; + width: 0.7em; + -webkit-box-shadow: 0 0.8em 0 1px #fff, 0 1.1em 0 1px #fff, 0 1.4em 0 1px #fff; + box-shadow: 0 0.8em 0 1px #fff, 0 1.1em 0 1px #fff, 0 1.4em 0 1px #fff; +} + +#filter > span.toggle-sidebar:hover:before { + -webkit-box-shadow: 0 0.8em 0 1px #c2c2c2, 0 1.1em 0 1px #c2c2c2, 0 1.4em 0 1px #c2c2c2; + box-shadow: 0 0.8em 0 1px #c2c2c2, 0 1.1em 0 1px #c2c2c2, 0 1.4em 0 1px #c2c2c2; } #textfilter > .pre { @@ -136,7 +153,7 @@ textarea, input { outline: none; } display: block; height: 20px; margin-top: 0.5em; - margin-bottom: 1em; + margin-bottom: 0.8em; } #textfilter > .input { @@ -144,7 +161,7 @@ textarea, input { outline: none; } position: absolute; top: 0; left: 0; - padding: 0.2em 2em 0.2em 0.5em; + padding: 0.2em 1.8em 0.2em 0.5em; width: 100%; } @@ -180,6 +197,7 @@ textarea, input { outline: none; } #textfilter > .input > input { font-family: "Open Sans"; + font-size: 0.85em; height: 2em; padding: 0 0.5em; color: #fff; @@ -195,8 +213,9 @@ textarea, input { outline: none; } #textfilter > .clear { display: none; position: absolute; - top: 0.58em; - right: 1.7em; + font-size: 0.9em; + top: 0.53em; + right: 1.8em; height: 23px; width: 21px; color: rgba(255, 255, 255, 0.4); @@ -208,21 +227,23 @@ textarea, input { outline: none; } } #focusfilter { + font-size: 0.9em; position: relative; text-align: center; display: block; padding: 0.6em; background-color: #f16665; color: #fff; + margin-top: 0.65em; } #focusfilter .focuscoll { font-weight: bold; } -#focusfilter img { - bottom: -2px; - position: relative; +#focusfilter a.focusremove { + margin-left: 0.2em; + font-size: 0.9em; } #kindfilter-container { @@ -231,7 +252,7 @@ textarea, input { outline: none; } z-index: 99; bottom: 0.5em; left: 0; - width: 20em; + width: 16.75em; } #kindfilter { @@ -248,6 +269,7 @@ textarea, input { outline: none; } -ms-user-select: none; user-select: none; color: #fff; + font-size: 0.8em; } #kindfilter:hover { @@ -258,7 +280,6 @@ textarea, input { outline: none; } #letters { position: relative; text-align: center; - padding-bottom: 5px; border: 0; margin-top: 0em; color: #fff; @@ -266,7 +287,7 @@ textarea, input { outline: none; } #letters > a, #letters > span { color: #fff; - font-size: 8pt; + font-size: 0.67em; padding-right: 2px; } @@ -280,19 +301,20 @@ textarea, input { outline: none; } } #tpl { - display: block; + font-size: 0.8em; overflow: auto; right: 0; left: 0; bottom: 0; - top: 6.1em !important; + top: 6.9em !important; position: absolute; display: block; background-color: #364550; + padding-top: 0.3em; } #tpl.packfocused { - top: 8.2em !important; + top: 9.5em !important; } #tpl .packfocus, @@ -340,15 +362,15 @@ textarea, input { outline: none; } #tpl .packages a.tplshow > .type-circle { float: left; border: 1px solid rgba(255, 255, 255, 0.4); - background-color: black; /* placeholder only */ - height: 1.3em; - width: 1.3em; - border-radius: 1.3em; + height: 0.8rem; + width: 0.8rem; + border-radius: 0.8rem; color: #efefef; margin-top: 0.16em; + margin-right: 0.1em; position: relative; font-size: 0.8em; - line-height: 0.85; + line-height: 0.9; font-family: Arial, sans-serif; text-align: center; display: table-cell; @@ -400,7 +422,7 @@ textarea, input { outline: none; } } #tpl .templates div.placeholder { - padding-right: 13px; + padding-right: 14px; width: 11px; display: inline-block; } @@ -410,22 +432,20 @@ textarea, input { outline: none; } } #content { - border-left-width: 1px; - border-left-color: black; - border-left-style: white; right: 0px; - left: 20em; + left: 16.75em; bottom: 0px; top: 0px; position: fixed; display: block; + overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: #fff; z-index: 100; } #content.full-screen { - left: 2em; + left: 1.7em; } #content.hide-filter { diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.js b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.js index 9eaabc4cf0..cad4072912 100644 --- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.js +++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.js @@ -14,6 +14,17 @@ var title = $(document).attr('title'); var lastFragment = ""; $(document).ready(function() { + /* check if browser is mobile, if so hide class nav */ + if( /Android|webOS|Mobi|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { + $("#browser").toggleClass("full-screen"); + $("#content").toggleClass("full-screen"); + $("#letters").toggle(); + setTimeout(function() { + $(".packages").hide(); + $("#kindfilter").hide(); + }, 4000); + } + $('iframe').bind("load", function(){ try { var subtitle = $(this).contents().find('title').text(); @@ -354,9 +365,8 @@ function keyboardScrolldownLeftPane() { /* Configures the text filter */ function configureTextFilter() { scheduler.add("init", function() { - $("#filter").prepend("<span class='toggle-sidebar'>☰</span>"); + $("#filter").prepend("<span class='toggle-sidebar'></span>"); $("#textfilter").append("<span class='input'><input placeholder='Filter' id='index-input' type='text' accesskey='/'/></span><span class='clear'>✖</span>"); - $("#content").append("<span class='toggle-sidebar'>☰</span>"); var input = $("#textfilter input"); resizeFilterBlock(); input.bind('keyup', function(event) { diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css index a37b8a1fd3..662ae48944 100644 --- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css +++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css @@ -63,22 +63,21 @@ input { border-width: 0px; } } /* Page */ - body { + overflow-x: hidden; font-family: Arial, sans-serif; background-color: #f0f3f6; - font-size: 10pt; } html { box-sizing: border-box; } + *, *:before, *:after { box-sizing: inherit; } #footer { - font-size: 9pt; text-align: center; color: #858484; bottom: 0; @@ -108,15 +107,10 @@ body.trait > div#definition { } #definition { - display: block-inline; + display: block; padding: 5px 0px; - height: 61px; -} - -#definition > img { - float: left; - padding-right: 6px; - padding-left: 5px; + height: 5.5em; + padding: 0; } #definition > a > img { @@ -131,22 +125,21 @@ body.trait > div#definition { #definition > h1 { color: white; - font-size: 24pt; display: inline-block; overflow: hidden; margin-top: 10px; + font-size: 2.0em; } #definition h1 > a { color: #fff; - font-size: 24pt; text-decoration: none; } #definition #owner { color: #ffffff; - margin-top: 0.9em; - font-size: 10pt; + padding-top: 1.3em; + font-size: 0.8em; overflow: hidden; } @@ -161,11 +154,11 @@ body.trait > div#definition { #signature { background-color:#c2d2dc; min-height: 18px; - font-size: 11.5pt; + font-size: 0.9em; padding: 8px; - box-shadow: 0 0 8px rgba(0,0,0,0.5); + box-shadow: 0 0 0.35em 0.05em rgba(0,0,0,0.5); position: fixed; - top: 5.3em; + top: 6.1em; left: 0; width: 100%; z-index: 9998; @@ -231,7 +224,6 @@ body.trait > div#definition { left: 0; width: 100%; z-index: 9999; - height: 6.1em; } .type #definition { @@ -239,9 +231,9 @@ body.trait > div#definition { position: fixed; top: 0; left: 0; + min-height: 5.5em; width: 100%; z-index: 9999; - height: 6.1em; } .abstract.type #definition { @@ -254,7 +246,6 @@ body.trait > div#definition { width: 5.7em; float: left; color: transparent; - margin: .2em .5em; } .big-circle:hover { @@ -294,7 +285,7 @@ body.abstract.type div.big-circle { } #template { - margin: 0.4em 0.74em 2em 0.74em; + margin: 0.9em 0.75em 2em 0.75em; border-radius: 0.2em; background-color: #fff; -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1); @@ -309,7 +300,7 @@ body.abstract.type div.big-circle { h3 { color: white; padding: 5px 10px; - font-size: 12pt; + font-size: 1em; font-weight: bold; } @@ -317,6 +308,7 @@ dl.attributes > dt { display: block; float: left; font-style: italic; + font-weight: bold; } dl.attributes > dt.implicit { @@ -335,6 +327,7 @@ dl.attributes > dd { color: #2C475C; height: 2em; padding: 1em 1em 2em; + font-size: 1.2em; } .values ol li:last-child { @@ -354,7 +347,6 @@ dl.attributes > dd { #inheritedMembers > div.parent > h3 { height: 17px; font-style: italic; - font-size: 12pt; } #inheritedMembers > div.parent > h3 * { @@ -364,7 +356,6 @@ dl.attributes > dd { #inheritedMembers > div.conversion > h3 { height: 2em; padding: 1em; - font-size: 12pt; font-style: italic; color: #2C475C; } @@ -415,8 +406,8 @@ div.members > ol > li:last-child { } .signature { - font-family: monospace; - font-size: 10pt; + font-family: "Source Code Pro"; + font-size: 0.8rem; line-height: 18px; clear: both; display: block; @@ -505,7 +496,7 @@ div.members > ol > li:last-child { } .full-signature-usecase h4 span { - font-size: 10pt; + font-size: 0.9em; } .full-signature-usecase > #signature { @@ -611,22 +602,6 @@ div.members > ol > li:last-child { font-weight: bold; } -.cmt h3 { - font-size: 14pt; -} - -.cmt h4 { - font-size: 13pt; -} - -.cmt h5 { - font-size: 12pt; -} - -.cmt h6 { - font-size: 11pt; -} - .cmt pre { padding: 0.5em; border: 0px solid #ddd; @@ -635,6 +610,7 @@ div.members > ol > li:last-child { display: block; font-family: "Source Code Pro"; border-radius: 0.2em; + overflow-x: auto; } .cmt pre span.ano { @@ -739,8 +715,7 @@ p.comment { } div.fullcommenttop { - padding: 10px 10px; - margin-top: 9em; + padding: 1em 0.8em; } div.fullcomment { @@ -756,6 +731,7 @@ div.fullcomment { #template .shortcomment { margin: 5px 0 0 14.7em; padding: 0; + font-family: "Open Sans"; } div.fullcomment .block { @@ -764,6 +740,7 @@ div.fullcomment .block { margin-top: 5px; overflow: hidden; margin-right: 0.5em; + font-family: "Open Sans"; } div.fullcommenttop .block { @@ -775,6 +752,13 @@ div.fullcommenttop .block { box-shadow: 0 0 10px rgba(0,0,0,0.1); } +div#comment, +div#mbrsel, +div#template, +div#footer { + font-size: 0.8em; +} + #comment { font-family: "Open Sans"; } @@ -797,6 +781,7 @@ div.fullcomment .block > h5 { } div.fullcomment .comment { + font-family: "Open Sans"; margin: 5px 0 10px; } @@ -871,7 +856,6 @@ div.fullcomment dl.paramcmts > dd { } #mbrsel { - font-size: 9.5pt; display: block; padding: 1em 1em 0.5em; margin: 0.8em; @@ -991,7 +975,7 @@ div.fullcomment dl.paramcmts > dd { } #mbrsel > div#filterby > div > ol > li { - line-height: 16pt; + line-height: 1.5em; display: inline-block; cursor: pointer; -webkit-touch-callout: none; @@ -1061,3 +1045,144 @@ div.fullcomment dl.paramcmts > dd { background-color: #b94a48; margin-right: 0.8em !important; } + +/* Media query rules for smaller viewport */ +@media only screen /* Large screen with a small window */ +and (max-width: 560px) +, +screen /* HiDPI device like Nexus 5 */ +and (max-device-width: 360px) +and (max-device-height: 640px) +and (-webkit-device-pixel-ratio: 3) +, +screen /* Most mobile devices */ +and (max-device-width: 480px) +and (orientation: portrait) +, +only screen /* iPhone 6 */ +and (max-device-width: 667px) +and (-webkit-device-pixel-ratio: 2) +{ + body, + body > h4#signature { + min-width: 300px; + } + + .signature .modifier_kind { + width: 10em; + } + + .signature > .symbol { + padding-left: 10.7em; + } + + #template .shortcomment { + margin-left: 10.7em; + } + + #template div.fullcommenttop, #template div.fullcomment { + margin-left: 10.7em; + } + + #definition { + min-width: 300px; + height: 6em; + } + + #definition .morelinks { + text-align: left; + left: 7.2em; + font-size: 0.8em; + top: auto; + bottom: 0.5em; + } + + #signature { + top: 6.7em; + } + + .big-circle { + margin-top: 0.6em; + } +} + +/* Media query rules specifically for mobile devices */ +@media +screen /* HiDPI device like Nexus 5 */ +and (max-device-width: 360px) +and (max-device-height: 640px) +and (-webkit-device-pixel-ratio: 3) +, +screen /* Most mobile devices */ +and (max-device-width: 480px) +and (orientation: portrait) +, +only screen /* iPhone 6 */ +and (max-device-width: 667px) +and (-webkit-device-pixel-ratio: 2) +{ + #definition { + position: absolute !important; + min-height: 0 !important; + height: 4em !important; + } + + #signature { + position: absolute !important; + font-size: 0.7em; + top: 5.7em; + } + + #definition > h1 { + font-size: 1.3em; + } + + #definition .morelinks { + display: none; + } + + #definition #owner { + padding-top: 0.7em; + } + + div.fullcommenttop { + margin-top: 11.6em; + } + + #template .shortcomment { + margin-left: 1em; + } + + div.fullcomment dl.attributes > dt { + margin: 0.5em 0; + clear: both; + } + + div.fullcomment dl.attributes > dd { + padding-left: 0; + clear: both; + } + + #template div.fullcommenttop, #template div.fullcomment { + margin-left: 1em; + } + + .big-circle { + width: 3em; + height: 3em; + background-size: 3em !important; + margin: 0.5em; + } + + div#template { + margin-bottom: 0.5em; + } + + div#footer { + font-size: 0.5em; + } + + .shortcomment > span.badge { + display: none; + } +} diff --git a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js index be71839502..9d9d7bdfff 100644 --- a/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js +++ b/src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js @@ -1,7 +1,7 @@ // © 2009–2010 EPFL/LAMP // code by Gilles Dubochet with contributions by Pedro Furlanetto, Marcin Kubala and Felix Mulder -$(document).ready(function(){ +$(document).ready(function() { $("#template > div > div > ol > li > span > a").click(function(e) { $("#template > div > div > ol > li").removeClass("selected"); @@ -10,6 +10,32 @@ $(document).ready(function(){ $('html,body').animate({scrollTop: $(this).offset().top - defHeight}, 500); }); + /* Handle dynamic size of signature and offset the fullcommenttop div + * appropriately + * + * Some mobile devices render quite slowly, delay the margin-top + * calculation if mobile + */ + if(/Android|webOS|Mobi|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { + setTimeout(function() { + $("div.fullcommenttop").css({ + "margin-top": $("#definition").height() + $("#signature").height() + 15 + }); + }, 1000); + } else { + $("div.fullcommenttop").css({ + "margin-top": $("#definition").height() + $("#signature").height() + 15 + }); + } + + /* When the window is resized, adjust the fullcommenttop div's offset */ + $(window).resize(function() { + $("div.fullcommenttop").css({ + "margin-top": $("#definition").height() + $("#signature").height() + 15 + }); + }); + + var controls = { visibility: { publicOnly: $("#visbl").find("> ol > li.public"), |