Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 | 2x 2x 2x 4x 4x 4x 2x 3x 3x 3x 3x | /**
* layoutUtils - Layout calculation utilities for Korean-themed components
*
* Provides responsive layout calculations and positioning utilities
*
* @module components/base
*/
/**
* Layout configuration for responsive design
*/
export interface LayoutConfig {
readonly isMobile: boolean;
readonly baseSize?: number;
readonly mobileSizeScale?: number;
}
/**
* Calculate responsive font size
*
* @param baseSize - Base font size in pixels
* @param isMobile - Whether the display is mobile
* @returns Calculated font size
*/
export function calculateResponsiveFontSize(
baseSize: number,
isMobile: boolean
): number {
return isMobile ? Math.round(baseSize * 0.8) : baseSize;
}
/**
* Calculate responsive padding
*
* @param basePadding - Base padding in pixels
* @param isMobile - Whether the display is mobile
* @returns Calculated padding value
*/
export function calculateResponsivePadding(
basePadding: number,
isMobile: boolean
): number {
return isMobile ? Math.round(basePadding * 0.7) : basePadding;
}
/**
* Calculate responsive spacing
*
* @param baseSpacing - Base spacing in pixels
* @param isMobile - Whether the display is mobile
* @returns Calculated spacing value
*/
export function calculateResponsiveSpacing(
baseSpacing: number,
isMobile: boolean
): number {
return isMobile ? Math.round(baseSpacing * 0.75) : baseSpacing;
}
/**
* Calculate responsive dimensions
*
* @param config - Layout configuration
* @returns Calculated dimensions for responsive layout
*/
export function calculateResponsiveDimensions(config: LayoutConfig) {
const {
isMobile,
baseSize = 16,
mobileSizeScale = 0.8,
} = config;
const scale = isMobile ? mobileSizeScale : 1.0;
return {
fontSize: Math.round(baseSize * scale),
padding: Math.round(baseSize * scale * 0.75),
spacing: Math.round(baseSize * scale * 0.5),
borderWidth: isMobile ? 1 : 2,
};
}
/**
* Get layout constants for screen size
*
* @param isMobile - Whether the display is mobile
* @returns Layout constants object
*/
export function getLayoutConstants(isMobile: boolean) {
return {
padding: isMobile ? 10 : 20,
spacing: isMobile ? 8 : 15,
headerHeight: isMobile ? 50 : 60,
footerHeight: isMobile ? 50 : 60,
buttonSize: isMobile ? 40 : 60,
fontSize: {
small: isMobile ? 12 : 14,
medium: isMobile ? 14 : 16,
large: isMobile ? 18 : 20,
xlarge: isMobile ? 24 : 32,
},
};
}
/**
* Convert pixel value to rem
*
* @param px - Pixel value
* @param baseFontSize - Base font size (default 16)
* @returns Value in rem
*/
export function pxToRem(px: number, baseFontSize: number = 16): string {
return `${px / baseFontSize}rem`;
}
/**
* Calculate position for centered element
*
* @param containerSize - Size of container
* @param elementSize - Size of element
* @returns Centered position
*/
export function calculateCenteredPosition(
containerSize: number,
elementSize: number
): number {
return (containerSize - elementSize) / 2;
}
/**
* Calculate grid layout dimensions
*
* @param totalItems - Total number of items
* @param columns - Number of columns
* @param gap - Gap between items
* @returns Grid layout dimensions
*/
export function calculateGridLayout(
totalItems: number,
columns: number,
gap: number
) {
const rows = Math.ceil(totalItems / columns);
return {
rows,
columns,
gap,
totalGapWidth: (columns - 1) * gap,
totalGapHeight: (rows - 1) * gap,
};
}
|