Skip to content
Permalink
Browse files

Adds hideOnMobile property for panels to or-asset-viewer

  • Loading branch information...
robin-dekkers committed Nov 6, 2019
1 parent e327c8d commit a3dfbc24e2df91ddb5fe0ce77809a0913980a479
@@ -284,7 +284,7 @@ export const style = css`
margin: 0 auto;
}
@media only screen and (min-width: 768px){
@media only screen and (min-width: 769px){
.expander {
width: 26px;
}
@@ -25,13 +25,15 @@ import {
import {style} from "./style";
import i18next from "i18next";
import {styleMap} from "lit-html/directives/style-map";
import {classMap} from "lit-html/directives/class-map";

export type PanelType = "property" | "location" | "attribute" | "history";

export interface PanelConfig {
type?: PanelType;
scrollable?: boolean;
hide?: boolean;
hideOnMobile?: boolean;
include?: string[];
exclude?: string[];
readonly?: string[];
@@ -134,7 +136,7 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
gridRowStart: "4",
gridRowEnd: "5",
},
scrollable: false,
scrollable: false
}
}
};
@@ -251,15 +253,14 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
}

public static getPanel(name: string, asset: Asset, attributes: AssetAttribute[], viewerConfig: AssetViewerConfig, panelConfig: PanelConfig, shadowRoot: ShadowRoot | null) {

const content = OrAssetViewer.getPanelContent(name, asset, attributes, viewerConfig, panelConfig, shadowRoot);

if (!content) {
return;
}

return html`
<div class="panel" id="${name}-panel" style="${panelConfig && panelConfig.panelStyles ? styleMap(panelConfig.panelStyles) : ""}">
<div class=${classMap({"panel": true, mobileHidden: panelConfig.hideOnMobile === true})} id="${name}-panel" style="${panelConfig && panelConfig.panelStyles ? styleMap(panelConfig.panelStyles) : ""}">
<div class="panel-title">
<or-translate value="${name}"></or-translate>
</div>
@@ -143,8 +143,12 @@ export const style = css`
height: 100%;
}
/* TODO move this to mobilePanelStyle */
@media screen and (max-width: 768px) {
@media screen and (max-width: 769px) {
.mobileHidden {
display: none;
}
.panel,
#asset-header {
grid-area: auto!important;

0 comments on commit a3dfbc2

Please sign in to comment.
You can’t perform that action at this time.