RevelaNetwork/Revelav3
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add input expand animation and fix Japanese header on mobile

Browse source
This commit is contained in:
rift 2023-12-15 17:17:52 -06:00
parent 83d85a037e
commit 8a26062442
2 changed files with 8 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Header.tsx
View file

@ -23,7 +23,7 @@ export function Header() {
src="/logo.png"
className="h-16 w-16 transition-all duration-1000 hover:rotate-[360deg]"
></img>
<h1 className="font-roboto text-4xl font-bold text-navbar-text-color">
<h1 className="font-roboto text-2xl font-bold text-navbar-text-color md:text-4xl">
{t("header.title")}
</h1>
</div>

12
src/pages/Home.tsx
View file

@ -10,16 +10,18 @@ export function Home() {
<HeaderRoute>
<div class="flex h-full items-center justify-center">
<input
onFocus={(e) => {
onFocus={() => {
setIsFocused(true);
}}
onBlur={(e) => {
onBlur={() => {
setIsFocused(false);
}}
type="text"
class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
placeholder={isFocused ? "" : t("home.placeholder")}
></input>
className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
isFocused ? "w-full md:w-3/12" : "w-full md:w-80"
} transition-all duration-300`}
placeholder={isFocused ? "" : t('home.placeholder')}
/>
</div>
</HeaderRoute>
);