Skip to content

Commit a8cde81

Browse files
iamdharmeshiamdharmesh
committed
Some improvements in responsive design.
1 parent 0ce9e74 commit a8cde81

File tree

2 files changed

+87
-66
lines changed

2 files changed

+87
-66
lines changed

‎assets/css/admin.css‎

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1179,23 +1179,30 @@ body.toplevel_page_mailchimp_sf_options a.mailchimp-sf-button.btn-primary:hover
11791179
justify-content: space-between;
11801180
}
11811181

1182-
.mailchimp-sf-main-setings-wrapper {
1182+
.mailchimp-sf-main-setings-wrapper,
1183+
.mailchimp-sf-user-sync-page-wrapper {
11831184
display: flex;
11841185
flex-direction: row;
11851186
align-items: flex-start;
11861187
justify-content: space-between;
11871188
gap: 16px;
11881189
}
11891190

1190-
.mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings {
1191+
.mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1192+
.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
11911193
flex: 3;
11921194
}
11931195

1194-
.mailchimp-sf-main-setings-wrapper .mailchimp-sf-settings-form-previewer {
1196+
.mailchimp-sf-main-setings-wrapper .mailchimp-sf-settings-form-previewer,
1197+
.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
11951198
flex: 1;
11961199
width: 100%;
11971200
}
11981201

1202+
.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-settings-column {
1203+
min-width: 250px;
1204+
}
1205+
11991206
.mailchimp-sf-main-settings,
12001207
.mailchimp-sf-user-sync-page {
12011208
max-width: 800px;
@@ -1567,11 +1574,13 @@ input:checked + .mailchimp-sf-toggle-slider:before {
15671574
}
15681575

15691576
@media screen and (max-width: 992px) {
1570-
.mailchimp-sf-main-setings-wrapper {
1577+
.mailchimp-sf-main-setings-wrapper,
1578+
.mailchimp-sf-user-sync-page-wrapper {
15711579
flex-direction: column;
15721580
}
15731581

1574-
.mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings {
1582+
.mailchimp-sf-main-setings-wrapper .mailchimp-sf-main-settings,
1583+
.mailchimp-sf-user-sync-page-wrapper .mailchimp-sf-user-sync-page {
15751584
flex: 1;
15761585
}
15771586
}
@@ -1589,10 +1598,6 @@ input:checked + .mailchimp-sf-toggle-slider:before {
15891598
.mailchimp-sf-header {
15901599
padding: 14px 20px;
15911600
}
1592-
1593-
table.widefat.mailchimp-sf-user-sync-errors-table {
1594-
table-layout: fixed;
1595-
}
15961601
}
15971602

15981603
@media screen and (max-width: 480px) {
@@ -1653,4 +1658,17 @@ input:checked + .mailchimp-sf-toggle-slider:before {
16531658
margin-left: 0px;
16541659
margin-top: 12px;
16551660
}
1661+
1662+
.mailchimp-sf-user-sync-page table.widefat.mailchimp-sf-settings-table {
1663+
table-layout: fixed;
1664+
}
1665+
1666+
.mailchimp-sf-settings-table table.widefat.mailchimp-sf-user-sync-errors-table {
1667+
table-layout: auto;
1668+
}
1669+
1670+
.mailchimp-sf-user-sync-errors {
1671+
width: 100%;
1672+
overflow-x: scroll;
1673+
}
16561674
}

‎includes/admin/templates/user-sync.php‎

Lines changed: 60 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,68 +7,71 @@
77

88
global $wp_settings_sections, $wp_settings_fields;
99
?>
10-
<div class="mailchimp-sf-user-sync-page mailchimp-sf-section">
11-
<form action="options.php" method="post" class="mailchimp-sf-user-sync-form">
12-
<table class="widefat mailchimp-sf-settings-table">
13-
<thead>
14-
<tr>
15-
<th>
16-
<h2 class="mailchimp-sf-settings-table-title"><?php esc_html_e( 'User sync settings', 'mailchimp' ); ?></h2>
17-
<p class="mailchimp-sf-settings-table-description"><?php esc_html_e( 'Sync your contacts between WordPress and Mailchimp', 'mailchimp' ); ?></p>
18-
</th>
19-
</tr>
20-
</thead>
21-
<tbody>
22-
<tr valign="top">
23-
<td>
24-
<div class="mailchimp-sf-user-sync-settings-fields">
25-
<?php
26-
$page = 'mailchimp_sf_user_sync_settings';
27-
settings_fields( $page );
10+
<div class="mailchimp-sf-user-sync-page-wrapper">
11+
<div class="mailchimp-sf-user-sync-page mailchimp-sf-section">
12+
<form action="options.php" method="post" class="mailchimp-sf-user-sync-form">
13+
<table class="widefat mailchimp-sf-settings-table">
14+
<thead>
15+
<tr>
16+
<th>
17+
<h2 class="mailchimp-sf-settings-table-title"><?php esc_html_e( 'User sync settings', 'mailchimp' ); ?></h2>
18+
<p class="mailchimp-sf-settings-table-description"><?php esc_html_e( 'Sync your contacts between WordPress and Mailchimp', 'mailchimp' ); ?></p>
19+
</th>
20+
</tr>
21+
</thead>
22+
<tbody>
23+
<tr valign="top">
24+
<td>
25+
<div class="mailchimp-sf-user-sync-settings-fields">
26+
<?php
27+
$page = 'mailchimp_sf_user_sync_settings';
28+
settings_fields( $page );
2829

29-
if ( isset( $wp_settings_sections[ $page ] ) ) {
30-
foreach ( $wp_settings_sections[ $page ] as $section ) {
31-
if ( isset( $wp_settings_fields[ $page ][ $section['id'] ] ) ) {
32-
foreach ( (array) $wp_settings_fields[ $page ][ $section['id'] ] as $field ) {
33-
?>
34-
<div class="mailchimp-sf-user-sync-settings-field <?php echo esc_attr( $field['args']['class'] ?? '' ); ?>">
35-
<?php
36-
echo '<div class="mailchimp-sf-user-sync-settings-field-label">';
37-
if ( ! empty( $field['args']['label_for'] ) ) {
38-
echo '<label for="' . esc_attr( $field['args']['label_for'] ) . '">' . esc_html( $field['title'] ) . '</label>';
39-
} else {
40-
echo '<span>' . esc_html( $field['title'] ) . '</span>';
41-
}
42-
echo '</div>';
43-
44-
echo '<div class="mailchimp-sf-user-sync-settings-field-content">';
45-
call_user_func( $field['callback'], $field['args'] );
46-
echo '</div>';
30+
if ( isset( $wp_settings_sections[ $page ] ) ) {
31+
foreach ( $wp_settings_sections[ $page ] as $section ) {
32+
if ( isset( $wp_settings_fields[ $page ][ $section['id'] ] ) ) {
33+
foreach ( (array) $wp_settings_fields[ $page ][ $section['id'] ] as $field ) {
4734
?>
48-
</div>
49-
<?php
35+
<div class="mailchimp-sf-user-sync-settings-field <?php echo esc_attr( $field['args']['class'] ?? '' ); ?>">
36+
<?php
37+
echo '<div class="mailchimp-sf-user-sync-settings-field-label">';
38+
if ( ! empty( $field['args']['label_for'] ) ) {
39+
echo '<label for="' . esc_attr( $field['args']['label_for'] ) . '">' . esc_html( $field['title'] ) . '</label>';
40+
} else {
41+
echo '<span>' . esc_html( $field['title'] ) . '</span>';
42+
}
43+
echo '</div>';
44+
45+
echo '<div class="mailchimp-sf-user-sync-settings-field-content">';
46+
call_user_func( $field['callback'], $field['args'] );
47+
echo '</div>';
48+
?>
49+
</div>
50+
<?php
51+
}
5052
}
5153
}
5254
}
53-
}
54-
?>
55-
</div>
56-
</td>
57-
</tr>
58-
</tbody>
59-
</table>
55+
?>
56+
</div>
57+
</td>
58+
</tr>
59+
</tbody>
60+
</table>
6061

61-
<div class="mailchimp-sf-section-footer">
62-
<?php
63-
submit_button( __( 'Save Changes', 'mailchimp' ), 'mailchimp-sf-button mailchimp-sf-button-submit btn-primary', 'mailchimp_sf_user_sync_settings_submit' );
64-
?>
65-
</div>
66-
</form>
62+
<div class="mailchimp-sf-section-footer">
63+
<?php
64+
submit_button( __( 'Save Changes', 'mailchimp' ), 'mailchimp-sf-button mailchimp-sf-button-submit btn-primary', 'mailchimp_sf_user_sync_settings_submit' );
65+
?>
66+
</div>
67+
</form>
6768

68-
<?php
69-
/**
70-
* Render the user sync errors.
71-
*/
72-
do_action( 'mailchimp_sf_user_sync_after_form' );
73-
?>
69+
<?php
70+
/**
71+
* Render the user sync errors.
72+
*/
73+
do_action( 'mailchimp_sf_user_sync_after_form' );
74+
?>
75+
</div>
76+
<div class="mailchimp-sf-user-sync-settings-column"></div>
7477
</div>

0 commit comments

Comments
 (0)