From 5d2aeeddf88f16ade2a4d7f65805fdb295436fa0 Mon Sep 17 00:00:00 2001
From: Boone B Gorges <boonebgorges@gmail.com>
Date: Thu, 19 Oct 2023 18:28:27 +0000
Subject: [PATCH] Rewrite Social Links edit markup for better mobile
 appearance.

See #3256.
---
 .../themes/openlab/lib/member-funcs.php       | 34 +++++-----
 wp-content/themes/openlab/style.css           | 65 ++++++++++++++++--
 wp-content/themes/openlab/style.less          | 68 +++++++++++++++++--
 3 files changed, 140 insertions(+), 27 deletions(-)

diff --git a/wp-content/themes/openlab/lib/member-funcs.php b/wp-content/themes/openlab/lib/member-funcs.php
index 701585df90..bfa1422e67 100644
--- a/wp-content/themes/openlab/lib/member-funcs.php
+++ b/wp-content/themes/openlab/lib/member-funcs.php
@@ -1969,25 +1969,27 @@ function openlab_social_fields_edit_markup( $user_id = 0 ) {
 				<ul class="inline-element-list">
 					<?php $sfi = 1; ?>
 					<?php foreach ( $saved_social_fields as $saved_social_field_slug => $saved_social_field_value ) : ?>
-						<li class="form-inline label-combo row">
-							<div class="form-group col-sm-9">
-								<label for="social-links-<?php echo esc_attr( $sfi ); ?>-service">Platform</label>
-
-								<select name="social-links[<?php echo esc_attr( $sfi ); ?>][service]" id="social-links-<?php echo esc_attr( $sfi ); ?>">
-									<option value="">- Select a platform -</option>
-									<?php foreach ( $social_fields as $social_field_slug => $social_field_data ) : ?>
-										<option value="<?php echo esc_attr( $social_field_slug ); ?>" <?php selected( $social_field_slug, $saved_social_field_slug ); ?>><?php echo esc_html( $social_field_data['title'] ); ?></option>
-									<?php endforeach; ?>
-								</select>
-							</div>
-
-							<div class="form-group col-sm-15">
-								<label for="social-links-<?php echo esc_attr( $sfi ); ?>-url">URL or username</label> <input name="social-links[<?php echo esc_attr( $sfi ); ?>][url]" id="social-links-<?php echo esc_attr( $sfi ); ?>-url" class="form-control social-links-url" value="<?php echo esc_attr( $saved_social_field_value ); ?>" />
+						<li class="social-link-fields">
+							<div class="social-link-fields-inner">
+								<div class="form-group social-link-fields-service">
+									<label for="social-links-<?php echo esc_attr( $sfi ); ?>-service">Platform</label>
+
+									<select name="social-links[<?php echo esc_attr( $sfi ); ?>][service]" id="social-links-<?php echo esc_attr( $sfi ); ?>">
+										<option value="">- Select a platform -</option>
+										<?php foreach ( $social_fields as $social_field_slug => $social_field_data ) : ?>
+											<option value="<?php echo esc_attr( $social_field_slug ); ?>" <?php selected( $social_field_slug, $saved_social_field_slug ); ?>><?php echo esc_html( $social_field_data['title'] ); ?></option>
+										<?php endforeach; ?>
+									</select>
+								</div>
 
-								<div class="link-actions">
-									<button type="button" class="link-remove link-action"><span class="sr-only">Remove this link</span><i class="fa fa-minus-circle" role="presentation"></i></button>
+								<div class="form-group social-link-fields-url">
+									<label for="social-links-<?php echo esc_attr( $sfi ); ?>-url">URL or username</label> <input name="social-links[<?php echo esc_attr( $sfi ); ?>][url]" id="social-links-<?php echo esc_attr( $sfi ); ?>-url" class="form-control social-links-url" value="<?php echo esc_attr( $saved_social_field_value ); ?>" />
 								</div>
 							</div>
+
+							<div class="link-actions">
+								<button type="button" class="link-remove link-action"><span class="sr-only">Remove this link</span><i class="fa fa-minus-circle" role="presentation"></i></button>
+							</div>
 						</li>
 						<?php ++$sfi; ?>
 					<?php endforeach; ?>
diff --git a/wp-content/themes/openlab/style.css b/wp-content/themes/openlab/style.css
index 2beccc8b1a..672ccfebeb 100644
--- a/wp-content/themes/openlab/style.css
+++ b/wp-content/themes/openlab/style.css
@@ -7746,14 +7746,58 @@ input:disabled + label {
   border-radius: 4px;
   padding: 10px;
 }
+.link-edit-items .social-link-fields {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  align-items: stretch;
+}
+@media (max-width: 767px) {
+  .link-edit-items .social-link-fields {
+    gap: 0;
+  }
+}
+.link-edit-items .social-link-fields-inner {
+  display: flex;
+  gap: 20px;
+  flex: 0 0 520px;
+}
+@media (max-width: 767px) {
+  .link-edit-items .social-link-fields-inner {
+    display: block;
+    flex: 1;
+    order: 1;
+  }
+}
+.link-edit-items .social-link-fields-service {
+  flex: 0 0 250px;
+}
+@media (max-width: 767px) {
+  .link-edit-items .social-link-fields-service {
+    flex: 1;
+  }
+}
+.link-edit-items .social-link-fields-url {
+  flex: 0 0 250px;
+}
+@media (max-width: 767px) {
+  .link-edit-items .social-link-fields-url {
+    flex: 1;
+  }
+}
 .link-edit-items .link-actions {
-  display: inline-block;
-  margin-top: -15px;
-  vertical-align: middle;
+  flex: 0 0 100px;
+  display: flex;
+  align-items: center;
+  margin-top: -10px;
 }
 @media (max-width: 767px) {
   .link-edit-items .link-actions {
-    margin-top: 0;
+    align-items: flex-start;
+    flex: 0 1 40px;
+    margin-top: 20px;
+    margin-left: -8px;
+    order: 0;
   }
 }
 .link-edit-items button.link-action {
@@ -7768,6 +7812,17 @@ input:disabled + label {
 .link-edit-items button.link-action.link-add .fa {
   margin-left: 0;
 }
+@media (max-width: 767px) {
+  .link-edit-items button.link-action.link-add {
+    position: relative;
+  }
+  .link-edit-items button.link-action.link-add::after {
+    content: "Platform";
+    font-size: 13px;
+    position: absolute;
+    top: 7px;
+  }
+}
 @media (max-width: 767px) {
   .link-edit-items .link-url {
     display: inline-block;
@@ -7777,7 +7832,7 @@ input:disabled + label {
   width: auto;
 }
 .link-edit-items select {
-  width: 90%;
+  width: 100%;
 }
 .submenu .submenu-text {
   margin-right: 8px;
diff --git a/wp-content/themes/openlab/style.less b/wp-content/themes/openlab/style.less
index a9eb6d2efb..a3187dfdeb 100644
--- a/wp-content/themes/openlab/style.less
+++ b/wp-content/themes/openlab/style.less
@@ -542,12 +542,57 @@ input:disabled+label {
 		padding: 10px;
 	}
 
+	.social-link-fields {
+		display: flex;
+		gap: 10px;
+		width: 100%;
+		align-items: stretch;
+
+        @media( max-width: @screen-xs-max ) {
+			gap: 0;
+		}
+	}
+
+	.social-link-fields-inner {
+		display: flex;
+		gap: 20px;
+		flex: 0 0 520px;
+
+        @media( max-width: @screen-xs-max ) {
+			display: block;
+			flex: 1;
+			order: 1;
+		}
+	}
+
+	.social-link-fields-service {
+		flex: 0 0 250px;
+
+        @media( max-width: @screen-xs-max ) {
+			flex: 1;
+		}
+	}
+
+	.social-link-fields-url {
+		flex: 0 0 250px;
+
+        @media( max-width: @screen-xs-max ) {
+			flex: 1;
+		}
+	}
+
 	.link-actions {
-		display: inline-block;
-		margin-top: -15px;
-		vertical-align: middle;
-		@media(max-width: @screen-xs-max){
-			margin-top: 0;
+		flex: 0 0 100px;
+		display: flex;
+		align-items: center;
+		margin-top: -10px;
+
+        @media( max-width: @screen-xs-max ) {
+			align-items: flex-start;
+			flex: 0 1 40px;
+			margin-top: 20px;
+			margin-left: -8px;
+			order: 0;
 		}
 	}
 
@@ -563,6 +608,17 @@ input:disabled+label {
 		.fa {
 			margin-left: 0;
 		}
+
+        @media( max-width: @screen-xs-max ) {
+			position: relative;
+
+			&::after {
+				content: "Platform";
+				font-size: 13px;
+				position: absolute;
+				top: 7px;
+			}
+		}
 	}
 
 	.link-url {
@@ -578,7 +634,7 @@ input:disabled+label {
 	}
 
 	select {
-		width: 90%;
+		width: 100%;
 	}
 }