Merge pull request #18 from BrewingWeasel/show-grammatical-info

show grammatical info of word
BrewingWeasel · Nov 5, 2023 · 086fd39 · 086fd39
2 parents f3f1405 + 1aa556b
commit 086fd39
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 17 deletions.
diff --git a/src-ui/src/reader.rs b/src-ui/src/reader.rs
@@ -131,17 +131,29 @@ pub fn ReaderView(settings: Resource<(), Settings>) -> impl IntoView {
             </form>
         </div>
         <div class="sentence">
-             {move || conts.get().map_or_else(|| view! { <p>"Loading..."</p> }.into_view(), |data| data.into_iter()
-                         .enumerate()
-                         .map(|(i, d)| view! { <Word word=d i=i word_selector=set_selected_word/> })
-                         .collect::<Vec<_>>()
-                         .into_view())}
+            {move || {
+                conts
+                    .get()
+                    .map_or_else(
+                        || view! { <p>"Loading..."</p> }.into_view(),
+                        |data| {
+                            data.into_iter()
+                                .enumerate()
+                                .map(|(i, d)| {
+                                    view! { <Word word=d i=i word_selector=set_selected_word/> }
+                                })
+                                .collect::<Vec<_>>()
+                                .into_view()
+                        },
+                    )
+            }}
+
         </div>
         <br/>
-        <div class="wordinfo">
-            {move || {
-                if selected_word().is_some() {
-                    view! {
+        {move || {
+            if selected_word().is_some() {
+                view! {
+                    <div class="wordinfo">
                         <input
                             class="selectedword"
                             type="text"
@@ -168,14 +180,29 @@ pub fn ReaderView(settings: Resource<(), Settings>) -> impl IntoView {
                                     .map(|v| v.lemma)
                             }
                         />
-                    }
-                        .into_view()
-                } else {
-                    view! {}.into_view()
-                }
-            }}
+                    </div>
 
-        </div>
+                    <div class="grammarinfo">
+                        {move || {
+                            conts
+                                .get()
+                                .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> }
+                                })
+                                .collect_view()
+                        }}
+
+                    </div>
+                    <hr/>
+                }
+                    .into_view()
+            } else {
+                view! {}.into_view()
+            }
+        }}
 
         <Suspense fallback=move || {
             view! { <p>"Loading..."</p> }

diff --git a/src-ui/style.css b/src-ui/style.css
@@ -151,11 +151,25 @@ select {
 /* GENERAL STUFF */
 
 
-.sentence, .wordinfo, .definition, .export {
+.sentence, .wordinfo, .definition, .export, .grammarinfo {
   display: flex;
   justify-content: center;
 }
 
+.grammarinfo {
+  font-size: 18px;
+  font-style: italic;
+  color: #908caa;
+}
+
+.seperator {
+  padding-right: 0.3em;
+}
+
+.grammarfeature {
+  padding: 0em 0.4em;
+}
+
 .sentsubmit {
   width: 80%;
   height: 3em;