From e0895e1b4d1e5a6080d0206c32710f27b6371fac Mon Sep 17 00:00:00 2001 From: marksie1988 Date: Mon, 25 Sep 2023 11:20:35 +0000 Subject: [PATCH] fix: issues with new div formatting --- src/editor.ts | 10 +- src/index.ts | 11 +- src/lib/eventMode.html.ts | 9 +- src/localize/languages/da.json | 4 +- src/localize/languages/de.json | 4 +- src/localize/languages/en.json | 4 +- src/localize/languages/et.json | 4 +- src/localize/languages/fi.json | 4 +- src/localize/languages/fr.json | 4 +- src/localize/languages/nb.json | 4 +- src/localize/languages/sl.json | 4 +- src/localize/languages/sv.json | 4 +- src/style.ts | 323 ++++++++++++++++----------------- 13 files changed, 186 insertions(+), 203 deletions(-) diff --git a/src/editor.ts b/src/editor.ts index 2549f6dd..b0d299b5 100644 --- a/src/editor.ts +++ b/src/editor.ts @@ -383,11 +383,6 @@ export class AtomicCalendarReviveEditor extends ScopedRegistryHost(LitElement) i name: 'compactMode', label: localize('main.fields.compactMode'), }, - { - type: 'switch', - name: 'hoursOnSameLine', - label: localize('main.fields.hoursOnSameLine'), - }, { type: 'switch', name: 'showAllDayEvents', @@ -539,6 +534,11 @@ export class AtomicCalendarReviveEditor extends ScopedRegistryHost(LitElement) i label: localize('event.fields.showAllDayHours'), default: defaultConfig.showAllDayHours, }, + { + type: 'switch', + name: 'hoursOnSameLine', + label: localize('event.fields.hoursOnSameLine'), + } ], }, calendar: { diff --git a/src/index.ts b/src/index.ts index 33e10265..0ed0f563 100644 --- a/src/index.ts +++ b/src/index.ts @@ -455,10 +455,13 @@ export class AtomicCalendarRevive extends LitElement { ${eventLeft}
${currentEventLine} -
${getTitleHTML(this._config, event)}
-
${getLocationHTML(this._config, event)} ${eventCalName} ${this._config.hoursOnSameLine ? hoursHTML : ''}
- ${this._config.hoursOnSameLine ? '' : hoursHTML} - ${timeUntilRemaining} +
${getTitleHTML(this._config, event)} +
${getLocationHTML(this._config, event)} ${eventCalName} ${this._config.hoursOnSameLine ? hoursHTML : ''}
+
+
+ ${this._config.hoursOnSameLine ? '' : hoursHTML} + ${timeUntilRemaining} +
${getDescription(this._config, event)}
${progressBar} diff --git a/src/lib/eventMode.html.ts b/src/lib/eventMode.html.ts index dfc2d1d8..05c9f1a0 100644 --- a/src/lib/eventMode.html.ts +++ b/src/lib/eventMode.html.ts @@ -124,16 +124,13 @@ export function getLocationHTML(config: atomicCardConfig, event: EventClass) { if (!event.location || !config.showLocation) { return html``; } else if (config.disableLocationLink) { - return html`
 ${event.address}
- `; + return html` ${event.address}`; } else { const loc: string = event.location; const location: string = loc.startsWith('http') ? loc : 'https://maps.google.com/?q=' + loc; - return html`
- + return html`  ${event.address} - -
`; + `; } } diff --git a/src/localize/languages/da.json b/src/localize/languages/da.json index 20bcc0eb..c92301d8 100644 --- a/src/localize/languages/da.json +++ b/src/localize/languages/da.json @@ -53,7 +53,6 @@ "showMultiDayEventParts": "Vis flere dages begivenhedsdele", "eventTitle": "Indstil tom begivenhedstitel", "compactMode": "Aktiver kompakt tilstand", - "hoursOnSameLine": "Vis timer på begivenhedslinjen", "titleLength": "Max titellængde (0 for ubegrænset)", "descLength": "Max beskrivelseslængde (0 for ubegrænset)", "showAllDayEvents": "Vis heldagsbegivenheder", @@ -86,7 +85,8 @@ "showEventDate": "Vis dato for arrangementer", "showDatePerEvent": "Vis dato ud for hver begivenhed", "showTimeRemaining": "Vis resterende tid", - "showAllDayHours": "Vis Heldagsbegivenhedstekst" + "showAllDayHours": "Vis Heldagsbegivenhedstekst", + "hoursOnSameLine": "Vis timer på begivenhedslinjen" } }, "calendar": { diff --git a/src/localize/languages/de.json b/src/localize/languages/de.json index f927b4c5..f328b11c 100644 --- a/src/localize/languages/de.json +++ b/src/localize/languages/de.json @@ -52,7 +52,6 @@ "showMultiDayEventParts": "Toon meerdaagse evenementonderdelen", "eventTitle": "Lege evenementtitel instellen", "compactMode": "Schakel de compacte modus in", - "hoursOnSameLine": "Toon uren op de gebeurtenisregel", "titleLength": "Maximale titellengte (0 voor onbeperkt)", "descLength": "Maximale beschrijvingslengte (0 voor onbeperkt)", "showAllDayEvents": "Toon evenementen die de hele dag duren", @@ -85,7 +84,8 @@ "showEventDate": "Toon datum voor evenementen", "showDatePerEvent": "Toon datum naast elk evenement", "showTimeRemaining": "Laat de resterende tijd zien", - "showAllDayHours": "Toon de tekst van de hele dag-gebeurtenis" + "showAllDayHours": "Toon de tekst van de hele dag-gebeurtenis", + "hoursOnSameLine": "Toon uren op de gebeurtenisregel" } }, "calendar": { diff --git a/src/localize/languages/en.json b/src/localize/languages/en.json index 6132550b..bff1809c 100644 --- a/src/localize/languages/en.json +++ b/src/localize/languages/en.json @@ -53,7 +53,6 @@ "showMultiDayEventParts": "Show Multi-Day Event Parts", "eventTitle": "Set blank event title", "compactMode": "Enable compact mode", - "hoursOnSameLine": "Show hours on the event line", "titleLength": "Max title length (0 for unlimited)", "descLength": "Max description length (0 for unlimited)", "showAllDayEvents": "Show all day events", @@ -86,7 +85,8 @@ "showEventDate": "Show date for events", "showDatePerEvent": "Show date next to each event", "showTimeRemaining": "Show time remaining", - "showAllDayHours": "Show All Day event text" + "showAllDayHours": "Show All Day event text", + "hoursOnSameLine": "Show hours on the event line" } }, "calendar": { diff --git a/src/localize/languages/et.json b/src/localize/languages/et.json index 1bb2a4f4..27b0d972 100644 --- a/src/localize/languages/et.json +++ b/src/localize/languages/et.json @@ -52,7 +52,6 @@ "showMultiDayEventParts": "Näita mitmepäevaste sündmuste osi", "eventTitle": "Määra tühi sündmuse pealkiri", "compactMode": "Kompaktrežiimi lubamine", - "hoursOnSameLine": "Näidake sündmuse reale tundi", "titleLength": "Pealkirja maksimaalne pikkus (0 piiramatu jaoks)", "descLength": "Kirjelduse maksimaalne pikkus (0 piiramatu puhul)", "showAllDayEvents": "Näita kogu päeva sündmusi", @@ -84,7 +83,8 @@ "showEventDate": "Näita sündmuste kuupäeva", "showDatePerEvent": "Kuva kuupäev iga sündmuse kõrval", "showTimeRemaining": "Näita järelejäänud aega", - "showAllDayHours": "Näita kogu päeva sündmuse teksti" + "showAllDayHours": "Näita kogu päeva sündmuse teksti", + "hoursOnSameLine": "Näidake sündmuse reale tundi" } }, "calendar": { diff --git a/src/localize/languages/fi.json b/src/localize/languages/fi.json index 9c3e1c1a..264c272d 100644 --- a/src/localize/languages/fi.json +++ b/src/localize/languages/fi.json @@ -53,7 +53,6 @@ "showMultiDayEventParts": "Näytä usean päivän tapahtuman osat", "eventTitle": "Aseta tyhjä tapahtuman otsikko", "compactMode": "Ota kompakti tila käyttöön", - "hoursOnSameLine": "Näytä tunnit tapahtumarivillä", "titleLength": "Otsikon enimmäispituus (0 rajattomasti)", "descLength": "Kuvauksen enimmäispituus (0 rajattomasti)", "showAllDayEvents": "Näytä koko päivän tapahtumat", @@ -86,7 +85,8 @@ "showEventDate": "Näytä tapahtumien päivämäärä", "showDatePerEvent": "Näytä päivämäärä jokaisen tapahtuman vieressä", "showTimeRemaining": "Näytä jäljellä oleva aika", - "showAllDayHours": "Näytä koko päivän tapahtuman teksti" + "showAllDayHours": "Näytä koko päivän tapahtuman teksti", + "hoursOnSameLine": "Näytä tunnit tapahtumarivillä" } }, "calendar": { diff --git a/src/localize/languages/fr.json b/src/localize/languages/fr.json index 2e6277b9..7588adf5 100644 --- a/src/localize/languages/fr.json +++ b/src/localize/languages/fr.json @@ -53,7 +53,6 @@ "showMultiDayEventParts": "Afficher les parties de l'événement sur plusieurs jours", "eventTitle": "Définir un titre d'événement vide", "compactMode": "Activer le mode compact", - "hoursOnSameLine": "Afficher les heures sur la ligne de l'événement", "titleLength": "Longueur maximale du titre (0 pour illimité)", "descLength": "Longueur maximale de la description (0 pour illimité)", "showAllDayEvents": "Afficher les événements de la journée", @@ -86,7 +85,8 @@ "showEventDate": "Afficher la date des événements", "showDatePerEvent": "Afficher la date à côté de chaque événement", "showTimeRemaining": "Afficher le temps restant", - "showAllDayHours": "Afficher le texte de l'événement toute la journée" + "showAllDayHours": "Afficher le texte de l'événement toute la journée", + "hoursOnSameLine": "Afficher les heures sur la ligne de l'événement" } }, "calendar": { diff --git a/src/localize/languages/nb.json b/src/localize/languages/nb.json index 50365da0..126eeb7b 100644 --- a/src/localize/languages/nb.json +++ b/src/localize/languages/nb.json @@ -53,7 +53,6 @@ "showMultiDayEventParts": "Vis flerdagers arrangementsdeler", "eventTitle": "Angi en tom hendelsestittel", "compactMode": "Aktiver kompakt modus", - "hoursOnSameLine": "Vis timer på arrangementslinjen", "titleLength": "Maks tittellengde (0 for ubegrenset)", "descLength": "Maks beskrivelseslengde (0 for ubegrenset)", "showAllDayEvents": "Vis heldagsbegivenheter", @@ -86,7 +85,8 @@ "showEventDate": "Vis dato for arrangementer", "showDatePerEvent": "Vis dato ved siden av hvert arrangement", "showTimeRemaining": "Vis gjenværende tid", - "showAllDayHours": "Vis tekst for hele dagen" + "showAllDayHours": "Vis tekst for hele dagen", + "hoursOnSameLine": "Vis timer på arrangementslinjen" } }, "calendar": { diff --git a/src/localize/languages/sl.json b/src/localize/languages/sl.json index adbac866..a082c462 100644 --- a/src/localize/languages/sl.json +++ b/src/localize/languages/sl.json @@ -53,7 +53,6 @@ "showMultiDayEventParts": "Prikaži dele večdnevnega dogodka", "eventTitle": "Nastavite prazen naslov dogodka", "compactMode": "Omogoči kompaktni način", - "hoursOnSameLine": "Prikaži ure na vrstici dogodkov", "titleLength": "Največja dolžina naslova (0 za neomejeno)", "descLength": "Največja dolžina opisa (0 za neomejeno)", "showAllDayEvents": "Pokaži celodnevne dogodke", @@ -86,7 +85,8 @@ "showEventDate": "Pokaži datum za dogodke", "showDatePerEvent": "Prikažite datum poleg vsakega dogodka", "showTimeRemaining": "Pokaži preostali čas", - "showAllDayHours": "Prikaži besedilo celodnevnega dogodka" + "showAllDayHours": "Prikaži besedilo celodnevnega dogodka", + "hoursOnSameLine": "Prikaži ure na vrstici dogodkov" } }, "calendar": { diff --git a/src/localize/languages/sv.json b/src/localize/languages/sv.json index cae43138..2634b38b 100644 --- a/src/localize/languages/sv.json +++ b/src/localize/languages/sv.json @@ -52,7 +52,6 @@ "showMultiDayEventParts": "Visa flerdagarsevenemangsdelar", "eventTitle": "Ange tom händelsetitel", "compactMode": "Aktivera kompakt läge", - "hoursOnSameLine": "Visa öppettider på evenemangsraden", "titleLength": "Max titellängd (0 för obegränsat)", "descLength": "Max beskrivningslängd (0 för obegränsat)", "showAllDayEvents": "Visa heldagshändelser", @@ -85,7 +84,8 @@ "showEventDate": "Visa datum för evenemang", "showDatePerEvent": "Visa datum bredvid varje evenemang", "showTimeRemaining": "Visa återstående tid", - "showAllDayHours": "Visa heldagshändelsetext" + "showAllDayHours": "Visa heldagshändelsetext", + "hoursOnSameLine": "Visa öppettider på evenemangsraden" } }, "calendar": { diff --git a/src/style.ts b/src/style.ts index f3b330dc..849fc6c5 100644 --- a/src/style.ts +++ b/src/style.ts @@ -1,176 +1,159 @@ import { css, CSSResultGroup } from 'lit'; export const styles: CSSResultGroup = css` - .cal-card { - cursor: default; - padding: 16px; - height: var(--card-height); - overflow: auto; - } - - - .header { - display: flex; - flex-direction: row; - justify-content: space-between; - vertical-align: middle; - align-items: center; - margin: 0 8px 0 2px; - } - - .header-name { - font-family: var(--paper-font-headline_-_font-family); - -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); - font-size: var(--paper-font-headline_-_font-size); - font-weight: var(--paper-font-headline_-_font-weight); - letter-spacing: var(--paper-font-headline_-_letter-spacing); - line-height: var(--paper-font-headline_-_line-height); - text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering); - opacity: var(--dark-primary-opacity); - padding: 4px 8px 12px 0px; - float: left; - } - - .header-date { - font-size: var(--paper-font-headline_-_font-size); - font-size: 1.3rem; - font-weight: 400; - color: var(--primary-text-color); - padding: 4px 8px 12px 0px; - line-height: var(--paper-font-headline_-_line-height); - float: right; - } - - .header-name.compact, .header.compact, .header-date.compact{ - font-size: 1rem; - padding: 1px !important; - } - - - .daywrap { - padding: 2px 0 4px 0; - border-top: 1px solid; - } - - .single-event-container { - display: grid; - grid-template-columns: 0.5fr 2fr; - grid-gap: 10px; - } - .hide-date { - grid-template-columns: 0 1fr !important; - } - - .event-left, .event-right{ - grid-row:1; - - } - - .event-left { - grid-column: 1; - justify-content: center; - color: var(--primary-text-color); - display: flex; - flex-direction: row; - } - - .event-date-day, - .event-date-month, - .event-date-week-day { - margin-right: 4px; - } - - .event-right { - grid-column: 2; - color: var(--primary-text-color); - } - - .compact { - padding: 1px 1px 1px 1px; - vertical-align: top; - } - - .current-day { - } - - .week-number{ - color: var(--primary-color); - -webkit-border-radius: 5px; - border-radius: 5px; - border: 2px solid; - padding: 0 4px; - margin: 5px 0; - line-height: 16px; - width: 100%; - text-align: center; - } - - .daywrap > td { - padding-top: 8px; - } - - .event-description { - display: flex; - justify-content: space-between; - padding: 0px 5px 0 5px; - color: var(--description-color); - font-size: var(--description-size); - overflow-wrap: anywhere; - user-select: text; - } - .hidden-events { - color: var(--primary-text-color); - } - - .hours { - color: var(--time-color); - font-size: var(--time-size) !important; - float: left; - } - - .relative-time { - color: var(--time-color); - font-size: var(--time-size) !important; - float: right; - padding-left: 5px; - } - - .event-main { - flex-direction: row nowrap; - display: inline-block; - vertical-align: top; - } - - .event-title { - user-select: text; - } - - .event-title.running { - user-select: text; - } - - .event-location { - text-align: right; - display: inline-block; - vertical-align: top; - user-select: text; - overflow-wrap: anywhere; - } - - .event-location-icon { - --mdc-icon-size: 15px; - color: var(--location-icon-color); - height: 15px; - width: 15px; - margin-top: -2px; - } - - .location-link { - text-decoration: none; - color: var(--accent-color); - font-size: var(--location-link-size); - user-select: text; - } + .cal-card { + cursor: default; + padding: 16px; + height: var(--card-height); + overflow: auto; + } + +/* START HEADER */ + .header { + display: flex; + flex-direction: row; + justify-content: space-between; + vertical-align: middle; + align-items: center; + margin: 0 8px 0 2px; + } + .header-name { + font-family: var(--paper-font-headline_-_font-family); + -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); + font-size: var(--paper-font-headline_-_font-size); + font-weight: var(--paper-font-headline_-_font-weight); + letter-spacing: var(--paper-font-headline_-_letter-spacing); + line-height: var(--paper-font-headline_-_line-height); + text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering); + opacity: var(--dark-primary-opacity); + padding: 4px 8px 12px 0px; + float: left; + } + .header-date { + font-size: var(--paper-font-headline_-_font-size); + font-size: 1.3rem; + font-weight: 400; + color: var(--primary-text-color); + padding: 4px 8px 12px 0px; + line-height: var(--paper-font-headline_-_line-height); + float: right; + } + .header-name.compact, .header.compact, .header-date.compact{ + font-size: 1rem; + padding: 1px !important; + } +/* END HEADER */ + +/* START EVENT MODE */ + .single-event-container { + display: grid; + grid-template-columns: 0.5fr 2fr; + grid-gap: 10px; + } + .event-left, .event-right{ + grid-row:1; + } + .event-left { + grid-column: 1; + justify-content: center; + color: var(--primary-text-color); + display: flex; + flex-direction: row; + } + .event-date-day, + .event-date-month, + .event-date-week-day { + margin-right: 4px; + } + .current-day { + } + .week-number{ + color: var(--primary-color); + -webkit-border-radius: 5px; + border-radius: 5px; + border: 2px solid; + padding: 0 4px; + margin: 5px 0; + line-height: 16px; + width: 100%; + text-align: center; + } + .event-right { + grid-column: 2; + color: var(--primary-text-color); + display: flex; + flex-direction: column; + justify-content: space-between; + } + .event-right-top, .event-right-bottom { + display: flex; + flex-direction: row; + justify-content: space-between; + } + .event-title { + user-select: text; + } + .event-title.running { + user-select: text; + } + .event-location { + text-align: right; + display: inline-block; + vertical-align: top; + user-select: text; + overflow-wrap: anywhere; + } + .event-location-icon { + --mdc-icon-size: 15px; + color: var(--location-icon-color); + height: 15px; + width: 15px; + margin-top: -2px; + } + .location-link { + text-decoration: none; + color: var(--accent-color); + font-size: var(--location-link-size); + user-select: text; + } + .hours { + color: var(--time-color); + font-size: var(--time-size) !important; + float: left; + } + .relative-time { + color: var(--time-color); + font-size: var(--time-size) !important; + float: right; + padding-left: 5px; + } + .event-description { + display: flex; + justify-content: space-between; + padding: 0px 5px 0 5px; + color: var(--description-color); + font-size: var(--description-size); + overflow-wrap: anywhere; + user-select: text; + } + .hidden-events { + color: var(--primary-text-color); + } + .daywrap { + padding: 2px 0 4px 0; + border-top: 1px solid; + } + .daywrap > td { + padding-top: 8px; + } + .hide-date { + grid-template-columns: 0 1fr !important; + } + .compact { + padding: 1px 1px 1px 1px; + vertical-align: top; + } +/* END EVENT MODE */ hr.event { color: var(--event-bar-color);