Adjust UCP settings layout

Author: iMattPro

styles/all/theme/phpbb_wpn.css

@@ -16,6 +16,43 @@
 	margin: 0 0 8px;
 }
 
+.wpn-fieldset {
+	display: grid;
+	column-gap: 1rem;
+	grid-template-columns: 1fr 320px;
+	row-gap: 1.25rem;
+}
+
+.wpn-fieldset > dl {
+	display: contents;
+}
+
+/* Optional styling */
+.wpn-fieldset dt {
+	float: none;
+	align-self: start;
+	width: auto;
+}
+
+.wpn-fieldset dd {
+	display: flex;
+	align-items: center;
+	margin: 0;
+}
+
+.wpn-fieldset dt label {
+	line-height: 1.4;
+	display: inline-block;
+}
+
+.wpn-fieldset .fa-toggle-on {
+	color: #105289;
+}
+
+.wpn-fieldset .fa-toggle-off {
+	color: #5d5d5d;
+}
+
 .wpn-notification-dropdown-footer {
 	font-size: 12px;
 	white-space: nowrap;
@@ -47,8 +84,17 @@
 }
 
 @media (max-width: 700px) {
-	.wpn.button {
-		margin-top: 8px;
+	.wpn-fieldset {
+		grid-template-columns: 1fr;
+		row-gap: 0.5rem;
+	}
+
+	.wpn-fieldset dt {
+		grid-column: 1;
+	}
+
+	.wpn-fieldset dd {
+		grid-column: 1;
 	}
 }
 

styles/prosilver/template/event/ucp_notifications_content_before.html

@@ -1,22 +1,20 @@
 {% if NOTIFICATIONS_WEBPUSH_ENABLE and notification_types is defined %}
 	<div class="panel">
 		<div class="inner">
-			<fieldset>
+			<fieldset class="wpn-fieldset">
 				<dl>
-					<dt><label for="subscribe_webpush">{{ lang('NOTIFY_WEBPUSH_NOTIFICATIONS') ~ lang('COLON') }}</label></dt>
+					<dt><label for="subscribe_webpush">{{ lang('NOTIFY_WEBPUSH_NOTIFICATIONS') ~ lang('COLON') }}</label><br><span>{{ lang('NOTIFY_WEBPUSH_ENABLE_EXPLAIN') }}</span></dt>
 					<dd>
 						<input id="subscribe_webpush" type="submit" name="subscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_ENABLE') }}" class="wpn button1 button button-form" data-l-err="{{ lang('INFORMATION')|e('html_attr') }}" data-l-msg="{{ lang('NOTIFY_WEBPUSH_DENIED')|e('html_attr') }}" data-l-unsupported="{{ lang('NOTIFY_WEBPUSH_NOT_SUPPORTED')|e('html_attr') }}">
 						<input id="unsubscribe_webpush" type="submit" name="unsubscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_DISABLE') }}" class="wpn button1 button button-form hidden">
-						<br><span>{{ lang('NOTIFY_WEBPUSH_ENABLE_EXPLAIN') }}</span>
 					</dd>
 				</dl>
 				<dl>
-					<dt><label for="toggle_popup_prompt">{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE') ~ lang('COLON') }}</label></dt>
+					<dt><label for="toggle_popup_prompt">{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE') ~ lang('COLON') }}</label><br><span>{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE_EXPLAIN') }}</span></dt>
 					<dd>
 						<button id="toggle_popup_prompt" type="button" name="toggle_popup_prompt" class="wpn-toggle-button" aria-label="{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE') }}">
 							<i class="icon icon-lg fa-fw fa-toggle-{% if S_WEBPUSH_POPUP_DISABLED %}on{% else %}off{% endif %}" aria-hidden="true"></i>
 						</button>
-						<br><span>{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE_EXPLAIN') }}</span>
 					</dd>
 				</dl>
 			</fieldset>