Merge pull request #114 from picture-pro/demo-visual-tweaks

Demo visual tweaks

crates/site-app/src/components/photo_deck.rs

@@ -8,11 +8,37 @@ pub fn PhotoDeck(
   #[prop(default = PhotoSize::Regular)] size: PhotoSize,
 ) -> impl IntoView {
   view! {
-    { ids.into_iter().map(|photo_id| {
-      view! {
-        <crate::components::photo::Photo photo_id=photo_id size=size />
-      }
-      .into_view()
-    }).collect::<Vec<_>>() }
+    <div class="relative">
+      { ids.into_iter().map(|photo_id| {
+        view! {
+          <crate::components::photo::Photo photo_id=photo_id size=size />
+        }
+        .into_view()
+      }).collect::<Vec<_>>() }
+      <div class="absolute top-4 left-4 bg-base-100 p-1 rounded-full">
+        <LeftArrow class="size-8" />
+      </div>
+      <div class="absolute top-4 right-4 bg-base-100 p-1 rounded-full">
+        <RightArrow class="size-8" />
+      </div>
+    </div>
+  }
+}
+
+#[component]
+pub fn LeftArrow(#[prop(default = "")] class: &'static str) -> impl IntoView {
+  view! {
+    <svg class=class xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+    </svg>
+  }
+}
+
+#[component]
+pub fn RightArrow(#[prop(default = "")] class: &'static str) -> impl IntoView {
+  view! {
+    <svg class=class xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+    </svg>
   }
 }

crates/site-app/src/components/photo_upload.rs

@@ -28,6 +28,8 @@ pub fn PhotoUpload() -> impl IntoView {
   let price = move || sensible_price((10.0_f32).powf(logarithmic_price()));
 
   let (files, set_files) = create_signal(None::<web_sys::FileList>);
+  let (show_missing_files_error, set_show_missing_files_error) =
+    create_signal(false);
 
   let upload_action =
     create_action(move |(file_list, price): &(web_sys::FileList, f32)| {
@@ -89,24 +91,36 @@ pub fn PhotoUpload() -> impl IntoView {
         <p class="min-w-[4rem] text-right">{move || format!("${:.2}", price())}</p>
       </div>
 
-      // file input
-      <input
-        type="file" class="d-file-input d-file-input-bordered w-full"
-        name="photo" accept="image/*" capture="camera" multiple="multiple"
-        required=true on:input=move |e: Event| {
-          let target = e.target().unwrap().dyn_into::<HtmlInputElement>().unwrap();
-          set_files(target.files());
-        }
-      />
+      <label class="flex flex-row">
+        <span class="d-btn d-btn-neutral rounded-r-none flex-1">"Take Photo"</span>
+        <input
+          type="file" name="photo" accept="image/*" capture="camera" multiple="multiple"
+          class="d-file-input d-file-input-bordered rounded-l-none [&::file-selector-button]:hidden p-2.5 flex-1"
+          class:d-file-input-error=show_missing_files_error
+          required=true on:input=move |e: Event| {
+            let target = e.target().unwrap().dyn_into::<HtmlInputElement>().unwrap();
+            set_files(target.files());
+          }
+        />
+      </label>
 
       // upload button
       <div class="d-form-control mt-6">
         <button
           class="d-btn d-btn-primary w-full"
-          disabled=move || pending() || files().is_none()
-          on:click=move |_| upload_action.dispatch((files().unwrap(), price()))
+          on:click={move |_| {
+            if let Some(files) = files() {
+              upload_action.dispatch((files, price()));
+            } else {
+              set_show_missing_files_error(true);
+            }
+          }}
         >
-          { move || if pending() { view!{ <span class="d-loading d-loading-spinner" /> }.into_view() } else { view! {}.into_view() } }
+          { move || if pending() {
+            view!{ <span class="d-loading d-loading-spinner" /> }.into_view()
+          } else {
+            view! {}.into_view() }
+          }
           "Upload"
         </button>
       </div>

crates/site-app/src/pages/dashboard/mod.rs

@@ -19,7 +19,7 @@ pub fn DashboardPage() -> impl IntoView {
 
   view! {
     <PageWrapper backed=false>
-      <p class="text-4xl font-semibold tracking-tight">"Marketplace Photos"</p>
+      <p class="text-4xl font-semibold tracking-tight">"Private Session Photos"</p>
       <div class="flex flex-col lg:flex-row-reverse items-stretch lg:justify-between gap-4 items-start">
         <crate::components::photo_upload::PhotoUpload />
         <crate::components::gallery::Gallery />

crates/site-app/src/pages/qr_code.rs

@@ -39,13 +39,11 @@ pub fn InnerQrCodePage(
   view! {
     <SmallPageWrapper extra_class=wrapper_class theme_override=theme_override>
       <div class={format!("d-card-body gap-4 {}", inner_class)}>
-        <p class="text-2xl font-semibold tracking-tight">"QR Code"</p>
         {photo_deck_element}
-        <QrCode data=url class="rounded-box border shadow size-24 self-end" />
         <div class="flex flex-row items-center gap-4">
-          <a href="/dashboard" class="d-btn d-btn-primary d-btn-sm">"Back to Dashboard"</a>
-          <div class="flex-1" />
-          <a href={format!("/photo/{}", id)} class="d-btn d-btn-sm">"View Photo"</a>
+          <a href="/dashboard" class="d-btn d-btn-primary w-full h-full flex-1">"Back to Dashboard"</a>
+          <QrCode data=url class="rounded-box border shadow size-24 flex-1" />
+          <a href={format!("/photo/{}", id)} class="d-btn w-full h-full flex-1">"Purchase Page"</a>
         </div>
       </div>
     </SmallPageWrapper>

crates/site-app/style/tailwind/tailwind.config.js

@@ -2,6 +2,9 @@ module.exports = {
   content: {
     files: ["crates/site-app/src/**/*.rs"],
   },
+  safelist: [
+    "d-file-input-error"
+  ],
   theme: {
     fontFamily: {
 			'sans': [