| <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; |
| 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)); |
| } |
| |
| #checkup-container { |
| grid-column: 1 / -1; |
| /* The checkup card should be at least as tall as an extensions item card.*/ |
| min-height: var(--extensions-card-height); |
| } |
| |
| 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" style="--max-columns: [[maxColumns_]];"> |
| <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_]]"> |
| <div id="checkup-container" hidden="[[!showCheckup_]]"> |
| <extensions-checkup id="checkup" slot="view"> |
| </extensions-checkup> |
| </div> |
| <!-- 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> |