Skip to content

Commit d2ececa

Browse files
mbutlermbutler
committed
fix results and styling on email search
1 parent 01090e5 commit d2ececa

File tree

3 files changed

+156
-88
lines changed

3 files changed

+156
-88
lines changed

‎wp-content/themes/flint-water/style.css‎

Lines changed: 96 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ Text Domain: am
99
Tags: custom-menu, theme-options
1010
*/
1111

12-
/* Reset Root Font Size (Highest Priority) */
13-
html {
14-
font-size: 16px !important; /* Force 16px root */
12+
/* Reset Root Font Size (Highest Priority for WordPress) */
13+
html, body {
14+
font-size: 16px !important; /* Force 16px root, overriding theme */
1515
-webkit-text-size-adjust: 100% !important; /* Prevent mobile scaling */
1616
}
1717

1818
:root {
1919
font-size: 16px !important; /* Ensure consistency */
2020
}
2121

22-
/* Search Form (Bootstrap-Compatible, 16px) */
22+
/* Search Form (Bootstrap-Compatible, 16px, WordPress-Specific) */
2323
#email-search-form {
2424
font-size: 1rem !important; /* 16px, Bootstrap default */
2525
}
@@ -38,10 +38,12 @@ html {
3838
#email-search-form .form-control,
3939
#email-search-form select {
4040
padding: 0.375rem 0.75rem !important; /* Bootstrap, ~6px 12px */
41+
box-sizing: border-box !important; /* Ensure no overflow */
4142
}
4243

4344
#email-search-form .btn {
4445
padding: 0.375rem 0.75rem !important;
46+
box-sizing: border-box !important; /* Ensure no overflow */
4547
}
4648

4749
#email-search-form table {
@@ -54,6 +56,7 @@ html {
5456

5557
#email-search-form * {
5658
line-height: 1.5 !important;
59+
box-sizing: border-box !important; /* Ensure consistency */
5760
}
5861

5962
@media (max-width: 768px) {
@@ -75,6 +78,7 @@ html {
7578
#emailTable tbody td {
7679
font-size: 1.25rem !important; /* 20px, matches standalone */
7780
padding: 0.75rem !important; /* ~12px, fits 20px text */
81+
box-sizing: border-box !important; /* Ensure no overflow */
7882
}
7983

8084
#emailTable thead th {
@@ -85,6 +89,7 @@ html {
8589
#emailTable {
8690
width: 100%;
8791
border-spacing: 0;
92+
box-sizing: border-box !important; /* Ensure no overflow */
8893
}
8994

9095
#emailTable tbody td a {
@@ -97,6 +102,7 @@ html {
97102

98103
#emailTable tbody * {
99104
line-height: 1.5 !important;
105+
box-sizing: border-box !important; /* Ensure consistency */
100106
}
101107

102108
@media (max-width: 768px) {
@@ -110,83 +116,113 @@ html {
110116
}
111117
}
112118

113-
/* DataTables Controls (Match Standalone Exactly, 16px, Ultimate Override) */
114-
.dataTables_wrapper .dataTables_length,
115-
.dataTables_wrapper .dataTables_filter,
116-
.dataTables_wrapper .dataTables_info {
119+
#emailTable_wrapper .dataTables_length {
120+
display: flex !important; /* Align label and dropdown on the same line */
121+
align-items: center !important; /* Vertically center items */
122+
gap: 0.5rem !important; /* Space between label and dropdown */
123+
flex-wrap: nowrap !important; /* Prevent wrapping */
124+
box-sizing: border-box !important; /* Ensure no overflow */
125+
height: 2.25rem !important; /* Match input/dropdown height for consistency */
126+
padding-bottom: 1rem;
127+
}
128+
129+
#emailTable_wrapper .dataTables_length label,
130+
#emailTable_wrapper .dataTables_length label.form-label,
131+
#emailTable_wrapper .dataTables_length label.form-inline {
117132
font-size: 1rem !important; /* 16px, matches standalone */
118-
padding: 0.5rem 0 !important; /* ~8px, compact but readable */
133+
color: #212529 !important; /* Dark text for readability */
134+
margin: 0 !important; /* Remove default margins */
135+
padding: 0 !important; /* Remove default padding */
136+
line-height: 2.25rem !important; /* Match input/dropdown height for perfect centering */
137+
white-space: nowrap !important; /* Prevent label wrapping */
119138
box-sizing: border-box !important; /* Ensure no overflow */
120-
line-height: 1 !important; /* Prevent line height issues */
121-
position: relative !important; /* Ensure proper positioning */
139+
display: inline-flex !important; /* Ensure inline alignment */
140+
align-self: center !important; /* Center label vertically with dropdown */
122141
}
123142

