Merge pull request #1 from spielrs/IMPL-layout

Impl layout
dancespiele · Feb 24, 2020 · 2e6f6ec · 2e6f6ec
2 parents db0314a + 3178b48
commit 2e6f6ec
Show file tree

Hide file tree

Showing 21 changed files with 824 additions and 72 deletions.
diff --git a/app/components-styles/_global-variables.sass b/app/components-styles/_global-variables.sass
@@ -2,4 +2,9 @@ $regular-style: standard #918d94 #fff none, primary #654016 #fff none, secondary
 $light-style: standard #faf3f3 #918d94 none, primary #e9d7c4 #654016 none, secondary #ffd9ac #c77b21 none, success #b6f5c6 #1ca53e none, info #cedaff #008FD5 none, link #4fb0ff #034DA1 none, warning #fdffa8 #99a034 none, danger #fdc5c5 #ed1c24 none
 $outline-style: standard #fff #918d94 #918d94, primary #fff #654016 #654016, secondary #fff #c77b21 #c77b21, success #fff #40C600 #40C600, info #fff #008FD5 #008FD5, link #fff #034DA1 #034DA1, warning #fff #e6bd44 #e6bd44, danger #fff #ed1c24 #ed1c24 
 $sizes: (small: 12px, medium: 18px, big: 26px)
-
+$container-type: row, row-reverse, column, column-reverse, no-wrap, wrap, wrap-reverse 
+$justify-content: flex-start, flex-end, start, end, left, center, right, space-around, space-between, evenly
+$align-content: stretch, flex-start, flex-end, start, end, center, baseline, first-baseline, last-baseline, space-around, space-between, evenly
+$align-items: stretch, baseline, start, end, flex-start, flex-end, first-baseline, last-baseline, 
+$align-mode: null, safe, unsafe
+$screens: xs, s, m, l, xl
diff --git a/app/components-styles/_layout.sass b/app/components-styles/_layout.sass
@@ -0,0 +1,8 @@
+@import "_global-variables.sass"
+@import "_mixins.sass"
+
+.container
+    display: flex
+    .item
+        @each $screen in $screens
+            @include layout-screen($screen)
diff --git a/app/components-styles/_mixins.sass b/app/components-styles/_mixins.sass
@@ -5,9 +5,32 @@
             color: $color
             border: get-border($border-color)
 
+@mixin layout-screen($screen)
+    @for $size from 1 through 12
+        @if $screen == s
+            @media (min-width: 576px)
+                @include get-layout($screen, $size)
+        @else if $screen == m
+            @media (min-width: 768px)
+                @include get-layout($screen, $size)
+        @else if $screen == l
+            @media (min-width: 992px)
+                @include get-layout($screen, $size)
+        @else if $screen == xl
+            @media (min-width: 1200px)
+                @include get-layout($screen, $size)
+        @else
+            @include get-layout($screen, $size)
+
+
+@mixin get-layout($screen, $size)
+    &.it-#{$screen}-#{$size}
+        flex-basis: 100% / (12/$size)
+
+
 @function get-border($border-color)
     $border: none
     @if $border-color != none
         $border: 1px solid $border-color
 
-    @return $border
+    @return $border
diff --git a/app/components-styles/main.sass b/app/components-styles/main.sass
@@ -1 +1,2 @@
-@import "_button.sass"
+@import "_button.sass"
+@import "_layout.sass"
diff --git a/app/page-styles/_app.sass b/app/page-styles/_app.sass
@@ -0,0 +1,11 @@
+.component-link
+    width: 90%
+    a
+        cursor: pointer
+        display: inline-block
+        width: 100%
+
+        &:hover
+            background-color: rgb(230, 236, 241)
+
+
diff --git a/app/page-styles/_layout.sass b/app/page-styles/_layout.sass
@@ -0,0 +1,5 @@
+.align
+    height: 400px
+
+.align-item
+    height: 200px
diff --git a/app/page-styles/main.sass b/app/page-styles/main.sass
@@ -1 +1,3 @@
-@import '_button.sass'
+@import '_app.sass'
+@import '_button.sass'
+@import '_layout.sass'
diff --git a/crate/Cargo.lock b/crate/Cargo.lock
diff --git a/crate/Cargo.toml b/crate/Cargo.toml
@@ -23,3 +23,4 @@ failure = "0.1"
 yew = { version = "0.11.0", features = ["toml", "yaml", "msgpack", "cbor"]}
 yew-router = "0.8"
 web-sys = "0.3"
+stdweb = "0.4"
diff --git a/crate/src/app.rs b/crate/src/app.rs
@@ -1,15 +1,18 @@
+use components::{AlignItems, Container, Direction, Item, ItemLayout, Mode, Wrap};
+use page::{ButtonPage, LayoutsPage};
 use yew::prelude::*;
