From 9dcc0f6f20903dec7117b560e54ba7402c32fb5c Mon Sep 17 00:00:00 2001
From: Damian Wajer <damian@damianwajer.com>
Date: Tue, 17 Jan 2023 19:36:36 +0100
Subject: [PATCH] [frio] Larger clickable area for aside links

---
 view/theme/frio/css/style.css                 | 33 ++++++++++++++-----
 view/theme/frio/templates/group_side.tpl      |  4 +--
 .../frio/templates/widget/peoplefind.tpl      | 12 +++----
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/view/theme/frio/css/style.css b/view/theme/frio/css/style.css
index c32a6b8141..537652cd14 100644
--- a/view/theme/frio/css/style.css
+++ b/view/theme/frio/css/style.css
@@ -367,6 +367,10 @@ btn-eventnav:hover {
 aside .badge {
 	opacity: 0.7;
 }
+.forum-widget-entry .badge,
+.sidebar-group-li .badge {
+	margin-top: 6px;
+}
 
 /* disabled elements */
 .community-content-wrapper > h3,
@@ -1044,7 +1048,6 @@ aside .widget,
 	position: relative;
 	margin-bottom: 20px;
 	padding: 10px;
-	font-size: 13px;
 	overflow: auto;
 }
 aside .widget h3,
@@ -1052,7 +1055,7 @@ aside .widget h3,
 	font-weight: bold;
 	font-size: 16px;
 	margin: 0;
-	padding-bottom: 20px;
+	padding-bottom: 10px;
 }
 
 aside .widget ul,
@@ -1065,10 +1068,11 @@ aside .widget ul,
 	list-style: none;
 }
 
+aside .widget li .label {
+	float: left;
+}
 aside .widget li,
 .nav-container .widget li {
-	padding-top: 2px;
-	padding-bottom: 2px;
 	padding-left: 20px;
 	padding-right: 10px;
 }
@@ -1081,6 +1085,12 @@ aside .widget li.selected,
 	border-left: 3px solid $link_color !important;
 	padding-left: 17px;
 }
+.side-link-link,
+aside .widget li a {
+	display: block;
+	padding-top: 6px;
+	padding-bottom: 6px;
+}
 aside .widget li a,
 aside .widget li a:hover {
 	color: $font_color_darker;
@@ -1300,8 +1310,12 @@ div#sidebar-group-list {
 }
 
 .group-edit-tool {
+	padding-top: 0;
 	color: $font_color_darker;
 }
+.sidebar-widget-header .group-edit-tool {
+	margin-top: -5px;
+}
 
 .faded-icon {
 	color: $font_color_darker;
@@ -1316,9 +1330,12 @@ div#sidebar-group-list {
 	margin-left: 20px;
 }
 
-aside #group-sidebar .sidebar-group-li:hover .group-edit-tool.faded-icon,
-aside #saved-search-list .saved-search-li:hover .savedsearchdrop.faded-icon,
-aside .widget:hover .widget-action.faded-icon {
+aside .widget-action {
+	padding: 5px 10px;
+}
+aside #group-sidebar .sidebar-group-li .group-edit-tool.faded-icon:hover,
+aside #saved-search-list .saved-search-li .savedsearchdrop.faded-icon:hover,
+aside .widget.widget-action.faded-icon:hover {
 	opacity: 0.8;
 	transition: all 0.25s ease-in-out;
 }
@@ -1328,7 +1345,7 @@ aside .widget .widget-action.faded-icon:hover {
 	opacity: 1;
 }
 aside #group-sidebar li .group-checkbox {
-	margin: 0;
+	margin: 6px 0 0;
 }
 aside #group-sidebar li .group-edit-tool {
 	padding-right: 10px;
diff --git a/view/theme/frio/templates/group_side.tpl b/view/theme/frio/templates/group_side.tpl
index 0c5e76a05e..f9027e6123 100644
--- a/view/theme/frio/templates/group_side.tpl
+++ b/view/theme/frio/templates/group_side.tpl
@@ -2,7 +2,7 @@
         <h3>{{$title}}</h3>
 </span>
 <div class="widget" id="group-sidebar">
-	<div id="sidebar-group-header">
+	<div id="sidebar-group-header" class="sidebar-widget-header">
 		<span class="fakelink" onclick="openCloseWidget('group-sidebar', 'group-sidebar-inflated');">
 			<h3>{{$title}}</h3>
 		</span>
@@ -22,7 +22,7 @@
 		</form>
 		{{/if}}
 	</div>
-	<div id="sidebar-group-list">
+	<div id="sidebar-group-list" class="sidebar-widget-list">
 		{{* The list of available groups *}}
 		<ul role="menu" id="sidebar-group-ul">
 			{{foreach $groups as $group}}
diff --git a/view/theme/frio/templates/widget/peoplefind.tpl b/view/theme/frio/templates/widget/peoplefind.tpl
index 7cb84c6dfc..93c396b508 100644
--- a/view/theme/frio/templates/widget/peoplefind.tpl
+++ b/view/theme/frio/templates/widget/peoplefind.tpl
@@ -11,14 +11,14 @@
 	</form>
 
 	{{* Directory links *}}
-	<div class="side-link" id="side-directory-link"><a href="directory">{{$nv.local_directory}}</a></div>
-	<div class="side-link" id="side-directory-link"><a href="{{$nv.global_dir}}" target="extlink">{{$nv.directory}}</a></div>
+	<div class="side-link" id="side-directory-link"><a href="directory" class="side-link-link">{{$nv.local_directory}}</a></div>
+	<div class="side-link" id="side-directory-link"><a href="{{$nv.global_dir}}" class="side-link-link" target="extlink">{{$nv.directory}}</a></div>
 	{{* Additional links *}}
-	<div class="side-link" id="side-match-link"><a href="contact/match">{{$nv.similar}}</a></div>
-	<div class="side-link" id="side-suggest-link"><a href="contact/suggestions">{{$nv.suggest}}</a></div>
-	<div class="side-link" id="side-random-profile-link"><a href="randprof" target="extlink">{{$nv.random}}</a></div>
+	<div class="side-link" id="side-match-link"><a href="contact/match" class="side-link-link">{{$nv.similar}}</a></div>
+	<div class="side-link" id="side-suggest-link"><a href="contact/suggestions" class="side-link-link">{{$nv.suggest}}</a></div>
+	<div class="side-link" id="side-random-profile-link"><a href="randprof" class="side-link-link" target="extlink">{{$nv.random}}</a></div>
 
 	{{if $nv.inv}} 
-	<div class="side-link" id="side-invite-link"><button type="button" class="btn-link" onclick="addToModal('invite'); return false;">{{$nv.inv}}</button></div>
+	<div class="side-link" id="side-invite-link"><button type="button" class="btn-link side-link-link" onclick="addToModal('invite'); return false;">{{$nv.inv}}</button></div>
 	{{/if}}
 </div>