124-
.dataTables_wrapper .dataTables_length select,
125-
.dataTables_wrapper .dataTables_filter input {
126-
font-size: 1rem !important; /* 16px */
127-
padding: 0.5rem 1rem !important; /* ~8px 16px, matches standalone */
128-
margin: 0 5px !important;
129-
width: auto !important;
130-
min-width: 50px !important; /* Dropdown fit */
143+
#emailTable_wrapper .dataTables_length select,
144+
#emailTable_wrapper .dataTables_length select.form-control,
145+
#emailTable_wrapper .dataTables_length select.input-sm {
146+
font-size: 1rem !important; /* 16px, matches standalone */
147+
padding: 0.25rem 0.5rem !important; /* ~4px 8px, compact but readable */
131148
box-sizing: border-box !important; /* Prevent overflow */
132-
border: 1px solid #ced4da !important; /* Bootstrap input border */
149+
border: 1px solid #ced4da !important; /* Bootstrap input border for consistency */
133150
line-height: 1 !important; /* Prevent line height issues */
134151
position: relative !important; /* Ensure proper positioning */
152+
background-color: #fff !important; /* White background */
153+
color: #212529 !important; /* Dark text for readability */
154+
border-radius: 0.25rem !important; /* Slight rounding for modern look */
155+
outline: none !important; /* Remove default outline */
156+
height: 2.25rem !important; /* Slightly taller dropdown */
157+
min-width: 50px !important; /* Ensure dropdown fits content */
158+
}
159+
160+
#emailTable_wrapper .dataTables_filter {
161+
display: flex !important; /* Align label and input on the same line */
162+
align-items: center !important; /* Vertically center items */
163+
gap: 0.5rem !important; /* Space between label and input */
164+
flex-wrap: nowrap !important; /* Prevent wrapping */
165+
box-sizing: border-box !important; /* Ensure no overflow */
166+
height: 2.25rem !important; /* Match input/dropdown height for consistency */
167+
padding-bottom: 1rem;
135168
}
136169

137-
.dataTables_wrapper .dataTables_filter input {
138-
width: 200px !important; /* Clean search box */
139-
box-sizing: border-box !important; /* Ensure fixed width */
140-
border: 1px solid #ced4da !important; /* Bootstrap input border */
141-
line-height: 1 !important; /* Prevent line height issues */
142-
position: relative !important; /* Ensure proper positioning */
170+
#emailTable_wrapper .dataTables_filter label,
171+
#emailTable_wrapper .dataTables_filter label.form-label,
172+
#emailTable_wrapper .dataTables_filter label.form-inline {
173+
font-size: 1rem !important; /* 16px, matches standalone */
174+
color: #212529 !important; /* Dark text for readability */
175+
margin: 0 !important; /* Remove default margins */
176+
padding: 0 !important; /* Remove default padding */
177+
line-height: 2.25rem !important; /* Match input/dropdown height for perfect centering */
178+
white-space: nowrap !important; /* Prevent label wrapping */
179+
box-sizing: border-box !important; /* Ensure no overflow */
180+
display: inline-flex !important; /* Ensure inline alignment */
181+
align-self: center !important; /* Center label vertically with input */
143182
}
144183

