Skip to content

Commit

Permalink
Rewrite Social Links edit markup for better mobile appearance.
Browse files Browse the repository at this point in the history 
See #3256.
  • Loading branch information
@boonebgorges
boonebgorges committed Oct 19, 2023
1 parent 8ab0d99 commit 5d2aeed
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 27 deletions.
34 changes: 18 additions & 16 deletions wp-content/themes/openlab/lib/member-funcs.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; ?>
Expand Down
65 changes: 60 additions & 5 deletions wp-content/themes/openlab/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -7777,7 +7832,7 @@ input:disabled + label {
width: auto;
}
.link-edit-items select {
width: 90%;
width: 100%;
}
.submenu .submenu-text {
margin-right: 8px;
Expand Down
68 changes: 62 additions & 6 deletions wp-content/themes/openlab/style.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand All @@ -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 {
Expand All @@ -578,7 +634,7 @@ input:disabled+label {
}

select {
width: 90%;
width: 100%;
}
}

Expand Down

0 comments on commit 5d2aeed

Please sign in to comment.