sagi/seepur
sagi/seepur
Archived
1
0
Fork 1
Code Issues 1 Pull requests Releases Wiki Activity

wip

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1449
public/scripts/applications/home/app.bundle.js
View file

File diff suppressed because one or more lines are too long

811
public/scripts/components/app.bundle.js
View file

File diff suppressed because one or more lines are too long

88
public/style.css
View file

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

149
resources/sass/main.scss
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; $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;
}

4
resources/scripts/applications/home/app.vue
View file

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

23
resources/scripts/applications/home/components/child_avatar.vue Normal file
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>

84
resources/scripts/applications/home/views/home.vue
View file

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

40
resources/scripts/applications/home/views/settings.vue
View file

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

9
resources/scripts/applications/shared/components/SideBar/SideBar.vue
View file

@ -1,13 +1,14 @@
<template> <template>
<div class="sidebar has-text-centered"> <div>
<div class="has-text-centered"> <div class="section">
<div class="menu-titles">
<router-link to="/" class> <router-link to="/" class>
<SidewayText textSize="is-size-6" :text="appName" :bold="true" /> <SidewayText textSize="is-size-6" :text="appName" :bold="true" />
</router-link> </router-link>
<SidewayText class="is-size-6" :text="selectedItem" /> <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 class="is-size-6 has-text-weight-bold m-l-lg m-r-md">{{appName}}</div> -->
</div> </div>
<aside class="menu is-primary p-xxs sidebar-menu"> <aside class="menu is-primary sidebar-menu">
<ul class="menu-list"> <ul class="menu-list">
<li v-for="item in menu" class="m-t-md m-b-md" @click="onItemClicked(item)"> <li v-for="item in menu" class="m-t-md m-b-md" @click="onItemClicked(item)">
<router-link <router-link
@ -32,6 +33,8 @@
</ul> </ul>
</aside> </aside>
</div> </div>
<!-- <div class="is-hidden-desktop">texts</div> -->
</div>
</template> </template>
<script lang="ts" > <script lang="ts" >
import SidewayText from "../SidewayText/SidewayText.vue"; import SidewayText from "../SidewayText/SidewayText.vue";

2
resources/scripts/applications/shared/components/SidewayText/SidewayText.vue
View file

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

3
resources/views/layouts/application.edge
View file

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