aboutsummaryrefslogtreecommitdiffstats
path: root/view
diff options
context:
space:
mode:
authorMario <mario@mariovavti.com>2023-02-12 10:43:31 +0000
committerMario <mario@mariovavti.com>2023-02-12 10:43:31 +0000
commita1eb39872ba5017be218d48f319addf3d40ff05d (patch)
treef80684b9c5a0d66f2a3da425295cc28401320fc1 /view
parent724b8cc6a54c2e778a2d67b2177ecf373f615c64 (diff)
downloadvolse-hubzilla-a1eb39872ba5017be218d48f319addf3d40ff05d.tar.gz
volse-hubzilla-a1eb39872ba5017be218d48f319addf3d40ff05d.tar.bz2
volse-hubzilla-a1eb39872ba5017be218d48f319addf3d40ff05d.zip
implement hq widget author image and notifications updates
Diffstat (limited to 'view')
-rw-r--r--view/css/widgets.css6
-rw-r--r--view/js/autocomplete.js2
-rw-r--r--view/theme/redbasic/css/style.css22
-rw-r--r--view/theme/redbasic/php/style.php4
-rw-r--r--view/tpl/channel_activities.tpl2
-rw-r--r--view/tpl/messages_widget.tpl47
-rw-r--r--view/tpl/notifications_widget.tpl32
7 files changed, 66 insertions, 49 deletions
diff --git a/view/css/widgets.css b/view/css/widgets.css
index 463f53d22..6b5ef3986 100644
--- a/view/css/widgets.css
+++ b/view/css/widgets.css
@@ -242,6 +242,11 @@ a.wikilist {
position: relative;
}
+/* messages (hq) */
+#messages-author-container {
+ z-index: 3 !important;
+}
+
/* hq_controls */
.hq_controls_fixed_bottom_center {
z-index: 1028;
@@ -250,3 +255,4 @@ a.wikilist {
left: 50%;
transform: translateX(-50%);
}
+
diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js
index e50a4f927..8edd8dafa 100644
--- a/view/js/autocomplete.js
+++ b/view/js/autocomplete.js
@@ -38,7 +38,7 @@ function contact_format(item) {
var desc = ((item.label) ? item.nick + ' ' + item.label : item.nick);
if(typeof desc === 'undefined') desc = '';
if(desc) desc = ' ('+desc+')';
- return "<div class='{0} dropdown-item dropdown-notification clearfix' title='{4}'><img class='menu-img-2' src='{1}' loading='lazy'><span class='fw-bold contactname'>{2}</span><span class='dropdown-sub-text'>{4}</span></div>".format(item.taggable, item.photo, item.name, desc, typeof(item.link) !== 'undefined' ? item.link : desc.replace('(','').replace(')',''));
+ return "<div class='dropdown-item dropdown-notification lh-sm text-truncate' title='{4}'><img class='menu-img-2' src='{1}' loading='lazy'><strong>{2}</strong><br><small class='opacity-75'>{4}</small></div>".format(item.taggable, item.photo, item.name, desc, typeof(item.link) !== 'undefined' ? item.link : desc.replace('(','').replace(')',''));
}
else
return "";
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 6675ebaf8..5d27071a5 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -774,20 +774,6 @@ div.jGrowl div.jGrowl-notification {
text-overflow: ellipsis;
}
-.dropdown-notification,
-.notification,
-.member-item {
- line-height: 1rem;
- overflow: hidden;
- text-overflow: ellipsis;
- display: block;
- white-space: nowrap;
-}
-
-.notification.notification-forum {
- font-size: 0.9rem;
-}
-
#acl-search::-webkit-input-placeholder {
/* non-fontawesome fonts set a fallback for text parts of the placeholder*/
font-family: ForkAwesome, sans-serif, arial, freesans;
@@ -1202,15 +1188,15 @@ img.mail-conv-sender-photo {
.menu-img-3 {
width: 3rem;
height: 3rem;
- margin-right: 5px;
+ margin-right: .5rem;
border-radius: var(--bs-border-radius);
float: left;
}
.menu-img-2 {
- height: 2rem;
- width: 2rem;
- margin-right: 5px;
+ height: 2.3rem;
+ width: 2.3rem;
+ margin-right: .5rem;
border-radius: var(--bs-border-radius);
float: left;
}
diff --git a/view/theme/redbasic/php/style.php b/view/theme/redbasic/php/style.php
index 4d5bd42be..d29de1b15 100644
--- a/view/theme/redbasic/php/style.php
+++ b/view/theme/redbasic/php/style.php
@@ -129,8 +129,8 @@ if(file_exists('view/theme/redbasic/css/style.css')) {
$x .= $schemecss;
}
- $left_aside_width = 21; //unit: rem
- $right_aside_width = 21; //unit: rem
+ $left_aside_width = 22; //unit: rem
+ $right_aside_width = 22; //unit: rem
$main_width = $left_aside_width + $right_aside_width + intval($converse_width);
diff --git a/view/tpl/channel_activities.tpl b/view/tpl/channel_activities.tpl
index acce3cb13..3ec37e235 100644
--- a/view/tpl/channel_activities.tpl
+++ b/view/tpl/channel_activities.tpl
@@ -6,7 +6,7 @@
<div class="col">
<div class="card">
<a href="{{$i.url}}" class="text-reset">
- <div class="card-body">
+ <div class="card-body clearfix">
{{if $i.title}}
<strong>{{$i.title}}</strong>
<hr>
diff --git a/view/tpl/messages_widget.tpl b/view/tpl/messages_widget.tpl
index 8dece872e..3bedf518f 100644
--- a/view/tpl/messages_widget.tpl
+++ b/view/tpl/messages_widget.tpl
@@ -25,17 +25,25 @@
<div id="messages-widget" class="border-start border-end border-bottom overflow-auto mb-3 clearfix" style="height: 70vh;">
<div id="messages-template" rel="template" class="d-none">
<a href="{6}" class="list-group-item list-group-item-action message" data-b64mid="{0}">
- <div class="d-flex w-100 justify-content-between">
- <div class="mb-1 text-truncate" title="{5}">
- {7}
- <strong>{4}</strong>
+ <div class="mb-2">
+ <img src="{9}" loading="lazy" class="rounded menu-img-2">
+ <div class="text-nowrap">
+ <div class="d-flex justify-content-between align-items-center lh-sm">
+ <div class="text-truncate mr-1">
+ {7}
+ <strong title="{4}">{4}</strong>
+ </div>
+ <small class="messages-timeago opacity-75" title="{1}"></small>
+ </div>
+ <div class="text-truncate">
+ <small class="opacity-75" title="{5}">{5}</small>
+ </div>
</div>
- <small class="messages-timeago text-nowrap" title="{1}"></small>
</div>
- <div class="mb-1">
+ <div class="mb-2">
<div class="text-break">{2}</div>
</div>
- <small>{3}</small>
+ <small class="opacity-75">{3}</small>
{8}
</a>
</div>
@@ -47,17 +55,25 @@
</div>
{{foreach $entries as $e}}
<a href="{{$e.href}}" class="list-group-item list-group-item-action message" data-b64mid="{{$e.b64mid}}">
- <div class="d-flex w-100 justify-content-between">
- <div class="mb-1 text-truncate" title="{{$e.author_addr}}">
- {{$e.icon}}
- <strong>{{$e.author_name}}</strong>
+ <div class="mb-2">
+ <img src="{{$e.author_img}}" loading="lazy" class="rounded menu-img-2">
+ <div class="text-nowrap">
+ <div class="d-flex justify-content-between align-items-center lh-sm">
+ <div class="text-truncate mr-1">
+ {{$e.icon}}
+ <strong title="{{$e.author_name}}">{{$e.author_name}}</strong>
+ </div>
+ <small class="messages-timeago opacity-75" title="{{$e.created}}"></small>
+ </div>
+ <div class="text-truncate">
+ <small class="opacity-75" title="{{$e.author_addr}}">{{$e.author_addr}}</small>
+ </div>
</div>
- <small class="messages-timeago text-nowrap" title="{{$e.created}}"></small>
</div>
- <div class="mb-1">
+ <div class="mb-2">
<div class="text-break">{{$e.summary}}</div>
</div>
- <small>{{$e.info}}</small>
+ <small class="opacity-75">{{$e.info}}</small>
{{if $e.unseen_count}}
<span class="badge bg-transparent border border-{{$e.unseen_class}} text-{{$e.unseen_class}} rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">{{$e.unseen_count}}</span>
{{/if}}
@@ -169,7 +185,8 @@
e.author_addr,
e.href,
e.icon,
- e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : ''
+ e.unseen_count ? '<span class="badge bg-transparent border border-' + e.unseen_class + ' text-' + e.unseen_class + ' rounded-pill position-absolute bottom-0 end-0 m-2" title="{{$strings.unseen_count}}">' + e.unseen_count + '</span>' : '',
+ e.author_img
);
$('#messages-loading').before(html);
});
diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl
index 9102eb7bc..d3347b4d8 100644
--- a/view/tpl/notifications_widget.tpl
+++ b/view/tpl/notifications_widget.tpl
@@ -535,28 +535,36 @@
</div>
<div id="nav-notifications-template" rel="template">
<a class="list-group-item list-group-item-action notification {6}" href="{0}" title="{13}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-when="{5}">
- <img class="menu-img-3" data-src="{1}" loading="lazy">
- <div class="contactname"><span class="fw-bold">{2}</span> <small>{3}</small></div>
- <span>{4}</span><br>
- <span class="notifications-autotime" title="{5}">{5}</span>
+ <img data-src="{1}" loading="lazy" class="rounded menu-img-2">
+ <div class="text-nowrap">
+ <div class="d-flex justify-content-between lh-sm">
+ <div class="text-truncate mr-1">
+ <strong title="{2} - {3}">{2}</strong>
+ </div>
+ <small class="notifications-autotime opacity-75" title="{5}"></small>
+ </div>
+ <div class="text-truncate">{4}</div>
+ </div>
</a>
</div>
<div id="nav-notifications-forums-template" rel="template">
- <a class="list-group-item list-group-item-action notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
- <div class="justify-content-between">
+ <a class="list-group-item list-group-item-action justify-content-between align-items-center d-flex notification notification-forum" href="{0}" title="{4} - {3}" data-b64mid="{7}" data-notify_id="{8}" data-thread_top="{9}" data-contact_name="{2}" data-contact_addr="{3}" data-b64mids='{12}'>
+ <div>
<img class="menu-img-1" data-src="{1}" loading="lazy">
- <span class="badge bg-secondary">{10}</span>
+ <span>{2}</span>
</div>
- <span>{2}</span>
- <i class="fa fa-{11}"></i>
+ <span class="badge bg-secondary">{10}</span>
</a>
</div>
<div id="notifications" class="border border-top-0 rounded navbar-nav collapse">
{{foreach $notifications as $notification}}
<div class="rounded-top rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse {{$notification.type}}-button">
- <a id="notification-link-{{$notification.type}}" class="collapsed list-group-item fakelink notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
- <i class="fa fa-fw fa-{{$notification.icon}}"></i> {{$notification.label}}
- <span class="float-end badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
+ <a id="notification-link-{{$notification.type}}" class="collapsed list-group-item justify-content-between align-items-center d-flex fakelink stretched-link notification-link" href="#" title="{{$notification.title}}" data-bs-target="#nav-{{$notification.type}}-sub" data-bs-toggle="collapse" data-sse_type="{{$notification.type}}">
+ <div>
+ <i class="fa fa-fw fa-{{$notification.icon}}"></i>
+ {{$notification.label}}
+ </div>
+ <span class="badge bg-{{$notification.severity}} {{$notification.type}}-update"></span>
</a>
</div>
<div id="nav-{{$notification.type}}-sub" class="rounded-bottom border border-start-0 border-end-0 border-bottom-0 list-group list-group-flush collapse notification-content" data-bs-parent="#notifications" data-sse_type="{{$notification.type}}">