wip

public/style.css

@@ -6584,54 +6584,6 @@ label.panel-block {
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
   /* IE6-9 */ }
 
-.hero .slideshow-item {
-  animation: imageAnimation 30s linear infinite 0s;
-  backface-visibility: hidden;
-  background-size: cover;
-  background-position: center center;
-  background-repeat: no-repeat;
-  color: transparent;
-  height: 77.5vh;
-  left: 0px;
-  opacity: 0;
-  position: absolute;
-  top: 0px;
-  width: 100%;
-  z-index: 0; }
-
-.hero .slideshow-item:nth-child(1) {
-  background-image: url("/images/landing-hero01.jpg"); }
-
-.hero .slideshow-item:nth-child(2) {
-  animation-delay: 6s;
-  background-image: url("/images/landing-hero02.jpg"); }
-
-.hero .slideshow-item:nth-child(3) {
-  animation-delay: 12s;
-  background-image: url("/images/landing-hero03.jpg"); }
-
-.hero .slideshow-item:nth-child(4) {
-  animation-delay: 18s;
-  background-image: url("/images/landing-hero04.jpg"); }
-
-.hero .slideshow-item:nth-child(5) {
-  animation-delay: 24s;
-  background-image: url("/images/landing-hero05.jpg"); }
-
-@keyframes imageAnimation {
-  0% {
-    animation-timing-function: ease-in;
-    opacity: 0; }
-  8% {
-    animation-timing-function: ease-out;
-    opacity: 1; }
-  17% {
-    opacity: 1; }
-  25% {
-    opacity: 0; }
-  100% {
-    opacity: 0; } }
-
 .m-none {
   margin: 0; }
 
@@ -6872,24 +6824,42 @@ label.panel-block {
 .p-l-xxl {
   padding-left: 8rem; }
 
-.app .columns {
-  margin-bottom: 0px !important;
-  max-height: calc(100vh - 12.25rem);
-  height: calc(100vh - 12.25rem); }
-
 .sidebar {
-  flex-direction: column; }
+  flex-direction: column;
-
-.is-sidebar {
-  border-right: thin #ccc solid;
   max-width: 5em;
   width: 5em;
-  transform: translate(15%, 0); }
+  height: 100%;
+  border-right: thin #ccc solid; }
+
+.menu-titles {
+  margin-top: -2em; }
 
 .sidebar-menu {
   position: absolute;
-  bottom: 0px; }
+  bottom: 25px;
+  left: 1em; }
 
 .sideway-letter {
   transform: rotate(-90deg);
   margin: -.8em auto; }
+
+.columns.is-fullheight {
+  min-height: calc(100vh - ( 3.25rem - .75rem ));
+  max-height: calc(100vh - ( 3.25rem - .75rem ));
+  height: calc(100vh - ( 3.25rem - .75rem ));
+  display: flex;
+  flex-direction: row;
+  justify-content: stretch; }
+  .columns.is-fullheight .column {
+    overflow-y: auto; }
+
+.child-avatar-image {
+  display: table;
+  margin: auto; }
+
+.is-avatar {
+  padding: 2px;
+  border: thin solid #ccc; }
+
+.m-auto {
+  margin: auto; }

resources/sass/main.scss

@@ -41,93 +41,6 @@
     }
 }
 
