[ticket/11552] Better responsive post buttons

PHPBB3-11552

phpBB/styles/prosilver/template/forum_fn.js

@@ -600,13 +600,13 @@ function insert_single_user(formId, user)
 		});
 
 		// Responsive link lists
-		$('.linklist:not(.navlinks, .skip-responsive)').each(function() {
+		$('.linklist:not(.navlinks, .skip-responsive), .postbody ul.profile-icons:not(.skip-responsive)').each(function() {
 			var $this = $(this),
 				$body = $('body'),
 				links = $this.children().not('.skip-responsive'),
 				html = '<li class="responsive-menu" style="display:none;"><a href="javascript:void(0);" class="responsive-menu-link">&nbsp;</a><ul class="responsive-popup" style="display:none;" /></li>',
 				// List of items that should be hidden last
-				filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs',
+				filterString = '.pagination, .icon-notifications, .icon-pm, .icon-logout, .icon-login, .mark-read, .breadcrumbs, .edit-icon, .quote-icon',
 				filtered = links.filter(filterString);
 
 			if (links.is('.rightside'))

phpBB/styles/prosilver/theme/buttons.css

@@ -140,6 +140,65 @@ ul.profile-icons li a:hover { background: none; }
 	margin: 0 3px;
 }
 
+/* Responsive icons in postbody */
+.postbody ul.profile-icons.responsive .responsive-menu {
+	position: relative;
+}
+
+ul.profile-icons.responsive a.responsive-menu-link {
+	display: inline-block;
+	position: relative;
+	margin: 0 5px;
+	width: 20px;
+	height: 20px;
+	text-decoration: none;
+	background: none top left no-repeat;
+}
+
+ul.profile-icons.responsive a.responsive-menu-link:hover {
+	background-position: 0 -20px;
+}
+
+ul.profile-icons.responsive a.responsive-menu-link:before {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 7px;
+	height: .125em;
+	width: 14px;
+	border-bottom: 0.125em solid transparent;
+	border-top: 0.375em double transparent;
+}
+
+.postbody ul.profile-icons.responsive .responsive-popup {
+	left: auto;
+	right: 7px;
+	top: 19px;
+}
+
+.postbody ul.profile-icons.responsive .responsive-popup li, .postbody ul.profile-icons.responsive .responsive-popup li a {
+	display: block;
+	background: transparent none;
+	width: auto;
+	height: auto;
+	margin: 0;
+	padding: 0;
+	float: none;
+	list-style-type: none;
+}
+
+.postbody ul.profile-icons.responsive .responsive-popup li span {
+	display: block;
+	text-align: right;
+	padding: 2px;
+	font-size: 1.2em;
+	line-height: 1.2em;
+}
+
+.hasjs .postbody ul.profile-icons {
+	max-width: 40%;
+}
+
 /* Profile & navigation icons */
 .email-icon, .email-icon a		{ background: none top left no-repeat; }
 .aim-icon, .aim-icon a			{ background: none top left no-repeat; }
@@ -173,6 +232,7 @@ ul.profile-icons li.edit-icon	{ width: 42px; height: 20px; }
 ul.profile-icons li.delete-icon	{ width: 20px; height: 20px; }
 ul.profile-icons li.info-icon	{ width: 20px; height: 20px; }
 ul.profile-icons li.warn-icon	{ width: 20px; height: 20px; }
+ul.profile-icons a.responsive-menu-link	{ width: 20px; height: 20px; }
 
 /* Fix profile icon default margins */
 ul.profile-icons li.edit-icon	{ margin: 0 0 0 3px; }

phpBB/styles/prosilver/theme/colours.css

@@ -710,6 +710,7 @@ a.sendemail {
 .jabber-icon, .jabber-icon a		{ background-image: url("./images/icon_contact_jabber.gif"); }
 .pm-icon, .pm-icon a				{ background-image: url("./en/icon_contact_pm.gif"); }
 .quote-icon, .quote-icon a		{ background-image: url("./en/icon_post_quote.gif"); }
+ul.profile-icons.responsive a.responsive-menu-link	{ background-image: url("./images/icon_post_menu.png"); }
 
 /* Moderator icons */
 .report-icon, .report-icon a		{ background-image: url("./images/icon_post_report.gif"); }