From e4cf8ffafcc94ec73bc93b6f5f5790afe3a6d83e Mon Sep 17 00:00:00 2001
From: BrewingWeasel <weeaseled@gmail.com>
Date: Wed, 17 Jan 2024 14:34:39 -0800
Subject: [PATCH] feat(ui): move definition and word info to side

---
 src-ui/src/reader.rs | 273 ++++++++++++++++++++++---------------------
 src-ui/style.css     |  32 ++++-
 2 files changed, 166 insertions(+), 139 deletions(-)

diff --git a/src-ui/src/reader.rs b/src-ui/src/reader.rs
index 5b98d8f..a64a58c 100644
--- a/src-ui/src/reader.rs
+++ b/src-ui/src/reader.rs
@@ -126,162 +126,163 @@ pub fn ReaderView() -> impl IntoView {
 
         </div>
         <br/>
-        {move || {
-            if selected_word().is_some() {
-                view! {
-                    <div class="wordinfo">
-                        <input
-                            class="selectedword"
-                            type="text"
-                            on:change=move |ev| {
-                                conts
-                                    .update(|v| {
-                                        v
-                                            .as_mut()
-                                            .unwrap()
-                                            .get_mut(selected_word().unwrap())
-                                            .unwrap()
-                                            .lemma = event_target_value(&ev);
-                                    });
-                                definition.refetch();
-                            }
+        <div class="wordpanel">
+            {move || {
+                if selected_word().is_some() {
+                    view! {
+                        <div class="wordinfo">
+                            <input
+                                class="selectedword"
+                                type="text"
+                                on:change=move |ev| {
+                                    conts
+                                        .update(|v| {
+                                            v
+                                                .as_mut()
+                                                .unwrap()
+                                                .get_mut(selected_word().unwrap())
+                                                .unwrap()
+                                                .lemma = event_target_value(&ev);
+                                        });
+                                    definition.refetch();
+                                }
 
-                            prop:value=move || {
-                                selected_word
+                                prop:value=move || {
+                                    selected_word
+                                        .get()
+                                        .and_then(|i| {
+                                            let words = conts.get().unwrap();
+                                            words.get(i).cloned()
+                                        })
+                                        .map(|v| v.lemma)
+                                }
+                            />
+
+                        </div>
+
+                        <div class="grammarinfo">
+                            {move || {
+                                conts
                                     .get()
-                                    .and_then(|i| {
-                                        let words = conts.get().unwrap();
-                                        words.get(i).cloned()
+                                    .unwrap()[selected_word().unwrap()]
+                                    .morph
+                                    .iter()
+                                    .map(|(k, v)| {
+                                        view! {
+                                            <div class="grammarfeature">
+                                                <span class=k>{k}</span>
+                                                <span class="seperator">:</span>
+                                                <span class=v>{v}</span>
+                                            </div>
+                                        }
                                     })
-                                    .map(|v| v.lemma)
-                            }
-                        />
+                                    .collect_view()
+                            }}
 
-                    </div>
-
-                    <div class="grammarinfo">
-                        {move || {
-                            conts
-                                .get()
-                                .unwrap()[selected_word().unwrap()]
-                                .morph
-                                .iter()
-                                .map(|(k, v)| {
+                        </div>
+                        <div class="ratingchanger">
+                            {(0..5)
+                                .map(|level| {
                                     view! {
-                                        <div class="grammarfeature">
-                                            <span class=k>{k}</span>
-                                            <span class="seperator">:</span>
-                                            <span class=v>{v}</span>
-                                        </div>
+                                        <button
+                                            on:click=move |_| {
+                                                spawn_local(async move {
+                                                    update_word_knowledge(
+                                                            &conts().unwrap()[selected_word().unwrap()].lemma,
+                                                            level,
+                                                        )
+                                                        .await;
+                                                    conts
+                                                        .update(|v| {
+                                                            v
+                                                                .as_mut()
+                                                                .unwrap()
+                                                                .get_mut(selected_word().unwrap())
+                                                                .unwrap()
+                                                                .rating = level;
+                                                        });
+                                                });
+                                            }
+
+                                            class=format!("ratingbutton rating-{level}")
+                                        >
+                                            {level + 1}
+                                        </button>
                                     }
                                 })
-                                .collect_view()
-                        }}
-
-                    </div>
-                    <div class="ratingchanger">
-                        {(0..5)
-                            .map(|level| {
-                                view! {
+                                .collect_view()}
+                        </div>
+                        <hr/>
+                    }
+                        .into_view()
+                } else {
+                    view! {}.into_view()
+                }
+            }}
+            <Suspense fallback=move || {
+                view! { <p>"Loading..."</p> }
+            }>
+                {definition
+                    .get()
+                    .map(|data| {
+                        data.iter()
+                            .map(|d| {
+                                match d {
+                                    SakinyjeResult::Ok(s) => {
+                                        view! {
+                                            <div class="definition" inner_html=s></div>
+                                            <br/>
+                                        }
+                                            .into_view()
+                                    }
+                                    SakinyjeResult::Err(v) => {
+                                        view! {
+                                            <div class="error">Err: {v}</div>
+                                            <br/>
+                                        }
+                                            .into_view()
+                                    }
+                                }
+                            })
+                            .collect_view()
+                    })}
+                {move || {
+                    selected_word()
+                        .map(|i| {
+                            view! {
+                                <div class="export">
                                     <button
                                         on:click=move |_| {
+                                            let cur_conts = conts().unwrap();
+                                            let lemma = cur_conts[i].lemma.clone();
+                                            console_log(&lemma);
                                             spawn_local(async move {
-                                                update_word_knowledge(
-                                                        &conts().unwrap()[selected_word().unwrap()].lemma,
-                                                        level,
+                                                export_card(
+                                                        &sentence(),
+                                                        &lemma,
+                                                        &definition()
+                                                            .unwrap()
+                                                            .into_iter()
+                                                            .filter_map(|d| {
+                                                                Into::<Result<String, String>>::into(d).ok()
+                                                            })
+                                                            .collect(),
                                                     )
                                                     .await;
-                                                conts
-                                                    .update(|v| {
-                                                        v
-                                                            .as_mut()
-                                                            .unwrap()
-                                                            .get_mut(selected_word().unwrap())
-                                                            .unwrap()
-                                                            .rating = level;
-                                                    });
                                             });
                                         }
 
-                                        class=format!("ratingbutton rating-{level}")
+                                        class="exportbutton"
                                     >
-                                        {level + 1}
+                                        export to anki
                                     </button>
-                                }
-                            })
-                            .collect_view()}
-                    </div>
-                    <hr/>
-                }
-                    .into_view()
-            } else {
-                view! {}.into_view()
-            }
-        }}
-
-        <Suspense fallback=move || {
-            view! { <p>"Loading..."</p> }
-        }>
-            {definition
-                .get()
-                .map(|data| {
-                    data.iter()
-                        .map(|d| {
-                            match d {
-                                SakinyjeResult::Ok(s) => {
-                                    view! {
-                                        <div class="definition" inner_html=s></div>
-                                        <br/>
-                                    }
-                                        .into_view()
-                                }
-                                SakinyjeResult::Err(v) => {
-                                    view! {
-                                        <div class="error">Err: {v}</div>
-                                        <br/>
-                                    }
-                                        .into_view()
-                                }
+                                </div>
                             }
                         })
-                        .collect_view()
-                })}
-            {move || {
-                selected_word()
-                    .map(|i| {
-                        view! {
-                            <div class="export">
-                                <button
-                                    on:click=move |_| {
-                                        let cur_conts = conts().unwrap();
-                                        let lemma = cur_conts[i].lemma.clone();
-                                        console_log(&lemma);
-                                        spawn_local(async move {
-                                            export_card(
-                                                    &sentence(),
-                                                    &lemma,
-                                                    &definition()
-                                                        .unwrap()
-                                                        .into_iter()
-                                                        .filter_map(|d| {
-                                                            Into::<Result<String, String>>::into(d).ok()
-                                                        })
-                                                        .collect(),
-                                                )
-                                                .await;
-                                        });
-                                    }
+                }}
 
-                                    class="exportbutton"
-                                >
-                                    export to anki
-                                </button>
-                            </div>
-                        }
-                    })
-            }}
-
-        </Suspense>
+            </Suspense>
+        </div>
     }
 }
 
diff --git a/src-ui/style.css b/src-ui/style.css
index cd23fe5..8c5f908 100644
--- a/src-ui/style.css
+++ b/src-ui/style.css
@@ -13,6 +13,20 @@ hr {
   width: 93%;
 }
 
+
+/* READER AREA */
+.wordpanel {
+  height: 100%;
+  width: 460px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  overflow-x: hidden;
+  padding: 20px;
+  background-color: #2a273f;
+}
+
 /* # SETTINGS AREA */
 
 .settings label {
@@ -157,13 +171,17 @@ select {
 /* GENERAL STUFF */
 
 
-.sentence, .wordinfo, .definition, .export, .grammarinfo {
+.sentence, .wordinfo, .definition, .grammarinfo {
   display: flex;
   justify-content: center;
 }
 
+.sentence, .input {
+  margin-right: 460px;
+}
+
 .grammarinfo {
-  font-size: 18px;
+  font-size: 12px;
   font-style: italic;
   color: #908caa;
 }
@@ -212,13 +230,21 @@ select {
   border: none;
   text-align: center;
   text-decoration: none;
-  width: 15%;
+  width: 50%;
   transition-duration: .2s;
   padding: 10px;
   border-radius: 6px;
   border-width: 0;
+}
+
+.export {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
   display: flex;
   justify-content: center;
+  padding-bottom: 50px;
 }
 
 .exportbutton:hover {