From 16792cbf4bd3ade1f5c01072655a42e842ebd425 Mon Sep 17 00:00:00 2001
From: supertiger <saawalkhn@googlemail.com>
Date: Fri, 8 Mar 2019 20:51:40 +0000
Subject: [PATCH] made a template for profile picture

---
 src/components/ProfilePictureTemplate.vue     |  27 ++++
 src/components/app/MessageTemplate.vue        |  19 +--
 src/components/app/MyMiniInformation.vue      |  13 +-
 .../app/SettingsPanels/MyProfile.vue          | 133 +++++++++---------
 src/components/app/uploadDialog.vue           |  30 ++++
 src/components/homePage/LoggedIn.vue          |  16 +--
 6 files changed, 143 insertions(+), 95 deletions(-)
 create mode 100644 src/components/ProfilePictureTemplate.vue

diff --git a/src/components/ProfilePictureTemplate.vue b/src/components/ProfilePictureTemplate.vue
new file mode 100644
index 0000000..0ac9969
--- /dev/null
+++ b/src/components/ProfilePictureTemplate.vue
@@ -0,0 +1,27 @@
+<template>
+  <div
+    class="profile-picture"
+    :style="`height: ${$props.height}; width: ${$props.width}; background-image: url(${$props.url})`"
+  ></div>
+</template>
+
+<script>
+export default {
+    props: ['url', 'height', 'width']
+}
+</script>
+
+
+<style scoped>
+.profile-picture {
+  background-color: rgba(0, 0, 0, 0.281);
+  margin: auto;
+  border-radius: 50%;
+  margin-right: 5px;
+  margin-left: 0;
+  flex-shrink: 0;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+</style>
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 4478403..7f6edd3 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID}">
-    <div class="profile-picture" :style="`background-image: url(${userAvatar})`"></div>
+    <profile-picture :url="userAvatar" height="50px" width="50px"/>
     <div class="triangle">
       <div class="triangle-inner"></div>
     </div>
