editable items in info full-width

littlebenlittle · Jun 8, 2024 · 919e626 · 919e626
1 parent 599420d
commit 919e626
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/ui/src/pages/player/info.rs b/ui/src/pages/player/info.rs
@@ -31,8 +31,18 @@ pub fn Info() -> impl IntoView {
     });
     view! {
         <div id="video-info">
-            <ClickToEdit sig=title/>
-
+            {
+                #[cfg(feature = "demo")]
+                view! {
+                    <p>
+                        "You can edit some metadata items (title, shortname, format) \
+                        by clicking on them."
+                    </p>
+                }
+            }
+            <h3>
+                <ClickToEdit sig=title/>
+            </h3>
             <table>
                 <tr class="editable">
                     <td>"Shortname"</td>
@@ -79,7 +89,7 @@ fn ClickToEdit(sig: RwSignal<String>) -> impl IntoView {
     });
     view! {
         <input
-            hidden=move || !edit()
+            class:hidden=move || !edit()
             node_ref=node
             type="text"
             value=val.get_untracked()
@@ -102,12 +112,13 @@ fn ClickToEdit(sig: RwSignal<String>) -> impl IntoView {
         />
 
         <span
-            hidden=move || edit()
+            class:hidden=move || edit()
             on:click=move |_| {
                 set_edit(true);
                 node.get().unwrap().select();
             }
         >
+
             {move || sig.get()}
         </span>
     }

diff --git a/ui/style.scss b/ui/style.scss
@@ -293,6 +293,7 @@ nav ul {
 
     span {
       width: 100%;
+      display: block;
     }
   }
 
@@ -445,4 +446,8 @@ nav ul {
     height: 256px;
     overflow-y: auto;
   }
+}
+
+.hidden {
+  display: none !important;
 }