Skip to content

Commit d057fd0

Browse files
ryanaidilpryanaidilp
authored
Merge pull request #21 from banua-coder/fix/improve-mobile-layout-hero-datasources
fix: improve mobile layout for hero section and data sources
2 parents fd83b89 + 52d8463 commit d057fd0

File tree

4 files changed

+58
-99
lines changed

4 files changed

+58
-99
lines changed

‎CLAUDE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
- for this project, always use frontend expert agent

‎src/components/DataSources.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
<template>
2-
<div class="mt-16 md:mt-20 text-center">
3-
<p class="text-sm font-medium text-gray-500 uppercase tracking-wide mb-6 md:mb-8">
2+
<div class="mt-8 sm:mt-12 md:mt-16 lg:mt-20 text-center">
3+
<p class="text-xs sm:text-sm font-medium text-gray-500 uppercase tracking-wide mb-4 sm:mb-6 md:mb-8">
44
{{ $t('dataSources.trustedBy') }}
55
</p>
6-
<div
7-
class="flex flex-wrap items-center justify-center gap-6 md:gap-8 lg:gap-12 opacity-60 hover:opacity-80 transition-opacity duration-300">
6+
<div class="grid grid-cols-3 md:grid-cols-6 gap-4 sm:gap-6 md:gap-8 max-w-md sm:max-w-lg md:max-w-5xl mx-auto opacity-60 hover:opacity-80 transition-opacity duration-300">
87
<div v-for="source in dataSources" :key="source.alt"
9-
class="flex items-center justify-center h-12 w-28 md:w-32 grayscale hover:grayscale-0 transition-all duration-300 group">
8+
class="flex items-center justify-center h-16 sm:h-20 md:h-24 grayscale hover:grayscale-0 transition-all duration-300 group">
109
<a :href="source.url" target="_blank" rel="noopener noreferrer"
11-
class="flex w-full h-full items-center justify-center hover:scale-110 transition-transform duration-300"
10+
class="flex w-full h-full items-center justify-center hover:scale-110 transition-transform duration-300 p-2"
1211
:title="source.alt">
13-
<img :src="source.image" :alt="source.alt" class="max-h-6 md:max-h-8 w-auto object-contain" loading="lazy">
12+
<img :src="source.image" :alt="source.alt" class="max-h-8 sm:max-h-10 md:max-h-12 w-auto object-contain" loading="lazy">
1413
</a>
1514
</div>
1615
</div>

‎src/components/documentation/GlossarySection.vue‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -302,27 +302,31 @@
302302
<div class="space-y-4">
303303
<div>
304304
<h5 class="text-sm font-medium text-gray-900 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.currentFlow') }}</h5>
305-
<div class="flex items-center space-x-2 text-xs flex-wrap">
306-
<span class="px-2 py-1 bg-green-100 text-green-700 rounded font-medium">Suspect</span>
307-
<span class="text-gray-400">→</span>
308-
<span class="px-2 py-1 bg-green-100 text-green-700 rounded font-medium">Probable</span>
309-
<span class="text-gray-400">→</span>
310-
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded font-medium">Confirmed</span>
311-
<span class="text-gray-400">→</span>
312-
<span class="px-2 py-1 bg-gray-100 text-gray-700 rounded font-medium">Recovery/Death</span>
305+
<div class="overflow-x-auto">
306+
<div class="flex items-center space-x-1 sm:space-x-2 text-[10px] sm:text-xs min-w-max">
307+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Suspect</span>
308+
<span class="text-gray-400">→</span>
309+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Probable</span>
310+
<span class="text-gray-400">→</span>
311+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 text-blue-700 rounded font-medium whitespace-nowrap">Confirmed</span>
312+
<span class="text-gray-400">→</span>
313+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-gray-100 text-gray-700 rounded font-medium whitespace-nowrap">Recovery/Death</span>
314+
</div>
313315
</div>
314316
</div>
315317

316318
<div>
317319
<h5 class="text-sm font-medium text-gray-900 mb-2">{{ t('documentation.glossary.indonesianTerminology.classificationProgression.legacyFlow') }}</h5>
318-
<div class="flex items-center space-x-2 text-xs flex-wrap opacity-75">
319-
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded font-medium">ODP</span>
320-
<span class="text-gray-400">→</span>
321-
<span class="px-2 py-1 bg-orange-100 text-orange-700 rounded font-medium">PDP</span>
322-
<span class="text-gray-400">→</span>
323-
<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded font-medium">OTG</span>
324-
<span class="text-gray-400">→</span>
325-
<span class="px-2 py-1 bg-green-100 text-green-700 rounded font-medium">Confirmed</span>
320+
<div class="overflow-x-auto opacity-75">
321+
<div class="flex items-center space-x-1 sm:space-x-2 text-[10px] sm:text-xs min-w-max">
322+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-blue-100 text-blue-700 rounded font-medium whitespace-nowrap">ODP</span>
323+
<span class="text-gray-400">→</span>
324+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-orange-100 text-orange-700 rounded font-medium whitespace-nowrap">PDP</span>
325+
<span class="text-gray-400">→</span>
326+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-purple-100 text-purple-700 rounded font-medium whitespace-nowrap">OTG</span>
327+
<span class="text-gray-400">→</span>
328+
<span class="px-1.5 sm:px-2 py-0.5 sm:py-1 bg-green-100 text-green-700 rounded font-medium whitespace-nowrap">Confirmed</span>
329+
</div>
326330
</div>
327331
</div>
328332
</div>

