summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorVlad Ureche <vlad.ureche@epfl.ch>2016-01-05 12:58:39 +0100
committerVlad Ureche <vlad.ureche@epfl.ch>2016-01-05 12:58:39 +0100
commitfb22e2b0a73605d654c153e02d454e5cec21f355 (patch)
treeb5b28b7b84fb8abbf5c93af947410715b026202a
parent73d8306424931acb301c9c00b19d72d31f51037e (diff)
parent30959e5b6b9267286d10c0a7ef2f7cc17f43fcbd (diff)
downloadscala-fb22e2b0a73605d654c153e02d454e5cec21f355.tar.gz
scala-fb22e2b0a73605d654c153e02d454e5cec21f355.tar.bz2
scala-fb22e2b0a73605d654c153e02d454e5cec21f355.zip
Merge pull request #4888 from felixmulder/topic/scaladoc-relative-fonts
fix mobile styling for scaladoc
-rw-r--r--src/scaladoc/scala/tools/nsc/doc/html/HtmlPage.scala5
-rw-r--r--src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.css88
-rw-r--r--src/scaladoc/scala/tools/nsc/doc/html/resource/lib/index.js14
-rw-r--r--src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.css221
-rw-r--r--src/scaladoc/scala/tools/nsc/doc/html/resource/lib/template.js28
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"),