Skip to content

Commit d90667e

Browse files
prokawsarprokawsar
authored
Rate 2 graphics and blog UI updates (#15)
* Rate 2 blog update and UI update * Hover image zoom effect
1 parent 0a64491 commit d90667e

File tree

7 files changed

+76
-86
lines changed

7 files changed

+76
-86
lines changed

‎content/blog/release-rate-2.0.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ updated_at: '2024-11-27'
55
draft: false
66
summary: 'The year 2024 has become a landmark for the ARK Builders team as we have reached a completely new level, making a leap in all aspects of open-source application development. First, we expanded our team to work not only on mobile apps but also on native apps for desktop and laptop devices running macOS, Linux, and Windows. Second, we have thoroughly focused on the design of our applications, emphasizing not only security and privacy but also ease of use and user satisfaction. As a result of this new approach, we have completely redesigned the Rate app — a currency exchange calculator and private portfolio manager.'
77

8-
image:
8+
image: /images/splash/rate-v2.png
99
authorId: kirill
1010
---
1111

@@ -22,15 +22,15 @@ We're thrilled to unveil a complete redesign of our app, featuring a new UI desi
2222
First of all, ARK Rate is a powerful and user-friendly currency converter allowing you to quickly and accurately convert any currency to another. But there's more! It works anywhere in the world, even without internet access, thanks to our offline-first approach. With this app, you can be confident that when you land in a new country with a pack of dollars or your native currency, you still can figure out fair exchange rates into local money. It can be helpful even in rural areas or exotic locations: what if you need to pay a taxi driver but you don’t have local currency? Additional features can be convenient, such as seeing the same value in multiple target currencies. And no need to register an account, login, subscribe or see annoying ads.
2323

2424
<div class="flex gap-4 flex-col md:flex-row">
25-
<img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/calculation-app.png" alt="Easy to use currency exchange calculator">
26-
<img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/offline.png" alt="Works offline anywhere in the world">
25+
<img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/blog1.png" alt="Easy to use currency exchange calculator">
26+
<!-- <img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/offline.png" alt="Works offline anywhere in the world"> -->
2727
</div>
2828

2929
If you prefer to stay up-to-date to current exchange rates, be it conventional currencies or crypto, you can also set up our widget to your home screen that will update automatically in the background. This way you won’t miss the surge in price of assets you hold.
3030

3131
<div class="flex gap-4 flex-col md:flex-row">
32-
<img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/widget.png" alt="Rates right on your home screen">
33-
<img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/portfolios.png" alt="Sort assets under multiple portfolios">
32+
<img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/blog2.png" alt="Rates right on your home screen">
33+
<!-- <img class="max-h-[800px] w-fit my-0" src="/images/apps/rate/portfolios.png" alt="Sort assets under multiple portfolios"> -->
3434
</div>
3535

3636
<div class="flex flex-col gap-2 md:flex-row">
@@ -40,7 +40,7 @@ If you prefer to stay up-to-date to current exchange rates, be it conventional c
4040
This level of customization is made possible by our commitment to full open-source development, a unique aspect of our offering. This is because installing any app via the Play Store results in automatic collection of crash reports, a feature that cannot be disabled. But if you download our app from GitHub, we have extra preference in the settings screen allowing you to disable even crash reporting. Any technically advanced users can also examine our source code and ensure that there is no hidden data collection. Feel free to leave any feature requests and comments regarding quality on either the Play Store or GitHub—we'll address them as soon as we can.
4141
</span>
4242

43-
<img class="max-h-[800px] w-fit my-0 md:my-4" src="/images/apps/rate/no-ads.png" alt="Free, no login needed, no ads">
43+
<img class="max-h-[800px] w-fit my-0 md:my-4 rounded-xl" src="/images/apps/rate/no-ads.png" alt="Free, no login needed, no ads">
4444
</div>
4545

4646
We hope you enjoy the fruits of our labor and look forward to the desktop version's release next year. Both mobile and desktop versions will implement P2P synchronization allowing you to keep your data up-to-date and private at the same time. Stay tuned!

‎src/lib/components/blogs/Blog.svelte‎

Lines changed: 57 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,40 @@
11
<script>
22
import { base } from '$app/paths'
33
import Author from '$lib/components/Author.svelte'
4+
import BlogItem from '$lib/components/blogs/BlogItem.svelte'
45
import RenderMarkdown from '$lib/components/RenderMarkdown.svelte'
56
import { config } from '$lib/config'
67
78
export let post
89
export let author
910
</script>
1011

11-
<div class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0">
12+
<div class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-4xl xl:px-0">
1213
<article>
1314
<div class="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
1415
<header class="pt-6 xl:pb-6">
15-
<div class="space-y-1 text-center">
16-
<div>
16+
<div class="space-y-1 text-center lg:text-start">
17+
<div class="py-5">
1718
<h1
18-
class="md:leading-14 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl"
19+
class="md:leading-14 text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl"
1920
>
2021
{post.title}
2122
</h1>
2223
</div>
23-
<dl class="space-y-10">
24-
<div>
24+
<div class="flex flex-row items-center gap-4">
25+
<dl class="py-3">
26+
<dt class="sr-only">Authors</dt>
27+
<dd>
28+
<ul
29+
class="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8"
30+
>
31+
<li class="flex items-center space-x-2">
32+
<Author author={author.name} avatar={author.avatar} twitter={author.twitter} />
33+
</li>
34+
</ul>
35+
</dd>
36+
</dl>
37+
<div class="flex flex-col border-s-2 pl-4 text-start">
2538
<dt class="sr-only">Published on</dt>
2639
<dd class="text-sm font-medium leading-6 text-gray-500 dark:text-gray-400">
2740
Published on: <time dateTime={post.date}>
@@ -42,32 +55,21 @@
4255
})}
4356
</time>
4457
</dd>
45-
<dd class="mt-4 text-justify lg:text-start">
46-
{post.summary}
47-
</dd>
4858
</div>
59+
</div>
60+
<dl class="space-y-10">
61+
<dd class="mt-4 text-justify lg:text-start">
62+
{post.summary}
63+
</dd>
4964
</dl>
5065
</div>
5166
</header>
5267
<div
5368
class="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
5469
style="grid-template-rows: auto 1fr;"
5570
>
56-
<dl class="py-6 xl:border-b xl:border-gray-200 xl:pt-10 xl:dark:border-gray-700">
57-
<dt class="sr-only">Authors</dt>
58-
<dd>
59-
<ul
60-
class="flex justify-center space-x-8 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8"
61-
>
62-
<li class="flex items-center space-x-2">
63-
<Author author={author.name} avatar={author.avatar} twitter={author.twitter} />
64-
</li>
65-
</ul>
66-
</dd>
67-
</dl>
68-
6971
<div
70-
class="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0"
72+
class="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-4 xl:row-span-2 xl:pb-0"
7173
>
7274
<div
7375
class="prose max-w-none pb-8 pt-10 prose-a:text-arkOrange prose-a:no-underline hover:prose-a:underline"
@@ -82,61 +84,40 @@
8284
<RenderMarkdown content={post.content} />
8385
</div>
8486
</div>
85-
<footer class="">
86-
<div
87-
class="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y"
88-
>
89-
<!-- {#if post.tags}
90-
<div class="py-4 xl:py-8">
91-
<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
92-
Tags
93-
</h2>
94-
<div class="flex flex-wrap">
95-
{#each post.tags as tag}
96-
<Tag text={tag} />
97-
{/each}
98-
</div>
99-
</div>
100-
{/if} -->
101-
{#if post.next || post.prev}
102-
<div class="flex justify-between py-4 xl:block xl:space-y-8 xl:py-8">
103-
{#if post.prev}
104-
<div>
105-
<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
106-
Previous Article
107-
</h2>
108-
<div
109-
class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
110-
>
111-
<a href={base + `/blog/${post.prev.slug}`}>{post.prev.title}</a>
112-
</div>
87+
</div>
88+
89+
<footer class="">
90+
<div class="divide-gray-200 text-sm font-medium leading-5 dark:divide-gray-700">
91+
{#if post.next || post.prev}
92+
<h2 class="py-4 text-2xl font-bold">More Blog Posts</h2>
93+
94+
<div class="flex flex-row gap-4 py-4 xl:py-8">
95+
{#if post.prev}
96+
<div class="max-w-md flex-1">
97+
<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
98+
Previous Article
99+
</h2>
100+
<div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
101+
<!-- <a href={base + `/blog/${post.prev.slug}`}>{post.prev.title}</a> -->
102+
<BlogItem post={post.prev} />
113103
</div>
114-
{/if}
115-
{#if post.next}
116-
<div>
117-
<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
118-
Next Article
119-
</h2>
120-
<div
121-
class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
122-
>
123-
<a href={base + `/blog/${post.next.slug}`}>{post.next.title}</a>
124-
</div>
104+
</div>
105+
{/if}
106+
{#if post.next}
107+
<div class="max-w-md flex-1">
108+
<h2 class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
109+
Next Article
110+
</h2>
111+
<div class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
112+
<!-- <a href={base + `/blog/${post.next.slug}`}>{post.next.title}</a> -->
113+
<BlogItem post={post.next} />
125114
</div>
126-
{/if}
127-
</div>
128-
{/if}
129-
</div>
130-
<div class="pt-4 xl:pt-8">
131-
<a
132-
href="{base}/blog"
133-
class="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
134-
>
135-
&larr; Back to the blog
136-
</a>
137-
</div>
138-
</footer>
139-
</div>
115+
</div>
116+
{/if}
117+
</div>
118+
{/if}
119+
</div>
120+
</footer>
140121
</div>
141122
</article>
142123
</div>

‎src/lib/components/blogs/BlogItem.svelte‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,19 @@
55
import type { Blog } from '$utils/constants'
66
77
export let post: Blog
8+
9+
let hover: boolean = false
810
</script>
911

10-
<article>
12+
<article on:mouseenter={() => (hover = true)} on:mouseleave={() => (hover = false)}>
1113
<a
1214
href="{base}/blog/{post.slug}"
1315
class="flex flex-col gap-3 rounded-xl bg-arkGray5 p-5 hover:bg-arkOrangeLight"
1416
>
1517
<div class="flex flex-col gap-2">
1618
<Image
1719
src="{base}{post.image ?? 'https://placehold.co/100x100/EEA050/white/?text=' + post.title}"
18-
class="max-h-48 w-full rounded-md object-cover xl:max-h-52"
20+
class="max-h-48 w-full rounded-md object-cover xl:max-h-52 {hover && 'scale-105'}"
1921
/>
2022
<div class="flex h-52 flex-col gap-1">
2123
<time dateTime={post.date ?? post.date} class="text-arkGray4">
@@ -25,7 +27,9 @@
2527
day: 'numeric',
2628
})}
2729
</time>
28-
<p class="text-2xl font-extrabold">{post.title}</p>
30+
<p class="text-2xl font-extrabold">
31+
{post.title}
32+
</p>
2933
<div class="">
3034
<p class={post.title.length > 40 ? 'line-clamp-4' : 'line-clamp-5'}>
3135
{post.summary}

‎src/lib/components/elements/Image.svelte‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@
2323
</script>
2424

2525
{#if loaded}
26-
<img {src} alt="app screenshot" class="max-h-[500px] xl:max-h-[600px]" {...$$restProps} />
26+
<img
27+
{src}
28+
alt="app screenshot"
29+
class="max-h-[500px] transition-all duration-300 ease-in-out xl:max-h-[600px]"
30+
{...$$restProps}
31+
/>
2732
{:else if loading}
2833
<div class="flex h-full max-h-[500px] w-[150px] flex-col items-center xl:max-h-[600px]">
2934
<Icon icon="ei:spinner-3" class="animate-spin" width="50px" />

‎static/images/apps/rate/blog1.png‎

245 KB
Loading

‎static/images/apps/rate/blog2.png‎

319 KB
Loading

‎static/images/splash/rate-v2.png‎

334 KB
Loading

0 commit comments

Comments
 (0)