<style include="shared-style"> | |
.items-container, | |
#content-wrapper { | |
--extensions-card-width: 400px; | |
} | |
#container { | |
box-sizing: border-box; | |
height: 100%; | |
overflow: overlay; | |
} | |
#content-wrapper { | |
min-width: var(--extensions-card-width); | |
padding: 24px 60px 64px; | |
} | |
.empty-list-message { | |
color: #6e6e6e; | |
font-size: 123%; /* Should be 16px when 100% is 13px. */ | |
font-weight: 500; | |
margin-top: 80px; | |
text-align: center; | |
} | |
@media (prefers-color-scheme: dark) { | |
.empty-list-message { | |
color: var(--cr-secondary-text-color); | |
} | |
} | |
.items-container { | |
--grid-gutter: 12px; | |
--max-columns: 3; | |
display: grid; | |
grid-column-gap: var(--grid-gutter); | |
grid-row-gap: var(--grid-gutter); | |
grid-template-columns: repeat(auto-fill, var(--extensions-card-width)); | |
justify-content: center; | |
margin: auto; | |
max-width: calc(var(--extensions-card-width) * var(--max-columns) + | |
var(--grid-gutter) * var(--max-columns)); | |
} | |
extensions-item { | |
grid-column-start: auto; | |
grid-row-start: auto; | |
} | |
#app-title { | |
color: var(--cr-primary-text-color); | |
font-size: 123%; | |
font-weight: 400; | |
letter-spacing: .25px; | |
margin-bottom: 12px; | |
margin-top: 21px; | |
padding-bottom: 4px; | |
padding-top: 8px; | |
} | |
managed-footnote { | |
border-top: none; | |
/* #content-wrapper has a 24px margin-top. This overrides that | |
* margin-top, so the only space left is this element's 12px | |
* padding-bottom. | |
*/ | |
margin-bottom: -24px; | |
padding-bottom: 12px; | |
padding-top: 12px; | |
/* The next element spills over this element. This ensures the link | |
* is clickable. */ | |
z-index: 1; | |
} | |
</style> | |
<div id="container"> | |
<managed-footnote hidden="[[filter]]"></managed-footnote> | |
<div id="content-wrapper"> | |
<div id="no-items" class="empty-list-message" | |
hidden$="[[!shouldShowEmptyItemsMessage_( | |
apps.length, extensions.length)]]"> | |
<span on-click="onNoExtensionsTap_"> | |
$i18nRaw{noExtensionsOrApps} | |
</span> | |
</div> | |
<div id="no-search-results" class="empty-list-message" | |
hidden$="[[!shouldShowEmptySearchMessage_( | |
shownAppsCount_, shownExtensionsCount_, apps, extensions)]]"> | |
<span>$i18n{noSearchResults}</span> | |
</div> | |
<div class="items-container" hidden="[[!shownExtensionsCount_]]"> | |
<!-- Render only a few items first, to improve initial render time, | |
then render the remaining items on a different frame. Value of 3 | |
was chosen by experimentation, and it is a good trade-off between | |
initial render time and total render time. --> | |
<template is="dom-repeat" items="[[extensions]]" initial-count="3" | |
filter="[[computedFilter_]]" | |
rendered-item-count="{{shownExtensionsCount_::dom-change}}"> | |
<extensions-item id="[[item.id]]" data="[[item]]" | |
delegate="[[delegate]]" in-dev-mode="[[inDevMode]]"> | |
</extensions-item> | |
</template> | |
</div> | |
<div hidden="[[!shownAppsCount_]]"> | |
<!-- app-title needs to left-align with the grid content below, and | |
the easiest way to achieve this is to make it a grid as well. --> | |
<h2 id="app-title" class="items-container">$i18n{appsTitle}</h2> | |
<div class="items-container"> | |
<template is="dom-repeat" items="[[apps]]" initial-count="3" | |
filter="[[computedFilter_]]" | |
rendered-item-count="{{shownAppsCount_::dom-change}}"> | |
<extensions-item id="[[item.id]]" data="[[item]]" | |
delegate="[[delegate]]" in-dev-mode="[[inDevMode]]"> | |
</extensions-item> | |
</template> | |
</div> | |
</div> | |
</div> | |
</div> |