From fe4925acee14ead668a52f029902d5a70813faf0 Mon Sep 17 00:00:00 2001 From: Matej Voboril Date: Sat, 23 Mar 2024 13:37:11 -0500 Subject: [PATCH 1/2] fix(#1180): autoprogress toggle fix: news image won't scale enh: scaling columns and the timer panel at different breakpoints --- components/HubPanelWrap.jsx | 2 +- components/panels/AggregatedTimePanel.jsx | 43 +- components/panels/NewsPanel.vue | 43 +- package-lock.json | 3953 ++------------------- package.json | 2 +- 5 files changed, 331 insertions(+), 3712 deletions(-) diff --git a/components/HubPanelWrap.jsx b/components/HubPanelWrap.jsx index 5f3a6673e..a1168d35a 100644 --- a/components/HubPanelWrap.jsx +++ b/components/HubPanelWrap.jsx @@ -8,7 +8,7 @@ export default { }, render() { return ( - +

{this.title}

{this.$slots.default} diff --git a/components/panels/AggregatedTimePanel.jsx b/components/panels/AggregatedTimePanel.jsx index 8cfd327ff..ef7ea0493 100644 --- a/components/panels/AggregatedTimePanel.jsx +++ b/components/panels/AggregatedTimePanel.jsx @@ -33,6 +33,13 @@ const fontStyle = { left: '5px', }; +const TimerPanel = { + name: 'TimerPanel', + render() { + return
{this.$slots.default}
; + }, +}; + const EarthTimer = { props: ['earthCycle'], computed: { @@ -48,7 +55,7 @@ const EarthTimer = { }, render() { return ( -
+ {this.$t(`location.earth`)}
@@ -64,7 +71,7 @@ const EarthTimer = { interval={1000} pullright={false} /> -
+ ); }, }; @@ -83,7 +90,7 @@ const CetusTimer = { }, render() { return ( -
+ {this.$t(`location.cetus`)}
@@ -99,7 +106,7 @@ const CetusTimer = { interval={1000} pullright={false} /> -
+ ); }, }; @@ -118,7 +125,7 @@ const VallisTimer = { }, render() { return ( -
+ {this.$t(`location.vallis`)}
@@ -135,7 +142,7 @@ const VallisTimer = { interval={1000} pullright={false} /> -
+ ); }, }; @@ -151,7 +158,7 @@ const CambionTimer = { }, render() { return ( -
+ {this.$t(`location.cambion`)}
@@ -167,7 +174,7 @@ const CambionTimer = { interval={1000} pullright={false} /> -
+ ); }, }; @@ -182,7 +189,7 @@ const ResetTimer = { }, render() { return ( -
+ {this.$t('reset.tooltip')} @@ -190,7 +197,7 @@ const ResetTimer = {
-
+ ); }, }; @@ -203,7 +210,7 @@ const AnomalyTimer = { }, render() { return ( -
+ {this.$t('sentientoutpost.header')} {this.sentientOutposts.mission.node}
{this.sentientOutposts.mission.type} -
+ ); }, }; @@ -224,7 +231,7 @@ const SteelPathTimer = { props: ['steelPath'], render() { return ( -
+ {this.$t('steelPath.header')} -
+ ); }, }; @@ -264,7 +271,7 @@ const ArbitrationTimer = { }, render() { return ( -
+ {this.$t('arbitration.header')}
@@ -277,7 +284,7 @@ const ArbitrationTimer = { interval={1000} pullright={false} /> -
+ ); }, }; @@ -293,7 +300,7 @@ const ZarimanTimer = { }, render() { return ( -
+ {this.$t(`location.zariman`)}
@@ -309,7 +316,7 @@ const ZarimanTimer = { interval={1000} pullright={false} /> -
+ ); }, }; diff --git a/components/panels/NewsPanel.vue b/components/panels/NewsPanel.vue index 96cc48d84..cac595949 100644 --- a/components/panels/NewsPanel.vue +++ b/components/panels/NewsPanel.vue @@ -56,16 +56,33 @@ import relativeTime from 'dayjs/plugin/relativeTime'; import updateLocale from 'dayjs/plugin/updateLocale'; import { mapGetters } from 'vuex'; import HubPanelWrap from '@/components/HubPanelWrap.jsx'; + +import { optimize, cdn } from '@/services/utilities'; + dayjs.extend(relativeTime); dayjs.extend(updateLocale); -const cdnUrl = 'https://cdn.warframestat.us'; -const cdnOpts = ['o_webp', 'rs_404x110']; +const newsImg = (url) => optimize(url, '404x110', 'scale'); export default { name: 'NewsPanel', components: { HubPanelWrap }, - props: ['news'], + props: { + news: { + type: Array, + required: true, + }, + }, + data() { + return { + styleObject: { + display: 'inline', + }, + activeElemIndex: 0, + interval: {}, + hover: null, + }; + }, computed: { headertext() { return this.$t('news.header'); @@ -79,8 +96,7 @@ export default { }, set() { this.hover = null; - this.cycle = !this.cycle; - this.$store.commit('worldstate/autoProgressNews', [this.cycle]); + this.$store.commit('worldstate/autoProgressNews', [!this.cycle]); }, }, ...mapGetters('worldstate', ['componentState', 'locale']), @@ -131,7 +147,12 @@ export default { this.increment(); }, getImgSrc: (url) => { - return `${cdnUrl}/${cdnOpts.join(',')}/${url}`; + switch (url) { + case 'https://i.imgur.com/CNrsc7V.png': + return newsImg(cdn('img/news-placeholder.png')); + default: + return newsImg(url); + } }, title: function (newsitem) { if (newsitem.startDate && newsitem.endDate) { @@ -159,16 +180,6 @@ export default { } }, }, - data() { - return { - styleObject: { - display: 'inline', - }, - activeElemIndex: 0, - interval: {}, - hover: null, - }; - }, };