‎src/views/Home.vue‎

Lines changed: 31 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -134,72 +134,74 @@
134134
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-blue-500/5 to-purple-500/5 pointer-events-none"></div>
135135

136136
<!-- Terminal Header -->
137-
<div class="bg-gray-800/90 backdrop-blur-sm px-4 py-3 flex items-center space-x-2 border-b border-gray-700/50">
138-
<div class="flex space-x-1.5">
139-
<div class="w-2.5 h-2.5 bg-red-500 rounded-full hover:bg-red-400 transition-colors cursor-pointer"></div>
140-
<div class="w-2.5 h-2.5 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors cursor-pointer"></div>
141-
<div class="w-2.5 h-2.5 bg-green-500 rounded-full hover:bg-green-400 transition-colors cursor-pointer"></div>
137+
<div class="bg-gray-800/90 backdrop-blur-sm px-2 sm:px-4 py-2 sm:py-3 flex items-center space-x-2 border-b border-gray-700/50">
138+
<div class="flex space-x-1">
139+
<div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-red-500 rounded-full hover:bg-red-400 transition-colors cursor-pointer"></div>
140+
<div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-yellow-500 rounded-full hover:bg-yellow-400 transition-colors cursor-pointer"></div>
141+
<div class="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-green-500 rounded-full hover:bg-green-400 transition-colors cursor-pointer"></div>
142142
</div>
143143
<div class="flex-1 text-center">
144-
<span class="text-gray-300 text-xs font-medium">PICO API Terminal</span>
144+
<span class="text-gray-300 text-[10px] sm:text-xs font-medium">PICO API Terminal</span>
145145
</div>
146-
<div class="flex items-center space-x-1.5 text-xs text-gray-500">
147-
<div class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
148-
<span class="text-xs">Live</span>
146+
<div class="flex items-center space-x-1 text-[10px] sm:text-xs text-gray-500">
147+
<div class="w-1 h-1 sm:w-1.5 sm:h-1.5 bg-green-500 rounded-full animate-pulse"></div>
148+
<span>Live</span>
149149
</div>
150150
</div>
151151

152152
<!-- Code Content -->
153-
<div class="p-2 sm:p-3 md:p-4 font-mono text-xs relative bg-gray-900/50 overflow-x-auto">
153+
<div class="p-1 sm:p-2 md:p-4 font-mono text-[8px] sm:text-xs relative bg-gray-900/50 overflow-x-auto">
154154
<!-- Request -->
155-
<div class="mb-4 sm:mb-6">
156-
<div class="text-green-400 mb-2 typing-animation whitespace-nowrap overflow-x-auto">
157-
<span class="text-gray-500">$</span> curl https://pico-api.banuacoder.com/api/v1/national/latest
155+
<div class="mb-2 sm:mb-4">
156+
<div class="text-green-400 mb-1 sm:mb-2 typing-animation overflow-x-auto">
157+
<div class="whitespace-nowrap">
158+
<span class="text-gray-500">$</span> curl https://pico-api.banuacoder.com/api/v1/national/latest
159+
</div>
158160
</div>
159161
</div>
160162

