Responsive embeds &cursor pointers in some places.

src/components/app/FriendsList.vue

@@ -135,6 +135,7 @@ export default {
   margin-right: 1px;
   border-radius: 5px;
   transition: 0.3s;
+  cursor: pointer;
 }
 .tab:hover{
   background: rgba(255, 255, 255, 0.096);

src/components/app/MessagePanel.vue

@@ -497,6 +497,7 @@ export default {
         2500
       );
     };
+    this.scrollDown(true);
 
     bus.$on("newMessage", this.hideTypingStatus);
     bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion);

src/components/app/MessageTemplate.vue

@@ -163,16 +163,22 @@ export default {
       return { width: srcWidth*ratio, height: srcHeight*ratio };
     },
     imageSize() {
+      const files = this.$props.files;
+      if (!files || files.length === 0 || !files[0].dimensions)
+        return undefined;
+        
       const messageLog = document.querySelector('.scroll');
       const w = messageLog.offsetWidth;
       const h = messageLog.offsetHeight;
       
-      const minWidth = w / 2;
+      let minWidth = w / 4;
-      const minHeight = h / 2;
+      let minHeight = h / 4;
+      if (w <= 800) {
+        minWidth = w / 1.7;
+        minHeight = h / 1.7;
+      }
+
 
-      const files = this.$props.files;
-      if (!files || files.length === 0 || !files[0].dimensions)
-        return undefined;
       const dimensions = this.$props.files[0].dimensions
       const srcWidth = dimensions.width;
       const srcHeight = dimensions.height;

src/components/app/Popouts/Popouts/imageLargePreview.vue

@@ -54,7 +54,6 @@ export default {
 }
 img {
   margin: auto;
-  border: solid 1px white;
   max-height: 100%;
   max-width: 100%;
   width: auto;

src/components/app/Popouts/Popouts/userInformationPopout.vue

@@ -171,9 +171,10 @@ export default {
   bottom: 0;
   z-index: 999;
   display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .box {
-  margin: auto;
   max-height: 500px;
   width: 350px;
   color: white;

src/components/app/messageEmbedTemplate.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="embed" :class="{article: embed.type === 'article' || embed.type === 'video.other', website: embed.type === 'website'}">
+  <div class="embed" ref="embed" :class="{article: embed.type === 'article' || embed.type === 'video.other', website: embed.type === 'website'}">
     <div class="right">
-      <div class="image" v-if="embed.image" @click="embedImgClicked"><img :src="`//images.weserv.nl/?url=${embed.image}`" alt=""></div>
+      <div class="image" v-if="imageURL" @click="embedImgClicked"><img ref="image" :src="`//images.weserv.nl/?url=${imageURL }`" alt=""></div>
     </div>
     <div class="left">
       <div class="title" v-if="embed.url"><a target=”_blank” :href="embed.url">{{embed.title}}</a></div>
@@ -12,12 +12,75 @@
 </template>
 
 <script>
+import windowProperties from '@/utils/windowProperties';
+
 export default {
   props: ["embed"],
   methods: {
     embedImgClicked() {
-      this.$store.dispatch("setImagePreviewURL", "//images.weserv.nl/?url=" + this.embed.image);
+      this.$store.dispatch("setImagePreviewURL", "//images.weserv.nl/?url=" + this.imageURL);
     },
+    clamp(num, min, max) {
+      return num <= min ? min : num >= max ? max : num;
+    },
+    calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {
+      let ratio = Math.min(maxWidth / srcWidth, maxHeight / srcHeight);
+      return { width: srcWidth*ratio, height: srcHeight*ratio };
+    },
+    articleSize() {
+      const image = this.embed.image;
+      if (!image || !image.dimensions )
+        return undefined;
+
+       if (this.embed.type !== "article" && this.embed.type !== "video.other") 
+        return undefined;
+
+      const embed = this.$refs['embed'];
+      const messageLog = document.querySelector('.scroll');
+      const w = messageLog.offsetWidth;
+      const h = messageLog.offsetHeight;
+
+      const minWidth = this.clamp(w / 2, 0, 200);
+      const minHeight = h / 2;
+
+      const dimensions = image.dimensions
+      const srcWidth = dimensions.width;
+      const srcHeight = dimensions.height;
+
+
+
+      const newDimentions = this.calculateAspectRatioFit(srcWidth, srcHeight, minWidth, minHeight);
+
+      const imageTag = this.$refs['image'];
+
+      //embed.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px"
+      
+      imageTag.style.width = this.clamp(newDimentions.width, 0, srcWidth) + "px"
+      imageTag.style.height = this.clamp(newDimentions.height, 0, srcHeight) + "px"
+    },
+    onResize(dimensions) {
+      this.articleSize();
+    }
+  },
+  mounted() {
+    this.articleSize();
+  },
+  watch: {
+    getWindowWidth(dimensions) {
+      this.onResize(dimensions)
+    }
+  },
+  computed: {
+    getWindowWidth() { 
+      return {width: windowProperties.resizeWidth, height: windowProperties.resizeHeight};
+    },
+    imageURL() {
+      const image = this.embed.image;
+      if (!image) return undefined;
+      if (typeof image === 'string') return image;
+      if (image.url) return image.url;
+      return undefined;
+    }
   }
 }
 </script>
@@ -29,13 +92,13 @@ export default {
   padding: 5px;
   display: flex;
   max-width: 500px;
-  min-width: 200px;
   align-self: flex-start;
   margin-top: 5px;
   text-overflow: ellipsis;
+  overflow: hidden;
 }
 .embed.article {
-  flex-direction: column;
+
 }
 .embed.website {
   height: 100px;
@@ -50,17 +113,17 @@ export default {
 .embed.article .image {
   margin-right: 0;
 }
-
 .article .left {
-  order: 1;
+  margin-left: 5px;
 }
 .article .right {
-  order: 2;
+  flex-direction: column;
 }
 .article .image img {
   width: 100%;
-  height: auto;
+  height: 100%;
   margin-top: 5px;
+  align-self: center;
 }
 
 .right {
@@ -69,6 +132,10 @@ export default {
 
 .title {
   font-size: 15px;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 .description {
   font-size: 14px;
@@ -77,6 +144,11 @@ export default {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
+
+      word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
 }
 .image img {
   width: auto;
@@ -88,6 +160,22 @@ export default {
   display: flex;
   margin-right: 10px;
   align-self: center;
+  border-radius: 5px;
+  cursor: pointer;
+  position: relative;
+}
+.image:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0);
+  transition: 0.3s;
+}
+.image:hover:after {
+  background: rgba(0, 0, 0, 0.384);
 }
 a {
   color: rgb(86, 159, 253);
@@ -96,5 +184,11 @@ a {
 a:hover {
   text-decoration: underline;
 }
+
+@media (max-width: 955px) {
+  .article {
+    flex-direction: column;
+  }
+}
 </style>
 

src/components/app/relationships/FriendsTemplate.vue

@@ -124,6 +124,7 @@ export default {
   border-radius: 5px;
   position: relative;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .notifyAnimation{

src/utils/changelog.js

@@ -23,6 +23,7 @@ const config = [
     fix: [
       "Fixed a bug where messages would appear blurry sometimes.",
       "Fixed a bug where scrolling would be inverted in some devices.",
+      "Responsive images and embeds."
     ]
   },
   {

src/views/App.vue

@@ -216,6 +216,12 @@ export default {
   animation-iteration-count: infinite;
   animation-fill-mode: forwards;
 }
+.box {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
 @keyframes notifyAnime {
   0%{
     background: rgba(121, 3, 3, 0.541);
@@ -301,6 +307,7 @@ export default {
   transition: 0.3s;
   -webkit-app-region: no-drag;
   margin-top: 5px;
+  cursor: pointer;
 }
 .tab.selected {
   background: rgba(71, 71, 71, 0.637);
@@ -348,12 +355,7 @@ export default {
 textarea {
   font-family: "Roboto", sans-serif;
 }
-.box {
+
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
 .background-image {
   background: url(./../assets/background.jpg);
   position: fixed;