-// SlideShow
-.slideshow {
-    // max-width: 100%;
-    // max-height: 100%;
-    // overflow: hidden;
-    // position: inherit;
-}
-
-.hero {
-    .slideshow-item {
-        animation: imageAnimation 30s linear infinite 0s;
-        backface-visibility: hidden;
-        background-size: cover;
-        background-position: center center;
-        background-repeat: no-repeat;
-        color: transparent;
-        height: 77.5vh;
-        left: 0px;
-        opacity: 0;
-        position: absolute;
-        top: 0px;
-        width: 100%;
-        z-index: 0;
-    }
-}
-
-.hero {
-    .slideshow-item:nth-child(1) {
-        background-image: url('/images/landing-hero01.jpg');
-    }
-}
-
-.hero {
-    .slideshow-item:nth-child(2) {
-        animation-delay: 6s;
-        background-image: url('/images/landing-hero02.jpg');
-    }
-
-}
-
-.hero {
-    .slideshow-item:nth-child(3) {
-        animation-delay: 12s;
-        background-image: url('/images/landing-hero03.jpg');
-    }
-}
-
-
-.hero {
-    .slideshow-item:nth-child(4) {
-        animation-delay: 18s;
-        background-image: url('/images/landing-hero04.jpg');
-    }
-}
-
-
-.hero {
-    .slideshow-item:nth-child(5) {
-        animation-delay: 24s;
-        background-image: url('/images/landing-hero05.jpg');
-    }
-}
-
-@keyframes imageAnimation {
-    0% {
-        animation-timing-function: ease-in;
-        opacity: 0;
-    }
-
-    8% {
-        animation-timing-function: ease-out;
-        opacity: 1;
-    }
-
-    17% {
-        opacity: 1
-    }
-
-    25% {
-        opacity: 0
-    }
-
-    100% {
-        opacity: 0
-    }
-}
-
 $sizeUnit: rem;
 $marginKey: 'm';
 $paddingKey: 'p';
@@ -173,32 +86,39 @@ $positions: (
         }
     }
 }
