forked from sagi/seepur
wip
This commit is contained in:
parent
ca3976dea9
commit
96cf47c419
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,36 +1,39 @@
|
|||
<template>
|
||||
<div class="sidebar has-text-centered">
|
||||
<div class="has-text-centered">
|
||||
<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>
|
||||
<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 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">
|
||||
<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 class="is-hidden-desktop">texts</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" >
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
@include('partials.footer')
|
||||
<div class="m-t-lg">
|
||||
@include('partials.footer')
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue