From 318fb97168396d21a958a415e9a1cf8167ebdc86 Mon Sep 17 00:00:00 2001 From: Dirk Dougherty Date: Tue, 8 Apr 2014 18:46:53 -0700 Subject: [PATCH] Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates. Change-Id: Ib140e7025360d60e6fb49e1e6c45e2c7ccc72cda --- .../templates-sdk-dyn/assets/css/default.css | 94 +++++++-- .../templates-sdk-dyn/assets/js/docs.js | 192 +++++++----------- .../templates-sdk-dyn/components/masthead.cs | 1 + tools/droiddoc/templates-sdk-dyn/docpage.cs | 4 +- 4 files changed, 157 insertions(+), 134 deletions(-) diff --git a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css index 75ac78bc34..e7ab40fe50 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 @@ 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 */ diff --git a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js index 00a1b2b85f..9ce7c4bbbc 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 @@ $(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($('').addClass('slideshow-prev').text('Prev')) @@ -3406,7 +3415,7 @@ function showSamples() { var urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot; var $card = $('') .attr('href', urlPrefix + resources[i].url) - .decorateResourceCard(resources[i]); + .decorateResourceCard(resources[i],plusone); $('
  • ').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() { $('') .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( $('
    ') .addClass('resource-card section-card-menu') - .decorateResourceSection(sections[i])[0] + .decorateResourceSection(sections[i],plusone)[0] ); } } @@ -3472,7 +3481,7 @@ function showSamples() { var $card = $('') .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 $('
    ') .addClass('card-bg') .css('background-image', 'url(' + (imgUrl || toRoot + 'assets/images/resource-card-default-android.jpg') + ')') .appendTo(this); - - $('
    ').addClass('card-info' + (!resource.summary ? ' empty-desc' : '')) + if (!plusone) { + $('
    ').addClass('card-info' + (!resource.summary ? ' empty-desc' : '')) .append($('
    ').addClass('section').text(section)) .append($('
    ').addClass('title').html(resource.title)) - .append($('
    ').addClass('description') - .append($('
    ').addClass('text').html(resource.summary)) + .append($('
    ').addClass('description ellipsis') + .append($('
    ').addClass('text').html(resource.summary)) + .append($('
    ').addClass('util'))) + .appendTo(this); + } else { + $('
    ').addClass('card-info' + (!resource.summary ? ' empty-desc' : '')) + .append($('
    ').addClass('section').text(section)) + .append($('
    ').addClass('title').html(resource.title)) + .append($('
    ').addClass('description ellipsis') + .append($('
    ').addClass('text').html(resource.summary)) .append($('
    ').addClass('util') .append($('
    ').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]; - $('
  • ') - .append($('').attr('href', subResource.url) - .append($('
    ').addClass('title').html(subResource.title)) - .append($('
    ').addClass('description') - .append($('
    ').addClass('text').html(subResource.summary)) - .append($('
    ').addClass('util') - .append($('
    ').addClass('g-plusone') - .attr('data-size', 'small') - .attr('data-align', 'right') - .attr('data-href', resource.url))))) - .appendTo($ul); + if (!plusone) { + $('
  • ') + .append($('').attr('href', subResource.url) + .append($('
    ').addClass('title').html(subResource.title)) + .append($('
    ').addClass('description ellipsis') + .append($('
    ').addClass('text').html(subResource.summary)) + .append($('
    ').addClass('util')))) + .appendTo($ul); + } else { + $('
  • ') + .append($('').attr('href', subResource.url) + .append($('
    ').addClass('title').html(subResource.title)) + .append($('
    ').addClass('description ellipsis') + .append($('
    ').addClass('text').html(subResource.summary)) + .append($('
    ').addClass('util') + .append($('
    ').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; diff --git a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs index b5876611eb..85c3d57b9c 100644 --- a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs +++ b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs @@ -204,6 +204,7 @@ onkeyup="return search_changed(event, false, '')" />
  • Get Users
  • Engage & Retain
  • Monetize
    • +
  • Tools & Reference
  • Developer Stories
    • diff --git a/tools/droiddoc/templates-sdk-dyn/docpage.cs b/tools/droiddoc/templates-sdk-dyn/docpage.cs index fc65b7e83f..745b19e299 100644 --- a/tools/droiddoc/templates-sdk-dyn/docpage.cs +++ b/tools/droiddoc/templates-sdk-dyn/docpage.cs @@ -28,7 +28,7 @@ include:"header.cs" ?>
    class="fullpage"class="col-13" id="doc-col"class="col-12" id="doc-col" > @@ -215,7 +215,7 @@ document.write('