From ac4e57433e745161ee34153769754375e3873c87 Mon Sep 17 00:00:00 2001 From: Martin Donnelly Date: Sun, 16 Aug 2020 20:11:32 +0100 Subject: [PATCH 1/2] Making some progress --- src/App.svelte | 2 +- src/components/Header.svelte | 6 ++--- src/components/SettingsInput.svelte | 21 ++++++++++++--- src/components/SettingsListItem.svelte | 2 +- src/components/TimetableList.svelte | 19 +++++++------- src/components/TrainRoute.svelte | 8 +++--- src/components/Twitter.svelte | 13 +++++----- src/components/TwitterSettings.svelte | 2 +- src/pages/Twitter.svelte | 4 +-- src/store/store.js | 36 ++++++++++++++++++++++++++ 10 files changed, 83 insertions(+), 30 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index bd62c0b..f155df8 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -30,7 +30,7 @@ - + {#if searchResults.length > 0} {/if} diff --git a/src/components/SettingsListItem.svelte b/src/components/SettingsListItem.svelte index 499c665..99ea6b5 100644 --- a/src/components/SettingsListItem.svelte +++ b/src/components/SettingsListItem.svelte @@ -37,7 +37,7 @@
{item.startStation.name}
{item.destStation.name}
-
+
diff --git a/src/components/TimetableList.svelte b/src/components/TimetableList.svelte index 48dbecf..ed7df33 100644 --- a/src/components/TimetableList.svelte +++ b/src/components/TimetableList.svelte @@ -60,7 +60,7 @@
    {#each otherDetails.nrMessages as item} -
  • {item.msg} +
  • {item.msg} {#if item.link} {item.linkText} {/if} @@ -75,23 +75,24 @@ {#if list.length > 0} {#each list as item, i (item.serviceIdUrlSafe)} -
    -
    +
    +
    {item.location} - {item.carriageCount} + {item.carriageCount}
    {#if item.via} - {item.via} + + {item.via} {/if}
    -
    {item.time}
    +
    {item.time}
    {#if item.isCancelled} -
    {item.cancel}
    +
    {item.cancel}
    {:else} -
    {item.status}
    -
    {item.platform}
    +
    {item.status}
    +
    {item.platform}
    {/if}
    {/each} diff --git a/src/components/TrainRoute.svelte b/src/components/TrainRoute.svelte index 37480cf..874a7fc 100644 --- a/src/components/TrainRoute.svelte +++ b/src/components/TrainRoute.svelte @@ -97,7 +97,7 @@ align-items: center; padding: 0.7rem 0rem; z-index: 1; - width: 100%; + width: 98%; opacity: 0.9; margin-bottom: 0.4rem; border-bottom-color: #666666; @@ -144,12 +144,12 @@ -
    -
    +
    +
    {startStationName}
    {destStationName}
    -
    +
    {displayTime}
    diff --git a/src/components/Twitter.svelte b/src/components/Twitter.svelte index a5e9ae8..5edcc0b 100644 --- a/src/components/Twitter.svelte +++ b/src/components/Twitter.svelte @@ -32,24 +32,25 @@ .avatar { max-width: 48px; max-height: 48px; + object-fit: scale-down; border-radius: 0.1rem; } {#if tweet} -
    -
    +
    +
    @{tweet.user.screen_name}
    -
    {tweet.user.name}
    -
    @{tweet.user.screen_name}
    +
    {tweet.user.name}
    +
    @{tweet.user.screen_name}
    {#if inReply} -
    +
    Replying to @{tweet.in_reply_to_screen_name}
    {/if} @@ -59,6 +60,6 @@
    {tweet.created_at}
    -
    +
    {/if} diff --git a/src/components/TwitterSettings.svelte b/src/components/TwitterSettings.svelte index af86543..3fc11e8 100644 --- a/src/components/TwitterSettings.svelte +++ b/src/components/TwitterSettings.svelte @@ -30,7 +30,7 @@
    Twitter
    {#if mounted} -
    +
    {item.time}
    {#if item.isCancelled} -
    {item.cancel}
    +
    {item.cancel} +
    {:else}
    {item.status}
    {item.platform}
    diff --git a/src/css/global/_xlarge.scss b/src/css/global/_xlarge.scss new file mode 100644 index 0000000..8a1740b --- /dev/null +++ b/src/css/global/_xlarge.scss @@ -0,0 +1,7 @@ +@media (min-height: 900px) { + body{ + font-size: x-large; + } + +} + diff --git a/src/css/global/fixes.scss b/src/css/global/fixes.scss new file mode 100644 index 0000000..1b2b9fb --- /dev/null +++ b/src/css/global/fixes.scss @@ -0,0 +1,6 @@ +// #00ffa2 +// body > div > div > div:nth-child(2) > section > div.nrccAlert > ul > li > a + +.nrccAlert a { + color:#00ffa2; +} diff --git a/src/css/nord.css b/src/css/nord.css new file mode 100644 index 0000000..ec22ae0 --- /dev/null +++ b/src/css/nord.css @@ -0,0 +1,233 @@ +/* + * Copyright (c) 2016-present Arctic Ice Studio + * Copyright (c) 2016-present Sven Greb + * + * Project: Nord + * Version: 0.2.0 + * Repository: https://github.com/arcticicestudio/nord + * License: MIT + * References: + * https://www.w3.org/TR/css-variables + * https://www.w3.org/TR/selectors/#root-pseudo + * https://drafts.csswg.org/css-variables + * https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables + * http://warpspire.com/kss + * https://github.com/kss-node/kss-node + */ + +/* +An arctic, north-bluish color palette. +Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax +highlighting and UI. +It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful +ambiance. + +Styleguide Nord +*/ + +:root { + /* + Base component color of "Polar Night". + + Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. + + Markup: +
    + + Styleguide Nord - Polar Night + */ + --nord0: #2e3440; + + /* + Lighter shade color of the base component color. + + Used as a lighter background color for UI elements like status bars. + + Markup: +
    + + Styleguide Nord - Polar Night + */ + --nord1: #3b4252; + + /* + Lighter shade color of the base component color. + + Used as line highlighting in the editor. + In the UI scope it may be used as selection- and highlight color. + + Markup: +
    + + Styleguide Nord - Polar Night + */ + --nord2: #434c5e; + + /* + Lighter shade color of the base component color. + + Used for comments, invisibles, indent- and wrap guide marker. + In the UI scope used as pseudoclass color for disabled elements. + + Markup: +
    + + Styleguide Nord - Polar Night + */ + --nord3: #4c566a; + + /* + Base component color of "Snow Storm". + + Main color for text, variables, constants and attributes. + In the UI scope used as semi-light background depending on the theme shading design. + + Markup: +
    + + Styleguide Nord - Snow Storm + */ + --nord4: #d8dee9; + + /* + Lighter shade color of the base component color. + + Used as a lighter background color for UI elements like status bars. + Used as semi-light background depending on the theme shading design. + + Markup: +
    + + Styleguide Nord - Snow Storm + */ + --nord5: #e5e9f0; + + /* + Lighter shade color of the base component color. + + Used for punctuations, carets and structuring characters like curly- and square brackets. + In the UI scope used as background, selection- and highlight color depending on the theme shading design. + + Markup: +
    + + Styleguide Nord - Snow Storm + */ + --nord6: #eceff4; + + /* + Bluish core color. + + Used for classes, types and documentation tags. + + Markup: +
    + + Styleguide Nord - Frost + */ + --nord7: #8fbcbb; + + /* + Bluish core accent color. + + Represents the accent color of the color palette. + Main color for primary UI elements and methods/functions. + + Can be used for + - Markup quotes + - Markup link URLs + + Markup: +
    + + Styleguide Nord - Frost + */ + --nord8: #88c0d0; + + /* + Bluish core color. + + Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and + punctuations like (semi)colons,commas and braces. + + Markup: +
    + + Styleguide Nord - Frost + */ + --nord9: #81a1c1; + + /* + Bluish core color. + + Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). + + Markup: +
    + + Styleguide Nord - Frost + */ + --nord10: #5e81ac; + + /* + Colorful component color. + + Used for errors, git/diff deletion and linter marker. + + Markup: +
    + + Styleguide Nord - Aurora + */ + --nord11: #bf616a; + + /* + Colorful component color. + + Used for annotations. + + Markup: +
    + + Styleguide Nord - Aurora + */ + --nord12: #d08770; + + /* + Colorful component color. + + Used for escape characters, regular expressions and markup entities. + In the UI scope used for warnings and git/diff renamings. + + Markup: +
    + + Styleguide Nord - Aurora + */ + --nord13: #ebcb8b; + + /* + Colorful component color. + + Main color for strings and attribute values. + In the UI scope used for git/diff additions and success visualizations. + + Markup: +
    + + Styleguide Nord - Aurora + */ + --nord14: #a3be8c; + + /* + Colorful component color. + + Used for numbers. + + Markup: +
    + + Styleguide Nord - Aurora + */ + --nord15: #b48ead; +} diff --git a/src/css/nord.scss b/src/css/nord.scss new file mode 100644 index 0000000..488b8fa --- /dev/null +++ b/src/css/nord.scss @@ -0,0 +1,235 @@ +// Copyright (c) 2016-present Arctic Ice Studio +// Copyright (c) 2016-present Sven Greb + +// Project: Nord +// Version: 0.2.0 +// Repository: https://github.com/arcticicestudio/nord +// License: MIT +// References: +// http://sass-lang.com +// http://sassdoc.com + +//// +/// An arctic, north-bluish color palette. +/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax +/// highlighting and UI. +/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful +/// ambiance. +/// +/// @author Arctic Ice Studio +//// + +/// Base component color of "Polar Night". +/// +/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. +/// +/// @access public +/// @example scss - SCSS +/// /* For dark ambiance themes */ +/// .background { +/// background-color: $nord0; +/// } +/// /* For light ambiance themes */ +/// .text { +/// color: $nord0; +/// } +/// @group polarnight +/// @since 0.1.0 +$nord0: #2e3440; + +/// Lighter shade color of the base component color. +/// +/// Used as a lighter background color for UI elements like status bars. +/// +/// @access public +/// @group polarnight +/// @see $nord0 +/// @since 0.1.0 +$nord1: #3b4252; + +/// Lighter shade color of the base component color. +/// +/// Used as line highlighting in the editor. +/// In the UI scope it may be used as selection- and highlight color. +/// +/// @access public +/// @example scss - SCSS +/// /* Code Syntax Highlighting scope */ +/// .editor { +/// &.line { +/// background-color: $nord2; +/// } +/// } +/// +/// /* UI scope */ +/// button { +/// &:selected { +/// background-color: $nord2; +/// } +/// } +/// @group polarnight +/// @see $nord0 +/// @since 0.1.0 +$nord2: #434c5e; + +/// Lighter shade color of the base component color. +/// +/// Used for comments, invisibles, indent- and wrap guide marker. +/// In the UI scope used as pseudoclass color for disabled elements. +/// +/// @access public +/// @example scss - SCSS +/// /* Code Syntax Highlighting scope */ +/// .editor { +/// &.indent-guide, +/// &.wrap-guide { +/// &.marker { +/// color: $nord3; +/// } +/// } +/// } +/// .comment, +/// .invisible { +/// color: $nord3; +/// } +/// +/// /* UI scope */ +/// button { +/// &:disabled { +/// background-color: $nord3; +/// } +/// } +/// @group polarnight +/// @see $nord0 +/// @since 0.1.0 +$nord3: #4c566a; + +/// Base component color of "Snow Storm". +/// +/// Main color for text, variables, constants and attributes. +/// In the UI scope used as semi-light background depending on the theme shading design. +/// +/// @access public +/// @example scss - SCSS +/// /* For light ambiance themes */ +/// .background { +/// background-color: $nord4; +/// } +/// /* For dark ambiance themes */ +/// .text { +/// color: $nord4; +/// } +/// @group snowstorm +/// @since 0.1.0 +$nord4: #d8dee9; + +/// Lighter shade color of the base component color. +/// +/// Used as a lighter background color for UI elements like status bars. +/// Used as semi-light background depending on the theme shading design. +/// +/// @access public +/// @group snowstorm +/// @see $nord4 +/// @since 0.1.0 +$nord5: #e5e9f0; + +/// Lighter shade color of the base component color. +/// +/// Used for punctuations, carets and structuring characters like curly- and square brackets. +/// In the UI scope used as background, selection- and highlight color depending on the theme shading design. +/// +/// @access public +/// @group snowstorm +/// @see $nord4 +/// @since 0.1.0 +$nord6: #eceff4; + +/// Bluish core color. +/// +/// Used for classes, types and documentation tags. +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord7: #8fbcbb; + +/// Bluish core accent color. +/// +/// Represents the accent color of the color palette. +/// Main color for primary UI elements and methods/functions. +/// +/// Can be used for +/// - Markup quotes +/// - Markup link URLs +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord8: #88c0d0; + +/// Bluish core color. +/// +/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and +/// punctuations like (semi)colons,commas and braces. +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord9: #81a1c1; + +/// Bluish core color. +/// +/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). +/// +/// @access public +/// @group frost +/// @since 0.1.0 +$nord10: #5e81ac; + +/// Colorful component color. +/// +/// Used for errors, git/diff deletion and linter marker. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord11: #bf616a; + +/// Colorful component color. +/// +/// Used for annotations. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord12: #d08770; + +/// Colorful component color. +/// +/// Used for escape characters, regular expressions and markup entities. +/// In the UI scope used for warnings and git/diff renamings. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord13: #ebcb8b; + +/// Colorful component color. +/// +/// Main color for strings and attribute values. +/// In the UI scope used for git/diff additions and success visualizations. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord14: #a3be8c; + +/// Colorful component color. +/// +/// Used for numbers. +/// +/// @access public +/// @group aurora +/// @since 0.1.0 +$nord15: #b48ead;