From f4c8179c9cc35ec3cf4841bbede9e703ab63075e Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Sun, 10 Jun 2018 15:49:30 +0200
Subject: Many design improvements and fixes

---
 .../sprinkles/core/assets/SiteAssets/css/main.css  | 46 +++++++++++-----------
 .../sprinkles/core/assets/SiteAssets/js/console.js |  4 +-
 .../sprinkles/core/assets/SiteAssets/js/main.js    |  2 +-
 3 files changed, 27 insertions(+), 25 deletions(-)

(limited to 'main/app/sprinkles/core/assets')

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 6816e33..ca85727 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -3,6 +3,10 @@ GENERAL
 ******/
 @import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');
 
+:root {
+    --navbar-margin-height: 155px;
+}
+
 * {
     -webkit-touch-callout: none;
     -webkit-user-select: none;
@@ -19,9 +23,9 @@ GENERAL
 }
 
 ::-webkit-scrollbar {
+    display: none;
     width: 0;
     background: transparent;
-    display: none;
 }
 
 html, body {
@@ -47,15 +51,15 @@ hr {
     padding: 0;
 }
 
-img {
-    pointer-events: none;
-}
-
 hr.ShorterLine {
     margin: 0 auto;
     width: 90%;
 }
 
+img {
+    pointer-events: none;
+}
+
 .main {
     height: 100%;
 }
@@ -105,16 +109,24 @@ GENERAL TABS
 FEED WINDOW
 **********/
 .FeedTabWindow {
+    display: grid;
+    align-items: center;
+    justify-content: center;
     position: relative;
-    max-height: calc(100% - 155px); /* navbar + some margin*/
-    max-height: -moz-calc(100% - 155px);
-    max-height: -webkit-calc(100% - 155px);
     max-width: 100%;
     margin: 15px;
     overflow-y: auto;
     overflow-x: hidden;
 }
 
+.FeedImageWrapper {
+    max-width: 500px;
+}
+
+.FeedImageWrapper:last-of-type {
+    margin-bottom: var(--navbar-margin-height); /* For navbar (not a nice solution) */
+}
+
 .FeedImageWrapper .UploaderInfo {
     display: flex;
     justify-content: space-around;
@@ -122,7 +134,7 @@ FEED WINDOW
     margin-bottom: 5px;
 }
 
-.FeedImageWrapper .UploaderInfo .UploaderAvatar {
+.FeedImageWrapper .UploaderInfo .UploaderAvatar { /* TODO: Cut image to square (in PHP) - maybe just leave them in normal size though */
     height: 50px;
     width: 50px;
     -webkit-border-radius: 100px;
@@ -131,14 +143,7 @@ FEED WINDOW
 }
 
 .FeedImage {
-    display: block;
-    margin: 0 auto;
-    width: calc(100vw - 30px); /* left + right margin */
-    width: -moz-calc(100vw - 30px);
-    width: -webkit-calc(100vw - 30px);
-    height: calc(100vw - 30px); /* TODO: Better feed wrapper height solution with avatar */
-    height: -moz-calc(100vw - 30px);
-    height: -webkit-calc(100vw - 30px);
+    width: 100%;
     object-fit: cover;
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
@@ -427,9 +432,7 @@ PERSONAL TAB
 ***********/
 .PersonalTabWindow {
     position: relative;
-    max-height: calc(100% - 155px); /* navbar + some margin*/
-    max-height: -moz-calc(100% - 155px);
-    max-height: -webkit-calc(100% - 155px);
+    overflow: auto;
     margin: 5px;
 }
 
@@ -469,8 +472,7 @@ PERSONAL TAB
 }
 
 .EditProfileForm {
-    max-height: inherit;
-    overflow: scroll;
+    margin-bottom: var(--navbar-margin-height);
 }
 
 /*****
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/console.js b/main/app/sprinkles/core/assets/SiteAssets/js/console.js
index 85ea689..8550122 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/console.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/console.js
@@ -11,9 +11,9 @@ console.log("%s%c%s%c%s%c%s%c%s%c%s%c",
     "whitespace: pre;",
     "Hello, world! Thanks for checking our code.\nAs this project is completely open source it would be an better option to look here:\n",
     "color: blue;", "https://github.com/marvinborner/BEAM-Messenger\n\n",
-    "", "...or even clone the entire repo with:\n",
+    "", "...or even clone the entire repo with the command:\n",
     "border-radius: 100px; padding: 2px; background-color: black; color: white;", "git clone https://github.com/marvinborner/BEAM-Messenger.git\n",
-    "", "\nWe are also thankful for every contributor we have, so if you have any idea, fix or anything else - feel free to create a pull request.",
+    "", "\nWe are also thankful for every contributor we have, so if you have any idea, fix or anything else - feel free to make a pull request.",
     "font-family: monospace;");
 
 function playGame() {
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index dcbd7c6..136f188 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -182,7 +182,7 @@ $(document).ready(function () {
         url: site.uri.public + "/api/users/u/" + current_username + "/friends",
         success: function (receivers) {
             receivers.forEach(function (receiversInfo) {
-                SelectReceiver.append("<div class='ReceiverSelector' data-username='" + receiversInfo.username + "' data-id='" + receiversInfo.id + "'><img class='Avatar' src='" + receiversInfo.avatar + "'/><div class='UsersFullName'>" + receiversInfo.full_name + "</div></div>");
+                SelectReceiver.append("<div class='ReceiverSelector' data-username='" + receiversInfo.username + "' data-id='" + receiversInfo.id + "'><img class='Avatar' src='" + receiversInfo.avatar + "'/><div class='UsersFullName'>" + receiversInfo.full_name + "</div></div><hr class='ShorterLine'>");
                 SelectedReceiver.prepend("<div style='display: none;' id='ChatMessages' class='ChatMessages' data-username='" + receiversInfo.username + "'></div>");
 
                 FriendList.append("<img class='Avatar' src='" + receiversInfo.avatar + "'><a class='FriendName' href='" + site.uri.public + "/users/u/" + receiversInfo.username + "'>" + receiversInfo.full_name + "</a><br>");
-- 
cgit v1.2.3