Bugfix: Load showcase stylesheets with include macro and style tag on…

… example change (#992)

Bugfix: Loading showcase stylesheets into styletage allows styles for
different examples to be loaded after selection.

examples/game_of_life/src/lib.rs

@@ -59,9 +59,9 @@ impl Cellule {
 
 fn wrap(coord: isize, range: isize) -> usize {
     let result = if coord < 0 {
-        (coord + range)
+        coord + range
     } else if coord >= range {
-        (coord - range)
+        coord - range
     } else {
         coord
     };
@@ -160,6 +160,7 @@ impl Component for Model {
         let callback = link.callback(|_| Msg::Tick);
         let mut interval = IntervalService::new();
         let handle = interval.spawn(Duration::from_millis(200), callback);
+
         Model {
             link,
             active: false,

examples/game_of_life/static/styles.css

@@ -10,7 +10,7 @@ body {
     line-height: 1.4em;
     color: #4d4d4d;
     min-width: 230px;
-    max-width: 550px;
+	max-width: 1000px;
     margin: 0 auto;
     -webkit-font-smoothing: antialiased;
     -moz-font-smoothing: antialiased;

examples/showcase/src/main.rs

@@ -89,6 +89,7 @@ impl Component for Model {
     fn view(&self) -> Html {
         html! {
             <div id="fullscreen">
+                <style>{ self.view_style() }</style>
                 <div id="left_pane">
                     <h2>{ "Yew showcase" }</h2>
                     <Select<Scene>
@@ -130,6 +131,19 @@ impl Model {
             }
         }
     }
+
+    fn view_style(&self) -> &str {
+        if let Some(scene) = self.scene.as_ref() {
+            match scene {
+                Scene::GameOfLife => { include_str!("../../game_of_life/static/styles.css") },
+                Scene::LargeTable => { include_str!("../../large_table/static/styles.css") },
+                Scene::Todomvc => { include_str!("../static/todomvc.css") },
+                _ => { "" },
+            }
+        } else {
+            ""
+        }
+    }
 }
 
 fn main() {

examples/showcase/static/styles.css

@@ -1,13 +1,14 @@
 html, body, #fullscreen {
     width: 100%;
+    display: flex;
+    flex-direction: row;
 }
+
 #left_pane {
-    position: absolute;
-    width: 20%;
+    display: flex;
+    flex-direction: column;
 }
 
 #right_pane {
-    position: absolute;
-    width: 80%;
-    left: 20%;
+    display: flex;
 }