img-api | Image Manipulation API server written in GoLang | Chat library

Vue.component('small-cards', {
  props: {
    pointObject: {
      type: Object,
      required: true
    },
    cardIndex: {
      type: Number,
      required: true,
      default: 0
    },
  },
  data: function() {
    return {
      selectedPointIndex: 6
    }
  },
  methods: {
    reportError(event) {
      console.log(`${event.name}: ${event.message}`);
    },
    handleLoad() {
      this.$emit('loaded-card', true);
    }
  },
  template: `
  
    
    
  
  `
});

Vue.component('small-cards-wrapper', {
  props: {
    items: {
      type: Array,
      required: true,
    },
    scrollToIndex: {
      type: Number,
      required: false
    }
  },
  methods: {
    isLoaded(x) {
      if (Number(x) === Number(this.scrollToIndex)) {
        this.$nextTick(() => {
          const element = document.getElementsByClassName(x.toString())
          const target = document.getElementById('point-panel')
          const iW = window.innerWidth
          const iH = window.innerHeight
          const myOffset = element[0].offsetLeft
          Quasar.utils.scroll.setHorizontalScrollPosition(target, myOffset, 0)
          this.$q.notify("Scroll Triggered!");        
        })
      }
    }
  },
  template: `
    
   
  
  `
})

new Vue({
  el: '#q-app',
  data: function() {
    return {
      selectedPointIndex: 6,
      picArray: ["https://images.takeshape.io/86ce9525-f5f2-4e97-81ba-54e8ce933da7/dev/144069dc-7390-4022-aa0f-abba022d3a2f/spec.jpg?auto=compress%2Cformat", "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/prescribed_burn_oregon.jpg?crop=0,120,5760,3600&wid=1640&hei=1025&scl=3.5121951219512195", "https://orig11.deviantart.net/1062/f/2015/315/9/6/abstract__7_by_thejsyve1-d9gciwk.jpg", "https://natureconservancy-h.assetsadobe.com/is/image/content/dam/tnc/nature/en/photos/Brown_County_Hills_Leonetti.jpg?crop=33,0,1192,656&wid=4000&hei=2200&scl=0.29818181818181816", "https://www.telegraph.co.uk/content/dam/Travel/galleries/travel/destinations/northamerica/usa/US%20national%20parks/AP84847745_Yosemite_General-xlarge.jpg", "https://dehayf5mhw1h7.cloudfront.net/wp-content/uploads/sites/183/2016/09/15173325/Brown_County_Indiana_Estados_Unidos_2012-10-14_DD_10.jpg", "https://s-media-cache-ak0.pinimg.com/originals/19/e9/58/19e9581dbdc756a2dbbb38ae39a3419c.jpg", "https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_960_720.jpg", "https://www.alwareness.org/wp-content/uploads/2018/10/Bomen-Bos.jpg", "https://www.campz.be/info/wp-content/uploads/header-pic-mountain.jpeg", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUzRyiSPfzeIogLgkY1P8ugrvzls23SMhOcJi7vmUfCe4r1nKa", "https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg", "https://farm6.staticflickr.com/5720/22076039308_4e2fc21c5f_o.jpg"]
    }
  },
  template: `
 
   Scroll now occurs on 'mount'
    
  
  `,
})

body {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 100px;
  min-height: 100vh;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.map-overlay {
  flex-flow: row nowrap;
  justify-content: flex-start;
  width: 100vw;
  height: 30vh;
  bottom: 0;
  left: 0;
  margin: 0;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  display: flex;
  position: fixed;
  background-color: rgba(255, 150, 150, 0.3);
  font: 'Abel', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #8e3433;
}

.scroll {
  overflow: auto;
}

.column {
  flex-direction: column;
}

.row,
.column,
.flex {
  display: flex;
  flex-wrap: wrap;
}

div {
  display: block;
}

html,
body,
#q-app {
  width: 100%;
  direction: ltr;
}

.mycard {
  flex: 1 1 auto;
  min-width: 47vw;
  margin: 3px 0 9px 2vw;
  justify-content: flex-end;
  border-radius: 2px;
  display: flex;
}