wip
This commit is contained in:
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
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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> 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> Add a new Child
|
||||
</a>
|
||||
</div>-->
|
||||
<div class="level-item">
|
||||
<a href="#" class="button is-primary">
|
||||
<i class="fa fa-plug"></i> 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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']"
|
||||
|
|
|
|||
|
|
@ -20,6 +20,9 @@
|
|||
<div class="">
|
||||
@!section('content')
|
||||
</div>
|
||||
<div class="m-t-lg">
|
||||
@include('partials.footer')
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Reference in a new issue