This commit is contained in:
Sagi Dayan 2020-02-09 10:17:11 -05:00
parent ca3976dea9
commit 96cf47c419
11 changed files with 2513 additions and 207 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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; }
.is-sidebar {
border-right: thin #ccc solid;
flex-direction: column;
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; }

View file

@ -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 {
.columns{
margin-bottom: 0px !important;
max-height: calc(100vh - 12.25rem);
height: calc(100vh - 12.25rem);
}
}
// .app {
// .columns{
// margin-bottom: 0px !important;
// max-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);
// background-color: rgba(0, 0, 0, .3);
height: 100%;
// 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;
}

View file

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

View file

@ -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>

View file

@ -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: () => {
console.log("before create home vue");
components: {
ChildAvatar
},
beforeCreate() {},
created() {},
data() {
return {
connections
};
}
};
</script>

View file

@ -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>

View file

@ -1,13 +1,14 @@
<template>
<div class="sidebar has-text-centered">
<div class="has-text-centered">
<div>
<div class="section">
<div class="menu-titles">
<router-link to="/" class>
<SidewayText textSize="is-size-6" :text="appName" :bold="true" />
</router-link>
<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 p-xxs sidebar-menu">
<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
@ -32,6 +33,8 @@
</ul>
</aside>
</div>
<!-- <div class="is-hidden-desktop">texts</div> -->
</div>
</template>
<script lang="ts" >
import SidewayText from "../SidewayText/SidewayText.vue";

View file

@ -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']"

View file

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