diff --git a/README.md b/README.md index ee1464a..5fc9cbe 100644 --- a/README.md +++ b/README.md @@ -26,8 +26,8 @@ $ web-ext build -n _usr_space-X.Y.zip ``` ## Credits -Used icons from FontAwesome -https://fontawesome.com/license +Used icons from Bootstrap +https://github.com/twbs/icons/blob/main/LICENSE.md ## License MIT diff --git a/config.js b/config.js index 7aa1187..2202548 100644 --- a/config.js +++ b/config.js @@ -6,26 +6,18 @@ window.Config = { quickLinks: [ { url: 'https://www.usrspace.at/', - img: 'icons/font-awesome/home-solid.svg', - alt: 'Home', text: 'Homepage' }, { url: 'https://wiki.usrspace.at/', - img: 'icons/font-awesome/wikipedia-w-brands.svg', - alt: 'Wiki', text: 'Wiki' }, { url: 'https://gitea.usrspace.at/', - img: 'icons/gitea-brands.svg', - alt: 'Gitea', text: 'Gitea' }, { url: 'https://cloud.usrspace.at/', - img: 'icons/font-awesome/cloud-solid.svg', - alt: 'Cloud', text: 'Nextcloud' } ] diff --git a/icons/font-awesome/clock-regular.svg b/icons/font-awesome/clock-regular.svg deleted file mode 100644 index 6e75eee..0000000 --- a/icons/font-awesome/clock-regular.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/icons/font-awesome/cloud-solid.svg b/icons/font-awesome/cloud-solid.svg deleted file mode 100644 index 4397aac..0000000 --- a/icons/font-awesome/cloud-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/icons/font-awesome/home-solid.svg b/icons/font-awesome/home-solid.svg deleted file mode 100644 index 03ed5cf..0000000 --- a/icons/font-awesome/home-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/icons/font-awesome/lock-open-solid.svg b/icons/font-awesome/lock-open-solid.svg deleted file mode 100644 index 90756e8..0000000 --- a/icons/font-awesome/lock-open-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/icons/font-awesome/lock-solid.svg b/icons/font-awesome/lock-solid.svg deleted file mode 100644 index a30c315..0000000 --- a/icons/font-awesome/lock-solid.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/icons/font-awesome/wikipedia-w-brands.svg b/icons/font-awesome/wikipedia-w-brands.svg deleted file mode 100644 index e177eff..0000000 --- a/icons/font-awesome/wikipedia-w-brands.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/icons/gitea-brands.svg b/icons/gitea-brands.svg deleted file mode 100644 index 73fa4bd..0000000 --- a/icons/gitea-brands.svg +++ /dev/null @@ -1,94 +0,0 @@ - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - diff --git a/popup/font/Nunito-Italic.ttf b/popup/font/Nunito-Italic.ttf new file mode 100644 index 0000000..871a9dd Binary files /dev/null and b/popup/font/Nunito-Italic.ttf differ diff --git a/popup/index.css b/popup/index.css index 02a0ca6..504de36 100644 --- a/popup/index.css +++ b/popup/index.css @@ -10,80 +10,84 @@ font-weight: bold; src: url('font/Nunito-Bold.ttf') format('truetype'); } +@font-face { + font-family: 'Nunito Sans'; + font-style: italic; + font-weight: normal; + src: url('font/Nunito-Italic.ttf') format('truetype'); +} :root { --light-blue: #2AA1BF; --dark-blue: #095C81; - --light-color: #333; - --dark-color: #CCC; - --light-background: #FFF; - --dark-background: #111; + --light-color: #0C0C0C; + --dark-color: #FFFFFF; + --light-background: #F9F9F9; + --dark-background: #4A4A4A; --light-code-background: #EBEBEB; - --dark-code-background: #333; + --dark-code-background: #383838; } body { width: 360px; + padding: 6px 12px; color: var(--light-color); background-color: var(--light-background); font-family: 'Nunito Sans'; } -/* @media (prefers-color-scheme: dark) { +@media (prefers-color-scheme: dark) { body { color: var(--dark-color); background-color: var(--dark-background); } -} */ +} +section.no-padding { + margin: 0 -12px -6px; +} h2 { - margin: 12px 8px 8px; + margin: 6px 0 4px; } summary { - margin: 12px 8px 8px; + margin: 6px 12px 6px; } summary > h2 { margin: 0; display: inline-block; } +time { + font-style: italic; +} +svg { + vertical-align: text-bottom; +} +.panel-section-list { + margin: 0 -12px; +} .panel-list-item > .icon { text-align: center; width: 23px; margin-right: 4px; } -.panel-list-item > .icon > img { - vertical-align: text-bottom; -} -#state { - margin: 0 8px; -} -#state > img { - vertical-align: text-bottom; - margin-right: 4px; -} - -#calendar { - margin: 0 8px; -} -#calendar > div > img { - vertical-align: text-bottom; +#calendar > div > svg, #state > svg { margin-right: 4px; } #space-api { margin: 0; padding: 0 8px; - height: 240px; + height: 122px; overflow-x: hidden; overflow-y: scroll; background-color: var(--light-code-background); } -/* @media (prefers-color-scheme: dark) { +@media (prefers-color-scheme: dark) { #space-api { background-color: var(--dark-code-background); } -} */ +} #space-api code { font-family: monospace; font-size: 10px; diff --git a/popup/index.html b/popup/index.html index 2de4255..2d9dd3b 100644 --- a/popup/index.html +++ b/popup/index.html @@ -16,34 +16,51 @@

Links

-
-
-
Home
+
    +
  • +
    + + + + +
    Homepage
    -
-
-
Wiki
+ +
  • +
    + + + +
    Wiki
    -
    • -
    -
    Gitea
    + +
  • +
    + + + +
    Gitea
    -
    • -
    -
    Cloud
    + +
  • +
    + + + +
    Nextcloud
    -
    • -
    + +

    Nächster Termin

    loading...
    -
    +

    SpaceApi JSON

     
    loading...
    diff --git a/popup/index.js b/popup/index.js index 207e561..82de786 100644 --- a/popup/index.js +++ b/popup/index.js @@ -1,3 +1,22 @@ +const calendarSVG = ` + + + + +`; +const doorClosedSVG = ` + + + + +`; +const doorOpenSVG = ` + + + + +`; + async function linkElementClickListener(event) { try { const tab = await browser.tabs.create({url: event.currentTarget.dataset.url}); @@ -42,7 +61,7 @@ function updateNextEvent(nextEvents) { nextEventDateEvents.forEach((nextEventDateEvent) => { const divElement = document.createElement('div'); - divElement.innerHTML = 'Clock'; + divElement.innerHTML = calendarSVG; const beginDate = new Date(nextEventDateEvent.begin); const strongElement = document.createElement('strong'); const timeElement = document.createElement('time'); @@ -50,9 +69,7 @@ function updateNextEvent(nextEvents) { timeElement.datetime = beginDate.toISOString(); const dateNode = document.createTextNode(beginDate.toLocaleString([], {dateStyle: "medium", timeStyle: "short"})); // divElement.innerText = ''; - divElement.append(strongElement); - divElement.append(document.createTextNode(' ')); - divElement.append(timeElement); + divElement.append(strongElement, ' ', timeElement); timeElement.append(dateNode); if (nextEventDateEvent.location) { const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`); @@ -76,8 +93,8 @@ function updateState(spaceApi) { const since = new Date(spaceApi.state.lastchange * 1000); const sinceStr = ` seit `; if (spaceApi.state.open) { - stateElement.innerHTML = `OffenOffen ${sinceStr}`; + stateElement.innerHTML = `${doorOpenSVG}Offen ${sinceStr}`; } else { - stateElement.innerHTML = `GeschlossenGeschlossen ${sinceStr}`; + stateElement.innerHTML = `${doorClosedSVG}Geschlossen ${sinceStr}`; } }