Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 318fb971 authored by Dirk Dougherty's avatar Dirk Dougherty
Browse files

Optimize truncation for card text, add About to sticky nav colors, minor adjustment to templates. 

Change-Id: Ib140e7025360d60e6fb49e1e6c45e2c7ccc72cda
parent 20cf2a91

tools/droiddoc/templates-sdk-dyn/assets/css/default.css

+78 −16
Original line number Diff line number Diff line
@@ -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

*/

tools/droiddoc/templates-sdk-dyn/assets/js/docs.js

+77 −117
Original line number Diff line number Diff line
@@ -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 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')

        .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;

tools/droiddoc/templates-sdk-dyn/components/masthead.cs

+1 −0
Original line number Diff line number Diff line
@@ -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>

tools/droiddoc/templates-sdk-dyn/docpage.cs

+2 −2
Original line number Diff line number Diff line
@@ -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>