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

Commit 830cd1e5 authored by Dirk Dougherty's avatar Dirk Dougherty Committed by Android Git Automerger
Browse files

am 08e474ca: am 08c72b91: am ecfed34d: Merge "Doc change: merge landing page... 

am 08e474ca: am 08c72b91: am ecfed34d: Merge "Doc change: merge landing page and header/footer designs." into mnc-preview-docs

* commit '08e474ca':
  Doc change: merge landing page and header/footer designs.
parents 658f5069 08e474ca

docs/html/auto/index.jd

+1 −4
Original line number Diff line number Diff line
@@ -3,7 +3,7 @@ page.viewport_width=970 
fullpage=true

no_footer_links=true

page.type=about

page.image=/auto/images/hero.jpg

page.image=/images/cards/android-auto_2x.png



@jd:body
@@ -12,9 +12,6 @@ page.image=/auto/images/hero.jpg 
#jd-content>.content-footer.wrap {

  display:none;

}

#hero-height {

  height:calc(100% - 100px);

}

.img-logo {

  margin:0 auto;

  display:block;

docs/html/design/building-blocks/buttons.jd

+14 −14
Original line number Diff line number Diff line
@@ -21,27 +21,27 @@ page.tags=button,input 
  will occur when the user touches it. A button can have an image, text, or both.

</p>



<div class="layout-content-row" style="margin-top:22px">

  <div class="layout-content-col span-3">

<div class="cols" style="margin-top:22px">

  <div class="col-3">

    <img src="{@docRoot}design/media/icon_magnifying_glass.png" style="height:64px;padding:20px 0 0 40px;">

  </div>

  <div class="layout-content-col span-3">

  <div class="col-3">

    <img src="{@docRoot}design/media/buttons_text.png"  style="height:94px;">

  </div>

  <div class="layout-content-col span-7">

  <div class="col-7">

    <img src="{@docRoot}design/media/buttons_image_and_text.png"  style="height:94px;">

  </div>

</div>



<div class="layout-content-row" style="margin-top:0;">

  <div class="layout-content-col span-3">

<div class="cols" style="margin-top:0;">

  <div class="col-3">

      <p>An image alone works best when the action can be represented by a symbol that's well understood.</p>

  </div>

  <div class="layout-content-col span-3">

  <div class="col-3">

      <p>Text alone is most appropriate for actions that would be difficult to

      represent visually, or are critical to convey in words to avoid any ambiguity.</p>

  </div>

  <div class="layout-content-col span-7">

  <div class="col-7">

    <p>

      Both an icon and text is most appropriate when they complement each other:

      each carrying its own bit of information, but together making a larger whole.
@@ -57,24 +57,24 @@ page.tags=button,input 


<h3>What about button backgrounds?</h3>



<div class="layout-content-row">

  <div class="layout-content-col span-6">

<div class="cols">

  <div class="col-6">

    <p>For <strong>image-only</strong> buttons, a background isn't necessary because

    users are accustomed to interacting with objects.</p>



    <div class="layout-content-row" style="margin-left:72px">

      <div class="layout-content-col span-2">

    <div class="cols" style="margin-left:72px">

      <div class="col-2">

        <div class="do-dont-label bad emulate-content-left-padding" style="width:30px">Don't</div>

        <img src="{@docRoot}design/media/buttons_image_bg_dont.png" style="padding-left:14px;">

      </div>

      <div class="layout-content-col span-2" style="width:29px;margin-left:10px;">

      <div class="col-2" style="width:29px;margin-left:10px;">

        <div class="do-dont-label good"><strong>Do</strong></div>

        <img src="{@docRoot}design/media/icon_alarm.png" style="width:31px;padding-top:7px;">

      </div>

    </div>

  </div>



<div class="layout-content-col span-7">

<div class="col-7">

<p>

  For buttons <strong>with text</strong>, a background is also usually

  unnecessary. To invite users to touch, phrase it as a clear action (e.g.

docs/html/design/building-blocks/dialogs.jd

+13 −13
Original line number Diff line number Diff line
@@ -62,13 +62,13 @@ user to adjust settings or enter text.</p> 
proceeding. They differ slightly in appearance based upon the severity and impact of the message

conveyed.</p>



<div class="layout-content-row">

  <div class="layout-content-col span-8">

<div class="cols">

  <div class="col-8">



    <img src="{@docRoot}design/media/dialogs_w_no_title.png">



  </div>

  <div class="layout-content-col span-5">

  <div class="col-5">



<h4>Alerts without title bars</h4>

<p>Most alerts don't need titles. Usually the decision doesn't have a severe impact and can be summed
@@ -79,13 +79,13 @@ this conversation?") or make a clear statement whose relationship to the action 
</div>





<div class="layout-content-row">

  <div class="layout-content-col span-8">

<div class="cols">

  <div class="col-8">



    <img src="{@docRoot}design/media/dialogs_w_title.png">



  </div>

  <div class="layout-content-col span-5">

  <div class="col-5">



<h4>Alerts with title bars</h4>

<p>Use alerts with title bars sparingly. They are appropriate only when a high-risk operation involving
@@ -99,8 +99,8 @@ available based on the title and the text of the action buttons.</p> 
</div>

<p>When crafting a confirmation dialog, make the title meaningful by echoing the requested action.</p>



<div class="layout-content-row">

  <div class="layout-content-col span-4">

<div class="cols">

  <div class="col-4">

    <div class="do-dont-label bad">Don't</div>

      <table class="ui-table bad">

      <thead>
@@ -112,7 +112,7 @@ available based on the title and the text of the action buttons.</p> 
      </thead>

      </table>

  </div>

  <div class="layout-content-col span-4">

  <div class="col-4">

    <div class="do-dont-label bad">Don't</div>

      <table class="ui-table bad">

      <thead>
@@ -124,7 +124,7 @@ available based on the title and the text of the action buttons.</p> 
      </thead>

      </table>

  </div>

  <div class="layout-content-col span-5">

  <div class="col-5">

    <div class="do-dont-label good">Do</div>

      <table class="ui-table good">

      <thead>
@@ -151,8 +151,8 @@ advances the workflow, and simply touching outside the popup dismisses it.</p> 
<h2 id="toasts">Toasts</h2>





<div class="layout-content-row">

  <div class="layout-content-col span-6">

<div class="cols">

  <div class="col-6">



    <div class="vspace size-3"></div>
@@ -177,7 +177,7 @@ continue editing later. Toasts automatically disappear after a timeout.</p> 
</a>



  </div>

  <div class="layout-content-col span-7">

  <div class="col-7">



    <img src="{@docRoot}design/media/dialogs_toasts.png">

docs/html/design/building-blocks/grid-lists.jd

+9 −9
Original line number Diff line number Diff line
@@ -36,13 +36,13 @@ cutting off grid items to communicate where the overflow is located.</p> 
<p>Avoid creating grid lists that scroll in two dimensions.</p>





<div class="layout-content-row">

  <div class="layout-content-col span-7">

<div class="cols">

  <div class="col-7">



    <img src="{@docRoot}design/media/gridview_vertical.png">



  </div>

  <div class="layout-content-col span-6">

  <div class="col-6">



<h4>Vertical scrolling</h4>

<p>Vertically scrolling grid list items are sorted in traditional western reading direction:
@@ -53,13 +53,13 @@ scheme when the user rotates the screen.</p> 
  </div>

</div>



<div class="layout-content-row">

  <div class="layout-content-col span-7">

<div class="cols">

  <div class="col-7">



    <img src="{@docRoot}design/media/gridview_horizontal.png">



  </div>

  <div class="layout-content-col span-6">

  <div class="col-6">



<h4>Horizontal scrolling</h4>

<p>Horizontally scrolling lists fix the vertical axis of the item grid. Compared to vertically
@@ -80,13 +80,13 @@ navigation.</p> 
<p>Use labels to display additional contextual information for your grid list items.</p>





<div class="layout-content-row">

  <div class="layout-content-col span-7">

<div class="cols">

  <div class="col-7">



    <img src="{@docRoot}design/media/gridview_style.png">



  </div>

  <div class="layout-content-col span-6">

  <div class="col-6">



<h4>Style</h4>

<p>Use semi-transparent panels on top of the grid list items to display your labels. This allows you to

docs/html/design/building-blocks/lists.jd

+3 −3
Original line number Diff line number Diff line
@@ -15,13 +15,13 @@ well as drilldown navigation.</p> 


<div class="vspace size-1">&nbsp;</div>



<div class="layout-content-row clearfix">

  <div class="layout-content-col span-9">

<div class="cols clearfix">

  <div class="col-9">



    <img src="{@docRoot}design/media/lists_main.png">



  </div>

  <div class="layout-content-col span-4 with-callouts">

  <div class="col-4 with-callouts">



<ol style="margin-bottom: 60px;">

<li>