fix(#1180): autoprogress toggle (#1191)

fix: news image won't scale
enh: scaling columns and the timer panel at different breakpoints

Author: TobiTenno

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

components/HubPanelWrap.jsx

@@ -8,7 +8,7 @@ export default {
   },
   render() {
     return (
-      <b-col md={4} data-packer-item="true" class="panel-header binpacker-item mt-2">
+      <b-col sm={12} lg={6} xl={4} data-packer-item="true" class="panel-header binpacker-item mt-2">
         <h4 className="text-center header-panel">{this.title}</h4>
         {this.$slots.default}
       </b-col>

components/panels/AggregatedTimePanel.jsx

@@ -33,6 +33,13 @@ const fontStyle = {
   left: '5px',
 };
 
+const TimerPanel = {
+  name: 'TimerPanel',
+  render() {
+    return <div class="col-xs-3 col-sm-4 col-lg-6 my-3">{this.$slots.default}</div>;
+  },
+};
+
 const EarthTimer = {
   props: ['earthCycle'],
   computed: {
@@ -48,7 +55,7 @@ const EarthTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <span style={textStyle}>
           {this.$t(`location.earth`)}
           <br />
@@ -64,7 +71,7 @@ const EarthTimer = {
           interval={1000}
           pullright={false}
         />
-      </div>
+      </TimerPanel>
     );
   },
 };
@@ -83,7 +90,7 @@ const CetusTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <span style={textStyle}>
           {this.$t(`location.cetus`)}
           <br />
@@ -99,7 +106,7 @@ const CetusTimer = {
           interval={1000}
           pullright={false}
         />
-      </div>
+      </TimerPanel>
     );
   },
 };
@@ -118,7 +125,7 @@ const VallisTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <span style={textStyle}>
           {this.$t(`location.vallis`)}
           <br />
@@ -135,7 +142,7 @@ const VallisTimer = {
           interval={1000}
           pullright={false}
         />
-      </div>
+      </TimerPanel>
     );
   },
 };
@@ -151,7 +158,7 @@ const CambionTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <span style={textStyle}>
           {this.$t(`location.cambion`)}
           <br />
@@ -167,7 +174,7 @@ const CambionTimer = {
           interval={1000}
           pullright={false}
         />
-      </div>
+      </TimerPanel>
     );
   },
 };
@@ -182,15 +189,15 @@ const ResetTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <b-tooltip placement="auto" class="text-center" target="daily-reset">
           {this.$t('reset.tooltip')}
         </b-tooltip>
         <span style={textStyle}>{this.$t('reset.header')}</span>
         <i class="fas fa-info-circle fa-sm pl-1" id="daily-reset" style={textStyle} />
         <br />
         <TimeBadge starttime={this.now} endtime={this.nextDay} interval={1000} pullright={false} />
-      </div>
+      </TimerPanel>
     );
   },
 };
@@ -203,7 +210,7 @@ const AnomalyTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3 text-center">
+      <TimerPanel class="text-center">
         <span style={textStyle}>{this.$t('sentientoutpost.header')}</span>
         <i
           class={'icon-factions-sentient fa-lg'}
@@ -216,15 +223,15 @@ const AnomalyTimer = {
         <b>{this.sentientOutposts.mission.node}</b>
         <br />
         {this.sentientOutposts.mission.type}
-      </div>
+      </TimerPanel>
     );
   },
 };
 const SteelPathTimer = {
   props: ['steelPath'],
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <span style={textStyle}>{this.$t('steelPath.header')}</span>
         <HubImg
           src={steelPath}
@@ -251,7 +258,7 @@ const SteelPathTimer = {
           interval={1000}
           pullright={false}
         />
-      </div>
+      </TimerPanel>
     );
   },
 };
@@ -264,7 +271,7 @@ const ArbitrationTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <span style={textStyle}>{this.$t('arbitration.header')}</span>
         <i class={`icon-factions-${this.enemy}`} style={{ ...fontStyle }} />
         <br />
@@ -277,7 +284,7 @@ const ArbitrationTimer = {
           interval={1000}
           pullright={false}
         />
-      </div>
+      </TimerPanel>
     );
   },
 };
@@ -293,7 +300,7 @@ const ZarimanTimer = {
   },
   render() {
     return (
-      <div class="col-sm-3 my-3">
+      <TimerPanel>
         <span style={textStyle}>
           {this.$t(`location.zariman`)}
           <br />
@@ -309,7 +316,7 @@ const ZarimanTimer = {
           interval={1000}
           pullright={false}
         />
-      </div>
+      </TimerPanel>
     );
   },
 };

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,
-    };
-  },
 };
 </script>
 <style scoped>