am 45094b5d
: am d0c6f0a1
: am 318fb971
: Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates.
* commit '45094b5d05e1e88d4cd389331c2faa1a52d1d68d': Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates.
This commit is contained in:
commit
7de9c94263
4 changed files with 157 additions and 134 deletions
|
@ -4064,6 +4064,9 @@ EndColorStr='#ececec');
|
|||
#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 @@ a.download-sdk {
|
|||
}
|
||||
|
||||
#nav-x {
|
||||
padding-top: 14px;
|
||||
padding-top: 13px;
|
||||
}
|
||||
|
||||
#nav-x .wrap {
|
||||
min-height:34px;
|
||||
min-height:32px;
|
||||
}
|
||||
|
||||
#nav-x .wrap,
|
||||
|
@ -5158,7 +5161,7 @@ a.download-sdk {
|
|||
/* 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 @@ a.download-sdk {
|
|||
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 @@ a.download-sdk {
|
|||
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 @@ a.download-sdk {
|
|||
.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 @@ a.download-sdk {
|
|||
.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 @@ a.download-sdk {
|
|||
.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 @@ a.download-sdk {
|
|||
.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 @@ a.download-sdk {
|
|||
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
|
||||
*/
|
||||
|
|
|
@ -216,7 +216,10 @@ $(document).ready(function() {
|
|||
} 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 @@ function showSamples() {
|
|||
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 @@ function showSamples() {
|
|||
/* 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 @@ function showSamples() {
|
|||
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 showSamples() {
|
|||
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 @@ function showSamples() {
|
|||
$('<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 @@ function showSamples() {
|
|||
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 @@ function showSamples() {
|
|||
$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 @@ function showSamples() {
|
|||
stackCount = 0;
|
||||
}
|
||||
|
||||
$card.decorateResourceCard(resource)
|
||||
$card.decorateResourceCard(resource,plusone)
|
||||
.appendTo($stackDiv || $widget);
|
||||
|
||||
} while (++i < resources.length && stackCount > 0);
|
||||
|
@ -3726,7 +3742,7 @@ function showSamples() {
|
|||
|
||||
(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 @@ function showSamples() {
|
|||
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 @@ function showSamples() {
|
|||
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 @@ function showSamples() {
|
|||
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;
|
||||
|
|
|
@ -204,6 +204,7 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" />
|
|||
<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>
|
||||
|
|
|
@ -28,7 +28,7 @@ include:"header.cs" ?>
|
|||
<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 @@ document.write('<iframe src="https://2507573.fls.doubleclick.net/activityi;src=2
|
|||
|
||||
|
||||
<?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>
|
||||
|
|
Loading…
Reference in a new issue