From 30959e5b6b9267286d10c0a7ef2f7cc17f43fcbd Mon Sep 17 00:00:00 2001 From: Felix Mulder Date: Thu, 24 Dec 2015 18:32:29 +0100 Subject: 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 --- .../scala/tools/nsc/doc/html/HtmlPage.scala | 5 +- .../tools/nsc/doc/html/resource/lib/index.css | 88 ++++---- .../scala/tools/nsc/doc/html/resource/lib/index.js | 14 +- .../tools/nsc/doc/html/resource/lib/template.css | 221 ++++++++++++++++----- .../tools/nsc/doc/html/resource/lib/template.js | 28 ++- 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 = + + { title } @@ -269,7 +271,8 @@ abstract class HtmlPage extends Page { thisPage =>
Related Docs: {objClassTrait} - | {templateToHtml(tpl.inTemplate, s"package ${tpl.inTemplate.name}")} + | + {templateToHtml(tpl.inTemplate, s"package ${tpl.inTemplate.name}")}
case None =>
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("☰"); + $("#filter").prepend(""); $("#textfilter").append("✖"); - $("#content").append("☰"); 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"), -- cgit v1.2.3