aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--main/app/sprinkles/core/assets/SiteAssets/css/main.css39
-rw-r--r--main/app/sprinkles/core/assets/SiteAssets/js/main.js2
-rw-r--r--main/app/sprinkles/core/templates/pages/index.html.twig36
3 files changed, 59 insertions, 18 deletions
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>