initial
This commit is contained in:
98
ts_catalog/elements/bellini-adsense.ts
Normal file
98
ts_catalog/elements/bellini-adsense.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import { DeesElement, property, html, customElement, cssManager, css, type TemplateResult } from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import * as smartdelay from '@push.rocks/smartdelay';
|
||||
|
||||
// lets load the Google Script once
|
||||
const script = document.createElement('script');
|
||||
script.onload = () => {};
|
||||
script.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
|
||||
document.head.appendChild(script);
|
||||
|
||||
globalThis.adsbygoogle ? null : globalThis.adsbygoogle = [];
|
||||
globalThis.adsbygoogle.push({
|
||||
google_ad_client: "ca-pub-4104137977476459",
|
||||
enable_page_level_ads: false
|
||||
});
|
||||
|
||||
/**
|
||||
* the counter for adding multiple ads
|
||||
*/
|
||||
let counter = 0;
|
||||
|
||||
@customElement('bellini-adsense')
|
||||
export class BelliniAdSense extends DeesElement {
|
||||
public static demo = () => html`<bellini-adsense adSenseSlotId="5326656750"></bellini-adsense>`
|
||||
|
||||
@property()
|
||||
public adSenseSlotId: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
z-index: 1;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#222')};
|
||||
font-family: 'Roboto', sans-serif;
|
||||
display: block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#adSenseContainer {
|
||||
margin: auto;
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
${cssManager.cssForTablet(css`
|
||||
#adSenseContainer {
|
||||
margin: 0px 50px;
|
||||
}
|
||||
`)}
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
</style>
|
||||
<div id="adSenseContainer">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async firstUpdated(changedProperties) {
|
||||
await smartdelay.delayFor(10000);
|
||||
const injectableElement = document.querySelectorAll('bellini-adsense')[counter];
|
||||
counter++;
|
||||
const myInsElement = document.createElement('ins');
|
||||
myInsElement.classList.add('adsbygoogle');
|
||||
myInsElement.style.display = 'block';
|
||||
myInsElement.style.overflow = 'hidden';
|
||||
myInsElement.style.borderRadius = '7px';
|
||||
myInsElement.style.boxShadow = '0px 0px 5px rgba(0,0,0,0.2)';
|
||||
myInsElement.setAttribute('data-ad-client', 'ca-pub-4104137977476459');
|
||||
myInsElement.setAttribute('data-ad-slot', this.adSenseSlotId);
|
||||
myInsElement.setAttribute('data-ad-format', 'auto');
|
||||
myInsElement.setAttribute('data-adtest', 'on');
|
||||
|
||||
|
||||
|
||||
injectableElement.appendChild(myInsElement);
|
||||
|
||||
const adSenseContainer = this.shadowRoot.querySelector('#adSenseContainer');
|
||||
// adSenseContainer.appendChild(myInsElement);
|
||||
globalThis.adsbygoogle.push({});
|
||||
}
|
||||
}
|
||||
377
ts_catalog/elements/bellini-articlebox.ts
Normal file
377
ts_catalog/elements/bellini-articlebox.ts
Normal file
@@ -0,0 +1,377 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
state,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
import { ExtendedDate } from '@push.rocks/smarttime';
|
||||
|
||||
import * as belliniApi from '@bellini/api';
|
||||
|
||||
import '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('bellini-articlebox')
|
||||
export class BellliniArticlebox extends DeesElement {
|
||||
@property({type: Object})
|
||||
public selectedArticle: belliniApi.IBelliniClientState['articles'][0];
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
#articlebox {
|
||||
position: realtive;
|
||||
transition: all 0.3s;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#111')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#articlebox.show {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#articlebox #articleActions {
|
||||
position: relative;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||
z-index: 10;
|
||||
height: 30px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#252525')};
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||
display: grid;
|
||||
grid-template-columns: 40px auto 30px 30px 40px;
|
||||
}
|
||||
|
||||
#articlebox #articleActions .articleAction {
|
||||
transition: all 0.1s;
|
||||
box-sizing: border-box;
|
||||
padding-top: 7px;
|
||||
padding-left: 7px;
|
||||
position: relative;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
cursor: pointer;
|
||||
color: ${cssManager.bdTheme('#333', '#aaa')};
|
||||
}
|
||||
|
||||
#articlebox #articleActions .articleAction:hover {
|
||||
background: ${cssManager.bdTheme('#CCC', '#111')};
|
||||
color: ${cssManager.bdTheme('#000000', '#ffffff')};
|
||||
}
|
||||
|
||||
#articlebox #articleActions .articleAction:first-child {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#articlebox #articleFeaturedImage {
|
||||
z-index: 9;
|
||||
transition: all 0.1s;
|
||||
bottom: 0px;
|
||||
transition: all 0.1s;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
#articlebox #articleFeaturedImage img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#articlebox #articleFeaturedImage:after {
|
||||
transition: all 0.1s;
|
||||
margin-top: 0px;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
box-shadow: inset 0px 0px 150px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
|
||||
#articlebox #articleHeading {
|
||||
}
|
||||
|
||||
#articlebox #articleContent {
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
padding: 40px 80px;
|
||||
font-size: 16px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
#articlebox #articleContent p:first-child:first-letter {
|
||||
color: #e4002b;
|
||||
float: left;
|
||||
font-family: Georgia;
|
||||
font-size: 56px;
|
||||
line-height: 44px;
|
||||
padding-right: 8px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
#articlebox #articleContent figure {
|
||||
width: 100%;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
#articlebox #articleContent figure img {
|
||||
transition: all 0.1s;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#articlebox #articleContent figure figcaption {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#articlebox #articleContent figure img:hover {
|
||||
}
|
||||
|
||||
#articlebox #articleMeta {
|
||||
margin-left: 60px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-top: -116px;
|
||||
}
|
||||
|
||||
#articlebox #articleMeta #articleTimestamp {
|
||||
padding: 10px 20px;
|
||||
background: ${cssManager.bdTheme('rgba(100, 100, 100, 0.7)', 'rgba(20, 20, 20, 0.9)')};
|
||||
color: ${cssManager.bdTheme('#fff', '#aaa')};
|
||||
display: table;
|
||||
font-size: 16px;
|
||||
font-weight: 100;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
#articlebox #articleMeta #articleTitle {
|
||||
color: ${cssManager.bdTheme('#333', '#eee')};
|
||||
padding: 20px;
|
||||
background: ${cssManager.bdTheme('rgba(250, 250, 250, 0.85)', 'rgba(0, 0, 0, 0.8)')};
|
||||
display: table;
|
||||
font-size: 30px;
|
||||
font-family: 'Roboto Slab';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#articlebox #articleMeta #articleAuthor {
|
||||
padding: 10px 20px;
|
||||
background: ${cssManager.bdTheme('rgba(210, 210, 210, 0.7)', 'rgba(30, 30, 30, 0.7)')};
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
display: table;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
#articlebox #articleMeta #articleAuthor #by {
|
||||
display: inline-block;
|
||||
color: ${cssManager.bdTheme('#444', '#aaa')};
|
||||
line-height: 14px;
|
||||
font-size: 12px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#articlebox #articleMeta #metaDeco {
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 260px;
|
||||
top: -4px;
|
||||
left: -10px;
|
||||
|
||||
--bg-color: ${cssManager.bdTheme('#00000060', '#ffffff60')};
|
||||
--dot-color: #ffffff00;
|
||||
--dot-size: 1px;
|
||||
--dot-space: 6px;
|
||||
|
||||
background: linear-gradient(45deg, var(--bg-color) 1px, var(--dot-color) 2px) top left;
|
||||
background-size: var(--dot-space) var(--dot-space);
|
||||
}
|
||||
|
||||
#articlebox #articleContent {
|
||||
max-width: 700px;
|
||||
font-size: 18px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
#articlebox #articleContent h2 {
|
||||
margin-top: 45px;
|
||||
}
|
||||
|
||||
#articlebox #articleContent ul {
|
||||
margin-left: 0px;
|
||||
padding-left: 20px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#articlebox #articleContent a {
|
||||
font-style: italic;
|
||||
text-decoration: none;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#articlebox #articleContent p {
|
||||
margin-bottom: 2.3em;
|
||||
}
|
||||
|
||||
#articlebox #articleContent ul li::before {
|
||||
content: '•';
|
||||
color: red;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
#articlebox #articleContent blockquote {
|
||||
position: relative;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#222')};
|
||||
border-left: 2px solid #e4002b;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#fff', '#333')};
|
||||
border-radius: 3px;
|
||||
padding: 20px;
|
||||
margin: 0px;
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
font-style: italic;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.2)', 'none')};
|
||||
}
|
||||
|
||||
#articlebox #articleContent figure {
|
||||
width: 100%;
|
||||
margin-bottom: 40px;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 10px 2px 10px;
|
||||
border-radius: 3px;
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
#articlebox #articleContent iframe {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#articlebox #articleFooter {
|
||||
position: relative;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#CCC', '#333333')};
|
||||
z-index: 10;
|
||||
height: 30px;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#151515')};
|
||||
box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, 0.5)')};
|
||||
display: grid;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: ${cssManager.bdTheme('#333', '#ccc')};
|
||||
}
|
||||
|
||||
${cssManager.cssForPhablet(css`
|
||||
#articlebox {
|
||||
margin-right: -20px;
|
||||
margin-left: -20px;
|
||||
width: calc(100% + 40px);
|
||||
border-radius: 0px;
|
||||
}
|
||||
#articlebox #articleMeta {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
#articlebox #articleMeta #metaDeco {
|
||||
height: 240px;
|
||||
}
|
||||
#articlebox #articleContent {
|
||||
padding: 22px 20px;
|
||||
}
|
||||
`)}
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
</style>
|
||||
<div id="articlebox" class="belliniRelevantContent">
|
||||
<div id="articleActions">
|
||||
<div
|
||||
class="articleAction"
|
||||
@click="${async () => {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
domtoolsInstance.router.pushUrl('/');
|
||||
}}"
|
||||
>
|
||||
<dees-icon iconName="keyboard_backspace"></dees-icon>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="articleAction">
|
||||
<dees-icon iconName="comment"></dees-icon>
|
||||
</div>
|
||||
<div class="articleAction">
|
||||
<dees-icon iconName="share"></dees-icon>
|
||||
</div>
|
||||
<div
|
||||
class="articleAction"
|
||||
@click="${async () => {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
domtoolsInstance.router.pushUrl('/');
|
||||
}}"
|
||||
>
|
||||
<dees-icon iconName="close"></dees-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div id="articleFeaturedImage">
|
||||
<img src="${this.selectedArticle.featuredImageUrl}" />
|
||||
</div>
|
||||
<div id="articleMeta">
|
||||
<div id="articleTimestamp">
|
||||
${(() => {
|
||||
const extendedDate = new ExtendedDate(this.selectedArticle.timestamp);
|
||||
let returnString = extendedDate.format('YYYY-MM-DD - HH:mm');
|
||||
if (extendedDate.isToday()) {
|
||||
returnString += ' (Today)';
|
||||
}
|
||||
return returnString;
|
||||
})()}
|
||||
</div>
|
||||
<div id="articleTitle">${this.selectedArticle.title}</div>
|
||||
<div id="articleAuthor">
|
||||
<div id="by">by</div>
|
||||
${this.selectedArticle.author.name}
|
||||
</div>
|
||||
<div id="metaDeco"></div>
|
||||
</div>
|
||||
<div id="articleContent"></div>
|
||||
<div id="articleFooter">... words | ... readability score | ... comments | ... views</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async updated() {
|
||||
const articleContent = this.shadowRoot.querySelector('#articleContent');
|
||||
articleContent.innerHTML = this.selectedArticle.htmlArticle;
|
||||
}
|
||||
|
||||
public async show(boolArg: boolean) {
|
||||
const articlebox = this.shadowRoot.querySelector('#articlebox');
|
||||
if (boolArg) {
|
||||
articlebox.classList.add('show')
|
||||
} else {
|
||||
articlebox.classList.remove('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
251
ts_catalog/elements/bellini-articlegrid.ts
Normal file
251
ts_catalog/elements/bellini-articlegrid.ts
Normal file
@@ -0,0 +1,251 @@
|
||||
import { DeesElement, property, state, html, customElement, type TemplateResult, cssManager, css } from '@design.estate/dees-element';
|
||||
|
||||
import { ExtendedDate } from '@push.rocks/smarttime';
|
||||
|
||||
import * as belliniApi from '@bellini/api';
|
||||
|
||||
import * as helpers from '../helpers/index.js';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import '@design.estate/dees-catalog';
|
||||
|
||||
@customElement('bellini-articlegrid')
|
||||
export class BelliniArticleGrid extends DeesElement {
|
||||
public static demo = () => html`<bellini-articlegrid publicationName="central.eu"></bellini-articlegrid>`;
|
||||
|
||||
@property({type: Array})
|
||||
public articles: belliniApi.IBelliniClientState['articles'] = [];
|
||||
|
||||
@property({type: Object})
|
||||
public selectedArticle: belliniApi.IBelliniClientState['articles'][0];
|
||||
|
||||
@property()
|
||||
publicationName: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.articleGrid {
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
display: grid;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(4, 15)};
|
||||
grid-gap: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.articleGrid.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.articleGrid a {
|
||||
color: ${cssManager.bdTheme('#222', '#eee')};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.articleitem {
|
||||
min-height: 400px;
|
||||
transition: box-shadow 0.3s;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#555555')};
|
||||
}
|
||||
|
||||
.articleitem * {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.articleitem:hover {
|
||||
box-shadow: 0px 3px 10px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
|
||||
}
|
||||
|
||||
.articleitem .image {
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#2f2f2f')};;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.articleitem .image img {
|
||||
border-radius: 3px;
|
||||
display: block;
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
margin: 5px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.articleitem .image img:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 10;
|
||||
left: 10;
|
||||
bottom: 10;
|
||||
right: 10;
|
||||
box-shadow: inset 0px 0px 100px ${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.8)')};
|
||||
}
|
||||
|
||||
.articleitem .preslant {
|
||||
transform: skewY(8deg);
|
||||
transform-origin: 0%;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#333333')};
|
||||
height: 250px;
|
||||
position: absolute;
|
||||
top: 161px;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.articleitem .slant {
|
||||
transform: skewY(8deg);
|
||||
transform-origin: 0%;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#1d1d1d')};
|
||||
border-top: 1px solid ${cssManager.bdTheme('#fafafa', '#444444')};
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
top: 165px;
|
||||
width: 100%;
|
||||
left: 0px;
|
||||
box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.5)')};
|
||||
}
|
||||
.articleitem .text {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
left: 0px;
|
||||
margin-top: 175px;
|
||||
padding: 20px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
}
|
||||
|
||||
.articleitem .text .timestamp {
|
||||
color: ${cssManager.bdTheme('#333', '#aaa')};
|
||||
font-size: 15px;
|
||||
font-weight: 100;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.articleitem .text .title {}
|
||||
|
||||
.articleitem .text .title h1 {
|
||||
display: block;
|
||||
margin: 0px;
|
||||
font-size: 18px;
|
||||
font-family: 'Roboto Slab';
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.articleitem .text .title h2 {
|
||||
display: block;
|
||||
color: ${cssManager.bdTheme('#444', '#CCC')};
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
font-family: 'Roboto', monospace;
|
||||
padding-left: 10px;
|
||||
border-left: 4px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
|
||||
}
|
||||
|
||||
${cssManager.cssForTablet(css`
|
||||
.articleGrid {
|
||||
grid-template-columns: ${cssManager.cssGridColumns(3, 15)};
|
||||
}
|
||||
`)}
|
||||
|
||||
${cssManager.cssForPhablet(css`
|
||||
.articleGrid {
|
||||
grid-template-columns: repeat(2, calc(50% - 10px));
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
#articlebox {
|
||||
margin-right: -50px;
|
||||
margin-left: -50px;
|
||||
width: calc(100% + 100px);
|
||||
border-radius: 0px;
|
||||
}
|
||||
#articlebox #articleMeta {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
#articlebox #articleMeta #metaDeco {
|
||||
height: 240px;
|
||||
}
|
||||
#articlebox #articleContent {
|
||||
padding: 22px 20px;
|
||||
}
|
||||
`)}
|
||||
|
||||
${cssManager.cssForPhone(css`
|
||||
.articleGrid {
|
||||
grid-template-columns: repeat(1, calc(100% - 0px));
|
||||
grid-row-gap: 20px;
|
||||
}
|
||||
`)}
|
||||
`
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<div class="articleGrid">
|
||||
${this.articles.map((articleItem) => {
|
||||
const extendedDate = new ExtendedDate(articleItem.timestamp);
|
||||
return html`
|
||||
<a
|
||||
href="${helpers.articlehelpers.getArticleUrl(articleItem)}"
|
||||
@click="${(eventArg: MouseEvent) => {
|
||||
this.handleArticleClick(eventArg, articleItem);
|
||||
}}"
|
||||
>
|
||||
<div class="articleitem">
|
||||
<div class="image"><img loading="lazy" src="${articleItem.featuredImageUrl.replace('q=80', 'q=50').replace('w=2000', 'w=800')}" /></div>
|
||||
<div class="preslant"></div>
|
||||
<div class="slant"></div>
|
||||
<div class="text">
|
||||
<div class="timestamp">
|
||||
${extendedDate.format('HH:mm')}<br />${extendedDate.isToday()
|
||||
? `${extendedDate.format('YYYY-MM-DD')} (Today)`
|
||||
: extendedDate.format('YYYY-MM-DD')}
|
||||
</div>
|
||||
<div class="title"><h1>${articleItem.title}</h1><h2>${articleItem.content.split('.')[0]}.</h2></div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async handleArticleClick (eventArg: MouseEvent, articleArg: belliniApi.IBelliniClientState['articles'][0]) {
|
||||
eventArg.preventDefault();
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
domtoolsInstance.router.pushUrl(helpers.articlehelpers.getArticleUrl(articleArg));
|
||||
}
|
||||
|
||||
public async show(boolArg: boolean) {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const articleGrid = this.shadowRoot.querySelector('.articleGrid');
|
||||
if(!boolArg) {
|
||||
articleGrid.classList.add('hidden');
|
||||
} else {
|
||||
articleGrid.classList.remove('hidden');
|
||||
}
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(300);
|
||||
}
|
||||
}
|
||||
234
ts_catalog/elements/bellini-articlelist.ts
Normal file
234
ts_catalog/elements/bellini-articlelist.ts
Normal file
@@ -0,0 +1,234 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
state,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
css,
|
||||
cssManager,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import { ExtendedDate } from '@push.rocks/smarttime';
|
||||
|
||||
import * as belliniApi from '@bellini/api';
|
||||
import '@design.estate/dees-catalog';
|
||||
|
||||
import * as helpers from '../helpers/index.js';
|
||||
|
||||
@customElement('bellini-articlelist')
|
||||
export class BelliniArticlelist extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html``;
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Array })
|
||||
articles: belliniApi.IBelliniClientState['articles'] = [];
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
padding-bottom: 20px;
|
||||
transition: opacity 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#main.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.articleRow {
|
||||
border-top: 1px solid ${cssManager.bdTheme('#ffffff', ' #444444')};
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
height: 230px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#212121')};
|
||||
border-radius: 3px;
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 0px 0px 5px ${cssManager.bdTheme('rgba(0, 0, 0, 0.2)', 'rgba(0, 0, 0, 0.5)')};
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% / 3) calc(100% / 3) calc(100% / 3);
|
||||
}
|
||||
|
||||
a {
|
||||
color: ${cssManager.bdTheme('#333333', '#fafafa')};
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.articleRow .articleImage {
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
.articleRow .articleImage::after {
|
||||
box-shadow: inset 0px 0px 100px
|
||||
${cssManager.bdTheme('rgba(0, 0, 0, 0.5)', 'rgba(0, 0, 0, 0.8)')};
|
||||
}
|
||||
|
||||
.articleRow .articleImage img {
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 10px);
|
||||
margin: 5px;
|
||||
border-radius: 3px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle,
|
||||
.articleRow .articleDescription {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle {
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h1 {
|
||||
margin: 0px;
|
||||
font-family: "Roboto Slab";
|
||||
font-size: 25px;
|
||||
font-weight: 400;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h2 {
|
||||
margin: 0px;
|
||||
margin-top: 10px;
|
||||
font-family: 'Roboto Slab';
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
color: ${cssManager.bdTheme('#444', '#CCC')};
|
||||
padding-left: 10px;
|
||||
border-left: 5px dotted ${cssManager.bdTheme('#00000020', '#ffffff20')};
|
||||
}
|
||||
|
||||
.articleRow .articleDescription {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
${cssManager.cssForTablet(css`
|
||||
.articleRow {
|
||||
display: grid;
|
||||
grid-template-columns: calc(100% / 3) calc(100% / 3 * 2);
|
||||
}
|
||||
|
||||
.articleRow .articleTitle {
|
||||
padding: 20px;
|
||||
grid-row: 1;
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h1 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h2 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.articleRow .articleDescription {
|
||||
display: none;
|
||||
}
|
||||
`)}
|
||||
${cssManager.cssForPhablet(css`
|
||||
.articleRow {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
`)}
|
||||
${cssManager.cssForPhone(css`
|
||||
.articleRow {
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h1 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.articleRow .articleTitle h2 {
|
||||
font-size: 12px;
|
||||
}
|
||||
`)}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div id="main">
|
||||
${this.articles.map((articleArg) => {
|
||||
return html`
|
||||
<a
|
||||
href="${articleArg.url}"
|
||||
@click="${(eventArg: MouseEvent) => {
|
||||
this.handleArticleClick(eventArg, articleArg);
|
||||
}}"
|
||||
>
|
||||
<div class="articleRow">
|
||||
<div class="articleImage">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="${articleArg.featuredImageUrl
|
||||
.replace('q=80', 'q=50')
|
||||
.replace('w=2000', 'w=800')}"
|
||||
/>
|
||||
</div>
|
||||
<div class="articleTitle">
|
||||
<h1>${articleArg.title}</h1>
|
||||
<h2>${articleArg.content.split('.')[0]}.</h2>
|
||||
</div>
|
||||
<div class="articleDescription">Click to read more.</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
})}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async handleArticleClick(
|
||||
eventArg: MouseEvent,
|
||||
articleArg: belliniApi.IBelliniClientState['articles'][0]
|
||||
) {
|
||||
eventArg.preventDefault();
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
domtoolsInstance.router.pushUrl(helpers.articlehelpers.getArticleUrl(articleArg));
|
||||
}
|
||||
|
||||
public async show(boolArg: boolean) {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const mainDiv = this.shadowRoot.querySelector('#main');
|
||||
if (!boolArg) {
|
||||
mainDiv.classList.add('hidden');
|
||||
} else {
|
||||
mainDiv.classList.remove('hidden');
|
||||
}
|
||||
await domtoolsInstance.convenience.smartdelay.delayFor(300);
|
||||
}
|
||||
}
|
||||
242
ts_catalog/elements/bellini-content.ts
Normal file
242
ts_catalog/elements/bellini-content.ts
Normal file
@@ -0,0 +1,242 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
state,
|
||||
html,
|
||||
customElement,
|
||||
type TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as belliniApi from '@bellini/api';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
import { BelliniArticleGrid } from './bellini-articlegrid.js';
|
||||
import { BellliniArticlebox } from './bellini-articlebox.js';
|
||||
import { BelliniArticlelist } from './bellini-articlelist.js';
|
||||
|
||||
@customElement('bellini-content')
|
||||
export class BelliniContent extends DeesElement {
|
||||
// STATIC
|
||||
public static demo = () => html`
|
||||
<bellini-content publicationName="central.eu"></bellini-content>
|
||||
`;
|
||||
|
||||
// INSTANCE
|
||||
@property({ type: Array })
|
||||
public articles: belliniApi.IBelliniClientState['articles'] = [];
|
||||
|
||||
@property({ type: Object })
|
||||
public selectedArticle: belliniApi.IBelliniClientState['articles'][0] = null;
|
||||
|
||||
@state()
|
||||
private showArticle: boolean = false;
|
||||
|
||||
@property()
|
||||
public gridStyle: 'grid' | 'list' = 'list';
|
||||
|
||||
@property()
|
||||
public publicationName: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
background: ${cssManager.bdTheme(
|
||||
'var(--background2, #eeeeeb)',
|
||||
'var(--background2, #000000)'
|
||||
)};
|
||||
position: relative;
|
||||
color: var(--betanews-color-font);
|
||||
padding-bottom: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.main .contentsettings {
|
||||
user-select: none;
|
||||
height: 50px;
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#fff', '#333')};
|
||||
margin-bottom: 15px;
|
||||
padding: 5px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 50px 50px 50px;
|
||||
grid-gap: 5px;
|
||||
}
|
||||
|
||||
.main a {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
color: ${cssManager.bdTheme('#333', 'FFF')};
|
||||
border-radius: 3px;
|
||||
height: 100%;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
text-align: center;
|
||||
padding-top: 9px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
cursor: pointer;
|
||||
font-family: 'Roboto Slab';
|
||||
}
|
||||
|
||||
${cssManager.cssForPhablet(css`
|
||||
.main a {
|
||||
font-size: 12px;
|
||||
padding-top: 12px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
`)}
|
||||
|
||||
${cssManager.cssForPhone(css`
|
||||
.main a {
|
||||
display: none;
|
||||
}
|
||||
`)}
|
||||
|
||||
.main .contentsettings span {
|
||||
display: block;
|
||||
border-radius: 3px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.main .contentsettings span:hover,
|
||||
.main .contentsettings a:hover {
|
||||
background: ${cssManager.bdTheme('#CCC', '#111')};
|
||||
}
|
||||
|
||||
.pagespacer {
|
||||
max-width: var(--lelecv-pagewidth, 1200px);
|
||||
position: relative;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
${cssManager.cssForNotebook(css`
|
||||
.pagespacer {
|
||||
margin: 0px 15px;
|
||||
}
|
||||
`)}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style></style>
|
||||
<div class="main">
|
||||
<div class="pagespacer">
|
||||
<div class="contentsettings">
|
||||
|
||||
<div>
|
||||
<a href="https://newyork.today">NewYork</a>
|
||||
<a href="https://central.eu">Europe</a>
|
||||
<a href="https://finance.plus">Finance</a>
|
||||
<a href="https://start.plus">Startups</a>
|
||||
<a href="https://coffee.link">Coffee And Stories</a>
|
||||
</div>
|
||||
<span
|
||||
@click="${() => {
|
||||
|
||||
}}"
|
||||
><dees-icon iconName="search"></dees-icon></span
|
||||
>
|
||||
<span
|
||||
@click="${() => {
|
||||
this.setGridStyle('grid');
|
||||
}}"
|
||||
><dees-icon iconName="grid_view"></dees-icon></span
|
||||
>
|
||||
<span
|
||||
@click="${() => {
|
||||
this.setGridStyle('list');
|
||||
}}"
|
||||
><dees-icon iconName="view_list"></dees-icon></span
|
||||
>
|
||||
</div>
|
||||
${this.showArticle
|
||||
? html`
|
||||
<bellini-articlebox .selectedArticle=${this.selectedArticle}></bellini-articlebox>
|
||||
`
|
||||
: html`
|
||||
${this.gridStyle === 'grid'
|
||||
? html`<bellini-articlegrid .articles=${this.articles}></bellini-articlegrid>`
|
||||
: html`<bellini-articlelist .articles="${this.articles}"></bellini-articlelist>`}
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
public async firstUpdated() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
domtoolsInstance.router.on('/', async (routeArg) => {
|
||||
this.selectedArticle = null;
|
||||
domtoolsInstance.websetup.revertToBaseLevel();
|
||||
});
|
||||
domtoolsInstance.router.on('/article/:id/:title', async (routeArg) => {
|
||||
const wantedId = routeArg.params.id;
|
||||
this.selectedArticle = this.articles.find((item) => item.belliniId === wantedId);
|
||||
if (this.selectedArticle) {
|
||||
const taglevel = await domtoolsInstance.websetup.setSubLevel({
|
||||
title: `${this.selectedArticle.title} - ${this.publicationName}`,
|
||||
description: `${this.selectedArticle.content.substr(0, 100)}`,
|
||||
});
|
||||
taglevel.addNewsArticleInfo(this.selectedArticle);
|
||||
}
|
||||
});
|
||||
domtoolsInstance.router._handleRouteState();
|
||||
|
||||
// lets handle state
|
||||
const belliniApiInstance = new belliniApi.BelliniClient({
|
||||
publicationName: this.publicationName,
|
||||
smartstatePart: await domtoolsInstance.smartstate.getStatePart<any>('bellini', {}, 'soft'),
|
||||
});
|
||||
|
||||
belliniApiInstance.fetchArticles(); // lets don't wait here
|
||||
(await domtoolsInstance.smartstate.getStatePart<belliniApi.IBelliniClientState>('bellini'))
|
||||
.select((stateArg) => stateArg.articles)
|
||||
.subscribe((articlesArg) => {
|
||||
this.articles = articlesArg;
|
||||
domtoolsInstance.router._handleRouteState();
|
||||
});
|
||||
}
|
||||
|
||||
public async updated() {
|
||||
const domtoolsInstance = await this.domtoolsPromise;
|
||||
const belliniArticlebox: BellliniArticlebox =
|
||||
this.shadowRoot.querySelector('bellini-articlebox');
|
||||
const belliniArticleGrid: BelliniArticleGrid =
|
||||
this.shadowRoot.querySelector('bellini-articlegrid');
|
||||
const belliniArticleList: BelliniArticlelist =
|
||||
this.shadowRoot.querySelector('bellini-articlelist');
|
||||
|
||||
if (this.selectedArticle && (belliniArticleGrid || belliniArticleList)) {
|
||||
if (belliniArticleList) await belliniArticleList.show(false);
|
||||
if (belliniArticleGrid) await belliniArticleGrid.show(false);
|
||||
this.showArticle = true;
|
||||
} else if (!this.selectedArticle && belliniArticlebox) {
|
||||
await belliniArticlebox.show(false);
|
||||
this.showArticle = false;
|
||||
} else if (this.selectedArticle && belliniArticlebox) {
|
||||
const offset = window.innerWidth > 600 ? -20 : 0;
|
||||
domtoolsInstance.scroller.toElement(belliniArticlebox, {
|
||||
offset,
|
||||
});
|
||||
belliniArticlebox.show(true);
|
||||
}
|
||||
domtoolsInstance.router._handleRouteState();
|
||||
}
|
||||
|
||||
setGridStyle(gridStyleArg: 'grid' | 'list') {
|
||||
this.gridStyle = gridStyleArg;
|
||||
}
|
||||
}
|
||||
351
ts_catalog/elements/belllini-header.ts
Normal file
351
ts_catalog/elements/belllini-header.ts
Normal file
@@ -0,0 +1,351 @@
|
||||
import {
|
||||
DeesElement,
|
||||
property,
|
||||
html,
|
||||
customElement,
|
||||
TemplateResult,
|
||||
cssManager,
|
||||
css,
|
||||
unsafeCSS
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import * as domtools from '@design.estate/dees-domtools';
|
||||
|
||||
@customElement('bellini-header')
|
||||
export class BelliniHeader extends DeesElement {
|
||||
public static demo = () => html`<bellini-header publicationName="central.eu"></bellini-header>`;
|
||||
|
||||
@property()
|
||||
publicationName: string = 'no publication name set';
|
||||
|
||||
@property()
|
||||
slogan: string = 'slogan not set';
|
||||
|
||||
@property()
|
||||
twitterHandle: string;
|
||||
|
||||
@property()
|
||||
facebookHandle: string;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
}
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
|
||||
}
|
||||
:host([hidden]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.headerMain {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center 0px;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* PAGESPACER */
|
||||
.gridContainer {
|
||||
position: relative;
|
||||
max-width: var(--lelecv-pagewidth, 1200px);
|
||||
display: grid;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(4, 15)};
|
||||
grid-gap: 15px;
|
||||
margin: auto;
|
||||
z-index: 100;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.gridTile {
|
||||
background: ${cssManager.bdTheme('#fafafa', '#333333')};
|
||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gridTile .heading {
|
||||
text-align: center;
|
||||
margin: 5px;
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer {
|
||||
display: grid;
|
||||
grid-template-columns: ${cssManager.cssGridColumns(2, 5)};
|
||||
grid-gap: 5px;
|
||||
padding: 0px 5px 5px 5px;
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer a {
|
||||
display: contents;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer .selectionItem {
|
||||
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
||||
color: ${cssManager.bdTheme('#333', '#fff')};
|
||||
height: 120px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
padding: 0px 8px 0px 8px;
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer .selectionItem:hover {
|
||||
background: ${cssManager.bdTheme('#ccc', '#000')};
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer .selectionItem dees-icon {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer .selectionItem .text {
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
|
||||
.logo {
|
||||
background: ${cssManager.bdTheme('#222222', '#000000')};
|
||||
border: 1px solid ${cssManager.bdTheme('#222222', '#333333')};
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
display: block;
|
||||
margin: auto;
|
||||
margin-top: -20px;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.logo .slogan {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 77%;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
font-size: 25px;
|
||||
font-weight: 100;
|
||||
font-family: 'Exo 2', monospace;
|
||||
}
|
||||
|
||||
|
||||
${cssManager.cssForNotebook(css`
|
||||
.gridContainer {
|
||||
margin-left: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
`)}
|
||||
|
||||
${cssManager.cssForTablet(css`
|
||||
.gridContainer {
|
||||
grid-template-columns: ${cssManager.cssGridColumns(3, 15)};
|
||||
}
|
||||
|
||||
.gridTile.know-us {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer .selectionItem {
|
||||
height: 135px;
|
||||
}
|
||||
|
||||
.gridTile .selectionGridContainer .selectionItem dees-icon {
|
||||
margin-top: 40px;
|
||||
}
|
||||
`)}
|
||||
|
||||
${cssManager.cssForPhablet(css`
|
||||
.gridContainer {
|
||||
grid-template-columns: repeat(1, calc(100% - 0px));
|
||||
}
|
||||
|
||||
.gridContainer .logo img {
|
||||
margin-top: -20%;
|
||||
margin-bottom: -37%;
|
||||
}
|
||||
|
||||
.gridTile.us {
|
||||
height: auto;
|
||||
grid-column: auto;
|
||||
}
|
||||
.gridTile.social {
|
||||
display: none;
|
||||
}
|
||||
.gridTile.us.know-us {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.gridTile.us .selectionGridContainer {
|
||||
grid-template-columns: ${cssManager.cssGridColumns(3, 5)};
|
||||
}
|
||||
|
||||
.gridTile.us .selectionGridContainer .selectionItem {
|
||||
padding: 0px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.gridTile.us .selectionGridContainer .selectionItem dees-icon {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.gridTile.us .selectionGridContainer .selectionItem .text {
|
||||
display: none;
|
||||
}
|
||||
`)}
|
||||
`
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
</style>
|
||||
<div class="headerMain">
|
||||
<div class="gridContainer">
|
||||
<div class="gridTile logo">
|
||||
<img
|
||||
src="https://assetbroker.lossless.one/brandfiles/00general/square_${this.publicationName.replace(
|
||||
'.',
|
||||
''
|
||||
)}.svg"
|
||||
/>
|
||||
<div class="slogan">${this.slogan}</div>
|
||||
</div>
|
||||
<div class="gridTile us">
|
||||
<div class="heading">read us across the web:</div>
|
||||
<div class="selectionGridContainer">
|
||||
<a
|
||||
href="${this.domtools
|
||||
? 'https://feedly.com/i/subscription/feed/https://' +
|
||||
window.location.hostname +
|
||||
'/feed'
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon svgSize="25" brandName="rss"></dees-icon>
|
||||
<div class="text">Feedly</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="${this.domtools
|
||||
? this.domtools.websetup.options.metaObject.googleNewsLink
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon svgSize="25" brandName="google"></dees-icon>
|
||||
<div class="text">Google News</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="${this.domtools
|
||||
? this.domtools.websetup.options.metaObject.mediumLink
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon svgSize="25" brandName="medium"></dees-icon>
|
||||
<div class="text">Medium</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gridTile us social">
|
||||
<div class="heading">${this.publicationName} on social networks:</div>
|
||||
<div class="selectionGridContainer">
|
||||
<a
|
||||
href="${this.domtools
|
||||
? 'https://twitter.com/' + this.domtools.websetup.options.metaObject.twitterHandle
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon svgSize="25" brandName="twitter"></dees-icon>
|
||||
<div class="text">Twitter</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="${this.domtools
|
||||
? 'https://fb.com/' + this.domtools.websetup.options.metaObject.facebookHandle
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon svgSize="25" brandName="facebook"></dees-icon>
|
||||
<div class="text">Facebook</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gridTile us know-us">
|
||||
<div class="heading">get to know us:</div>
|
||||
<div class="selectionGridContainer">
|
||||
<a
|
||||
href="${this.domtools
|
||||
? this.domtools.websetup.options.metaObject.companyWebsiteLink
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon svgSize="25" brandName="desktop"></dees-icon>
|
||||
<div class="text">Company Website</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="${this.domtools
|
||||
? this.domtools.websetup.options.metaObject.slackLink
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
</a>
|
||||
<a
|
||||
href="https://jobs.lossless.com"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon svgSize="25" brandName="users"></dees-icon>
|
||||
<div class="text">Join Our Team</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="${this.domtools
|
||||
? this.domtools.websetup.options.metaObject.airmeetLink
|
||||
: null}"
|
||||
target="_blank"
|
||||
>
|
||||
<div class="selectionItem">
|
||||
<dees-icon style="font-size: 25px;" iconName="live_help"></dees-icon>
|
||||
<div class="text">Support</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
6
ts_catalog/elements/index.ts
Normal file
6
ts_catalog/elements/index.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
export * from './bellini-adsense.js';
|
||||
export * from './bellini-articlebox.js';
|
||||
export * from './bellini-articlegrid.js';
|
||||
export * from './bellini-articlelist.js';
|
||||
export * from './bellini-content.js';
|
||||
export * from './belllini-header.js';
|
||||
Reference in New Issue
Block a user