diff --git a/src/App.scss b/src/App.scss index 7764edc..4379496 100644 --- a/src/App.scss +++ b/src/App.scss @@ -132,6 +132,62 @@ font-size: 1.25em; padding: 0.5em; } + + &_badges { + position: absolute; + top: 0; + right: 0; + + .badge { + display: flex; + align-items: center; + justify-content: center; + + font-weight: bold; + padding: 3px 10px; + margin: 0.5em 0; + + span { + margin-left: 0.5em; + } + } + + img { + width: 1.3em; + } + + + @media only screen and (max-width: 850px) { + // display: flex; + // top: 100%; + // right: 1em; + + left: 0; + right: auto; + bottom: 0; + top: auto; + + + .badge { + // margin: 0 0.25em; + + span { + display: none; + } + } + } + } +} + +.badge.paypal { + background-color: white; + color: black; +} + +.badge.discord { + background-color: black; + color: white; + font-size: 0.9em; } // COUNTER diff --git a/src/App.vue b/src/App.vue index 1328e8d..ae81425 100644 --- a/src/App.vue +++ b/src/App.vue @@ -47,7 +47,7 @@
{{ currentRegion.value }} - + icon dispatcher {{ dispatcherCount }} @@ -64,6 +64,20 @@ / {{ $t('app.journal') }} + + + + icon paypal + PAYPAL + + + + icon discord + STACJOWNIK + + +
@@ -151,6 +165,8 @@ export default defineComponent({ en: require('@/assets/icon-en.jpg'), pl: require('@/assets/icon-pl.svg'), error: require('@/assets/icon-error.svg'), + paypal: require('@/assets/icon-paypal.svg'), + discord: require('@/assets/icon-discord.png'), }, }), diff --git a/src/assets/icon-discord.png b/src/assets/icon-discord.png new file mode 100644 index 0000000..0ec3dca Binary files /dev/null and b/src/assets/icon-discord.png differ diff --git a/src/components/SceneryView/SceneryHistory.vue b/src/components/SceneryView/SceneryHistory.vue index aad4f58..2d483e6 100644 --- a/src/components/SceneryView/SceneryHistory.vue +++ b/src/components/SceneryView/SceneryHistory.vue @@ -1,6 +1,9 @@