mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-27 19:26:36 +00:00
Media browser tweaks (#6720)
Co-authored-by: Zack Arnett <arnett.zackary@gmail.com>
This commit is contained in:
Bram Kragten
GitHub
parent
4a176f1b43
commit
eb12afe8cc
@ -1,11 +1,11 @@
|
||||
import "@material/mwc-dialog";
|
||||
import type { Dialog } from "@material/mwc-dialog";
|
||||
import { style } from "@material/mwc-dialog/mwc-dialog-css";
|
||||
import "./ha-icon-button";
|
||||
import { css, CSSResult, customElement, html } from "lit-element";
|
||||
import type { Constructor, HomeAssistant } from "../types";
|
||||
import { mdiClose } from "@mdi/js";
|
||||
import { css, CSSResult, customElement, html } from "lit-element";
|
||||
import { computeRTLDirection } from "../common/util/compute_rtl";
|
||||
import type { Constructor, HomeAssistant } from "../types";
|
||||
import "./ha-icon-button";
|
||||
|
||||
const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
|
||||
|
||||
@ -23,6 +23,10 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
|
||||
|
||||
@customElement("ha-dialog")
|
||||
export class HaDialog extends MwcDialog {
|
||||
public scrollToPos(x: number, y: number) {
|
||||
this.contentElement.scrollTo(x, y);
|
||||
}
|
||||
|
||||
protected renderHeading() {
|
||||
return html`<slot name="heading">
|
||||
${super.renderHeading()}
|
||||
@ -62,6 +66,10 @@ export class HaDialog extends MwcDialog {
|
||||
position: var(--dialog-surface-position, relative);
|
||||
min-height: var(--mdc-dialog-min-height, auto);
|
||||
}
|
||||
:host([flexContent]) .mdc-dialog .mdc-dialog__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.header_button {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
|
||||
@ -15,7 +15,7 @@ import type {
|
||||
} from "../../data/media-player";
|
||||
import { haStyleDialog } from "../../resources/styles";
|
||||
import type { HomeAssistant } from "../../types";
|
||||
import { createCloseHeading } from "../ha-dialog";
|
||||
import "../ha-dialog";
|
||||
import "./ha-media-player-browse";
|
||||
import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
|
||||
|
||||
@ -56,18 +56,17 @@ class DialogMediaPlayerBrowse extends LitElement {
|
||||
scrimClickAction
|
||||
escapeKeyAction
|
||||
hideActions
|
||||
.heading=${createCloseHeading(
|
||||
this.hass,
|
||||
this.hass.localize("ui.components.media-browser.media-player-browser")
|
||||
)}
|
||||
flexContent
|
||||
@closed=${this._closeDialog}
|
||||
>
|
||||
<ha-media-player-browse
|
||||
dialog
|
||||
.hass=${this.hass}
|
||||
.entityId=${this._entityId}
|
||||
.action=${this._action!}
|
||||
.mediaContentId=${this._mediaContentId}
|
||||
.mediaContentType=${this._mediaContentType}
|
||||
@close-dialog=${this._closeDialog}
|
||||
@media-picked=${this._mediaPicked}
|
||||
></ha-media-player-browse>
|
||||
</ha-dialog>
|
||||
@ -94,13 +93,20 @@ class DialogMediaPlayerBrowse extends LitElement {
|
||||
--dialog-content-padding: 0;
|
||||
}
|
||||
|
||||
ha-header-bar {
|
||||
--mdc-theme-on-primary: var(--primary-text-color);
|
||||
--mdc-theme-primary: var(--mdc-theme-surface);
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid
|
||||
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
ha-dialog {
|
||||
--mdc-dialog-max-width: 800px;
|
||||
}
|
||||
ha-media-player-browse {
|
||||
width: 700px;
|
||||
padding: 20px 24px;
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
||||
@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
|
||||
import "@material/mwc-fab/mwc-fab";
|
||||
import "@material/mwc-list/mwc-list";
|
||||
import "@material/mwc-list/mwc-list-item";
|
||||
import { mdiArrowLeft, mdiFolder, mdiPlay, mdiPlus } from "@mdi/js";
|
||||
import { mdiArrowLeft, mdiClose, mdiFolder, mdiPlay, mdiPlus } from "@mdi/js";
|
||||
import "@polymer/paper-item/paper-item";
|
||||
import "@polymer/paper-listbox/paper-listbox";
|
||||
import {
|
||||
@ -16,8 +16,11 @@ import {
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
import { classMap } from "lit-html/directives/class-map";
|
||||
import { ifDefined } from "lit-html/directives/if-defined";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
import { computeRTLDirection } from "../../common/util/compute_rtl";
|
||||
import { debounce } from "../../common/util/debounce";
|
||||
import { browseMediaPlayer, MediaPickedEvent } from "../../data/media-player";
|
||||
import type { MediaPlayerItem } from "../../data/media-player";
|
||||
@ -49,6 +52,12 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
|
||||
@property() public action: "pick" | "play" = "play";
|
||||
|
||||
@property({ type: Boolean }) public hideBack = false;
|
||||
|
||||
@property({ type: Boolean }) public hideTitle = false;
|
||||
|
||||
@property({ type: Boolean }) public dialog = false;
|
||||
|
||||
@property({ type: Boolean, attribute: "narrow", reflect: true })
|
||||
private _narrow = false;
|
||||
|
||||
@ -69,6 +78,15 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
public navigateBack() {
|
||||
this._mediaPlayerItems!.pop();
|
||||
const item = this._mediaPlayerItems!.pop();
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
this._navigate(item);
|
||||
}
|
||||
|
||||
protected render(): TemplateResult {
|
||||
if (!this._mediaPlayerItems.length) {
|
||||
return html``;
|
||||
@ -90,8 +108,20 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
| MediaPlayerItem
|
||||
| undefined = this._hasExpandableChildren(mostRecentItem.children);
|
||||
|
||||
const showImages = mostRecentItem.children?.some(
|
||||
(child) => child.thumbnail && child.thumbnail !== mostRecentItem.thumbnail
|
||||
);
|
||||
|
||||
const mediaType = this.hass.localize(
|
||||
`ui.components.media-browser.content-type.${mostRecentItem.media_content_type}`
|
||||
);
|
||||
|
||||
return html`
|
||||
<div class="header">
|
||||
<div
|
||||
class="header ${classMap({
|
||||
"no-img": !mostRecentItem.thumbnail,
|
||||
})}"
|
||||
>
|
||||
<div class="header-content">
|
||||
${mostRecentItem.thumbnail
|
||||
? html`
|
||||
@ -123,56 +153,65 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
`
|
||||
: html``}
|
||||
<div class="header-info">
|
||||
<div class="breadcrumb-overflow">
|
||||
<div class="breadcrumb">
|
||||
${previousItem
|
||||
? html`
|
||||
<div
|
||||
class="previous-title"
|
||||
.previous=${true}
|
||||
.item=${previousItem}
|
||||
@click=${this._navigate}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
|
||||
${previousItem.title}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
<h1 class="title">${mostRecentItem.title}</h1>
|
||||
<h2 class="subtitle">
|
||||
${this.hass.localize(
|
||||
`ui.components.media-browser.content-type.${mostRecentItem.media_content_type}`
|
||||
)}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
${mostRecentItem?.can_play &&
|
||||
(!this._narrow || (this._narrow && !mostRecentItem.thumbnail))
|
||||
? html`
|
||||
<div class="actions">
|
||||
<mwc-button
|
||||
raised
|
||||
.item=${mostRecentItem}
|
||||
@click=${this._actionClicked}
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="icon"
|
||||
.label=${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}-media`
|
||||
)}
|
||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}`
|
||||
)}
|
||||
</mwc-button>
|
||||
${this.hideTitle && (this._narrow || !mostRecentItem.thumbnail)
|
||||
? ""
|
||||
: html`<div class="breadcrumb-overflow">
|
||||
<div class="breadcrumb">
|
||||
${!this.hideBack && previousItem
|
||||
? html`
|
||||
<div
|
||||
class="previous-title"
|
||||
@click=${this.navigateBack}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
|
||||
${previousItem.title}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
<h1 class="title">${mostRecentItem.title}</h1>
|
||||
${mediaType
|
||||
? html`<h2 class="subtitle">
|
||||
${mediaType}
|
||||
</h2>`
|
||||
: ""}
|
||||
</div>
|
||||
</div>`}
|
||||
${mostRecentItem?.can_play &&
|
||||
(!mostRecentItem.thumbnail || !this._narrow)
|
||||
? html`
|
||||
<mwc-button
|
||||
raised
|
||||
.item=${mostRecentItem}
|
||||
@click=${this._actionClicked}
|
||||
>
|
||||
<ha-svg-icon
|
||||
slot="icon"
|
||||
.label=${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}-media`
|
||||
)}
|
||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
||||
></ha-svg-icon>
|
||||
${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}`
|
||||
)}
|
||||
</mwc-button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
${this.dialog
|
||||
? html`
|
||||
<mwc-icon-button
|
||||
aria-label=${this.hass.localize("ui.dialogs.generic.close")}
|
||||
@click=${this._closeDialogAction}
|
||||
class="header_button"
|
||||
dir=${computeRTLDirection(this.hass)}
|
||||
>
|
||||
<ha-svg-icon path=${mdiClose}></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
${mostRecentItem.children?.length
|
||||
? hasExpandableChildren
|
||||
? html`
|
||||
@ -184,7 +223,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
<div
|
||||
class="child"
|
||||
.item=${child}
|
||||
@click=${this._navigate}
|
||||
@click=${this._navigateForward}
|
||||
>
|
||||
<div class="ha-card-parent">
|
||||
<ha-card
|
||||
@ -235,21 +274,41 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
: html`
|
||||
<mwc-list>
|
||||
${mostRecentItem.children.map(
|
||||
(child) => html`<mwc-list-item
|
||||
(child) => html`
|
||||
<mwc-list-item
|
||||
@click=${this._actionClicked}
|
||||
.item=${child}
|
||||
graphic="icon"
|
||||
graphic="avatar"
|
||||
hasMeta
|
||||
>
|
||||
<span>${child.title}</span>
|
||||
<ha-svg-icon
|
||||
slot="graphic"
|
||||
.label=${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}-media`
|
||||
<div
|
||||
class="graphic"
|
||||
style=${ifDefined(
|
||||
showImages && child.thumbnail
|
||||
? `background-image: url(${child.thumbnail})`
|
||||
: undefined
|
||||
)}
|
||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
||||
></ha-svg-icon
|
||||
></mwc-list-item>
|
||||
<li divider role="separator"></li>`
|
||||
slot="graphic"
|
||||
>
|
||||
<mwc-icon-button
|
||||
class="play ${classMap({
|
||||
show: !showImages || !child.thumbnail,
|
||||
})}"
|
||||
.item=${child}
|
||||
.label=${this.hass.localize(
|
||||
`ui.components.media-browser.${this.action}-media`
|
||||
)}
|
||||
@click=${this._actionClicked}
|
||||
>
|
||||
<ha-svg-icon
|
||||
.path=${this.action === "play" ? mdiPlay : mdiPlus}
|
||||
></ha-svg-icon>
|
||||
</mwc-icon-button>
|
||||
</div>
|
||||
<span>${child.title}</span>
|
||||
</mwc-list-item>
|
||||
<li divider role="separator"></li>
|
||||
`
|
||||
)}
|
||||
</mwc-list>
|
||||
`
|
||||
@ -260,6 +319,11 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
protected firstUpdated(): void {
|
||||
this._measureCard();
|
||||
this._attachObserver();
|
||||
|
||||
this.addEventListener("scroll", this._scroll, { passive: true });
|
||||
this.addEventListener("touchmove", this._scroll, {
|
||||
passive: true,
|
||||
});
|
||||
}
|
||||
|
||||
protected updated(changedProps: PropertyValues): void {
|
||||
@ -295,25 +359,23 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
});
|
||||
}
|
||||
|
||||
private async _navigate(ev: MouseEvent): Promise<void> {
|
||||
private async _navigateForward(ev: MouseEvent): Promise<void> {
|
||||
const target = ev.currentTarget as any;
|
||||
let item: MediaPlayerItem | undefined;
|
||||
|
||||
if (target.previous) {
|
||||
this._mediaPlayerItems!.pop();
|
||||
item = this._mediaPlayerItems!.pop();
|
||||
}
|
||||
|
||||
item = target.item;
|
||||
const item: MediaPlayerItem = target.item;
|
||||
|
||||
if (!item) {
|
||||
return;
|
||||
}
|
||||
this._navigate(item);
|
||||
}
|
||||
|
||||
private async _navigate(item: MediaPlayerItem) {
|
||||
const itemData = await this._fetchData(
|
||||
item.media_content_id,
|
||||
item.media_content_type
|
||||
);
|
||||
|
||||
this.scrollTo(0, 0);
|
||||
this._mediaPlayerItems = [...this._mediaPlayerItems, itemData];
|
||||
}
|
||||
|
||||
@ -332,7 +394,15 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
}
|
||||
|
||||
private _measureCard(): void {
|
||||
this._narrow = this.offsetWidth < 500;
|
||||
this._narrow = (this.dialog ? window.innerWidth : this.offsetWidth) < 450;
|
||||
}
|
||||
|
||||
private _scroll(): void {
|
||||
if (this.scrollTop > (this._narrow ? 224 : 125)) {
|
||||
this.setAttribute("scroll", "");
|
||||
} else if (this.scrollTop === 0) {
|
||||
this.removeAttribute("scroll");
|
||||
}
|
||||
}
|
||||
|
||||
private async _attachObserver(): Promise<void> {
|
||||
@ -350,22 +420,40 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
children.find((item: MediaPlayerItem) => item.can_expand)
|
||||
);
|
||||
|
||||
private _closeDialogAction(): void {
|
||||
fireEvent(this, "close-dialog");
|
||||
}
|
||||
|
||||
static get styles(): CSSResultArray {
|
||||
return [
|
||||
haStyle,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
padding: 0px 0px 20px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.breadcrumb-overflow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.header_button {
|
||||
position: relative;
|
||||
top: 14px;
|
||||
right: -8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
background-color: var(--card-background-color);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
padding: 20px 24px 10px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@ -380,6 +468,8 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
width: 200px;
|
||||
margin-right: 16px;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
transition: width 0.4s, height 0.4s;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
@ -391,9 +481,14 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-info .actions {
|
||||
padding-top: 24px;
|
||||
--mdc-theme-primary: var(--primary-color);
|
||||
.header-info mwc-button {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.breadcrumb-overflow {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@ -404,7 +499,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
}
|
||||
|
||||
.breadcrumb .title {
|
||||
font-size: 48px;
|
||||
font-size: 32px;
|
||||
line-height: 1.2;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
@ -412,6 +507,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
.breadcrumb .previous-title {
|
||||
@ -428,17 +524,8 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.divider {
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.divider::before {
|
||||
height: 1px;
|
||||
display: block;
|
||||
background-color: var(--divider-color);
|
||||
content: " ";
|
||||
margin-bottom: 0;
|
||||
transition: height 0.5s, margin 0.5s;
|
||||
}
|
||||
|
||||
/* ============= CHILDREN ============= */
|
||||
@ -446,8 +533,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
mwc-list {
|
||||
--mdc-list-vertical-padding: 0;
|
||||
--mdc-theme-text-icon-on-background: var(--secondary-text-color);
|
||||
border: 1px solid var(--divider-color);
|
||||
border-radius: 4px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
mwc-list li:last-child {
|
||||
@ -468,6 +554,10 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
margin: 8px 0px;
|
||||
}
|
||||
|
||||
:host(:not([narrow])) .children {
|
||||
padding: 0px 24px;
|
||||
}
|
||||
|
||||
.child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -505,7 +595,7 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
transition: all 0.5s;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
background-color: rgba(var(--rgb-card-background-color), 0.5);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -531,22 +621,46 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
color: var(--secondary-text-color);
|
||||
}
|
||||
|
||||
mwc-list-item .graphic {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
mwc-list-item .graphic .play {
|
||||
opacity: 0;
|
||||
transition: all 0.5s;
|
||||
background-color: rgba(var(--rgb-card-background-color), 0.5);
|
||||
border-radius: 50%;
|
||||
--mdc-icon-button-size: 40px;
|
||||
}
|
||||
|
||||
mwc-list-item:hover .graphic .play {
|
||||
opacity: 1;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
mwc-list-item .graphic .play.show {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* ============= Narrow ============= */
|
||||
|
||||
:host([narrow]) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:host([narrow]) mwc-list {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
:host([narrow]) .breadcrumb .title {
|
||||
font-size: 38px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
:host([narrow]) .breadcrumb-overflow {
|
||||
align-items: flex-end;
|
||||
:host([narrow]) .header {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:host([narrow]) .header_button {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
:host([narrow]) .header-content {
|
||||
@ -558,26 +672,100 @@ export class HaMediaPlayerBrowse extends LitElement {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin-right: 0;
|
||||
padding-bottom: 100%;
|
||||
padding-bottom: 50%;
|
||||
margin-bottom: 8px;
|
||||
position: relative;
|
||||
background-position: center;
|
||||
border-radius: 0;
|
||||
transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
|
||||
}
|
||||
|
||||
:host([narrow]) .header-content .img mwc-fab {
|
||||
mwc-fab {
|
||||
position: absolute;
|
||||
--mdc-theme-secondary: var(--primary-color);
|
||||
bottom: -20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
:host([narrow]) .header-info,
|
||||
:host([narrow]) .header-info mwc-button {
|
||||
margin-top: 16px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
:host([narrow]) .header-info {
|
||||
padding: 20px 24px 10px;
|
||||
}
|
||||
|
||||
:host([narrow]) .media-source,
|
||||
:host([narrow]) .children {
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
:host([narrow]) .children {
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
|
||||
}
|
||||
|
||||
/* ============= Scroll ============= */
|
||||
|
||||
:host([scroll]) .breadcrumb .subtitle {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:host([scroll]) .breadcrumb .title {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
:host([scroll]) .header-info mwc-button,
|
||||
.no-img .header-info mwc-button {
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
:host([scroll][narrow]) .no-img .header-info mwc-button {
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
:host([scroll]) .header-info {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:host([scroll]) .header-info mwc-button {
|
||||
align-self: center;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:host([scroll][narrow]) .no-img .header-info {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
:host([scroll][narrow]) .header-info {
|
||||
padding: 20px 24px 10px 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:host([scroll]) .header-content {
|
||||
align-items: flex-end;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
:host([scroll]) .header-content .img {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
:host([scroll][narrow]) .header-content .img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
padding-bottom: initial;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:host([scroll]) mwc-fab {
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
--mdc-fab-box-shadow: none;
|
||||
--mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user