From a982fcbcb9331806cfa88507bf0018c35c168d0a Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 27 Feb 2020 02:58:03 +0300
Subject: [PATCH] Add mobile and tablet UI for user profile

---
 src/views/users/show.vue | 50 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index cdc08767..ca0ed538 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -204,6 +204,7 @@ table {
 }
 .show-private-statuses {
   margin-left: 28px;
+  margin-bottom: 20px;
 }
 .recent-statuses {
   margin-left: 28px;
@@ -235,11 +236,60 @@ table {
   .avatar-name-container {
     margin-bottom: 10px;
   }
+  .recent-statuses {
+    margin: 20px 10px 15px 10px;
+  }
+  .recent-statuses-container {
+    width: 100%;
+    margin: 0 10px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 10px;
+  }
   .user-page-header {
     flex-direction: column;
     align-items: flex-start;
     padding: 0;
     margin: 7px 0 15px 10px;
   }
+  .user-profile-card {
+    margin: 0 10px;
+    width: 95%;
+    td {
+      width: 80px;
+    }
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
+}
+
+@media only screen and (max-width:801px) and (min-width: 481px) {
+  .avatar-name-container {
+    margin-bottom: 20px;
+  }
+  .recent-statuses {
+    margin: 20px 10px 15px 0;
+  }
+  .recent-statuses-container {
+    width: 97%;
+    margin: 0 20px;
+  }
+  .show-private-statuses {
+    margin: 0 10px 20px 0;
+  }
+  .user-page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 0;
+    margin: 7px 0 20px 20px;
+  }
+  .user-profile-card {
+    margin: 0 20px;
+    width: fit-content;
+  }
+  .user-profile-container {
+    flex-direction: column;
+  }
 }
 </style>