161163
<!-- Response -->
162-
<div class="text-gray-300 leading-tight sm:leading-relaxed response-animation opacity-0 overflow-x-auto">
164+
<div class="text-gray-300 leading-none sm:leading-tight md:leading-relaxed response-animation opacity-0 overflow-x-auto">
163165
<div class="text-blue-400">{</div>
164-
<div class="pl-2 sm:pl-4">
166+
<div class="pl-1 sm:pl-2 md:pl-4">
165167
<span class="text-yellow-400">"status"</span>: <span class="text-green-300">"success"</span>,
166168
</div>
167-
<div class="pl-2 sm:pl-4">
169+
<div class="pl-1 sm:pl-2 md:pl-4">
168170
<span class="text-yellow-400">"data"</span>: <div class="text-blue-400 inline">{</div>
169171
</div>
170-
<div class="pl-4 sm:pl-8">
172+
<div class="pl-2 sm:pl-4 md:pl-8">
171173
<span class="text-yellow-400">"day"</span>: <span class="text-orange-400">1247</span>,
172174
</div>
173-
<div class="pl-4 sm:pl-8">
175+
<div class="pl-2 sm:pl-4 md:pl-8">
174176
<span class="text-yellow-400">"date"</span>: <span class="text-green-300">"2024-09-07T00:00:00Z"</span>,
175177
</div>
176-
<div class="pl-4 sm:pl-8">
178+
<div class="pl-2 sm:pl-4 md:pl-8">
177179
<span class="text-yellow-400">"daily"</span>: <div class="text-blue-400 inline">{</div>
178180
</div>
179-
<div class="pl-6 sm:pl-12">
181+
<div class="pl-3 sm:pl-6 md:pl-12">
180182
<span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">127</span>,
181183
</div>
182-
<div class="pl-6 sm:pl-12">
184+
<div class="pl-3 sm:pl-6 md:pl-12">
183185
<span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">98</span>,
184186
</div>
185-
<div class="pl-6 sm:pl-12">
187+
<div class="pl-3 sm:pl-6 md:pl-12">
186188
<span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">2</span>
187189
</div>
188-
<div class="pl-4 sm:pl-8 text-blue-400">},</div>
189-
<div class="pl-4 sm:pl-8">
190+
<div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">},</div>
191+
<div class="pl-2 sm:pl-4 md:pl-8">
190192
<span class="text-yellow-400">"cumulative"</span>: <div class="text-blue-400 inline">{</div>
191193
</div>
192-
<div class="pl-6 sm:pl-12">
194+
<div class="pl-3 sm:pl-6 md:pl-12">
193195
<span class="text-yellow-400">"positive"</span>: <span class="text-orange-400">6754298</span>,
194196
</div>
195-
<div class="pl-6 sm:pl-12">
197+
<div class="pl-3 sm:pl-6 md:pl-12">
196198
<span class="text-yellow-400">"recovered"</span>: <span class="text-orange-400">6589567</span>,
197199
</div>
198-
<div class="pl-6 sm:pl-12">
200+
<div class="pl-3 sm:pl-6 md:pl-12">
199201
<span class="text-yellow-400">"deceased"</span>: <span class="text-orange-400">161031</span>
200202
</div>
201-
<div class="pl-4 sm:pl-8 text-blue-400">}</div>
202-
<div class="pl-2 sm:pl-4 text-blue-400">}</div>
203+
<div class="pl-2 sm:pl-4 md:pl-8 text-blue-400">}</div>
204+
<div class="pl-1 sm:pl-2 md:pl-4 text-blue-400">}</div>
203205
<div class="text-blue-400">}</div>
204206

205207
<!-- Typing cursor -->
@@ -322,53 +324,6 @@
322324
</div>
323325
</div>
324326

325-
<!-- API Endpoints Preview -->
326-
<div class="py-16 bg-gray-50">
327-
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
328-
<div class="text-center mb-16">
329-
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Quick API Overview</h2>
330-
<p class="text-xl text-gray-600">Essential endpoints to get you started</p>
331-
</div>
332-
333-
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
334-
<div class="bg-white rounded-xl shadow-lg p-8">
335-
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Health Check</h3>
336-
<div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
337-
GET /api/v1/health
338-
</div>
339-
<p class="text-gray-600 mt-4">Check API status and database connectivity</p>
340-
</div>
341-
342-
<div class="bg-white rounded-xl shadow-lg p-8">
343-
<h3 class="text-2xl font-semibold text-gray-900 mb-4">National Data</h3>
344-
<div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
345-
GET /api/v1/national<br/>
346-
GET /api/v1/national/latest
347-
</div>
348-
<p class="text-gray-600 mt-4">National COVID-19 statistics and latest data</p>
349-
</div>
350-
351-
<div class="bg-white rounded-xl shadow-lg p-8">
352-
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Province Data</h3>
353-
<div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
354-
GET /api/v1/provinces<br/>
355-
GET /api/v1/provinces/cases
356-
</div>
357-
<p class="text-gray-600 mt-4">Province information and case data with pagination</p>
358-
</div>
359-
360-
<div class="bg-white rounded-xl shadow-lg p-8">
361-
<h3 class="text-2xl font-semibold text-gray-900 mb-4">Specific Province</h3>
362-
<div class="bg-gray-900 rounded-lg p-4 text-green-400 font-mono text-sm">
363-
GET /api/v1/provinces/72/cases
364-
</div>
365-
<p class="text-gray-600 mt-4">Central Sulawesi specific COVID-19 data</p>
366-
</div>
367-
</div>
368-
</div>
369-
</div>
370-
371-
372327
<!-- Footer -->
373328
<footer class="bg-gray-900 text-white py-12">
374329
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

0 commit comments

Comments
 (0)