Added old browser warning message and fixed some things

4 files changed, 49 insertions, 46 deletions

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 0ca1d7b..2672a34 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -85,6 +85,7 @@ SWIPEABLE
 HEADER
 ******/
 .header {
+    -js-display: flex;
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
@@ -95,6 +96,7 @@ HEADER
 .LeftButtonHeader {
     width: 20px;
     height: 20px;
+    filter: invert(.5);
     -webkit-filter: invert(.5);
     -moz-filter: invert(.5);
 }
@@ -106,6 +108,7 @@ HEADER
 .RightButtonHeader {
     width: 20px;
     height: 20px;
+    filter: invert(.5);
     -webkit-filter: invert(.5);
     -moz-filter: invert(.5);
 }
@@ -117,6 +120,34 @@ GENERAL TABS
     height: 100%;
 }
 
+/**********
+FEED WINDOW
+**********/
+.FeedTabWindow {
+    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: scroll;
+}
+
+.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: -moz-calc(100vw - 30px);
+    height: -webkit-calc(100vw - 30px);
+    object-fit: cover;
+    -webkit-border-radius: 15px;
+    -moz-border-radius: 15px;
+    border-radius: 15px;
+}
+
 /*************
 EXPLORE WINDOW
 *************/
@@ -187,7 +218,6 @@ hr.ChatHeaderDivider {
     max-height: calc(100% - 215px); /* navbar + input + some margin*/
     max-height: -moz-calc(100% - 215px);
     max-height: -webkit-calc(100% - 215px);
-    max-height: -o-calc(100% - 215px);
     height: 100%;
     width: 100%;
 }
@@ -287,6 +317,7 @@ PERSONAL TAB
 }
 
 .PersonalOverviewHeader {
+    -js-display: flex;
     display: flex;
     justify-content: space-evenly;
     align-items: flex-end;
@@ -334,6 +365,7 @@ PERSONAL TAB
 NAVBAR
 *****/
 .Navbar {
+    -js-display: flex;
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index a1806f1..abb5e68 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -6,6 +6,17 @@ var UserSearchBar = $("#UserSearchBar");
 var SearchResults = $(".SearchResults");
 var ExploreData = $("#ExploreData");
 
+/**********
+ OLD BROWSER
+ *********/
+var isIE = /*@cc_on!@*/false || !!document.documentMode;
+var isEdge = !isIE && !!window.StyleMedia;
+if (isIE || isEdge) {
+    alert("Sorry, your browser is currently not supported. " +
+        "Please update to a newer browser if you are facing any kind of issues. " +
+        "If you are a developer, you can help us supporting this browser on github.com/marvinborner/BEAM-Messenger/") // PLEASE DO IT ACTUALLY
+}
+
 /******
  NAVBAR
  *****/
@@ -26,8 +37,8 @@ NavbarIconWrap.on("click", function () {
     }, 300);
 });
 
-window.addEventListener("load",function() {
-    setTimeout(function(){
+window.addEventListener("load", function () {
+    setTimeout(function () {
         // This hides the address bar:
         window.scrollTo(0, 1);
     }, 0);
@@ -59,46 +70,6 @@ MainTabWindows.on('beforeChange', function (event, slick, currentSlide, nextSlid
     }, 300);
 });
 
-/*
-$('.MainTabWindows').flickity({
-    cellAlign: 'left',
-    prevNextButtons: false,
-    pageDots: false,
-    friction: 0.3,
-    dragThreshold: ($("body").width() * 0.5),
-    initialIndex: 2,
-    wrapAround: true,
-    maxSwipeWidth: 0,
-    on: {
-        change: function (index) {
-            $(".NavbarIconWrap").removeClass("ActiveTab");
-            $el = $("#" + index);
-            $el.addClass("ActiveTab");
-            leftPos = $el.position().left;
-            $magicLine.stop().animate({
-                left: leftPos,
-                width: newWidth
-            }, 300);
-        },
-        dragStart: function () {
-            $(".ActiveTab").css({ transform: 'scale(1.05)' });
-        },
-        dragEnd: function () {
-            $(".NavbarIconWrap").css({ transform: 'scale(1.0)' });
-        }/*,
-        scroll: function (event, progress) {
-            var TotalWidth = $("body").width();
-            console.log(progress / 10);
-            leftPos = ((progress / 1000) * TotalWidth + 'px');
-            $magicLine.stop().animate({
-                left: leftPos,
-                width: newWidth
-            });
-        }*
-    }
-});
-*/
-
 /*****
  SEARCH
  ****/
diff --git a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
index 2783358..6df674c 100644
--- a/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
+++ b/main/app/sprinkles/core/templates/pages/abstract/mainsite.html.twig
@@ -5,7 +5,6 @@
     <html lang="en-US">
     {% block head %}
         <head>
-            <!-- The 'X-UA-Compatible' tag must be first, otherwise IE will not respect it.  See http://stackoverflow.com/questions/25557299/internet-explorer-11-disable-display-intranet-sites-in-compatibility-view-via -->
             <meta http-equiv="X-UA-Compatible" content="IE=edge">
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index a24ae13..3421476 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -20,9 +20,10 @@
                     </div>
                     <hr>
                 </div>
-                <div class="MainInTab">
+                <div class="MainInTab FeedTabWindow">
                     {% for FeedImage in FeedImages %}
-                        <img src="{{ site.uri.public }}/image/{{ FeedImage.PostID }}" alt="An image">
+                        <img class="FeedImage" src="{{ site.uri.public }}/image/{{ FeedImage.PostID }}" alt="An image">
+                        <br>
                     {% endfor %}
                 </div>
             </div>