3 files changed, 31 insertions, 3 deletions
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 2afc962..b308f8e 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -115,13 +115,31 @@ FEED WINDOW
     overflow-x: hidden;
 }
 
+.FeedImageWrapper {
+
+}
+
+.FeedImageWrapper .UploaderInfo {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.FeedImageWrapper .UploaderInfo .UploaderAvatar {
+    height: 50px;
+    width: 50px;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    border-radius: 100px;
+}
+
 .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);
+    height: calc(100vw - 30px); /* TODO: Better feed wrapper height solution with avatar */
     height: -moz-calc(100vw - 30px);
     height: -webkit-calc(100vw - 30px);
     object-fit: cover;
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/console.js b/main/app/sprinkles/core/assets/SiteAssets/js/console.js
index c263f69..c36f7e6 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/console.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/console.js
@@ -13,7 +13,7 @@ console.log("%s%c%s%c%s%c%s%c%s%c%s%c",
     "color: blue;", "https://github.com/marvinborner/BEAM-Messenger\n\n",
     "", "...or even clone the entire repo with:\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 create 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 d740838..4b1d818 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -105,6 +105,8 @@ MainTabWindows.on('beforeChange', function (event, slick, currentSlide, nextSlid
     nextSlide.children().attr("src", nextSlide.children().attr("src").split('.svg')[0] + "Activated.svg");
     $el = nextSlide;
     $el.addClass("ActiveTab");
+
+    // NAVBAR LINE
     leftPos = $el.position().left;
     NavbarLine.stop().animate({
         left: leftPos,
@@ -194,7 +196,15 @@ $(document).ready(function () {
         url: site.uri.public + "/api/feed/" + current_username,
         success: function (images) {
             images.forEach(function (imageInfo) {
-                FeedTabWindow.append("<img class='FeedImage' src='" + imageInfo.image_url + "'><br>");
+                FeedTabWindow.append("" +
+                    "<div data-image-id='" + imageInfo.image_id + "' class='FeedImageWrapper'>" +
+                    "<div class='UploaderInfo'>" +
+                    "<img class='UploaderAvatar' src='" + imageInfo.avatar + "'>" +
+                    "<div class='UploaderName'>" + imageInfo.full_name + "</div>" +
+                    "</div>" +
+                    "<img class='FeedImage' src='" + imageInfo.image_url + "'>" +
+                    "</div>" +
+                    "<hr>");
             })
         },
         error: function () {