Many design improvements and fixes

3 files changed, 27 insertions, 25 deletions

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>");