-.app {
+// .app {
-  .columns{
+//   .columns{
-    margin-bottom: 0px !important;
+//     margin-bottom: 0px !important;
-    max-height: calc(100vh - 12.25rem);
+//     max-height: calc(100vh - 12.25rem);
-    height: calc(100vh - 12.25rem);
+//     height: calc(100vh - 12.25rem);
-  }
+//   }
-}
+// }
 .app-content{
   // height: 100vh;
 }
 .sidebar{
   // margin: auto;
   flex-direction: column;
-  // color: $beige-lighter;
-}
-.is-sidebar {
-  border-right: thin #ccc solid;
   max-width: 5em;
   width: 5em;
-  transform: translate(15%, 0);
+  height: 100%;
-  // background-color: rgba(0, 0, 0, .3);
   // background-color:rgba(127, 88, 145, 0.7);
+  // color: $beige-lighter;
+  border-right: thin #ccc solid;
+
+}
+.menu-titles{
+  margin-top: -2em;
+}
+.is-sidebar {
+
+  // transform: translate(15%, 0);
+  // background-color: rgba(0, 0, 0, .3);
 }
 .sidebar-menu{
   position: absolute;
-  bottom: 0px;
+  bottom: 25px;
+  left: 1em;
 }
 .sideway-text{
   // transform: translate(0, -50%);
@@ -211,3 +131,30 @@ $positions: (
   transform: rotate(-90deg);
   margin: -.8em auto;
 }
+
+.columns{
+  &.is-fullheight{
+    min-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
+    max-height: calc(100vh - ( #{$navbar-height} - .75rem ) );
+    height: calc(100vh - ( #{$navbar-height} - .75rem ) );
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    .column{
+      overflow-y: auto;
+    }
+  }
+}
+
+.child-avatar-image{
+  display: table;
+  margin: auto;
+}
+
+.is-avatar{
+  padding:2px;
+  border: thin solid #ccc;
+}
+.m-auto{
+  margin: auto;
+}

resources/scripts/applications/home/app.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="app">
     <Header :appName="appName" />
-    <div class="columns m-t-xs">
+    <div class="columns m-t-xs is-fullheight">
-      <div class="column is-sidebar">
+      <div class="column sidebar">
         <SideBar :title="appName" :menu="menu" :appName="appName" />
       </div>
       <section class="section column app-content">

resources/scripts/applications/home/components/child_avatar.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="chiled-avatar has-text-centered">
+    <div class="child-avatar-image">
+      <figure class="image is-96x96">
+        <img :src="child.avatarUrl" alt="Placeholder image" class="is-rounded is-avatar" />
+      </figure>
+    </div>
+    <div class="chiled-avatar-name">{{child.name}}</div>
+  </div>
+</template>
+
+<script lang="ts">
+export interface IChildAvatar {
+  avatarUrl: string;
+  name: string;
+}
+
+export default {
+  name: "ChildAvatar",
+  props: ["child"],
+  created() {}
+};
+</script>

resources/scripts/applications/home/views/home.vue

@@ -1,14 +1,92 @@
 <template>
   <div class="wrapper">
-    <h1 class="is-1">HOME!!!</h1>
+    <nav class="level">
+      <div class="level-left">
+        <div class="level-item">
+          <p class="subtitle">
+            <i class="fa fa-users"></i>&nbsp;My Connections
+          </p>
+        </div>
+      </div>
+      <div class="level-right">
+        <!-- <div class="level-item">
+          <a href="#" class="button is-success">
+            <i class="fa fa-plus"></i>&nbsp;Add a new Child
+          </a>
+        </div>-->
+        <div class="level-item">
+          <a href="#" class="button is-primary">
+            <i class="fa fa-plug"></i>&nbsp;Connect to a child
+          </a>
+        </div>
+      </div>
+    </nav>
+    <div class="card">
+      <div class="card-content">
+        <div class="columns">
+          <div class="column" v-for="connection in connections">
+            <ChildAvatar :child="connection" />
+          </div>
+          <!-- <div class="column">
+            <ChildAvatar />
+          </div>
+          <div class="column">
+            <ChildAvatar />
+          </div>
+          <div class="column">
+            <ChildAvatar />
+          </div>
+          <div class="column">
+            <ChildAvatar />
+          </div>-->
+        </div>
+      </div>
+      <!-- <footer class="card-footer">
+        <p class="card-footer-item">
+
+        </p>
+        <p class="card-footer-item">
+          <span>
+            Connect to a chiled
+            <a href="#">Facebook</a>
+          </span>
+        </p>
+      </footer>-->
+    </div>
   </div>
 </template>
 
 <script lang="ts">
+import ChildAvatar, { IChildAvatar } from "../components/child_avatar.vue";
+const connections: IChildAvatar[] = [
+  {
+    avatarUrl:
+      "http://icons.iconarchive.com/icons/google/noto-emoji-people-face/1024/10122-baby-icon.png",
+    name: "Ayala Dayan"
+  },
+  {
+    avatarUrl:
+      "http://icons.iconarchive.com/icons/google/noto-emoji-people-face/1024/10125-baby-medium-skin-tone-icon.png",
+    name: "Sagi Dayan"
+  },
+  {
+    avatarUrl:
+      "http://icons.iconarchive.com/icons/google/noto-emoji-people-face/1024/10142-girl-medium-light-skin-tone-icon.png",
+    name: "Tamar Choen"
+  }
+];
+
 export default {
   name: "Home",
-  beforeCreate: () => {
+  components: {
-    console.log("before create home vue");
+    ChildAvatar
+  },
+  beforeCreate() {},
+  created() {},
+  data() {
+    return {
+      connections
+    };
   }
 };
 </script>

resources/scripts/applications/home/views/settings.vue

@@ -1,6 +1,44 @@
 <template>
   <div class="wrapper">
-    <h1 class="is-1">Settings {{ user.name }}!!!</h1>
+    <div class="has-text-centered">
+      <h3 class="title">Settings</h3>
+      <h4 class="subtitle">UserName</h4>
+    </div>
+    <div class="columns">
+      <div class="column is-one-quarter">
+        <figure class="image is-128x128 m-auto">
+          <img
+            class="is-rounded is-avatar"
+            src="//external-content.duckduckgo.com/iu/?u=http%3A%2F%2F0.gravatar.com%2Favatar%2F3e9dc6179a412b170e6a8d779a84c341.png&f=1"
+          />
+        </figure>
+        <div class="card m-t-lg">
+          <header class="card-header">
+            <p class="card-header-title">My Children</p>
+          </header>
+          <div class="card-content">bla bla bla</div>
+          <footer class="card-footer">
+            <a href="#" class="card-footer-item">Add a New Child</a>
+          </footer>
+        </div>
+      </div>
+      <div class="column">
+        <form class="form">
+          <div class="field">
+            <label class="label">Name</label>
+            <div class="control">
+              <input class="input" type="text" placeholder="Text input" />
+            </div>
+          </div>
+          <div class="field">
+            <label class="label">Email</label>
+            <div class="control">
+              <input class="input" type="text" placeholder="Text input" />
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 

resources/scripts/applications/shared/components/SideBar/SideBar.vue

@@ -1,36 +1,39 @@
 <template>
-  <div class="sidebar has-text-centered">
+  <div>
-    <div class="has-text-centered">
+    <div class="section">
-      <router-link to="/" class>
+      <div class="menu-titles">
-        <SidewayText textSize="is-size-6" :text="appName" :bold="true" />
+        <router-link to="/" class>
-      </router-link>
+          <SidewayText textSize="is-size-6" :text="appName" :bold="true" />
-      <SidewayText class="is-size-6" :text="selectedItem" />
+        </router-link>
-      <!-- <div class="is-size-6 has-text-weight-bold m-l-lg m-r-md">{{appName}}</div> -->
+        <SidewayText class="is-size-6" :text="selectedItem" />
+        <!-- <div class="is-size-6 has-text-weight-bold m-l-lg m-r-md">{{appName}}</div> -->
+      </div>
+      <aside class="menu is-primary sidebar-menu">
+        <ul class="menu-list">
+          <li v-for="item in menu" class="m-t-md m-b-md" @click="onItemClicked(item)">
+            <router-link
+              active-class="is-active"
+              v-if="item.isRouterLink"
+              :to="item.href"
+              class="button"
+              exact
+              :title="item.text"
+            >
+              <i :class="['icon', item.icon]"></i>
+            </router-link>
+            <a
+              v-else
+              :href="item.href"
+              :title="item.text"
+              :class="['button',{ 'is-active': !!item.isActive }]"
+            >
+              <i :class="['icon', item.icon]"></i>
+            </a>
+          </li>
+        </ul>
+      </aside>
     </div>
-    <aside class="menu is-primary p-xxs sidebar-menu">
+    <!-- <div class="is-hidden-desktop">texts</div> -->
-      <ul class="menu-list">
-        <li v-for="item in menu" class="m-t-md m-b-md" @click="onItemClicked(item)">
-          <router-link
-            active-class="is-active"
-            v-if="item.isRouterLink"
-            :to="item.href"
-            class="button"
-            exact
-            :title="item.text"
-          >
-            <i :class="['icon', item.icon]"></i>
-          </router-link>
-          <a
-            v-else
-            :href="item.href"
-            :title="item.text"
-            :class="['button',{ 'is-active': !!item.isActive }]"
-          >
-            <i :class="['icon', item.icon]"></i>
-          </a>
-        </li>
-      </ul>
-    </aside>
   </div>
 </template>
 <script lang="ts" >

resources/scripts/applications/shared/components/SidewayText/SidewayText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sideway-text m-b-lg m-t-lg">
+  <div class="sideway-text m-b-lg">
     <div
       v-for="letter in text.split('').slice().reverse()"
       :class="[{'has-text-weight-bold':bold}, textSize, 'sideway-letter', 'has-text-centered']"

resources/views/layouts/application.edge

@@ -20,6 +20,9 @@
     <div class="">
         @!section('content')
     </div>
-    @include('partials.footer')
+    <div class="m-t-lg">
+      @include('partials.footer')
+
+    </div>
 </body>
 </html>