Merge pull request #77 from dancespiele/improve-navbar-dropdown

set by web_sys the same width for the dropdown than its container

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: ['https://gitcoin.co/grants/1048/yew-styles', 'https://paypal.me/dancespiele?locale.x=en_US']
+custom: ['https://gitcoin.co/grants/1048/yew-styles']

README.md

@@ -7,7 +7,6 @@
         <a href="https://docs.rs/yew_styles/"><img alt="API Docs" src="https://img.shields.io/badge/yew__styles-docs-informational"/></a>
         <a href="https://discord.gg/VQck8X4" target="_blank"><img alt="Discord Chat" src="https://img.shields.io/badge/Discor-Spielrs%20-yellowgreen"/></a>
         <a href="https://github.com/spielrs/yew_styles/blob/master/LICENSE-MIT.md" target="_blank"><img alt="License" src="https://img.shields.io/badge/License-MIT%2FApache--2.0-lightgrey"></a>
-        <a href="https://paypal.me/dancespiele?locale.x=en_US" target="_blank"><img alt="Donate by Paypal" src="https://img.shields.io/badge/Donate-PayPal-green.svg"/></a>
     </p>
 </div>
 
@@ -78,11 +77,16 @@ its logic works, in the same file where it is implemented (test events is not ne
 * Documentation in the component showing an example of using it and small description of each prop
 * Create a component page in `/crate/src/page` with the same structure than the rest of the components
 
+
+
 ## Do you like Yew Styles?
-If you like Yew Styles, help us supporting the project:
+If you like Yew Styles, help me supporting the project:
 - [Gitcoin](https://gitcoin.co/grants/1048/yew-styles)
+- BAT rewards in case that you use [Brave Browser](https://brave.com/)
 - [Github Sponsors](https://github.com/sponsors/dancespiele)
-- [Paypal](https://paypal.me/dancespiele?locale.x=en_US)
+- Burst coins to the address BURST-DPN6-2AT3-FCRL-9BBKG
+
+If you need a feature that is not cover yet, as soon as possible, you can also fund the issue [here](https://issuehunt.io/r/spielrs/yew_styles)
 
 ## Code of Conduct
 Please check our [code of conduct](CODE_OF_CONDUCT.md)

app/page-styles/_navbar.sass

@@ -1,8 +1,3 @@
 .navbar-dropdown
     svg
         vertical-align: bottom
-
-@media all and (min-width: 769px)
-    .navbar-dropdown 
-        ul
-            width: 80px

app/yew-styles/_navbar.sass

@@ -69,13 +69,19 @@
 
             ul
                 padding: 0
-                margin-top: 3px
+                margin-top: 2px
                 position: absolute
                 left: 0
                 top: 40px
 
                 z-index: 1
 
+                &.active
+                    display: inherit
+
+                &.inactive
+                    display: none
+
             li
                 display: block
                 padding: 10px

app/yew-styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yew-styles",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "css for yew_styles",
   "repository": {
     "url": "https://github.com/spielrs/yew-styles-page/tree/master/app/yew-styles"

crate/Cargo.toml

@@ -6,7 +6,7 @@ license = "MIT/Apache-2.0"
 name = "yew_style_page"
 readme = "./README.md"
 repository = "https://github.com/spielrs/yew-styles-page.git"
-version = "0.8.0"
+version = "0.8.1"
 
 [lib]
 crate-type = ["cdylib"]

crate/src/page/home_page.rs

@@ -91,12 +91,14 @@ impl Component for HomePage {
                 </Item>
                 <Item layouts=vec!(ItemLayout::ItXl(8), ItemLayout::ItM(10), ItemLayout::ItXs(12))>
                     <h2>{"Do you like Yew Styles?"}</h2>
-                    <p>{"If you like Yew Styles, help us supporting the project:"}</p>
+                    <p>{"If you like Yew Styles, help me supporting the project:"}</p>
                     <ul>
                         <li><a href="https://gitcoin.co/grants/1048/yew-styles" target="_blank">{"Gitcoin"}</a></li>
+                        <li>{"BAT rewards in case that you use "}<a href="https://brave.com">{"Brave Browser"}</a></li>
                         <li><a href="https://github.com/sponsors/dancespiele" target="_blank">{"Github Sponsors"}</a></li>
-                        <li><a href="https://paypal.me/dancespiele?locale.x=en_US" target="_blank">{"Paypal"}</a></li>
+                        <li>{"Burst coins to the address BURST-DPN6-2AT3-FCRL-9BBKG"}</li>
                     </ul>
+                    <p>{"If you need a feature that is not cover yet, as soon as possible, you can also fund the issue "}<a href="https://issuehunt.io/r/spielrs/yew_styles">{"here"}</a></p>
                 </Item>
                 <Item layouts=vec!(ItemLayout::ItXl(8), ItemLayout::ItM(10), ItemLayout::ItXs(12))>
                     <h2>{"Code of Conduct"}</h2>

crate/yew_styles/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "yew_styles"
-version = "0.8.0"
+version = "0.8.1"
 description = "Framework styles for yew"
 documentation = "https://docs.rs/crate/yew_styles"
 authors = ["Francisco Jesus Navarro Cortes <[email protected]>"]

crate/yew_styles/README.md

@@ -74,10 +74,13 @@ its logic works, in the same file where it is implemented (test events is not ne
 * Create a component page in `/crate/src/page` with the same structure than the rest of the components
 
 ## Do you like Yew Styles?
-If you like Yew Styles, help us supporting the project:
+If you like Yew Styles, help me supporting the project:
 - [Gitcoin](https://gitcoin.co/grants/1048/yew-styles)
+- BAT rewards in case that you use [Brave Browser](https://brave.com/)
 - [Github Sponsors](https://github.com/sponsors/dancespiele)
-- [Paypal](https://paypal.me/dancespiele?locale.x=en_US)
+- Burst coins to the address BURST-DPN6-2AT3-FCRL-9BBKG
+
+If you need a feature that is not cover yet, as soon as possible, you can also fund the issue [here](https://issuehunt.io/r/spielrs/yew_styles). 
 
 ## Code Contributors
 

crate/yew_styles/src/components/modal.rs

@@ -1,7 +1,8 @@
 use crate::styles::{get_palette, get_size, get_style, Palette, Size, Style};
+use crate::utils::get_html_element_by_class;
 use wasm_bindgen::JsCast;
 use wasm_bindgen_test::*;
-use web_sys::{Element, HtmlElement};
+use web_sys::Element;
 use yew::prelude::*;
 use yew::{utils, App};
 
@@ -214,14 +215,9 @@ impl Component for Modal {
 
     fn rendered(&mut self, _first_render: bool) {
         if self.props.is_open && self.props.auto_focus {
-            utils::document()
-                .get_elements_by_class_name("modal")
-                .get_with_index(0)
-                .unwrap()
-                .dyn_into::<HtmlElement>()
-                .unwrap()
-                .focus()
-                .unwrap();
+            let modal_form = get_html_element_by_class("modal", 0);
+
+            modal_form.focus().unwrap();
         }
     }
 

crate/yew_styles/src/components/navbar/navbar_dropdown/navbar_dropdown_container.rs

@@ -1,3 +1,4 @@
+use crate::utils::{get_html_element_by_class, get_random_string};
 use wasm_bindgen_test::*;
 use yew::prelude::*;
 use yew::{utils, App};
@@ -108,6 +109,7 @@ use yew::{utils, App};
 pub struct NavbarDropdown {
     props: Props,
     show: bool,
+    key: String,
     link: ComponentLink<Self>,
 }
 
@@ -140,9 +142,12 @@ impl Component for NavbarDropdown {
     type Properties = Props;
 
     fn create(props: Self::Properties, link: ComponentLink<Self>) -> Self {
+        let key = get_random_string(10);
+
         Self {
             props,
             link,
+            key,
             show: false,
         }
     }
@@ -167,10 +172,26 @@ impl Component for NavbarDropdown {
         false
     }
 
+    fn rendered(&mut self, first_render: bool) {
+        if first_render {
+            let navbar_dropdown =
+                get_html_element_by_class(&format!("navbar-dropdown-{}", self.key), 0);
+            let navbar_dropdown_width = navbar_dropdown.offset_width();
+
+            let navbar_dropdown_container =
+                get_html_element_by_class(&format!("navbar-dropdown-container-{}", self.key), 0);
+
+            navbar_dropdown_container
+                .style()
+                .set_property("width", &format!("{}px", navbar_dropdown_width))
+                .unwrap()
+        }
+    }
+
     fn view(&self) -> Html {
         html! {
             <div
-                class=("navbar-dropdown", if self.props.active {
+                class=("navbar-dropdown", format!("navbar-dropdown-{}", self.key), if self.props.active {
                     "active"
                 } else {
                     ""
@@ -182,21 +203,17 @@ impl Component for NavbarDropdown {
                 onclick=self.link.callback(|_| Msg::HideDropdown)
                 >
                 <div class="main-content">{self.props.main_content.clone()}</div>
-                {get_items(self.show, self.props.children.clone())}
+                {get_items(self.show, self.key.clone(), self.props.children.clone())}
             </div>
         }
     }
 }
 
-fn get_items(show: bool, children: Children) -> Html {
-    if show {
-        html! {
-            <ul>
-                {children.clone()}
-            </ul>
-        }
-    } else {
-        html! {}
+fn get_items(show: bool, key: String, children: Children) -> Html {
+    html! {
+        <ul class=(format!("navbar-dropdown-container-{}", key), if show { "active"} else {"inactive"})>
+            {children.clone()}
+        </ul>
     }
 }
 

crate/yew_styles/src/utils.rs

@@ -5,15 +5,10 @@ use rand::{distributions::Alphanumeric, thread_rng, Rng};
 use wasm_bindgen::JsCast;
 use wasm_bindgen_test::*;
 use web_sys::{window, HtmlElement};
+use yew::utils;
 
 pub fn create_style(style: String, value: String, wrap: String) {
-    let document = window().unwrap().document().unwrap();
-    let element = document
-        .get_elements_by_class_name(&wrap)
-        .get_with_index(0)
-        .unwrap()
-        .dyn_into::<HtmlElement>()
-        .unwrap();
+    let element = get_html_element_by_class(&wrap, 0);
 
     element.style().set_property(&style, &value).unwrap();
 }
@@ -25,6 +20,15 @@ pub fn get_random_string(len: usize) -> String {
         .collect::<String>()
 }
 
+pub fn get_html_element_by_class(class_name: &str, index: u32) -> HtmlElement {
+    utils::document()
+        .get_elements_by_class_name(class_name)
+        .get_with_index(index)
+        .unwrap()
+        .dyn_into::<HtmlElement>()
+        .unwrap()
+}
+
 wasm_bindgen_test_configure!(run_in_browser);
 
 #[wasm_bindgen_test]