Show overview, project, and download links on samples project index pages. Show standard plusone on all samples pages.

Change-Id: I368fe1e0004e623cfbdaa39ff74e82f31c9f95d8
This commit is contained in:
Dirk Dougherty 2013-11-16 16:07:51 -08:00
parent 45734df779
commit bb2b55381d
4 changed files with 149 additions and 12 deletions

View File

@ -2497,7 +2497,7 @@ Lightbox
}
/* --------------------------------------------------------------------------
Styles for samples project trees and code browsing in resources tab
Styles for samples browser
*/
#codesample-wrapper {
@ -2543,6 +2543,30 @@ pre#codesample-block span.code-line {
display:inline-block;
}
/*
Styles for displaying image or video resources in samples browser.
Resources are marked as no-display if they exceed the size limit.
*/
div#codesample-resource img, div#codesample-resource video {
border: 1px solid #ececec;
}
div#codesample-resource.noDisplay div {
border: 1px solid #ececec;
width:120px;
margin-bottom:4px;
padding:20px;
}
div#codesample-resource .noDisplay-message:after {
font-style:italic;
font-size:12px;
content: 'This resource is not available for browsing. To view it, please download the project.';
}
/*
Styles for project structure (treeview) page
*/
.structure-dir {
background-image:url(../../assets/images/folder.png);
background-repeat:no-repeat;

View File

@ -74,11 +74,20 @@
<?cs /if ?><?cs # end if training ?>
</div>
<?cs /if ?>
<?cs elif:samplesProjectIndex ?>
<div id="api-info-block">
<div class="sum-details-links">
Overview
&#124; <a href="<?cs var:toroot ?>samples/<?cs var:projectDir ?>/project.html">Project</a>
&#124; <a href="<?cs var:toroot ?>downloads/samples/<?cs var:projectDir ?>.zip">Download</a>
</div><!-- end sum-details-links -->
</div><!-- end breadcurmb block -->
<h1 itemprop="name"><?cs var:projectDir ?></h1>
<?cs else ?>
<?cs if:(!fullpage && !header.hide) ?>
<?cs if:page.landing ?><?cs # header logic for docs that are landing pages ?>
<div class="landing-banner">
<?cs if:page.landing.image ?><?cs # use two-column layout only if there's an image ?>
<?cs if:page.landing.image ?><?cs # use two-column layout only if there is an image ?>
<div class="col-6">
<img src="<?cs var:toroot ?><?cs var:page.landing.image ?>" alt="" />
</div>

View File

@ -50,18 +50,37 @@
<?cs var:summary ?>
<!-- begin file contents -->
<div id="codesample-wrapper">
<pre id="codesample-line-numbers" class="no-pretty-print hidden"></pre>
<pre id="codesample-block"><?cs var:fileContents ?></pre>
</div>
<?cs # embed image/videos if below maxsize (show message otherwise), else display source code ?>
<?cs if:resType == "img" ?>
<div id="codesample-resource"
<?cs if:noDisplay ?>
class="noDisplay"><div class="noDisplay-message"></div>
<?cs else ?>
><img src="<?cs var:realFile ?>" title="<?cs var:page.title ?>">
<?cs /if ?>
</div>
<?cs elif:resType == "video" ?>
<div id="codesample-resource"
<?cs if:noDisplay ?>
class="noDisplay"><div class="noDisplay-message"></div>
<?cs else ?>
><video class="play-on-hover" controls style="border:1px solid #ececec;background-color:#f9f9f9;" poster="">
<source src="<?cs var:page.title ?>">
</video>
<?cs /if ?>
</div>
<?cs else ?>
<div id="codesample-wrapper">
<pre id="codesample-line-numbers" class="no-pretty-print hidden"></pre>
<pre id="codesample-block"><?cs var:fileContents ?></pre>
</div>
<script type="text/javascript">
initCodeLineNumbers();
</script>
<?cs /if ?>
<!-- end file contents -->
<script type="text/javascript">
initCodeLineNumbers();
</script>
<?cs else ?><?cs
# else, this means it's offline docs,
@ -69,6 +88,49 @@
<?cs /if ?><?cs # end if/else online docs ?>
<div class="content-footer <?cs
if:fullpage ?>wrap<?cs
else ?>layout-content-row<?cs /if ?>"
itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="layout-content-col <?cs
if:fullpage ?>col-16<?cs
elif:training||guide ?>col-8<?cs
else ?>col-9<?cs /if ?>" style="padding-top:4px">
<?cs if:!page.noplus ?><?cs if:fullpage ?><style>#___plusone_0 {float:right !important;}</style><?cs /if ?>
<div class="g-plusone" data-size="medium"></div>
<?cs /if ?>
</div>
<?cs if:!fullscreen ?>
<div class="paging-links layout-content-col col-4">
<?cs if:(design||training||walkthru) && !page.landing && !page.trainingcourse && !footer.hide ?>
<a href="#" class="prev-page-link hide"
zh-tw-lang="上一堂課"
zh-cn-lang="上一课"
ru-lang="Предыдущий"
ko-lang="이전"
ja-lang="前へ"
es-lang="Anterior"
>Previous</a>
<a href="#" class="next-page-link hide"
zh-tw-lang="下一堂課"
zh-cn-lang="下一课"
ru-lang="Следующий"
ko-lang="다음"
ja-lang="次へ"
es-lang="Siguiente"
>Next</a>
<?cs /if ?>
</div>
<?cs /if ?>
</div>
<?cs # for training classes, provide a different kind of link when the next page is a different class ?>
<?cs if:training && !page.article ?>
<div class="layout-content-row content-footer next-class" style="display:none" itemscope itemtype="http://schema.org/SiteNavigationElement">
<a href="#" class="next-class-link hide">Next class: </a>
</div>
<?cs /if ?>
</div> <!-- end jd-content -->
<?cs include:"footer.cs" ?>

View File

@ -78,6 +78,48 @@
so don't show src links (we dont have the pages!) ?>
<?cs /if ?><?cs # end if/else online docs ?>
<div class="content-footer <?cs
if:fullpage ?>wrap<?cs
else ?>layout-content-row<?cs /if ?>"
itemscope itemtype="http://schema.org/SiteNavigationElement">
<div class="layout-content-col <?cs
if:fullpage ?>col-16<?cs
elif:training||guide ?>col-8<?cs
else ?>col-9<?cs /if ?>" style="padding-top:4px">
<?cs if:!page.noplus ?><?cs if:fullpage ?><style>#___plusone_0 {float:right !important;}</style><?cs /if ?>
<div class="g-plusone" data-size="medium"></div>
<?cs /if ?>
</div>
<?cs if:!fullscreen ?>
<div class="paging-links layout-content-col col-4">
<?cs if:(design||training||walkthru) && !page.landing && !page.trainingcourse && !footer.hide ?>
<a href="#" class="prev-page-link hide"
zh-tw-lang="上一堂課"
zh-cn-lang="上一课"
ru-lang="Предыдущий"
ko-lang="이전"
ja-lang="前へ"
es-lang="Anterior"
>Previous</a>
<a href="#" class="next-page-link hide"
zh-tw-lang="下一堂課"
zh-cn-lang="下一课"
ru-lang="Следующий"
ko-lang="다음"
ja-lang="次へ"
es-lang="Siguiente"
>Next</a>
<?cs /if ?>
</div>
<?cs /if ?>
</div>
<?cs # for training classes, provide a different kind of link when the next page is a different class ?>
<?cs if:training && !page.article ?>
<div class="layout-content-row content-footer next-class" style="display:none" itemscope itemtype="http://schema.org/SiteNavigationElement">
<a href="#" class="next-class-link hide">Next class: </a>
</div>
<?cs /if ?>
</div> <!-- end jd-content -->