-use yew_router::{prelude::*, Switch, switch::Permissive , route::Route};
-use page::ButtonPage;
+use yew_router::{prelude::*, route::Route, switch::Permissive, Switch};
 
 pub struct App;
 
 #[derive(Switch, Debug, Clone)]
 pub enum AppRouter {
-    #[to= "/!"]
+    #[to = "/!"]
     RootPath,
-    #[to= "/button!"]
+    #[to = "/button!"]
     ButtonPath,
+    #[to = "/layouts!"]
+    LayoutsPage,
     #[to = "/page-not-found"]
     PageNotFound(Permissive<String>),
 }
@@ -28,28 +31,49 @@ impl Component for App {
 
     fn view(&self) -> Html {
         html! {
-            <div>
-                <Router<AppRouter, ()>
-                    render = Router::render(|switch: AppRouter | {
-                        match switch {
-                            AppRouter::RootPath => html!{
-                                <div>
-                                  <h2>{"Yew Styles Component"}</h2>
-                                  <div>
-                                    <a href="/button">{"Button"}</a>
-                                  </div>
-                                </div>
-                            },
-                            AppRouter::ButtonPath => html!{<ButtonPage/>},
-                            AppRouter::PageNotFound(Permissive(None)) => html!{"Page not found"},
-                            AppRouter::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)}
-                        }
-                    } )
-                    redirect = Router::redirect(|route: Route<()>| {
-                        AppRouter::PageNotFound(Permissive(Some(route.route)))
-                    })
-                />
-            </div>
+            <Container name="root" direction=Direction::Row wrap=Wrap::Wrap>
+                <Item name="left-side" layouts=vec!(ItemLayout::ItXs(2))>
+                    <Container
+                        name="components"
+                        direction=Direction::Column
+                        align_items=AlignItems::FlexStart(Mode::NoMode)
+                        wrap=Wrap::Wrap
+                    >
+                        <Item layouts=vec!(ItemLayout::ItXs(12)) class_name="component-link">
+                            <h2>{"Yew Styles Component"}</h2>
+                        </Item>
+                        <Item layouts=vec!(ItemLayout::ItXs(12)) class_name="component-link">
+                            <RouterAnchor<AppRouter> route=AppRouter::RootPath>{"Let's start"}</RouterAnchor<AppRouter>>
+                        </Item>
+                        <Item layouts=vec!(ItemLayout::ItXs(12)) class_name="component-link">
+                            <RouterAnchor<AppRouter> route=AppRouter::LayoutsPage>{"Layouts"}</RouterAnchor<AppRouter>>
+                        </Item>
+                        <Item layouts=vec!(ItemLayout::ItXs(12)) class_name="component-link">
+                            <RouterAnchor<AppRouter> route=AppRouter::ButtonPath>{"Button"}</RouterAnchor<AppRouter>>
+                        </Item>
+                    </Container>
+                </Item>
+                <Item name="right-side" layouts=vec!(ItemLayout::ItXs(10))>
+                    <Router<AppRouter, ()>
+                        render = Router::render(|switch: AppRouter | {
+                            match switch {
+                                AppRouter::RootPath => html!{
+                                    <div>
+                                        <h1>{"Welcome to Yew Style"}</h1>
+                                    </div>
+                                },
+                                AppRouter::ButtonPath => html!{<ButtonPage/>},
+                                AppRouter::LayoutsPage => html!{<LayoutsPage/>},
+                                AppRouter::PageNotFound(Permissive(None)) => html!{"Page not found"},
+                                AppRouter::PageNotFound(Permissive(Some(missed_route))) => html!{format!("Page '{}' not found", missed_route)}
+                            }
+                        } )
+                        redirect = Router::redirect(|route: Route<()>| {
+                            AppRouter::PageNotFound(Permissive(Some(route.route)))
+                        })
+                    />
+                </Item>
+            </Container>
         }
     }
- }
+}
diff --git a/crate/src/components/button.rs b/crate/src/components/button.rs
@@ -1,6 +1,6 @@
 use yew::prelude::*;
 
-#[derive(Clone, PartialEq)]
+#[derive(Clone)]
 pub enum ButtonType {
     Primary,
     Secondary,
@@ -12,14 +12,14 @@ pub enum ButtonType {
     Standard,
 }
 
-#[derive(Clone, PartialEq)]
+#[derive(Clone)]
 pub enum ButtonStyle {
     Regular,
     Light,
     Outline,
 }
 
-#[derive(Clone, PartialEq)]
+#[derive(Clone)]
 pub enum Size {
     Small,
     Medium,
@@ -137,12 +137,7 @@ impl Component for Button {
     }
 
     fn change(&mut self, props: Self::Properties) -> ShouldRender {
-        self.props.button_type = get_button_type(props.button_type);
-        self.props.class_name = props.class_name;
-        self.props.size = get_size(props.size);
-        self.props.button_style = get_button_style(props.button_style);
-        self.props.onsignal = props.onsignal;
-        self.props.children = props.children;
+        self.props = ButtonProps::from(props);
         true
     }