implement layouts

dancespiele · Feb 23, 2020 · 51cb3cd · 51cb3cd
1 parent b70acf6
commit 51cb3cd
Show file tree

Hide file tree

Showing 15 changed files with 545 additions and 488 deletions.
diff --git a/app/components-styles/_global-variables.sass b/app/components-styles/_global-variables.sass
@@ -7,5 +7,4 @@ $justify-content: flex-start, flex-end, start, end, left, center, right, space-a
 $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
-$type: cl, rw
+$screens: xs, s, m, l, xl
diff --git a/app/components-styles/_layout.sass b/app/components-styles/_layout.sass
@@ -3,9 +3,6 @@
 
 .container
     display: flex
-    .column
+    .item
         @each $screen in $screens
-            @include layout-screen($screen, cl)
-    .row
-        @each $screen in $screens
-            @include layout-screen($screen, rw)
+            @include layout-screen($screen)
diff --git a/app/components-styles/_mixins.sass b/app/components-styles/_mixins.sass
@@ -5,26 +5,26 @@
             color: $color
             border: get-border($border-color)
 
-@mixin layout-screen($screen, $type)
+@mixin layout-screen($screen)
     @for $size from 1 through 12
         @if $screen == s
             @media (min-width: 576px)
-                @include get-layout($type, $screen, $size)
+                @include get-layout($screen, $size)
         @else if $screen == m
             @media (min-width: 768px)
-                @include get-layout($type, $screen, $size)
+                @include get-layout($screen, $size)
         @else if $screen == l
             @media (min-width: 992px)
-                @include get-layout($type, $screen, $size)
+                @include get-layout($screen, $size)
         @else if $screen == xl
             @media (min-width: 1200px)
-                @include get-layout($type, $screen, $size)
+                @include get-layout($screen, $size)
         @else
-            @include get-layout($type, $screen, $size)
+            @include get-layout($screen, $size)
 
 
-@mixin get-layout($type, $screen, $size)
-    &.#{$type}-#{$screen}-#{$size}
+@mixin get-layout($screen, $size)
+    &.it-#{$screen}-#{$size}
         flex-basis: 100% / (12/$size)
 
 

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/src/app.rs b/crate/src/app.rs
@@ -1,3 +1,4 @@
+use components::{AlignItems, Container, Direction, Item, ItemLayout, Mode, Wrap};
 use page::{ButtonPage, LayoutsPage};
 use yew::prelude::*;
 use yew_router::{prelude::*, route::Route, switch::Permissive, Switch};
@@ -30,32 +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="/layouts">{"Layouts"}</a>
-                                  </div>
-                                  <div>
-                                    <a href="/button">{"Button"}</a>
-                                  </div>
-                                </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)))
-                    })
-                />
-            </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/column.rs b/crate/src/components/column.rs