From ef6fc62a5048afd8467af20b34861ad085566481 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Thu, 10 May 2018 13:31:42 +0200
Subject: Removed caching (performance issues) + fixed some issues for firefox
 alignment

---
 .../sprinkles/core/assets/SiteAssets/css/main.css  | 29 ++++++++++++++--------
 .../sprinkles/core/assets/SiteAssets/js/main.js    | 17 +++++++------
 .../sprinkles/core/templates/pages/index.html.twig | 14 +++++------
 3 files changed, 36 insertions(+), 24 deletions(-)

(limited to 'main')

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 999bdaa..aa234a0 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -76,7 +76,6 @@ SWIPEABLE
 HEADER
 ******/
 .header {
-    -js-display: flex;
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
@@ -323,18 +322,23 @@ hr.ChatHeaderDivider {
 }
 
 @-webkit-keyframes sk-bouncedelay {
-    0%, 80%, 100% { -webkit-transform: scale(0) }
-    40% { -webkit-transform: scale(1.0) }
+    0%, 80%, 100% {
+        -webkit-transform: scale(0)
+    }
+    40% {
+        -webkit-transform: scale(1.0)
+    }
 }
 
 @keyframes sk-bouncedelay {
     0%, 80%, 100% {
         -webkit-transform: scale(0);
         transform: scale(0);
-    } 40% {
-          -webkit-transform: scale(1.0);
-          transform: scale(1.0);
-      }
+    }
+    40% {
+        -webkit-transform: scale(1.0);
+        transform: scale(1.0);
+    }
 }
 
 /*********
@@ -371,7 +375,6 @@ FRIEND TAB
     align-self: center;
 }
 
-
 /***********
 PERSONAL TAB
 ***********/
