refactor: update finance dashboard market cards to use flexbox layout for responsive wrapping

This commit is contained in:
Ümit Tunç
2026-05-26 23:33:35 +03:00
parent b7434e12c6
commit 8c4c58e094
@@ -50,11 +50,11 @@
<span class="w-2 h-2 rounded-full bg-[#00e676] animate-pulse"></span> <span class="w-2 h-2 rounded-full bg-[#00e676] animate-pulse"></span>
<span class="text-[#cacaca] text-[0.75rem] font-bold tracking-wider uppercase">{!! t('Canlı Piyasalar') !!}</span> <span class="text-[#cacaca] text-[0.75rem] font-bold tracking-wider uppercase">{!! t('Canlı Piyasalar') !!}</span>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div style="display: flex; flex-wrap: wrap; gap: 16px;">
{{-- USD Card --}} {{-- USD Card --}}
<div> <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;"> <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
<div class="flex items-center justify-between !mb-2"> <div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">USD</span> <span class="text-[0.8rem] font-bold text-gray-500 uppercase">USD</span>
<div class="flex items-center gap-1" id="usd-change-container" style="color: #009846;"> <div class="flex items-center gap-1" id="usd-change-container" style="color: #009846;">
@@ -74,8 +74,8 @@
</div> </div>
{{-- EUR Card --}} {{-- EUR Card --}}
<div> <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;"> <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
<div class="flex items-center justify-between !mb-2"> <div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">EUR</span> <span class="text-[0.8rem] font-bold text-gray-500 uppercase">EUR</span>
<div class="flex items-center gap-1" id="eur-change-container" style="color: #B9101E;"> <div class="flex items-center gap-1" id="eur-change-container" style="color: #B9101E;">
@@ -95,8 +95,8 @@
</div> </div>
{{-- GBP Card --}} {{-- GBP Card --}}
<div> <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;"> <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
<div class="flex items-center justify-between !mb-2"> <div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">GBP</span> <span class="text-[0.8rem] font-bold text-gray-500 uppercase">GBP</span>
<div class="flex items-center gap-1" id="gbp-change-container" style="color: #B9101E;"> <div class="flex items-center gap-1" id="gbp-change-container" style="color: #B9101E;">
@@ -116,8 +116,8 @@
</div> </div>
{{-- GRA Card --}} {{-- GRA Card --}}
<div> <div style="flex: 1 1 calc(25% - 12px); min-width: 200px;">
<div class="bg-white rounded-xl p-4 shadow-sm flex flex-col justify-between" style="min-height: 105px;"> <div class="bg-white rounded-xl p-4 shadow-sm" style="min-height: 105px; display: flex; flex-direction: column; justify-content: space-between;">
<div class="flex items-center justify-between !mb-2"> <div class="flex items-center justify-between !mb-2">
<span class="text-[0.8rem] font-bold text-gray-500 uppercase">GRA</span> <span class="text-[0.8rem] font-bold text-gray-500 uppercase">GRA</span>
<div class="flex items-center gap-1" id="gra-change-container" style="color: #B9101E;"> <div class="flex items-center gap-1" id="gra-change-container" style="color: #B9101E;">