am 318fb971: Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates.
* commit '318fb97168396d21a958a415e9a1cf8167ebdc86':
Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates.
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
index 75ac78b..e7ab40f 100644
--- a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
@@ -4064,6 +4064,9 @@
#sticky-header.distribute {
border-bottom: 1px solid #9C0;
}
+#sticky-header.about {
+ border-bottom: 1px solid #9933CC;
+}
#sticky-header > div {
overflow: hidden;
*zoom: 1;
@@ -4575,11 +4578,11 @@
}
#nav-x {
- padding-top: 14px;
+ padding-top: 13px;
}
#nav-x .wrap {
- min-height:34px;
+ min-height:32px;
}
#nav-x .wrap,
@@ -5158,7 +5161,7 @@
/* Basic card-styling with shadow */
.resource-card {
border-radius: 1px;
- box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.14);
background: #fefefe;
}
@@ -5181,7 +5184,7 @@
height: 100%;
width: 100%;
opacity: 1;
- background: rgba(0, 0, 0, 0.24);
+ background: rgba(0, 0, 0, 0.2);
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
@@ -5237,25 +5240,23 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
- padding-bottom: 4px;
+ padding-bottom: 5px;
margin-bottom: -2px;
font-size: 16px;
}
.card-info .description {
- position: relative;
overflow: hidden;
}
.card-info .description .text {
color: #464646;
font: 13px/15px Roboto Condensed;
overflow: hidden;
- padding-right: 70px;
- height: 30px;
+ width:100%;
}
.card-info .description .util {
position: absolute;
- right: 0px;
- bottom: -3px;
+ right: 5px;
+ bottom: 70px; /*-2px;*/
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
@@ -5269,6 +5270,56 @@
.card-info.empty-desc .description {
display: none;
}
+/* Truncate card summaries at bounding box and
+ * and apply ellipsis at lower right */
+.ellipsis {
+ overflow: hidden;
+ float:right;
+ line-height: 15px;
+ width:100%;
+}
+.resource-card-6x6 .card-info .description .teddddddxt {
+ float:left;
+ position:relative;
+ margin-left:0;
+}
+.ellipsis:before {
+ content:"";
+ float: left;
+ width: 5px;
+ height:100%;
+}
+.ellipsis > *:first-child.text {
+ float: right;
+ width: 100% !important;
+ margin-left: -5px;
+}
+.ellipsis:after {
+ content: "\02026";
+ height:17px;
+ padding-bottom:4px;
+
+ box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+
+ float: right; position: relative;
+ top: -16px; left: 100%;
+ width: 4em; margin-left: -4em;
+ padding-right: 5px;
+
+ background: -webkit-gradient(linear, left top, right top,
+ from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
+ background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
+ background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
+ background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
+ background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
+}
+.ellipsis:after {
+ font-style: normal; color: #aaa;
+ font-size:13px;
+ text-align: right;
+}
/* Flow Layout */
.resource-flow-layout {
@@ -5295,9 +5346,11 @@
.resource-card:hover .card-bg:after {
opacity: 0;
}
+/* disabled to make way for fade/ellipsis truncation,
+ and the plusone moves up.
.resource-card:hover .card-info .description .text {
padding-right: 70px;
-}
+} */
.resource-card:hover .card-info .description .util {
opacity: 1;
}
@@ -5339,6 +5392,10 @@
.resource-carousel-layout .frame li .card-info .description .text {
height: 40px;
}
+.resource-carousel-layout .frame li .card-info .description .util {
+ bottom:97px;
+ right:4px;
+}
/* Stack Layout */
.resource-stack-layout {
@@ -6235,7 +6292,13 @@
.resource-card-3x3 > .card-info .description .util, .resource-card-6x3 > .card-info .description .util, .resource-card-9x3 > .card-info .description .util, .resource-card-12x3 > .card-info .description .util, .resource-card-15x3 > .card-info .description .util, .resource-card-18x3 > .card-info .description .util {
display: none;
}
-
+/* placement of plusone */
+.resource-card-6x12 > .card-info .description .util, .resource-card-9x12 > .card-info .description .util, .resource-card-12x12 > .card-info .description .util, .resource-card-15x12 > .card-info .description .util {
+ bottom:2px;
+}
+.resource-card-18x12 > .card-info .description .util {
+ bottom:2px;
+}
/* Overrides for col-16 6x6 cards linking to local content on landing pages.
Suppresses "section" and puts the title above a hairline rule. */
.landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section {
@@ -6249,17 +6312,16 @@
border-bottom: 1px solid #959595;
padding-bottom: 0px;
}
-
.landing .card-info .description {
font-size: 13px;
line-height: 15px;
}
-
.landing .card-info .description .text {
height:30px;
-width:auto;
}
-
+.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util {
+ bottom:2px;
+}
/*
Generate a resource stack layout for a 3 column widget spanning 16 grid cols
*/
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
index 00a1b2b..9ce7c4b 100644
--- a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
@@ -216,7 +216,10 @@
} else if (secondFrag == "googleplay") {
$("#nav-x li.googleplay a").addClass("selected");
}
- }
+ } else if ($("body").hasClass("about")) {
+ $("#sticky-header").addClass("about");
+ }
+
// set global variable so we can highlight the sidenav a bit later (such as for google reference)
// and highlight the sidenav
mPagePath = pagePath;
@@ -3339,15 +3342,20 @@
initResourceWidget(this);
});
- // Might remove this, but adds ellipsis to card descriptions rather
- // than just cutting them off, not sure if it performs well
- $('.card-info .text').ellipsis();
+ /* Pass the line height to ellipsisfade() to adjust the height of the
+ text container to show the max number of lines possible, without
+ showing lines that are cut off. This works with the css ellipsis
+ classes to fade last text line and apply an ellipsis char. */
+
+ //card text currently uses 15px line height.
+ var lineHeight = 15;
+ $('.card-info .text').ellipsisfade(lineHeight);
});
/*
Three types of resource layouts:
Flow - Uses a fixed row-height flow using float left style.
- Carousel - Single card slideshow all same dimension absoute.
+ Carousel - Single card slideshow all same dimension absolute.
Stack - Uses fixed columns and flexible element height.
*/
function initResourceWidget(widget) {
@@ -3391,6 +3399,7 @@
/* Initializes a Resource Carousel Widget */
function drawResourcesCarouselWidget($widget, opts, resources) {
$widget.empty();
+ var plusone = true; //always show plusone on carousel
$widget.addClass('resource-card slideshow-container')
.append($('<a>').addClass('slideshow-prev').text('Prev'))
@@ -3406,7 +3415,7 @@
var urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
var $card = $('<a>')
.attr('href', urlPrefix + resources[i].url)
- .decorateResourceCard(resources[i]);
+ .decorateResourceCard(resources[i],plusone);
$('<li>').css(css)
.append($card)
@@ -3428,7 +3437,7 @@
function drawResourcesStackWidget($widget, opts, resources, sections) {
// Don't empty widget, grab all items inside since they will be the first
// items stacked, followed by the resource query
-
+ var plusone = true; //by default show plusone on section cards
var cards = $widget.find('.resource-card').detach().toArray();
var numStacks = opts.numStacks || 1;
var $stacks = [];
@@ -3452,14 +3461,14 @@
$('<a>')
.addClass('resource-card section-card')
.attr('href', urlPrefix + sections[i].resource.url)
- .decorateResourceCard(sections[i].resource)[0]
+ .decorateResourceCard(sections[i].resource,plusone)[0]
);
} else {
cards.push(
$('<div>')
.addClass('resource-card section-card-menu')
- .decorateResourceSection(sections[i])[0]
+ .decorateResourceSection(sections[i],plusone)[0]
);
}
}
@@ -3472,7 +3481,7 @@
var $card = $('<a>')
.addClass('resource-card related-card')
.attr('href', urlPrefix + resources[i].url)
- .decorateResourceCard(resources[i]);
+ .decorateResourceCard(resources[i],plusone);
cards.push($card[0]);
}
@@ -3501,10 +3510,17 @@
$widget.empty();
var cardSizes = opts.cardSizes || ['6x6'];
var i = 0, j = 0;
+ var plusone = true; // by default show plusone on resource cards
while (i < resources.length) {
var cardSize = cardSizes[j++ % cardSizes.length];
cardSize = cardSize.replace(/^\s+|\s+$/,'');
+ console.log("cardsize is " + cardSize);
+ // Some card sizes do not get a plusone button, such as where space is constrained
+ // or for cards commonly embedded in docs (to improve overall page speed).
+ plusone = !((cardSize == "6x2") || (cardSize == "6x3") ||
+ (cardSize == "9x2") || (cardSize == "9x3") ||
+ (cardSize == "12x2") || (cardSize == "12x3"));
// A stack has a third dimension which is the number of stacked items
var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/);
@@ -3537,7 +3553,7 @@
stackCount = 0;
}
- $card.decorateResourceCard(resource)
+ $card.decorateResourceCard(resource,plusone)
.appendTo($stackDiv || $widget);
} while (++i < resources.length && stackCount > 0);
@@ -3726,7 +3742,7 @@
(function($) {
/* Simple jquery function to create dom for a standard resource card */
- $.fn.decorateResourceCard = function(resource) {
+ $.fn.decorateResourceCard = function(resource,plusone) {
var section = resource.group || resource.type;
var imgUrl;
if (resource.image) {
@@ -3734,29 +3750,38 @@
var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
imgUrl = urlPrefix + resource.image;
}
-
+ //add linkout logic here. check url or type, assign a class, map to css :after
$('<div>')
.addClass('card-bg')
.css('background-image', 'url(' + (imgUrl || toRoot + 'assets/images/resource-card-default-android.jpg') + ')')
.appendTo(this);
-
- $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
+ if (!plusone) {
+ $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
.append($('<div>').addClass('section').text(section))
.append($('<div>').addClass('title').html(resource.title))
- .append($('<div>').addClass('description')
- .append($('<div>').addClass('text').html(resource.summary))
+ .append($('<div>').addClass('description ellipsis')
+ .append($('<div>').addClass('text').html(resource.summary))
+ .append($('<div>').addClass('util')))
+ .appendTo(this);
+ } else {
+ $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
+ .append($('<div>').addClass('section').text(section))
+ .append($('<div>').addClass('title').html(resource.title))
+ .append($('<div>').addClass('description ellipsis')
+ .append($('<div>').addClass('text').html(resource.summary))
.append($('<div>').addClass('util')
.append($('<div>').addClass('g-plusone')
.attr('data-size', 'small')
.attr('data-align', 'right')
.attr('data-href', resource.url))))
- .appendTo(this);
+ .appendTo(this);
+ }
return this;
};
/* Simple jquery function to create dom for a resource section card (menu) */
- $.fn.decorateResourceSection = function(section) {
+ $.fn.decorateResourceSection = function(section,plusone) {
var resource = section.resource;
//keep url clean for matching and offline mode handling
var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
@@ -3795,17 +3820,27 @@
for (var i = 0; i < max; ++i) {
var subResource = section.sections[i];
- $('<li>')
- .append($('<a>').attr('href', subResource.url)
- .append($('<div>').addClass('title').html(subResource.title))
- .append($('<div>').addClass('description')
- .append($('<div>').addClass('text').html(subResource.summary))
- .append($('<div>').addClass('util')
- .append($('<div>').addClass('g-plusone')
- .attr('data-size', 'small')
- .attr('data-align', 'right')
- .attr('data-href', resource.url)))))
- .appendTo($ul);
+ if (!plusone) {
+ $('<li>')
+ .append($('<a>').attr('href', subResource.url)
+ .append($('<div>').addClass('title').html(subResource.title))
+ .append($('<div>').addClass('description ellipsis')
+ .append($('<div>').addClass('text').html(subResource.summary))
+ .append($('<div>').addClass('util'))))
+ .appendTo($ul);
+ } else {
+ $('<li>')
+ .append($('<a>').attr('href', subResource.url)
+ .append($('<div>').addClass('title').html(subResource.title))
+ .append($('<div>').addClass('description ellipsis')
+ .append($('<div>').addClass('text').html(subResource.summary))
+ .append($('<div>').addClass('util')
+ .append($('<div>').addClass('g-plusone')
+ .attr('data-size', 'small')
+ .attr('data-align', 'right')
+ .attr('data-href', resource.url)))))
+ .appendTo($ul);
+ }
}
// Add a more row
@@ -3824,97 +3859,22 @@
return this;
};
})(jQuery);
-
-
+/* Calculate the vertical area remaining */
(function($) {
- $.fn.ellipsis = function(options) {
-
- // default option
- var defaults = {
- 'row' : 1, // show rows
- 'onlyFullWords': true, // set to true to avoid cutting the text in the middle of a word
- 'char' : '\u2026', // ellipsis
- 'callback': function() {},
- 'position': 'tail' // middle, tail
- };
-
- options = $.extend(defaults, options);
-
+ $.fn.ellipsisfade= function(lineHeight) {
this.each(function() {
// get element text
var $this = $(this);
+ var remainingHeight = $this.parent().parent().height();
+ $this.parent().siblings().each(function ()
+ {
+ var h = $(this).height();
+ remainingHeight = remainingHeight - h;
+ });
- var targetHeight = $this.height();
- $this.css({'height': 'auto'});
- var text = $this.text();
- var origText = text;
- var origLength = origText.length;
- var origHeight = $this.height();
-
- if (origHeight <= targetHeight) {
- $this.text(text);
- options.callback.call(this);
- return;
- }
-
- var start = 1, length = 0;
- var end = text.length;
-
- if(options.position === 'tail') {
- while (start < end) { // Binary search for max length
- length = Math.ceil((start + end) / 2);
-
- $this.text(text.slice(0, length) + options['char']);
-
- if ($this.height() <= targetHeight) {
- start = length;
- } else {
- end = length - 1;
- }
- }
-
- text = text.slice(0, start);
-
- if (options.onlyFullWords) {
- // remove fragment of the last word together with possible soft-hyphen chars
- text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
- }
- text += options['char'];
-
- }else if(options.position === 'middle') {
-
- var sliceLength = 0;
- while (start < end) { // Binary search for max length
- length = Math.ceil((start + end) / 2);
- sliceLength = Math.max(origLength - length, 0);
-
- $this.text(
- origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +
- options['char'] +
- origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)
- );
-
- if ($this.height() <= targetHeight) {
- start = length;
- } else {
- end = length - 1;
- }
- }
-
- sliceLength = Math.max(origLength - start, 0);
- var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));
- var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);
-
- if (options.onlyFullWords) {
- // remove fragment of the last or first word together with possible soft-hyphen characters
- head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
- }
-
- text = head + options['char'] + tail;
- }
-
- $this.text(text);
- options.callback.call(this);
+ adjustedRemainingHeight = ((remainingHeight)/lineHeight>>0)*lineHeight
+ $this.parent().css({'height': adjustedRemainingHeight});
+ $this.css({'height': "auto"});
});
return this;
diff --git a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
index b587661..85c3d57 100644
--- a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
+++ b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
@@ -204,6 +204,7 @@
<li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li>
<li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage & Retain</a></li>
<li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize</a></li>
+ <li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools & Reference</a></li>
<li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li>
</ul>
</li>
diff --git a/tools/droiddoc/templates-sdk-dyn/docpage.cs b/tools/droiddoc/templates-sdk-dyn/docpage.cs
index fc65b7e..745b19e 100644
--- a/tools/droiddoc/templates-sdk-dyn/docpage.cs
+++ b/tools/droiddoc/templates-sdk-dyn/docpage.cs
@@ -28,7 +28,7 @@
<div <?cs
if:fullpage
?>class="fullpage"<?cs
- elif:design||tools||about||sdk||googleplay||essentials||users||monetize||disttools && !nonavpage
+ elif:(design||tools||about||sdk||googleplay||essentials||users||monetize||disttools) && !nonavpage
?>class="col-13" id="doc-col"<?cs
elif:!nonavpage
?>class="col-12" id="doc-col"<?cs /if ?> >
@@ -215,7 +215,7 @@
<?cs include:"trailer.cs" ?>
- <script src="http://androiddevdocs-exp.appspot.com/ytblogger_lists_unified.js" type="text/javascript"></script>
+ <script src="https://androiddevdocs-exp.appspot.com/ytblogger_lists_unified.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_lists_unified.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_extras.js" type="text/javascript"></script>
<script src="<?cs var:toroot ?>jd_collections.js" type="text/javascript"></script>