apksel-dev/pos-dashboard
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

πŸ“ Make Custom Pagination Compact Size Like Product UI

Browse Source 
🎯 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 2025-05-30 15:56:20 +07:00
parent 766ae95926
commit 4784fc8bf5
1 changed files with 42 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/feature-module/projects/projecttracker.jsx
View File

@ -710,7 +710,7 @@ const ProjectTracker = () => {
</Spin> </Spin>
</div> </div>
{/* Custom Pagination */} {/* Custom Pagination - Compact Size */}
<div <div
key={`pagination-${themeKey}`} key={`pagination-${themeKey}`}
className={`custom-pagination-container ${isDarkMode ? '' : 'light-mode'}`} className={`custom-pagination-container ${isDarkMode ? '' : 'light-mode'}`}
@ -721,43 +721,32 @@ const ProjectTracker = () => {
border: isDarkMode border: isDarkMode
? '1px solid rgba(52, 152, 219, 0.3)' ? '1px solid rgba(52, 152, 219, 0.3)'
: '1px solid rgba(0, 0, 0, 0.1)', : '1px solid rgba(0, 0, 0, 0.1)',
borderRadius: '12px', borderRadius: '8px',
boxShadow: isDarkMode boxShadow: isDarkMode
? '0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(52, 152, 219, 0.1)' ? '0 4px 16px rgba(0, 0, 0, 0.2), 0 1px 4px rgba(52, 152, 219, 0.1)'
: '0 2px 12px rgba(0, 0, 0, 0.08)', : '0 1px 6px rgba(0, 0, 0, 0.06)',
backdropFilter: isDarkMode ? 'blur(10px)' : 'none', backdropFilter: isDarkMode ? 'blur(8px)' : 'none',
transition: 'all 0.3s ease', transition: 'all 0.2s ease',
position: 'relative', position: 'relative',
overflow: 'hidden', overflow: 'hidden',
padding: '16px 24px', padding: '8px 16px',
margin: '16px 0' margin: '8px 0',
}} fontSize: '13px'
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)';
}} }}
> >
{/* Pagination Info */} {/* Pagination Info - Compact */}
<div <div
style={{ style={{
display: 'flex', display: 'flex',
justifyContent: 'space-between', justifyContent: 'space-between',
alignItems: 'center', alignItems: 'center',
marginBottom: '16px', marginBottom: '8px',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: '12px' gap: '8px'
}} }}
> >
<div style={{display: 'flex', alignItems: 'center', gap: '12px'}}> <div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
<span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '14px', fontWeight: '500'}}>Row Per Page</span> <span style={{color: isDarkMode ? '#bdc3c7' : '#2c3e50', fontSize: '12px', fontWeight: '500'}}>Row Per Page</span>
<select <select
value={pageSize} value={pageSize}
onChange={(e) => { onChange={(e) => {
@ -772,13 +761,13 @@ const ProjectTracker = () => {
border: isDarkMode border: isDarkMode
? '1px solid rgba(52, 152, 219, 0.3)' ? '1px solid rgba(52, 152, 219, 0.3)'
: '1px solid #dee2e6', : '1px solid #dee2e6',
borderRadius: '6px', borderRadius: '4px',
color: isDarkMode ? '#ffffff' : '#495057', color: isDarkMode ? '#ffffff' : '#495057',
padding: '4px 8px', padding: '2px 6px',
fontSize: '14px', fontSize: '12px',
cursor: loading ? 'not-allowed' : 'pointer', cursor: loading ? 'not-allowed' : 'pointer',
opacity: loading ? 0.7 : 1, 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> <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={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> <option value={100} style={{background: isDarkMode ? '#2c3e50' : '#ffffff', color: isDarkMode ? '#ffffff' : '#495057'}}>100</option>
</select> </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>
<div style={{display: 'flex', alignItems: 'center', gap: '12px'}}> <div style={{display: 'flex', alignItems: 'center', gap: '6px'}}>
<div <div
style={{ style={{
background: isDarkMode background: isDarkMode
? 'linear-gradient(45deg, #3498db, #2ecc71)' ? 'linear-gradient(45deg, #3498db, #2ecc71)'
: 'linear-gradient(45deg, #007bff, #28a745)', : 'linear-gradient(45deg, #007bff, #28a745)',
borderRadius: '50%', borderRadius: '50%',
width: '24px', width: '16px',
height: '24px', height: '16px',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
fontSize: '12px', fontSize: '8px',
boxShadow: isDarkMode boxShadow: isDarkMode
? '0 2px 8px rgba(52, 152, 219, 0.3)' ? '0 1px 4px rgba(52, 152, 219, 0.3)'
: '0 2px 8px rgba(0, 123, 255, 0.2)', : '0 1px 4px rgba(0, 123, 255, 0.2)',
transition: 'all 0.3s ease' transition: 'all 0.2s ease'
}} }}
> >
πŸ“Š πŸ“Š
</div> </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 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> </span>
</div> </div>
</div> </div>
{/* Pagination Buttons */} {/* Pagination Buttons - Compact */}
<div <div
style={{ style={{
position: 'relative', position: 'relative',
@ -824,7 +813,7 @@ const ProjectTracker = () => {
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
gap: '8px' gap: '4px'
}} }}
> >
{/* Numbered Pagination Buttons */} {/* Numbered Pagination Buttons */}
@ -844,23 +833,23 @@ const ProjectTracker = () => {
? (isDarkMode ? 'linear-gradient(45deg, #f39c12, #e67e22)' : 'linear-gradient(135deg, #007bff, #0056b3)') ? (isDarkMode ? 'linear-gradient(45deg, #f39c12, #e67e22)' : 'linear-gradient(135deg, #007bff, #0056b3)')
: (isDarkMode ? 'linear-gradient(45deg, #34495e, #2c3e50)' : 'linear-gradient(135deg, #ffffff, #f8f9fa)'), : (isDarkMode ? 'linear-gradient(45deg, #34495e, #2c3e50)' : 'linear-gradient(135deg, #ffffff, #f8f9fa)'),
border: isActive 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'), : (isDarkMode ? '1px solid rgba(52, 152, 219, 0.3)' : '1px solid #dee2e6'),
borderRadius: '50%', borderRadius: '50%',
width: '32px', width: '24px',
height: '32px', height: '24px',
color: isActive color: isActive
? '#ffffff' ? '#ffffff'
: (isDarkMode ? '#ffffff' : '#495057'), : (isDarkMode ? '#ffffff' : '#495057'),
fontSize: '14px', fontSize: '11px',
fontWeight: '700', fontWeight: '600',
cursor: loading ? 'not-allowed' : 'pointer', cursor: loading ? 'not-allowed' : 'pointer',
transition: 'all 0.3s ease', transition: 'all 0.2s ease',
boxShadow: loading boxShadow: loading
? 'none' ? 'none'
: isActive : isActive
? (isDarkMode ? '0 4px 12px rgba(243, 156, 18, 0.4)' : '0 3px 8px rgba(0, 123, 255, 0.3)') ? (isDarkMode ? '0 2px 6px rgba(243, 156, 18, 0.3)' : '0 2px 4px rgba(0, 123, 255, 0.2)')
: (isDarkMode ? '0 2px 8px rgba(52, 73, 94, 0.3)' : '0 1px 3px rgba(0, 0, 0, 0.1)'), : (isDarkMode ? '0 1px 4px rgba(52, 73, 94, 0.2)' : '0 1px 2px rgba(0, 0, 0, 0.08)'),
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
@ -871,10 +860,10 @@ const ProjectTracker = () => {
e.target.style.background = isDarkMode e.target.style.background = isDarkMode
? 'linear-gradient(45deg, #3498db, #2980b9)' ? 'linear-gradient(45deg, #3498db, #2980b9)'
: 'linear-gradient(135deg, #e9ecef, #f8f9fa)'; : '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 e.target.style.boxShadow = isDarkMode
? '0 4px 12px rgba(52, 152, 219, 0.4)' ? '0 2px 6px rgba(52, 152, 219, 0.3)'
: '0 3px 8px rgba(0, 0, 0, 0.15)'; : '0 2px 4px rgba(0, 0, 0, 0.12)';
e.target.style.borderColor = isDarkMode ? '#3498db' : '#adb5bd'; e.target.style.borderColor = isDarkMode ? '#3498db' : '#adb5bd';
} }
}} }}
@ -885,8 +874,8 @@ const ProjectTracker = () => {
: 'linear-gradient(135deg, #ffffff, #f8f9fa)'; : 'linear-gradient(135deg, #ffffff, #f8f9fa)';
e.target.style.transform = 'scale(1)'; e.target.style.transform = 'scale(1)';
e.target.style.boxShadow = isDarkMode e.target.style.boxShadow = isDarkMode
? '0 2px 8px rgba(52, 73, 94, 0.3)' ? '0 1px 4px rgba(52, 73, 94, 0.2)'
: '0 1px 3px rgba(0, 0, 0, 0.1)'; : '0 1px 2px rgba(0, 0, 0, 0.08)';
e.target.style.borderColor = isDarkMode ? 'rgba(52, 152, 219, 0.3)' : '#dee2e6'; e.target.style.borderColor = isDarkMode ? 'rgba(52, 152, 219, 0.3)' : '#dee2e6';
} }
}} }}