Skip to content

Commit

Permalink
Fix mobile (pt2) (#12)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sectore
sectore authored Nov 11, 2023
1 parent 5a52b34 commit dd045b5
Show file tree
Hide file tree
Showing 5 changed files with 25 additions and 19 deletions.
4 changes: 2 additions & 2 deletions index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
text-white
text-shadow-dark
uppercase
text-3xl
text-xl md:text-3xl
text-opacity-90
rounded-full
/* bg-gradient-to-r from-sky-400 to-sky-500 to-90% */
bg-sky-600
bg-[length:200%]
p-4
p-2 md:p-4
disabled:opacity-50
disabled:cursor-not-allowed
cursor-pointer
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="utf-8" />
<title>Exify</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="image/x-icon" rel="icon" href="/exify/assets/favicon.ico" />
<link type="image/x-icon" rel="shortcut icon" href="/exify/assets/favicon.ico" />
<link rel="icon" type="image/png" href="/exify/assets/favicon-32x32.png" sizes="32x32" />
Expand Down
15 changes: 9 additions & 6 deletions src/components/add.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,12 +152,15 @@ pub fn Add() -> Html {
/>
<p class={classes!(
"text-sky-600", "font-bold", "text-center",
"text-4xl", "uppercase",
"text-3xl", "md:text-4xl", "uppercase",
"text-shadow-light",
"ease",
ondragstate.then(|| "text-sky-500 scale-105")
)}
>{"Drop image here"}</p>
>
<span class="hidden md:block">{"Drop your image here"}</span>
<span class="md:hidden">{"Drop image"}</span>
</p>
{if let Some(Err(FileError::DragDropFailed(e))) = ctx.file.clone() {
html!{<p class="my-1 text-lg text-red-500 font-normal">
{format!("ERROR {:?}", e)}</p>}
Expand All @@ -173,13 +176,13 @@ pub fn Add() -> Html {
<label
for="img-upload"
class="btn
py-4
pl-12 pr-8 mb-3
pl-10 pr-6 mb-3
w-auto
"
>
{"Select image"}
<Plus class="w-12 h-12 ml-4" />
<span class="md:hidden">{"Select"}</span>
<span class="hidden md:block">{"Select image"}</span>
<Plus class="w-8 h-8 md:w-12 md:h-12 ml-2 md:ml-4" />
</label>
<p class="text-gray-400 text-base text-shadow-light">{"Supports jpg, png, webp"}</p>
<input id="img-upload" type="file" class="hidden" accept="image/*" {onchange} />
Expand Down
19 changes: 11 additions & 8 deletions src/components/details.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ pub fn Details() -> Html {

html! {
<>
<div class="absolute right-8 md:right-10 top-8 md:top-10 w-12 h-12 md:w-14 md:h-14" onclick={on_cancel}>
<div class="absolute right-4 md:right-10 top-4 md:top-10 w-10 h-10 md:w-14 md:h-14" onclick={on_cancel}>
<Close class="w-full h-full" />
</div>

Expand All @@ -105,7 +105,7 @@ pub fn Details() -> Html {
<img
class="max-w-[10rem] max-h-[10rem] w-auto h-auto border-[1em] border-sky-600 "
src={img_src(&fd)} />
<p class="text-gray-400 text-base md:text-lg mt-2 truncate">
<p class="text-gray-400 text-sm md:text-lg mt-2 truncate text-center">
{ if *is_exified {
exified_file_name(&fd)
} else {
Expand All @@ -126,13 +126,16 @@ pub fn Details() -> Html {
if *is_exified {
html!{
<button class="btn px-10 lg:px-28 mt-8 lg:mt-12
w-full lg:w-auto" onclick={on_save}>{"Save"}</button>
w-auto text-xl" onclick={on_save}>{"Save"}</button>
}
} else if file_details.is_some() && *has_exif {
html!{
<button class="btn px-10 lg:px-28 mt-8 lg:mt-12
w-full lg:w-auto"
onclick={on_remove}>{"Remove EXIF"}</button>
w-auto"
onclick={on_remove}>
<span class="md:hidden">{"Remove"}</span>
<span class="hidden md:block">{"Remove EXIF"}</span>
</button>
}
} else {
html!{}
Expand All @@ -153,7 +156,7 @@ pub fn Details() -> Html {
}
}

<h2 class="text-2xl md:text-4xl font-bold text-gray-400 my-8 ">
<h2 class="text-xl md:text-3xl font-bold text-gray-400 my-8 text-center">
{
if *is_exified {
"EXIF data removed".to_owned()
Expand All @@ -177,14 +180,14 @@ pub fn Details() -> Html {
<div class="w-full flex flex-row justify-center
text-gray-500 bg-gray-200
text-shadow-light
text-base md:text-lg">
text-sm md:text-lg">
<div class="w-1/2 md:w-1/3 px-3 py-1 border-r border-white">{"Name"}</div>
<div class="w-1/2 md:w-2/3 px-3 py-1">{"Data"}</div>
</div>
<div class="w-full overflow-y-scroll">
{ for fd.exif.iter().map(|(k, v)| html! {
<div class="w-full flex justify-center
text-base md:text-lg text-gray-500 text-shadow-light
text-sm md:text-lg text-gray-500 text-shadow-light
odd:bg-gray-100">
<div class="w-1/2 md:w-1/3 px-3 py-1 border-r border-gray-200 truncate">{k.to_string()}</div>
<div class="w-1/2 md:w-2/3 px-3 py-1 truncate">{v.to_string()}</div>
Expand Down
5 changes: 2 additions & 3 deletions src/components/layout.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ pub fn Layout() -> Html {
hover:from-sky-400
hover:to-sky-900
flex flex-col items-center justify-center
p-12 md:p-20
px-8 py-14 md:p-20
bg-cover
relative
ease
Expand All @@ -40,7 +40,7 @@ pub fn Layout() -> Html {
drop-shadow-md
bg-white
rounded-xl md:rounded-3xl
p-10 md:p-20
p-6 md:p-20
overflow-hidden
relative
ease "
Expand All @@ -57,7 +57,6 @@ pub fn Layout() -> Html {
}
}
}

</div>
</div>
}
Expand Down

0 comments on commit dd045b5

Please sign in to comment.