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 );
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000',GradientType=0 );
|
||||||
/* IE6-9 */ }
|
/* 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 {
|
.m-none {
|
||||||
margin: 0; }
|
margin: 0; }
|
||||||
|
|
||||||
|
@ -6872,24 +6824,42 @@ label.panel-block {
|
||||||
.p-l-xxl {
|
.p-l-xxl {
|
||||||
padding-left: 8rem; }
|
padding-left: 8rem; }
|
||||||
|
|
||||||
.app .columns {
|
|
||||||
margin-bottom: 0px !important;
|
|
||||||
max-height: calc(100vh - 12.25rem);
|
|
||||||
height: calc(100vh - 12.25rem); }
|
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
flex-direction: column; }
|
flex-direction: column;
|
||||||
|
|
||||||
.is-sidebar {
|
|
||||||
border-right: thin #ccc solid;
|
|
||||||
max-width: 5em;
|
max-width: 5em;
|
||||||
width: 5em;
|
width: 5em;
|
||||||
transform: translate(15%, 0); }
|
height: 100%;
|
||||||
|
border-right: thin #ccc solid; }
|
||||||
|
|
||||||
|
.menu-titles {
|
||||||
|
margin-top: -2em; }
|
||||||
|
|
||||||
.sidebar-menu {
|
.sidebar-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px; }
|
bottom: 25px;
|
||||||
|
left: 1em; }
|
||||||
|
|
||||||
.sideway-letter {
|
.sideway-letter {
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
margin: -.8em auto; }
|
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;
|
$sizeUnit: rem;
|
||||||
$marginKey: 'm';
|
$marginKey: 'm';
|
||||||
$paddingKey: 'p';
|
$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{
|
.app-content{
|
||||||
// height: 100vh;
|
// height: 100vh;
|
||||||
}
|
}
|
||||||
.sidebar{
|
.sidebar{
|
||||||
// margin: auto;
|
// margin: auto;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// color: $beige-lighter;
|
|
||||||
}
|
|
||||||
.is-sidebar {
|
|
||||||
border-right: thin #ccc solid;
|
|
||||||
max-width: 5em;
|
max-width: 5em;
|
||||||
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);
|
// 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{
|
.sidebar-menu{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
bottom: 25px;
|
||||||
|
left: 1em;
|
||||||
}
|
}
|
||||||
.sideway-text{
|
.sideway-text{
|
||||||
// transform: translate(0, -50%);
|
// transform: translate(0, -50%);
|
||||||
|
@ -211,3 +131,30 @@ $positions: (
|
||||||
transform: rotate(-90deg);
|
transform: rotate(-90deg);
|
||||||
margin: -.8em auto;
|
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>
|
<template>
|
||||||
<div class="app">
|
<div class="app">
|
||||||
<Header :appName="appName" />
|
<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" />
|
<SideBar :title="appName" :menu="menu" :appName="appName" />
|
||||||
</div>
|
</div>
|
||||||
<section class="section column app-content">
|
<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>
|
<template>
|
||||||
<div class="wrapper">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<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 {
|
export default {
|
||||||
name: "Home",
|
name: "Home",
|
||||||
beforeCreate: () => {
|
components: {
|
||||||
console.log("before create home vue");
|
ChildAvatar
|
||||||
|
},
|
||||||
|
beforeCreate() {},
|
||||||
|
created() {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
connections
|
||||||
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -1,6 +1,44 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="wrapper">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -1,36 +1,39 @@
|
||||||
<template>
|
<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>
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" >
|
<script lang="ts" >
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="sideway-text m-b-lg m-t-lg">
|
<div class="sideway-text m-b-lg">
|
||||||
<div
|
<div
|
||||||
v-for="letter in text.split('').slice().reverse()"
|
v-for="letter in text.split('').slice().reverse()"
|
||||||
:class="[{'has-text-weight-bold':bold}, textSize, 'sideway-letter', 'has-text-centered']"
|
:class="[{'has-text-weight-bold':bold}, textSize, 'sideway-letter', 'has-text-centered']"
|
||||||
|
|
|
@ -20,6 +20,9 @@
|
||||||
<div class="">
|
<div class="">
|
||||||
@!section('content')
|
@!section('content')
|
||||||
</div>
|
</div>
|
||||||
@include('partials.footer')
|
<div class="m-t-lg">
|
||||||
|
@include('partials.footer')
|
||||||
|
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in a new issue