@@ -382,7 +385,6 @@ PERSONAL TAB
 }
 
 .PersonalOverviewHeader {
-    -js-display: flex;
     display: flex;
     justify-content: space-evenly;
     align-items: flex-end;
@@ -421,7 +423,6 @@ PERSONAL TAB
 NAVBAR
 *****/
 .Navbar {
-    -js-display: flex;
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
@@ -433,11 +434,19 @@ NAVBAR
     width: 100%;
 }
 
+.NavbarIconWrap {
+    width: calc(100vw / 5);
+    width: -moz-calc(100vw / 5);
+    width: -webkit-calc(100vw / 5);
+}
+
 .NavbarIconWrap {
     margin: auto;
 }
 
 .NavbarIconWrap img {
+    display: block;
+    margin: 0 auto;
     height: 30px;
     width: 30px;
 }
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index 7dd6006..9d1d697 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -12,8 +12,8 @@ var ExploreData = $("#ExploreData");
  * CACHE IMAGES
  * @type {*|jQueryImageCaching|jQuery}
  */
-var cachedNavbarIcons = $(".NavbarIconWrap img").imageCaching();
-var cashedAvatarIcons = $("img.Avatar").imageCaching();
+//var cachedNavbarIcons = $(".NavbarIconWrap img").imageCaching();
+//var cashedAvatarIcons = $("img.Avatar").imageCaching();
 
 /**
  * POPUPS
@@ -111,10 +111,13 @@ MainTabWindows.slick({
 MainTabWindows.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
     currentSlide = $("#" + currentSlide);
     nextSlide = $("#" + nextSlide);
-    currentSlide.children().attr("data-src", (currentSlide.children().attr("data-src").split('.svg')[0].replace('Activated', '') + ".svg"));
-    nextSlide.children().attr("data-caching-key", nextSlide.children().attr("data-src").split('.svg')[0].split('/').pop() + "Activated_nav_cached");
-    nextSlide.children().attr("data-src", nextSlide.children().attr("data-src").split('.svg')[0] + "Activated.svg");
-    cachedNavbarIcons.refresh();
+
+    currentSlide.children().attr("src", (currentSlide.children().attr("src").split('.svg')[0].replace('Activated', '') + ".svg"));
+    nextSlide.children().attr("src", nextSlide.children().attr("src").split('.svg')[0] + "Activated.svg");
+    //currentSlide.children().attr("data-src", (currentSlide.children().attr("data-src").split('.svg')[0].replace('Activated', '') + ".svg"));
+    //nextSlide.children().attr("data-caching-key", nextSlide.children().attr("data-src").split('.svg')[0].split('/').pop() + "Activated_nav_cached");
+    //nextSlide.children().attr("data-src", nextSlide.children().attr("data-src").split('.svg')[0] + "Activated.svg");
+    //cachedNavbarIcons.refresh();
     $el = nextSlide;
     $el.addClass("ActiveTab");
     leftPos = $el.position().left;
@@ -143,7 +146,7 @@ UserSearchBar.keyup(function () {
             alerts.ufAlerts().ufAlerts('fetch');
 
             SearchResults.append("<img class='Avatar' data-src='" + answer.avatar + "' data-caching-key='" + answer.user_name + "_avatar_cached'/><div class='UsersFullName'>" + answer.full_name + "</div>");
-            $(".SearchResults .Avatar").imageCaching(); // refresh
+            //$(".SearchResults .Avatar").imageCaching(); // refresh
         },
         error: function () {
             console.log("%c[SEARCH LOGGER] User " + RequestedUser + " was not found!", "color: red");
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index ab6b692..59ad41e 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -89,7 +89,7 @@
                 <div class="MainInTab FriendsTabWindow">
                     <div class="FriendList">
                         {% for friend in friends %}
-                            <img class="Avatar" data-src="{{ friend.avatar }}" data-caching-key="{{ friend.user_name }}_avatar_cached">
+                            <img class="Avatar" src="{{ friend.avatar }}" data-caching-key="{{ friend.user_name }}_avatar_cached">
                             <a class="FriendName"
                                href="{{ site.uri.public }}/users/u/{{ friend.user_name }}">{{ friend.first_name }} {{ friend.last_name }}</a>
                             <br>
@@ -111,7 +111,7 @@
                 <div class="MainInTab PersonalTabWindow">
                     <div class="PersonalOverviewHeader">
                         <div class="GenderFab Female">&#9792;</div>
-                        <img class="Avatar" data-src="{{ current_user.avatar }}" data-caching-key="{{ current_user.user_name }}_avatar_cached" />
+                        <img class="Avatar" src="{{ current_user.avatar }}" data-caching-key="{{ current_user.user_name }}_avatar_cached" />
                         <div class="GenderFab Male">&#9794;</div>
                     </div>
                     <br>
@@ -128,19 +128,19 @@
 
         <div class="Navbar">
             <span id="0" class="NavbarIconWrap">
-                <img data-src="{{ assets.url('assets://SiteAssets/icons/FriendFeedOutline.svg') }}" data-caching-key="FriendFeedOutline_nav_cached">
+                <img src="{{ assets.url('assets://SiteAssets/icons/FriendFeedOutline.svg') }}" data-caching-key="FriendFeedOutline_nav_cached">
             </span>
             <span id="1" class="NavbarIconWrap">
-                <img data-src="{{ assets.url('assets://SiteAssets/icons/ExploreGlobeOutline.svg') }}" data-caching-key="ExploreGlobeOutline_nav_cached">
+                <img src="{{ assets.url('assets://SiteAssets/icons/ExploreGlobeOutline.svg') }}" data-caching-key="ExploreGlobeOutline_nav_cached">
             </span>
             <span id="2" class="NavbarIconWrap ActiveTab">
-                <img data-src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutlineActivated.svg') }}" data-caching-key="MessageBubbleOutlineActivated_nav_cached">
+                <img src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutlineActivated.svg') }}" data-caching-key="MessageBubbleOutlineActivated_nav_cached">
             </span>
             <span id="3" class="NavbarIconWrap">
-                <img data-src="{{ assets.url('assets://SiteAssets/icons/UserGroupOutline.svg') }}" data-caching-key="UserGroupOutline_nav_cached">
+                <img src="{{ assets.url('assets://SiteAssets/icons/UserGroupOutline.svg') }}" data-caching-key="UserGroupOutline_nav_cached">
             </span>
             <span id="4" class="NavbarIconWrap">
-                <img data-src="{{ assets.url('assets://SiteAssets/icons/UserOutline.svg') }}" data-caching-key="UserOutline_nav_cached">
+                <img src="{{ assets.url('assets://SiteAssets/icons/UserOutline.svg') }}" data-caching-key="UserOutline_nav_cached">
             </span>
         </div>
         <span class='NavbarLine'></span>
-- 
cgit v1.2.3