π Make Custom Pagination Compact Size Like Product UI
π― Compact Design Implementation: - Reduced container padding from 16px 24px to 8px 16px - Smaller border radius from 12px to 8px - Reduced margins from 16px to 8px - Compact font size 13px for overall container π Button Size Optimization: - Pagination buttons: 32px β 24px (25% smaller) - Font size: 14px β 11px for better fit - Border width: 2px β 1px for cleaner look - Reduced gap between buttons: 8px β 4px π€ Text and Icon Adjustments: - Info text: 14px β 12px font size - Select dropdown: 14px β 12px font size - Icon size: 24px β 16px (emoji icon) - Reduced padding on select: 4px 8px β 2px 6px π¨ Visual Refinements: - Lighter shadows for compact appearance - Reduced blur effects: blur(10px) β blur(8px) - Smaller gaps throughout: 12px β 6px/8px - Faster transitions: 0.3s β 0.2s π± Space Efficiency: - More compact layout fits better in table - Maintains all functionality with smaller footprint - Better proportion matching Product component - Improved visual hierarchy with smaller elements π User Experience: - Still fully functional with all features - Better integration with table layout - Cleaner, more professional appearance - Consistent sizing with Product pagination
This commit is contained in:
tuan.cna
parent
766ae95926
commit
4784fc8bf5
@ -710,7 +710,7 @@ const ProjectTracker = () => {
|
||||
</Spin>
|
||||
</div>
|
||||
|
||||
{/* Custom Pagination */}
|
||||
{/* Custom Pagination - Compact Size */}
|
||||
<div
|
||||
key={`pagination-${themeKey}`}
|
||||
className={`custom-pagination-container ${isDarkMode ? '' : 'light-mode'}`}
|
||||
@ -721,43 +721,32 @@ const ProjectTracker = () => {
|
||||
border: isDarkMode
|
||||
? '1px solid rgba(52, 152, 219, 0.3)'
|
||||
: '1px solid rgba(0, 0, 0, 0.1)',
|
||||
borderRadius: '12px',
|
||||
borderRadius: '8px',
|
||||
boxShadow: isDarkMode
|
||||
? '0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(52, 152, 219, 0.1)'
|
||||
: '0 2px 12px rgba(0, 0, 0, 0.08)',
|
||||
backdropFilter: isDarkMode ? 'blur(10px)' : 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
? '0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(52, 152, 219, 0.1)'
|
||||
: '0 1px 6px rgba(0, 0, 0, 0.06)',
|
||||
backdropFilter: isDarkMode ? 'blur(8px)' : 'none',
|
||||
transition: 'all 0.2s ease',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
padding: '16px 24px',
|
||||
margin: '16px 0'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px)';
|
||||
e.currentTarget.style.boxShadow = isDarkMode
|
||||
? '0 12px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(52, 152, 219, 0.2)'
|
||||
: '0 4px 20px rgba(0, 0, 0, 0.12)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = isDarkMode
|
||||
? '0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(52, 152, 219, 0.1)'
|
||||
: '0 2px 12px rgba(0, 0, 0, 0.08)';
|
||||
padding: '8px 16px',
|
||||
margin: '8px 0',
|
||||
fontSize: '13px'
|
||||
}}
|
||||
>
|
||||
{/* Pagination Info */}
|
||||
{/* Pagination Info - Compact */}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '16px',
|
||||
marginBottom: '8px',
|
||||
flexWrap: 'wrap',
|
||||
gap: '12px'
|
||||
gap: '8px'
|
||||
}}
|
||||
>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '14px', fontWeight: '500'}}>Row Per Page</span>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '12px', fontWeight: '500'}}>Row Per Page</span>
|
||||
<select
|
||||
value={pageSize}
|
||||
onChange={(e) => {
|
||||
@ -772,13 +761,13 @@ const ProjectTracker = () => {
|
||||
border: isDarkMode
|
||||
? '1px solid rgba(52, 152, 219, 0.3)'
|
||||
: '1px solid #dee2e6',
|
||||
borderRadius: '6px',
|
||||
borderRadius: '4px',
|
||||
color: isDarkMode ? '#ffffff' : '#495057',
|
||||
padding: '4px 8px',
|
||||
fontSize: '14px',
|
||||
padding: '2px 6px',
|
||||
fontSize: '12px',
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
opacity: loading ? 0.7 : 1,
|
||||
boxShadow: isDarkMode ? 'none' : '0 1px 3px rgba(0, 0, 0, 0.1)'
|
||||
boxShadow: isDarkMode ? 'none' : '0 1px 2px rgba(0, 0, 0, 0.05)'
|
||||
}}
|
||||
>
|
||||
<option value={10} style={{background: isDarkMode ? '#2c3e50' : '#ffffff', color: isDarkMode ? '#ffffff' : '#495057'}}>10</option>
|
||||
@ -786,37 +775,37 @@ const ProjectTracker = () => {
|
||||
<option value={50} style={{background: isDarkMode ? '#2c3e50' : '#ffffff', color: isDarkMode ? '#ffffff' : '#495057'}}>50</option>
|
||||
<option value={100} style={{background: isDarkMode ? '#2c3e50' : '#ffffff', color: isDarkMode ? '#ffffff' : '#495057'}}>100</option>
|
||||
</select>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '14px', fontWeight: '500'}}>Entries</span>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '12px', fontWeight: '500'}}>Entries</span>
|
||||
</div>
|
||||
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '12px'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
|
||||
<div
|
||||
style={{
|
||||
background: isDarkMode
|
||||
? 'linear-gradient(45deg, #3498db, #2ecc71)'
|
||||
: 'linear-gradient(45deg, #007bff, #28a745)',
|
||||
borderRadius: '50%',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '12px',
|
||||
fontSize: '8px',
|
||||
boxShadow: isDarkMode
|
||||
? '0 2px 8px rgba(52, 152, 219, 0.3)'
|
||||
: '0 2px 8px rgba(0, 123, 255, 0.2)',
|
||||
transition: 'all 0.3s ease'
|
||||
? '0 1px 4px rgba(52, 152, 219, 0.3)'
|
||||
: '0 1px 4px rgba(0, 123, 255, 0.2)',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
π
|
||||
</div>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '14px', fontWeight: '500'}}>
|
||||
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '12px', fontWeight: '500'}}>
|
||||
Showing <strong style={{color: isDarkMode ? '#3498db' : '#007bff'}}>{startRecord}</strong> to <strong style={{color: isDarkMode ? '#3498db' : '#007bff'}}>{endRecord}</strong> of <strong style={{color: isDarkMode ? '#e74c3c' : '#dc3545'}}>{totalCount}</strong> entries
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pagination Buttons */}
|
||||
{/* Pagination Buttons - Compact */}
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
@ -824,7 +813,7 @@ const ProjectTracker = () => {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
gap: '4px'
|
||||
}}
|
||||
>
|
||||
{/* Numbered Pagination Buttons */}
|
||||
@ -844,23 +833,23 @@ const ProjectTracker = () => {
|
||||
? (isDarkMode ? 'linear-gradient(45deg, #f39c12, #e67e22)' : 'linear-gradient(135deg, #007bff, #0056b3)')
|
||||
: (isDarkMode ? 'linear-gradient(45deg, #34495e, #2c3e50)' : 'linear-gradient(135deg, #ffffff, #f8f9fa)'),
|
||||
border: isActive
|
||||
? (isDarkMode ? '2px solid #f39c12' : '2px solid #007bff')
|
||||
? (isDarkMode ? '1px solid #f39c12' : '1px solid #007bff')
|
||||
: (isDarkMode ? '1px solid rgba(52, 152, 219, 0.3)' : '1px solid #dee2e6'),
|
||||
borderRadius: '50%',
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
color: isActive
|
||||
? '#ffffff'
|
||||
: (isDarkMode ? '#ffffff' : '#495057'),
|
||||
fontSize: '14px',
|
||||
fontWeight: '700',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
cursor: loading ? 'not-allowed' : 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
transition: 'all 0.2s ease',
|
||||
boxShadow: loading
|
||||
? 'none'
|
||||
: isActive
|
||||
? (isDarkMode ? '0 4px 12px rgba(243, 156, 18, 0.4)' : '0 3px 8px rgba(0, 123, 255, 0.3)')
|
||||
: (isDarkMode ? '0 2px 8px rgba(52, 73, 94, 0.3)' : '0 1px 3px rgba(0, 0, 0, 0.1)'),
|
||||
? (isDarkMode ? '0 2px 6px rgba(243, 156, 18, 0.3)' : '0 2px 4px rgba(0, 123, 255, 0.2)')
|
||||
: (isDarkMode ? '0 1px 4px rgba(52, 73, 94, 0.2)' : '0 1px 2px rgba(0, 0, 0, 0.08)'),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
@ -871,10 +860,10 @@ const ProjectTracker = () => {
|
||||
e.target.style.background = isDarkMode
|
||||
? 'linear-gradient(45deg, #3498db, #2980b9)'
|
||||
: 'linear-gradient(135deg, #e9ecef, #f8f9fa)';
|
||||
e.target.style.transform = isDarkMode ? 'scale(1.1)' : 'translateY(-1px) scale(1.05)';
|
||||
e.target.style.transform = isDarkMode ? 'scale(1.05)' : 'translateY(-1px) scale(1.02)';
|
||||
e.target.style.boxShadow = isDarkMode
|
||||
? '0 4px 12px rgba(52, 152, 219, 0.4)'
|
||||
: '0 3px 8px rgba(0, 0, 0, 0.15)';
|
||||
? '0 2px 6px rgba(52, 152, 219, 0.3)'
|
||||
: '0 2px 4px rgba(0, 0, 0, 0.12)';
|
||||
e.target.style.borderColor = isDarkMode ? '#3498db' : '#adb5bd';
|
||||
}
|
||||
}}
|
||||
@ -885,8 +874,8 @@ const ProjectTracker = () => {
|
||||
: 'linear-gradient(135deg, #ffffff, #f8f9fa)';
|
||||
e.target.style.transform = 'scale(1)';
|
||||
e.target.style.boxShadow = isDarkMode
|
||||
? '0 2px 8px rgba(52, 73, 94, 0.3)'
|
||||
: '0 1px 3px rgba(0, 0, 0, 0.1)';
|
||||
? '0 1px 4px rgba(52, 73, 94, 0.2)'
|
||||
: '0 1px 2px rgba(0, 0, 0, 0.08)';
|
||||
e.target.style.borderColor = isDarkMode ? 'rgba(52, 152, 219, 0.3)' : '#dee2e6';
|
||||
}
|
||||
}}
|
||||
|
||||
Loadingβ¦
x
Reference in New Issue
Block a user