@@ -33,12 +33,16 @@
 
 
 <script>
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import messageFormatter from "@/messageFormatter.js";
 import config from "@/config.js";
 import friendlyDate from "@/date";
 import path from "path";
 
 export default {
+  components: {
+    ProfilePicture
+  },
   props: [
     "message",
     "status",
@@ -72,7 +76,7 @@ export default {
       const filetypes = /jpeg|jpg|gif|png/;
       const extname = filetypes.test(path.extname(file.fileName).toLowerCase());
       if (extname) return undefined;
-      file.url = config.domain + '/files/' + file.fileID;
+      file.url = config.domain + "/files/" + file.fileID;
       return file;
     },
     formatMessage() {
@@ -170,18 +174,7 @@ export default {
 }
 
 .profile-picture {
-  height: 50px;
-  width: 50px;
-  background-color: rgba(0, 0, 0, 0.281);
-  margin: auto;
   margin-bottom: 0;
-  border-radius: 50%;
-  margin-right: 5px;
-  margin-left: 0;
-  flex-shrink: 0;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
 }
 
 .triangle {
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index a22137d..86d4acb 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="my-mini-information">
-    <div class="profile-picture" :style="`background-image: url(${avatar})`"></div>
+    <profile-picture :url="avatar" height="50px" width="50px"/>
     <div class="information">
       <div class="name">{{user.username}}</div>
       <div class="tag">@{{user.tag}}</div>
@@ -24,10 +24,12 @@ import {bus} from '../../main';
 import config from '@/config.js'
 import statusList from '../../components/app/statusList.vue'
 import settingsService from '@/services/settingsService'
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 
 export default {
   components: {
-    statusList
+    statusList,
+    ProfilePicture
   },
   data() {
     return {
@@ -104,15 +106,8 @@ export default {
 }
 
 .profile-picture{
-  height: 50px;
-  width: 50px;
-  border-radius: 50%;
-  background-color: rgba(0, 0, 0, 0.377);
   margin-left: 10px;
   margin-right: 10px;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
 }
 
 .information{
diff --git a/src/components/app/SettingsPanels/MyProfile.vue b/src/components/app/SettingsPanels/MyProfile.vue
index 3574e2f..eedb241 100644
--- a/src/components/app/SettingsPanels/MyProfile.vue
+++ b/src/components/app/SettingsPanels/MyProfile.vue
@@ -1,22 +1,26 @@
 <template>
   <div class="my-profile-panel">
-    <div class="profile-picture" :style="`background-image: url(${avatar})`"></div>
+    <profile-picture :url="avatar" height="100px" width="100px" />
     <div class="information">
-      <div class="username"><strong>Username: </strong>{{user.username}}</div>
-      <div class="tag"><strong>Tag: </strong>@{{user.tag}}</div>
+      <div class="username">
+        <strong>Username:</strong>
+        {{user.username}}
+      </div>
+      <div class="tag">
+        <strong>Tag:</strong>
+        @{{user.tag}}
+      </div>
     </div>
     <div class="options">
-      <input type="file"  accept="image/*" ref="avatarBrowser" @change="avatarBrowse" class="hidden">
-      <div class="option"  @click="editAvatarBtn">Edit Avatar</div>
+      <input type="file" accept="image/*" ref="avatarBrowser" @change="avatarBrowse" class="hidden">
+      <div class="option" @click="editAvatarBtn">Edit Avatar</div>
       <div class="option" @click="changePassword">Change Password</div>
       <div class="option red" @click="logout">Logout</div>
     </div>
     <div class="alert-outer" v-if="alert.show">
-      <div class="alert" >
+      <div class="alert">
         <div class="alert-title">Error</div>
-        <div class="alert-content">
-          {{alert.content}}
-        </div>
+        <div class="alert-content">{{alert.content}}</div>
         <div class="alert-buttons">
           <div class="alert-button" @click="alert.show = false">Okay</div>
         </div>
@@ -26,93 +30,95 @@
 </template>
 
 <script>
-import AvatarUpload from '@/services/AvatarUpload.js'
-import config from '@/config.js'
-import {bus} from '@/main'
-import path from 'path'
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
+import AvatarUpload from "@/services/AvatarUpload.js";
+import config from "@/config.js";
+import { bus } from "@/main";
+import path from "path";
 
 export default {
-
-  data(){
+  components: {
+    ProfilePicture
+  },
+  data() {
     return {
       alert: {
-        content: '',
-        show: false 
-      },
-    }
+        content: "",
+        show: false
+      }
+    };
   },
   methods: {
-    onProgress(percent){
+    onProgress(percent) {
       //update vue
-      console.log("Avatar upload progress: ", percent)
+      console.log("Avatar upload progress: ", percent);
     },
     async avatarBrowse(event) {
       const file = event.target.files[0];
       event.target.value = "";
-      const allowedFormats = ['.png', '.jpeg', '.gif', '.jpg' ];
-      
-      if (!allowedFormats.includes(path.extname(file.name).toLowerCase())){
-        this.alert.content = 'Upload failed - Unsupported image file.';
-        return this.alert.show = true;
-      } else if (file.size >= 10490000){
+      const allowedFormats = [".png", ".jpeg", ".gif", ".jpg"];
+
+      if (!allowedFormats.includes(path.extname(file.name).toLowerCase())) {
+        this.alert.content = "Upload failed - Unsupported image file.";
+        return (this.alert.show = true);
+      } else if (file.size >= 10490000) {
         // 10490000 = 10mb
-        this.alert.content = 'Upload failed - Image size must be less than 10 megabytes.';
-        return this.alert.show = true;
+        this.alert.content =
+          "Upload failed - Image size must be less than 10 megabytes.";
+        return (this.alert.show = true);
       }
       const formData = new FormData();
-      formData.append('avatar', file);
-      const {ok, error, result} = await AvatarUpload.uploadAvatar(formData, this.onProgress);
-      if (!ok) { 
-        this.alert.content = 'Upload failed - Something went wrong. Try again later.';
-        return this.alert.show = true;
+      formData.append("avatar", file);
+      const { ok, error, result } = await AvatarUpload.uploadAvatar(
+        formData,
+        this.onProgress
+      );
+      if (!ok) {
+        this.alert.content =
+          "Upload failed - Something went wrong. Try again later.";
+        return (this.alert.show = true);
       }
-
     },
     logout() {
-      this.$store.dispatch('logout')
-      window.location.href = "/"
+      this.$store.dispatch("logout");
+      window.location.href = "/";
     },
     changePassword() {
-      this.alert.content = 'Not implemented yet.';
-      return this.alert.show = true;
+      this.alert.content = "Not implemented yet.";
+      return (this.alert.show = true);
     },
     editAvatarBtn() {
-      if(!this.$store.getters.settings.GDriveLinked) {
-        return this.$store.dispatch('setPopoutVisibility', {name: 'GDLinkMenu', visibility: true})
+      if (!this.$store.getters.settings.GDriveLinked) {
+        return this.$store.dispatch("setPopoutVisibility", {
+          name: "GDLinkMenu",
+          visibility: true
+        });
       }
-      this.$refs.avatarBrowser.click()
+      this.$refs.avatarBrowser.click();
     }
   },
   computed: {
     user() {
-      return this.$store.getters.user
+      return this.$store.getters.user;
     },
     avatar() {
-      return config.domain + "/avatars/" +this.$store.getters.user.avatar
+      return config.domain + "/avatars/" + this.$store.getters.user.avatar;
     }
   }
-}
+};
 </script>
 <style scoped>
 .hidden {
   display: none;
 }
-.my-profile-panel{
+.my-profile-panel {
   display: flex;
   width: 100%;
   height: 100px;
   margin-top: 10px;
 }
 .profile-picture {
-  width: 100px;
-  height: 100px;
-  background: rgb(63, 63, 63);
-  border-radius: 50%;
   margin-left: 20px;
-  flex-shrink: 0;
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
 }
 .information {
   margin: auto;
@@ -121,10 +127,10 @@ export default {
   font-size: 18px;
   flex: 1;
 }
-.username{
+.username {
   margin-bottom: 10px;
 }
-.options{
+.options {
   margin: auto;
   margin-right: 30px;
   border-left: solid 1px rgb(204, 204, 204);
@@ -137,7 +143,7 @@ export default {
   transition: 0.3s;
 }
 .option:hover {
-    color: rgb(255, 255, 255);
+  color: rgb(255, 255, 255);
 }
 
 .option.red {
@@ -146,7 +152,7 @@ export default {
 .option.red:hover {
   color: red;
 }
-.alert-title{
+.alert-title {
   background: rgb(34, 34, 34);
   font-size: 20px;
   color: white;
@@ -159,7 +165,7 @@ export default {
   bottom: 0;
   right: 0;
   display: flex;
-  background: rgba(0, 0, 0, 0.267)
+  background: rgba(0, 0, 0, 0.267);
 }
 .alert {
   margin: auto;
@@ -171,7 +177,7 @@ export default {
   user-select: none;
   cursor: default;
 }
-.alert-content{
+.alert-content {
   margin: auto;
   font-size: 16px;
   color: white;
@@ -183,7 +189,6 @@ export default {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 20px;
-
 }
 .alert-button {
   color: white;
@@ -193,10 +198,10 @@ export default {
   transition: 0.3s;
 }
 .alert-button:hover {
-    background: rgb(83, 53, 53);
+  background: rgb(83, 53, 53);
 }
 @media (max-width: 815px) {
-  .my-profile-panel{
+  .my-profile-panel {
     flex-direction: column;
   }
   .profile-picture {
@@ -213,5 +218,5 @@ export default {
     text-align: center;
     border: none;
   }
-} 
+}
 </style>
diff --git a/src/components/app/uploadDialog.vue b/src/components/app/uploadDialog.vue
index b25ec76..74fa46d 100644
--- a/src/components/app/uploadDialog.vue
+++ b/src/components/app/uploadDialog.vue
@@ -287,5 +287,35 @@ export default {
   outline: none;
   transition: 0.3s;
 }
+@media (max-width: 400px) {
+  .inner {
+    align-content: center;
+    align-items: center;
+    align-self: center;
+  }
+  .info {
+    flex-direction:column;
+    margin-bottom: 20px;
+    align-content: center;
+    align-items: center;
+    align-self: center;
+  }
+  .data{
+    display: flex;
+    flex-direction:column;
+    align-content: center;
+    align-items: center;
+    align-self: center;
+    text-align: center;
+  }
+  .bottom-panel {
+    align-content: center;
+    align-items: center;
+    align-self: center;
+  }
+  .message-area {
+    width: calc(100% - 20px);
+  }
+}
 </style>
 
diff --git a/src/components/homePage/LoggedIn.vue b/src/components/homePage/LoggedIn.vue
index 2421dac..a46f980 100644
--- a/src/components/homePage/LoggedIn.vue
+++ b/src/components/homePage/LoggedIn.vue
@@ -2,7 +2,7 @@
   <div class="logged-in">
     <div class="card">
       <div class="avatar-outer">
-        <div class="avatar" :style="`background-image: url(${avatar})`"></div>
+        <profile-picture :url="avatar" height="90px" width="90px" />
       </div>
       <div class="info">
           <div class="username">{{user.username}}<span class="tag">@{{user.tag}}</span></div>
@@ -16,8 +16,12 @@
 </template>
 
 <script>
+import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import config from '@/config.js'
 export default {
+  components: {
+    ProfilePicture
+  },
   methods: {
     logout() {
       this.$store.commit('logout')
@@ -69,14 +73,8 @@ export default {
   text-align: center;
 }
 
-.avatar {
-  width: 80px;
-  height: 80px;
-  background-color: rgba(0, 0, 0, 0.459);
-  border-radius: 50%;
-  background-position: center;
-  background-size: 100%;
-  background-repeat: no-repeat;
+.profile-picture {
+  margin-right: 0;
 }
 
 .info {