header & footer 追加

Author: pokohide

Diff for: client/app.tag

@@ -1,33 +1,13 @@
-require('./components/layouts/basic-layout.tag')
-
-// require('./components/layouts/home-layout.tag');
-// <app>
-//     <basic-layout if="{{isHome}}" />
-//     <home-layout if="{{!isHome}}" />
-//     <script type="es6">
-//         this.isHome = !!window.location.hash.replace('#', '');
-//         riot.route((collection, id, action)=> {
-//             this.update({isHome:!!collection})
-//         });
-//     </script>
-// </app>
-
 app
-  div.mdl-layout.mdl-js-layout
-    header.mdl-layout__header.mdl-layout__header--scroll
-      div.mdl-layout__header-row
-        span.mdl-layout-title OthloCalendar
-        div.mdl-layout-spacer
-        nav.mdl-navigation
-          a.mdl-navigation__link(href='#about') about
-          a.mdl-navigation__link(href='#feature') 特徴
-          a.mdl-navigation__link(href='#function') 機能
-    div.mdl-layout__drawer
-      span.mdl-layout-title OthloCalendar
-      nav.mdl-navigation
-        a.mdl-navigation__link(href='#about') about
-        a.mdl-navigation__link(href='#feature') 特徴
-        a.mdl-navigation__link(href='#function') 機能
-    main.mdl-layout__content
-      div.page-content
-        h1 ここにいろいろ書いていく
+  othlo-header
+  main.othlo-layout.mdl-layout__content
+    div.page-content
+      h1 ここにいろいろ書いていく
+  othlo-footer
+
+  script.
+    const riot = require('riot')
+    require('./components/layouts/othlo-footer.tag')
+    require('./components/layouts/othlo-header.tag')
+    riot.mount('othlo-header')
+    riot.mount('othlo-footer')

Diff for: client/components/layouts/basic-layout.scss

@@ -0,0 +1,19 @@
+othlo-footer
+  footer.mdl-mega-footer
+    div.mdl-mega-footer__middle-section
+      input.mdl-mega-footer__heading-checkbox(type='checkbod' checked)
+      h1.mdl-mega-footer__heading 特徴
+      ul.mdl-mega-footer__link-list
+        li
+          a(href='#') About
+        li
+          a(href='#') Terms
+        li
+          a(href='#') Updates
+    div.mdl-mega-footer__bottom-section
+      div.mdl-logo OthloCalendar
+      ul.mdl-mega-footer__link-list
+        li
+          a(href='#') Help
+        li
+          a(href='#') Privacy & Terms

Diff for: client/components/layouts/basic-layout.tag

@@ -0,0 +1,18 @@
+othlo-header
+  div.mdl-layout.mdl-js-layout.mdl-layout--fixed-header
+    header.mdl-layout__header.mdl-layout__header--waterfall
+      div.mdl-layout__header-row
+        span.othlo-title.mdl-layout-title OthloCalendar
+        div.mdl-layout-spacer
+        nav.mdl-navigation
+          a.mdl-navigation__link(href='#about') about
+          a.mdl-navigation__link(href='#feature') 特徴
+          a.mdl-navigation__link(href='#function') 機能
+          a.mdl-navigation__link(href='#example') 例
+    div.mdl-layout__drawer
+      span.mdl-layout-title OthloCalendar
+      nav.mdl-navigation
+        a.mdl-navigation__link(href='#about') about
+        a.mdl-navigation__link(href='#feature') 特徴
+        a.mdl-navigation__link(href='#function') 機能
+        a.mdl-navigation__link(href='#example') 例

Diff for: client/components/layouts/othlo-footer.tag

@@ -1,9 +1,7 @@
 'use strict'
-//require('riot-mui')
 const riot = require('riot')
 require('./app.tag')
 
-riot.settings.brackets = '{{ }}'
 riot.mount('*')
 
 // Router

Diff for: client/components/layouts/othlo-header.tag

@@ -1,3 +1,3 @@
-h1 {
-	color: red;
+.othlo-layout {
+  margin-top: 64px;
 }