From 1dacc64b36ac17b067f2b7ddb3c4de9a79844463 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Fri, 4 May 2018 23:35:54 +0200
Subject: Added friend design

---
 .../sprinkles/core/assets/SiteAssets/css/main.css  | 39 ++++++++++++++++++++--
 .../sprinkles/core/assets/SiteAssets/js/main.js    |  2 +-
 .../sprinkles/core/templates/pages/index.html.twig | 36 +++++++++++---------
 3 files changed, 59 insertions(+), 18 deletions(-)

(limited to 'main/app/sprinkles')

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 0c43d55..311b507 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -162,7 +162,7 @@ EXPLORE WINDOW
     width: 100%;
 }
 
-.SearchResults .avatar {
+.SearchResults .Avatar {
     grid-column-start: 2;
     justify-self: center;
     align-self: center;
@@ -173,7 +173,7 @@ EXPLORE WINDOW
     border-radius: 100%;
 }
 
-.SearchResults .full_name {
+.SearchResults .UsersFullName {
     grid-column-start: 3;
     justify-self: center; /* OR start */
     align-self: center;
@@ -337,6 +337,41 @@ hr.ChatHeaderDivider {
       }
 }
 
+/*********
+FRIEND TAB
+*********/
+.FriendsTabWindow {
+    position: relative;
+    height: 100%;
+    margin: 5px;
+}
+
+.FriendList {
+    display: grid;
+    grid-template-columns: 10% 20% auto 10%;
+    overflow-y: auto;
+    max-height: 45%;
+    width: 100%;
+}
+
+.FriendList .Avatar {
+    grid-column-start: 2;
+    justify-self: center;
+    align-self: center;
+    height: 50px;
+    width: 50px;
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+}
+
+.FriendList .FriendName {
+    grid-column-start: 3;
+    justify-self: center; /* OR start */
+    align-self: center;
+}
+
+
 /***********
 PERSONAL TAB
 ***********/
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index 8125811..71ea3b3 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -118,7 +118,7 @@ UserSearchBar.keyup(function () {
             alerts.ufAlerts().ufAlerts('fetch');
 
             SearchResults.empty();
-            SearchResults.append("<img class='avatar' src='" + answer.avatar + "'/><div class='full_name'>" + answer.full_name + "</div>");
+            SearchResults.append("<img class='Avatar' src='" + answer.avatar + "'/><div class='UsersFullName'>" + answer.full_name + "</div>");
         },
         error: function () {
             console.log("[SEARCH LOGGER] 404s are not a bug - they're a feature!");
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index c395765..d0d3792 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -14,7 +14,8 @@
             <div class="carousel-cell FeedTab">
                 <div class="headerWrap">
                     <div class="header">
-                    <span class="LeftButtonHeader"><img src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
+                        <span class="LeftButtonHeader"><img
+                                    src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
                         <span class="HeaderCaption">{{ translate("TAB_CAPTIONS.FEED") }}</span>
                         <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
                     </div>
@@ -31,7 +32,8 @@
             <div class="carousel-cell ExploreTab">
                 <div class="headerWrap">
                     <div class="header">
-                    <span class="LeftButtonHeader"><img src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
+                        <span class="LeftButtonHeader"><img
+                                    src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
                         <span class="HeaderCaption">{{ translate("TAB_CAPTIONS.EXPLORE") }}</span>
                         <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
                     </div>
@@ -54,7 +56,8 @@
             <div class="carousel-cell ChatTab">
                 <div class="headerWrap">
                     <div class="header">
-                    <span class="LeftButtonHeader"><img src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
+                        <span class="LeftButtonHeader"><img
+                                    src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
                         <span class="HeaderCaption">{{ translate("TAB_CAPTIONS.CHAT") }}</span>
                         <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
                     </div>
@@ -76,28 +79,30 @@
             <div class="carousel-cell FriendsTab">
                 <div class="headerWrap">
                     <div class="header">
-                    <span class="LeftButtonHeader"><img src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
+                        <span class="LeftButtonHeader"><img
+                                    src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
                         <span class="HeaderCaption">{{ translate("TAB_CAPTIONS.FRIENDS") }}</span>
                         <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
                     </div>
                     <hr>
                 </div>
-                <div class="MainInTab">
-                    {% for friend in friends %}
-                        <li>
-                            <img src="{{ friend.avatar }}" alt="User Image">
-                            <a class="users-list-name"
+                <div class="MainInTab FriendsTabWindow">
+                    <div class="FriendList">
+                        {% for friend in friends %}
+                            <img class="Avatar" src="{{ friend.avatar }}" alt="Friends Image">
+                            <a class="FriendName"
                                href="{{ site.uri.public }}/users/u/{{ friend.user_name }}">{{ friend.first_name }} {{ friend.last_name }}</a>
-                            <span class="users-list-date">{{ friend.registered }}</span>
-                        </li>
-                    {% endfor %}
+                            <br>
+                        {% endfor %}
+                    </div>
                 </div>
             </div>
 
             <div class="carousel-cell PersonalTab">
                 <div class="headerWrap">
                     <div class="header">
-                    <span class="LeftButtonHeader"><img src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
+                        <span class="LeftButtonHeader"><img
+                                    src="{{ assets.url('assets://SiteAssets/icons/BurgerMenuShort.svg') }}"></span>
                         <span class="HeaderCaption">{{ translate("TAB_CAPTIONS.PERSONAL") }}</span>
                         <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
                     </div>
@@ -144,9 +149,10 @@
 
 {% block scripts_page %}
     <script id="uf-alert-template" type="text/x-handlebars-template">
-        <div class="alert alert-{{type}} alert-dismissible uf-alert">
+        <div class="alert alert-{{ type }} alert-dismissible uf-alert">
             <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-            <i class="icon fa fa-fw {{icon}} pull-left"></i> <div class="uf-alert-message-container">{{message}}</div>
+            <i class="icon fa fa-fw {{ icon }} pull-left"></i>
+            <div class="uf-alert-message-container">{{ message }}</div>
         </div>
     </script>
     <script>
-- 
cgit v1.2.3