Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

deduped CSS and refactored to not use Shadow DOM #56

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

deduped CSS and refactored to not use Shadow DOM #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d888bd
deduped CSS and refactored some WCs to emit light DOM and not use Sha…
thescientist13 Dec 9, 2021
5314489
test for global CSS outside of router
thescientist13 Dec 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions src/components/card/card.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "../../theme.css";

.as-card {

& a {
Expand Down
12 changes: 9 additions & 3 deletions src/components/card/card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { css, html, LitElement, unsafeCSS, TemplateResult } from 'lit';
import { html, LitElement, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Details } from './card.model.ts';
Expand All @@ -8,12 +8,18 @@ import cardCss from './card.css?type=css';
export class CardComponent extends LitElement {
@property() details: Details;

static styles = css`${unsafeCSS(cardCss)}`;

createRenderRoot(): Element | ShadowRoot {
return this;
}

protected render():TemplateResult {
const { details } = this;

return html`
<style>
${cardCss}
</style>

<div class="container as-card">
<div class="row">
<!-- why doesn't col-xs-12 work here -->
Expand Down
4 changes: 1 addition & 3 deletions src/components/events-calendar/events-calendar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import '../../theme.css';

:host {
.host {

& .as-events-calendar__header {
display: flex;
Expand Down
135 changes: 70 additions & 65 deletions src/components/events-calendar/events-calendar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import eventsCalendarCss from './events-calendar.css?type=css';

@customElement('app-events-calendar')
export class EventsCalendarComponent extends LitElement {

private DAYS_IN_WEEK = 7;
private MAX_CALENDAR_SPACES = 35;
private CALENDAR = [
Expand Down Expand Up @@ -126,75 +125,81 @@ export class EventsCalendarComponent extends LitElement {
}
}

createRenderRoot(): Element | ShadowRoot {
return this;
}

protected render(): TemplateResult {
return html`
<style>
${eventsCalendarCss}
</style>

<div class="as-events-calendar">
<div class="as-events-calendar__header">
<button type="button" class="btn btn-default btn-sm as-events-calendar__btn" @click="${this.shiftToPreviousMonth}" tabindex="-1">
<i class="fa fa-arrow-left"></i>
</button>

<h3 class="as-events-calendar__header-text">Event Calendar<br><span class="as-events-calendar__month">${this.getHeaderText()}</span></h3>

<button type="button" class="btn btn-default btn-sm as-events-calendar__btn" @click="${this.shiftToNextMonth}" tabindex="-1">
<i class="fa fa-arrow-right"></i>
</button>
</div>

<div class="as-events-calendar__days">
<div class="as-events-calendar__day-name">Sun</div>
<div class="as-events-calendar__day-name">Mon</div>
<div class="as-events-calendar__day-name">Tue</div>
<div class="as-events-calendar__day-name">Wed</div>
<div class="as-events-calendar__day-name">Thu</div>
<div class="as-events-calendar__day-name">Fri</div>
<div class="as-events-calendar__day-name">Sat</div>
</div>

${
this.currentMonthData.map((week) => {
return html`
<div class="as-events-calendar__week">
${
week.map((day) => {
const dayNotInMonthContent = !day.date ? unsafeHTML('<div></div>') : '';
const dayInMonthContent = day.date && !day.hasEvents
? day.date
: '';
const eventsInDayContent = day.hasEvents
? day.events.map((event) => {
return html`
<span class="as-events-calendar__day-event">
<a class="as-events-calendar__day-event" href="/events/${event.id}" title="${event.title}">
<i class="fa fa-calendar-check-o"></i>
</a>
</span>
`;
})
: '';

return html`
<div class="as-events-calendar__day">
<!--day not in month-->
${dayNotInMonthContent}

<!--day in month without event-->
${dayInMonthContent}

<!--day with event if there's an event-->
${eventsInDayContent}
</div>
`;
})
}
</div>
`;
})
}

<div class="host">
<div class="as-events-calendar">
<div class="as-events-calendar__header">
<button type="button" class="btn btn-default btn-sm as-events-calendar__btn" @click="${this.shiftToPreviousMonth}" tabindex="-1">
<i class="fa fa-arrow-left"></i>
</button>

<h3 class="as-events-calendar__header-text">Event Calendar<br><span class="as-events-calendar__month">${this.getHeaderText()}</span></h3>

<button type="button" class="btn btn-default btn-sm as-events-calendar__btn" @click="${this.shiftToNextMonth}" tabindex="-1">
<i class="fa fa-arrow-right"></i>
</button>
</div>

<div class="as-events-calendar__days">
<div class="as-events-calendar__day-name">Sun</div>
<div class="as-events-calendar__day-name">Mon</div>
<div class="as-events-calendar__day-name">Tue</div>
<div class="as-events-calendar__day-name">Wed</div>
<div class="as-events-calendar__day-name">Thu</div>
<div class="as-events-calendar__day-name">Fri</div>
<div class="as-events-calendar__day-name">Sat</div>
</div>

${
this.currentMonthData.map((week) => {
return html`
<div class="as-events-calendar__week">
${
week.map((day) => {
const dayNotInMonthContent = !day.date ? unsafeHTML('<div></div>') : '';
const dayInMonthContent = day.date && !day.hasEvents
? day.date
: '';
const eventsInDayContent = day.hasEvents
? day.events.map((event) => {
return html`
<span class="as-events-calendar__day-event">
<a class="as-events-calendar__day-event" href="/events/${event.id}" title="${event.title}">
<i class="fa fa-calendar-check-o"></i>
</a>
</span>
`;
})
: '';

return html`
<div class="as-events-calendar__day">
<!--day not in month-->
${dayNotInMonthContent}

<!--day in month without event-->
${dayInMonthContent}

<!--day with event if there's an event-->
${eventsInDayContent}
</div>
`;
})
}
</div>
`;
})
}
</div>
</div>
</div>
`;
Expand Down
4 changes: 1 addition & 3 deletions src/components/footer/footer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import '../../theme.css';

:host {
footer {
.copyright-text {
margin: 10px auto;
text-align: center;
Expand Down
7 changes: 5 additions & 2 deletions src/components/footer/footer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import { css, html, LitElement, unsafeCSS, TemplateResult } from 'lit';
import { html, LitElement, TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import footerCss from './footer.css?type=css';

@customElement('app-footer')
export class FooterComponent extends LitElement {
static styles = css`${unsafeCSS(footerCss)}`;

@property() private STARTING_YEAR = 2007;
@property() private currentYear = new Date().getFullYear();
Expand All @@ -13,6 +12,10 @@ export class FooterComponent extends LitElement {
const { currentYear, STARTING_YEAR } = this;

return html`
<style>
${footerCss}
</style>

<footer class="container as-footer">
<div class="row">

Expand Down
2 changes: 0 additions & 2 deletions src/components/header/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import "../../theme.css";

.as-header {
background-color: var(--color-secondary);
opacity: 0.95;
Expand Down
12 changes: 10 additions & 2 deletions src/components/header/header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,24 @@
import { css, html, LitElement, unsafeCSS, TemplateResult } from 'lit';
import { html, LitElement, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import '../navigation/navigation.ts';
import headerCss from './header.css?type=css';

@customElement('app-header')
export class HeaderComponent extends LitElement {
static styles = css`${unsafeCSS(headerCss)}`;

createRenderRoot(): Element | ShadowRoot {
return this;
}

protected render(): TemplateResult {
return html`
<style>
${headerCss}
</style>

<header class="as-header">
<div id="as-inner-header">
<i class="fa fa-calendar-check-o"></i>
<h1 class="as-header__logo"><a title="Home Page" href="/">Analog Studios</a></h1>
<app-navigation></app-navigation>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/components/navigation/navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@import '../../theme.css';

:host {
.host {
flex-grow: 1;
}

.as-navigation {
flex-grow: 1;

& .as-navigation__list {
display: flex;
align-items: center;
Expand All @@ -17,9 +17,9 @@
}

& .as-navigation__list-item {
width: 100%;
text-align: center;
padding: 10px 0;
width: 100%;
text-align: center;
padding: 10px 0;
}

& .as-navigation__link {
Expand Down
45 changes: 27 additions & 18 deletions src/components/navigation/navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,41 @@
import { css, html, LitElement, unsafeCSS, TemplateResult } from 'lit';
import { html, LitElement, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import navigationCss from './navigation.css?type=css';

@customElement('app-navigation')
export class NavigationComponent extends LitElement {
static styles = css`${unsafeCSS(navigationCss)}`;

createRenderRoot(): Element | ShadowRoot {
return this;
}

protected render(): TemplateResult {
return html`
<nav class="as-navigation">
<ul class="list-unstyled as-navigation__list">
<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/artists/">artists</a>
</li>
<style>
${navigationCss}
</style>

<div class="host">
<nav class="as-navigation">
<ul class="list-unstyled as-navigation__list">
<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/artists/">artists</a>
</li>

<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/albums/">albums</a>
</li>
<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/albums/">albums</a>
</li>

<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/events/">events</a>
</li>
<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/events/">events</a>
</li>

<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/contact/">contact</a>
</li>
</ul>
</nav>
<li class="as-navigation__list-item">
<a class="as-navigation__link" href="/contact/">contact</a>
</li>
</ul>
</nav>
</div>
`;
}
}
4 changes: 1 addition & 3 deletions src/components/posts-list/posts-list.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,4 @@
@import '../../theme.css';

:host img {
.host img {
display: block;
max-width: 100%;
height: auto;
Expand Down
Loading