tequilaOS/platform_build
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

am 7b1fe64c: am 7de9c942: am 45094b5d: am d0c6f0a1: am 318fb971: Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates.

Browse source 
* commit '7b1fe64cfdce0f9492db00771735d39ec94be040':
  Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates.
This commit is contained in:
Dirk Dougherty 2014-04-14 15:54:19 +00:00 committed by Android Git Automerger
commit 5c9e8e2673
4 changed files with 157 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
tools/droiddoc/templates-sdk-dyn/assets/css/default.css
View file

@ -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
*/

164
tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
View file

@ -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,16 +3750,24 @@ 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);
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('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')
@ -3751,12 +3775,13 @@ function showSamples() {
.attr('data-align', 'right')
.attr('data-href', resource.url))))
.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,10 +3820,19 @@ function showSamples() {
for (var i = 0; i < max; ++i) {
var subResource = section.sections[i];
if (!plusone) {
$('<li>')
.append($('<a>').attr('href', subResource.url)
.append($('<div>').addClass('title').html(subResource.title))
.append($('<div>').addClass('description')
.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')
@ -3807,6 +3841,7 @@ function showSamples() {
.attr('data-href', resource.url)))))
.appendTo($ul);
}
}
// Add a more row
if (max < section.sections.length) {
@ -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;

1
tools/droiddoc/templates-sdk-dyn/components/masthead.cs
View file

@ -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 &amp; 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 &amp; Reference</a></li>
<li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li>
</ul>
</li>

4
tools/droiddoc/templates-sdk-dyn/docpage.cs
View file

@ -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>