145-
/* DataTables Pagination (Match Standalone Exactly, 16px, Bootstrap-Style, Ultimate Override) */
146-
.dataTables_wrapper .dataTables_paginate {
147-
display: block !important; /* Use DataTables’ pagination */
148-
font-size: 1rem !important;
149-
box-sizing: border-box !important;
184+
#emailTable_wrapper .dataTables_filter input,
185+
#emailTable_wrapper .dataTables_filter input.form-control,
186+
#emailTable_wrapper .dataTables_filter input.input-sm {
187+
font-size: 1rem !important; /* 16px, matches standalone */
188+
padding: 0.25rem 0.5rem !important; /* ~4px 8px, compact but readable */
189+
width: 200px !important; /* Clean, fixed width */
190+
box-sizing: border-box !important; /* Prevent overflow */
191+
border: 1px solid #ced4da !important; /* Bootstrap input border for consistency */
150192
line-height: 1 !important; /* Prevent line height issues */
151193
position: relative !important; /* Ensure proper positioning */
194+
background-color: #fff !important; /* White background */
195+
color: #212529 !important; /* Dark text for readability */
196+
border-radius: 0.25rem !important; /* Slight rounding for modern look */
197+
outline: none !important; /* Remove default outline */
198+
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; /* Smooth focus transition */
199+
height: 2.25rem !important; /* Slightly taller input */
152200
}
153201

154-
.dataTables_wrapper .dataTables_paginate .paginate_button {
155-
padding: 0.5rem 1rem !important; /* ~8px 16px, matches standalone */
156-
margin: 0 2px !important;
157-
box-sizing: border-box !important; /* Ensure no overflow */
158-
border: 1px solid #ced4da !important; /* Bootstrap button border */
159-
background-color: #fff !important;
160-
color: #007bff !important;
161-
text-decoration: none !important;
162-
line-height: 1 !important; /* Prevent line height issues */
163-
position: relative !important; /* Ensure proper positioning */
202+
#emailTable_wrapper .dataTables_filter input:focus,
203+
#emailTable_wrapper .dataTables_filter input.form-control:focus,
204+
#emailTable_wrapper .dataTables_filter input.input-sm:focus {
205+
border-color: #80bdff !important; /* Blue border on focus */
206+
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important; /* Subtle focus shadow */
207+
outline: 0 !important; /* Remove outline on focus */
164208
}
165209

166-
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
167-
background-color: #007bff !important;
168-
color: white !important;
169-
border: 1px solid #007bff !important;
170-
box-sizing: border-box !important;
171-
line-height: 1 !important; /* Prevent line height issues */
172-
position: relative !important; /* Ensure proper positioning */
210+
/* Loading Spinner */
211+
.loading-spinner {
212+
text-align: center;
213+
padding: 20px;
214+
color: #007bff;
215+
margin-bottom: 20px;
173216
}
174217

175-
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
176-
background-color: #f5f5f5 !important;
177-
color: #0056b3 !important;
178-
box-sizing: border-box !important;
179-
line-height: 1 !important; /* Prevent line height issues */
180-
position: relative !important; /* Ensure proper positioning */
218+
.loading-spinner i {
219+
font-size: 3rem; /* Large spinner */
220+
animation: spin 1s linear infinite;
181221
}
182222

183-
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
184-
color: #ccc !important;
185-
pointer-events: none !important;
186-
box-sizing: border-box !important;
187-
border: 1px solid #ced4da !important;
188-
line-height: 1 !important; /* Prevent line height issues */
189-
position: relative !important; /* Ensure proper positioning */
223+
@keyframes spin {
224+
0% { transform: rotate(0deg); }
225+
100% { transform: rotate(360deg); }
190226
}
191227

192228
/* Menu Styling (Default Size, 16px) */

‎wp-content/themes/flint-water/template-parts/sections/section-email_search.php‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,6 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<title>Search Email</title>
8-
9-
<!-- Bootstrap CSS -->
10-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
11-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
12-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
13-
<link rel="stylesheet" type="text/css" href="style.css">
148
</head>
159
<body>
1610
<div class="container">
@@ -87,12 +81,5 @@
8781
</div>
8882
</div>
8983
</div>
90-
91-
<!-- Optional Bootstrap JS, and Popper.js before your other scripts -->
92-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
93-
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
94-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
95-
96-
<script src="js/bundle.js" charset="utf-8"></script>
9784
</body>
9885
</html>

0 commit comments

Comments
 (0)