👁️
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix cardmodal on mobile a bit

+159 -157
+159 -157
src/components/deck/CardModal.tsx
··· 113 113 /> 114 114 115 115 {/* Modal */} 116 - <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none"> 117 - <div 118 - role="dialog" 119 - aria-modal="true" 120 - aria-labelledby={titleId} 121 - className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600" 122 - > 123 - {/* Header */} 124 - <div className="flex items-start justify-between p-6 border-b border-gray-200 dark:border-zinc-700"> 125 - <div className="flex-1 min-w-0"> 126 - {primaryFace ? ( 127 - <> 128 - <div className="flex items-baseline gap-2 mb-2 flex-wrap"> 129 - <h2 130 - id={titleId} 131 - className="text-2xl font-bold text-gray-900 dark:text-white" 132 - > 133 - {primaryFace.name} 134 - </h2> 135 - {primaryFace.mana_cost && ( 136 - <div className="flex-shrink-0"> 137 - <ManaCost cost={primaryFace.mana_cost} size="small" /> 116 + <div className="fixed inset-0 z-50 overflow-y-auto"> 117 + <div className="flex min-h-full items-center justify-center p-4"> 118 + <div 119 + role="dialog" 120 + aria-modal="true" 121 + aria-labelledby={titleId} 122 + className="bg-white dark:bg-zinc-900 rounded-lg shadow-2xl max-w-md w-full pointer-events-auto border border-gray-300 dark:border-zinc-600" 123 + > 124 + {/* Header */} 125 + <div className="flex items-start justify-between p-6 border-b border-gray-200 dark:border-zinc-700"> 126 + <div className="flex-1 min-w-0"> 127 + {primaryFace ? ( 128 + <> 129 + <div className="flex items-baseline gap-2 mb-2 flex-wrap"> 130 + <h2 131 + id={titleId} 132 + className="text-2xl font-bold text-gray-900 dark:text-white" 133 + > 134 + {primaryFace.name} 135 + </h2> 136 + {primaryFace.mana_cost && ( 137 + <div className="flex-shrink-0"> 138 + <ManaCost cost={primaryFace.mana_cost} size="small" /> 139 + </div> 140 + )} 141 + </div> 142 + {primaryFace.type_line && ( 143 + <div className="text-sm text-gray-600 dark:text-zinc-300"> 144 + {primaryFace.type_line} 138 145 </div> 139 146 )} 147 + </> 148 + ) : ( 149 + <h2 150 + id={titleId} 151 + className="text-2xl font-bold text-gray-900 dark:text-white" 152 + > 153 + Loading... 154 + </h2> 155 + )} 156 + </div> 157 + <button 158 + type="button" 159 + onClick={onClose} 160 + aria-label="Close" 161 + className="text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300 transition-colors ml-4" 162 + > 163 + <X className="w-6 h-6" /> 164 + </button> 165 + </div> 166 + 167 + {/* Body */} 168 + <div className="p-6 space-y-6"> 169 + {/* Card image - only shown on mobile where sidebar preview is hidden */} 170 + {cardData && ( 171 + <div className="md:hidden flex justify-center"> 172 + <div className="w-64"> 173 + <CardImage 174 + card={cardData} 175 + size="normal" 176 + className="w-full h-auto shadow-lg rounded-[4.75%/3.5%]" 177 + /> 140 178 </div> 141 - {primaryFace.type_line && ( 142 - <div className="text-sm text-gray-600 dark:text-zinc-300"> 143 - {primaryFace.type_line} 144 - </div> 145 - )} 146 - </> 147 - ) : ( 148 - <h2 149 - id={titleId} 150 - className="text-2xl font-bold text-gray-900 dark:text-white" 151 - > 152 - Loading... 153 - </h2> 179 + </div> 154 180 )} 155 - </div> 156 - <button 157 - type="button" 158 - onClick={onClose} 159 - aria-label="Close" 160 - className="text-gray-400 hover:text-gray-600 dark:hover:text-zinc-300 transition-colors ml-4" 161 - > 162 - <X className="w-6 h-6" /> 163 - </button> 164 - </div> 165 181 166 - {/* Body */} 167 - <div className="p-6 space-y-6"> 168 - {/* Card image - only shown on mobile where sidebar preview is hidden */} 169 - {cardData && ( 170 - <div className="md:hidden flex justify-center"> 171 - <div className="w-48"> 172 - <CardImage 173 - card={cardData} 174 - size="normal" 175 - className="w-full h-auto shadow-lg rounded-[4.75%/3.5%]" 182 + {/* Quantity */} 183 + <div> 184 + <div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"> 185 + Quantity 186 + </div> 187 + <div className="flex items-center gap-3"> 188 + <button 189 + type="button" 190 + onClick={() => handleQuantityChange(quantity - 1)} 191 + disabled={readOnly || quantity <= 1} 192 + className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 193 + > 194 + <Minus className="w-4 h-4 text-gray-700 dark:text-zinc-300" /> 195 + </button> 196 + <input 197 + type="number" 198 + min="1" 199 + value={quantity} 200 + onChange={(e) => 201 + handleQuantityChange( 202 + Number.parseInt(e.target.value, 10) || 1, 203 + ) 204 + } 205 + disabled={readOnly} 206 + className="w-20 px-3 py-2 text-center bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed" 176 207 /> 208 + <button 209 + type="button" 210 + onClick={() => handleQuantityChange(quantity + 1)} 211 + disabled={readOnly} 212 + className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 213 + > 214 + <Plus className="w-4 h-4 text-gray-700 dark:text-zinc-300" /> 215 + </button> 177 216 </div> 178 217 </div> 179 - )} 180 218 181 - {/* Quantity */} 182 - <div> 183 - <div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"> 184 - Quantity 185 - </div> 186 - <div className="flex items-center gap-3"> 187 - <button 188 - type="button" 189 - onClick={() => handleQuantityChange(quantity - 1)} 190 - disabled={readOnly || quantity <= 1} 191 - className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 219 + {/* Section */} 220 + <div> 221 + <label 222 + htmlFor={sectionId} 223 + className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2" 192 224 > 193 - <Minus className="w-4 h-4 text-gray-700 dark:text-zinc-300" /> 194 - </button> 195 - <input 196 - type="number" 197 - min="1" 198 - value={quantity} 199 - onChange={(e) => 200 - handleQuantityChange( 201 - Number.parseInt(e.target.value, 10) || 1, 202 - ) 203 - } 204 - disabled={readOnly} 205 - className="w-20 px-3 py-2 text-center bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed" 206 - /> 207 - <button 208 - type="button" 209 - onClick={() => handleQuantityChange(quantity + 1)} 225 + Section 226 + </label> 227 + <select 228 + id={sectionId} 229 + value={card.section} 230 + onChange={(e) => onMoveToSection(e.target.value as Section)} 210 231 disabled={readOnly} 211 - className="p-2 rounded-lg bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" 232 + className="w-full px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed" 212 233 > 213 - <Plus className="w-4 h-4 text-gray-700 dark:text-zinc-300" /> 214 - </button> 234 + <option value="commander">Commander</option> 235 + <option value="mainboard">Mainboard</option> 236 + <option value="sideboard">Sideboard</option> 237 + <option value="maybeboard">Maybeboard</option> 238 + </select> 239 + </div> 240 + 241 + {/* Tags */} 242 + <div> 243 + <div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"> 244 + Tags 245 + </div> 246 + <div className="mb-2"> 247 + <TagAutocomplete 248 + suggestions={tagSuggestions} 249 + onAdd={handleAddTag} 250 + disabled={readOnly} 251 + /> 252 + </div> 253 + {tags.length > 0 && ( 254 + <div className="flex flex-wrap gap-2"> 255 + {tags.map((tag) => ( 256 + <button 257 + key={tag} 258 + type="button" 259 + onClick={() => !readOnly && handleRemoveTag(tag)} 260 + disabled={readOnly} 261 + className="group px-3 py-1 bg-cyan-100 dark:bg-cyan-900 hover:bg-cyan-200 dark:hover:bg-cyan-800 disabled:opacity-50 disabled:cursor-not-allowed text-cyan-800 dark:text-cyan-200 rounded-lg text-sm transition-colors flex items-center gap-1" 262 + > 263 + {tag} 264 + {!readOnly && ( 265 + <X className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" /> 266 + )} 267 + </button> 268 + ))} 269 + </div> 270 + )} 215 271 </div> 216 272 </div> 217 273 218 - {/* Section */} 219 - <div> 220 - <label 221 - htmlFor={sectionId} 222 - className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2" 223 - > 224 - Section 225 - </label> 226 - <select 227 - id={sectionId} 228 - value={card.section} 229 - onChange={(e) => onMoveToSection(e.target.value as Section)} 274 + {/* Footer */} 275 + <div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-zinc-700"> 276 + <button 277 + type="button" 278 + onClick={handleDelete} 230 279 disabled={readOnly} 231 - className="w-full px-4 py-2 bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-600 rounded-lg text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-cyan-500 disabled:opacity-50 disabled:cursor-not-allowed" 280 + className="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-2" 232 281 > 233 - <option value="commander">Commander</option> 234 - <option value="mainboard">Mainboard</option> 235 - <option value="sideboard">Sideboard</option> 236 - <option value="maybeboard">Maybeboard</option> 237 - </select> 282 + <Trash2 className="w-4 h-4" /> 283 + Delete 284 + </button> 285 + <button 286 + type="button" 287 + onClick={onClose} 288 + className="px-6 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors" 289 + > 290 + Close 291 + </button> 238 292 </div> 239 - 240 - {/* Tags */} 241 - <div> 242 - <div className="block text-sm font-medium text-gray-700 dark:text-zinc-300 mb-2"> 243 - Tags 244 - </div> 245 - <div className="mb-2"> 246 - <TagAutocomplete 247 - suggestions={tagSuggestions} 248 - onAdd={handleAddTag} 249 - disabled={readOnly} 250 - /> 251 - </div> 252 - {tags.length > 0 && ( 253 - <div className="flex flex-wrap gap-2"> 254 - {tags.map((tag) => ( 255 - <button 256 - key={tag} 257 - type="button" 258 - onClick={() => !readOnly && handleRemoveTag(tag)} 259 - disabled={readOnly} 260 - className="group px-3 py-1 bg-cyan-100 dark:bg-cyan-900 hover:bg-cyan-200 dark:hover:bg-cyan-800 disabled:opacity-50 disabled:cursor-not-allowed text-cyan-800 dark:text-cyan-200 rounded-lg text-sm transition-colors flex items-center gap-1" 261 - > 262 - {tag} 263 - {!readOnly && ( 264 - <X className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" /> 265 - )} 266 - </button> 267 - ))} 268 - </div> 269 - )} 270 - </div> 271 - </div> 272 - 273 - {/* Footer */} 274 - <div className="flex items-center justify-between p-6 border-t border-gray-200 dark:border-zinc-700"> 275 - <button 276 - type="button" 277 - onClick={handleDelete} 278 - disabled={readOnly} 279 - className="px-4 py-2 bg-red-600 hover:bg-red-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white rounded-lg transition-colors flex items-center gap-2" 280 - > 281 - <Trash2 className="w-4 h-4" /> 282 - Delete 283 - </button> 284 - <button 285 - type="button" 286 - onClick={onClose} 287 - className="px-6 py-2 bg-gray-200 dark:bg-zinc-800 hover:bg-gray-300 dark:hover:bg-zinc-700 text-gray-900 dark:text-white rounded-lg transition-colors" 288 - > 289 - Close 290 - </button> 291 293 </div> 292 294 </div> 293 295 </div>