kurbezz/gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

LeftSideBar

Browse Source
This commit is contained in:
kurbezz
2020-09-01 12:55:00 +03:00
parent 2357418ee9
commit 0ef02edde9
28 changed files with 644 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
package-lock.json generated
View File

@@ -2471,6 +2471,37 @@
"integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==", "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==",
"dev": true "dev": true
}, },
"axios": {
"version": "0.19.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.19.2.tgz",
"integrity": "sha512-fjgm5MvRHLhx+osE2xoekY70AhARk3a6hkN+3Io1jc00jtquGvxYlKlsFUhmUET0V5te6CcZI7lcv2Ym61mjHA==",
"requires": {
"follow-redirects": "1.5.10"
},
"dependencies": {
"debug": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
"integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
"requires": {
"ms": "2.0.0"
}
},
"follow-redirects": {
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz",
"integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==",
"requires": {
"debug": "=3.1.0"
}
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
}
}
},
"babel-code-frame": { "babel-code-frame": {
"version": "6.26.0", "version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz", "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -6795,6 +6826,20 @@
"js-tokens": "^3.0.0 || ^4.0.0" "js-tokens": "^3.0.0 || ^4.0.0"
} }
}, },
"lottie-vuejs": {
"version": "0.3.7",
"resolved": "https://registry.npmjs.org/lottie-vuejs/-/lottie-vuejs-0.3.7.tgz",
"integrity": "sha512-bvFJu+nF7dbG3iqvotRLlKsiEv+12SzyERd1fqbMkMRodZ+9pesX982HQDwuARXMwGdcb5Xq6VD4GqUouyTq/g==",
"requires": {
"axios": "^0.19.0",
"lottie-web": "^5.1.9"
}
},
"lottie-web": {
"version": "5.7.3",
"resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.7.3.tgz",
"integrity": "sha512-ftN4AdiNmtoVpCfN1doiUIUbhOrDSMikH1Yl64/xO5lzQ31AO0+G82bqrCNHIW5Ec2zE/g7y4iz7zBR1YJwDaA=="
},
"lower-case": { "lower-case": {
"version": "1.1.4", "version": "1.1.4",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",

1
package.json
View File

@@ -8,6 +8,7 @@
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"lottie-vuejs": "^0.3.7",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-class-component": "^7.2.3", "vue-class-component": "^7.2.3",
"vue-property-decorator": "^8.4.2", "vue-property-decorator": "^8.4.2",

1
public/animations/menu-close.json Normal file
View File

File diff suppressed because one or more lines are too long

1
public/animations/menu-close2.json Normal file
View File

File diff suppressed because one or more lines are too long

9
public/index.html
View File

@@ -3,8 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
@@ -12,6 +14,11 @@
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

BIN
public/pictures/albums/test/p (1).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
public/pictures/albums/test/p (2).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
public/pictures/albums/test/p (3).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 564 KiB

BIN
public/pictures/albums/test/p (4).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
public/pictures/albums/test/p (5).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
public/pictures/albums/test/p (6).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

BIN
public/pictures/albums/test2/p (1).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
public/pictures/albums/test2/p (2).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
public/pictures/albums/test2/p (3).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
public/pictures/albums/test2/p (4).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
public/pictures/albums/test2/p (5).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 864 KiB

BIN
public/pictures/albums/test3/p (1).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
public/pictures/albums/test3/p (2).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 MiB

BIN
public/pictures/albums/test3/p (3).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
public/pictures/albums/test3/p (4).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 MiB

BIN
public/pictures/albums/test3/p (5).jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
public/pictures/home.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 488 KiB

229
src/App.vue
View File

@@ -1,32 +1,227 @@
<template> <template>
<div id="app"> <div id="app">
<div id="nav"> <div class="left-panel"
<router-link to="/">Home</router-link> | :class="{'left-panel-closed': leftPanelClosed}">
<router-link to="/about">About</router-link> <LeftPanel></LeftPanel>
</div>
<div class="content w-100"
:class="{'content-when-left-panel-open': !leftPanelClosed}">
<div class="vertical-panel"
:class="{'vertical-panel-when-left-panel-open': !leftPanelClosed}"></div>
<div class="close-btn"
:class="{'close-btn-when-left-panel-open': !leftPanelClosed,
'close-btn-hover': leftPanelClosed}"
@click="switchLeftPanel()">
<LottieAnimation
class="close-btn-icon"
path="./animations/menu-close2.json"
:width="30"
:autoPlay="false"
:loop="false"
@AnimControl="setAnimController"
ref="close-icon"></LottieAnimation>
<span class="close-btn-label"
:class="{'close-btn-label-when-left-panel-open': !leftPanelClosed}">MENU</span>
</div>
<router-view class="w-100 content-body"
:class="{'content-body-when-left-panel-open': !leftPanelClosed}"
style="min-height: 100vh"
:leftPanelClosed="leftPanelClosed"/>
</div> </div>
<router-view/>
</div> </div>
</template> </template>
<script lang="ts">
import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
import LeftPanel from '@/components/LeftPanel.vue'
import LottieAnimation from "lottie-vuejs/src/LottieAnimation.vue";
interface AnimData {
direction: number;
currentTime: number;
totalTime: number;
}
interface IAnimController {
addEventListener(event: string, foo: (data: any) => void): void;
play(): void;
pause(): void;
setSpeed(speed: number): void;
setDirection(direction: 1 | -1): void;
}
interface ILottieAnimation {
anim: IAnimController;
}
@Component({
components: {
LeftPanel,
LottieAnimation
},
})
export default class App extends Vue {
public leftPanelClosed: boolean = true;
@Ref('close-icon') public readonly closeIcon!: ILottieAnimation;
setAnimController(controller: IAnimController) {
controller.addEventListener("enterFrame", this.onEnterFrame)
}
onEnterFrame(data: AnimData) {
if (data.direction === 1 && data.currentTime >= data.totalTime / 2)
this.closeIcon.anim.pause();
}
switchLeftPanel() {
this.closeIcon.anim.setSpeed(1.2);
if (this.leftPanelClosed) {
this.closeIcon.anim.setDirection(1);
this.closeIcon.anim.play();
} else {
this.closeIcon.anim.setDirection(-1);
this.closeIcon.anim.play();
}
this.leftPanelClosed = !this.leftPanelClosed;
}
}
</script>
<style> <style>
#app { @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Open+Sans&display=swap');
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; body, #app {
-moz-osx-font-smoothing: grayscale; min-height: 100vh;
text-align: center; overflow-x: hidden;
color: #2c3e50; font-family: 'Lato', sans-serif;
letter-spacing: 1px;
font-weight: 700;
background-color: black;
} }
#nav { .close-btn-hover:hover {
padding: 30px; background-color: white!important;
} }
#nav a { .vertical-panel {
font-weight: bold; position: absolute;
color: #2c3e50; height: 0px;
width: 0px;
} }
#nav a.router-link-exact-active { .content-body {
color: #42b983; transition: background-color linear .3s;
}
.content-body-when-left-panel-open {
transition: margin-left linear .3s;
margin-left: 58px;
opacity: 0.5;
}
@media (max-width: 961px) {
.close-btn {
position: absolute;
width: 100%;
height: 50px;
outline: none!important;
background-color: black!important;
transition: background-color linear .3s;
opacity: 1!important;
}
.close-btn-when-left-panel-open {
background-color: black!important;
transition: background-color linear .3s;
}
.close-btn-icon {
position: absolute;
left: 14px;
z-index: 2;
}
.close-btn-label {
position: absolute;
font-size: 13px;
font-weight: 400;
color: white;
top: 14px;
left: 60px;
}
.vertical-panel-when-left-panel-open {
position: absolute;
width: 58px;
height: 100%;
background: white!important;
z-index: 1;
}
.close-btn-label-when-left-panel-open {
color: black;
}
.content-when-left-panel-open {
margin-left: 192px;
}
}
@media (min-width: 960px) {
.close-btn {
position: absolute;
width: 58px;
height: 100%;
outline: none!important;
background-color: rgba(0, 0, 0, 0.7)!important;
transition: background-color linear .3s;
opacity: 1!important;
}
.close-btn-when-left-panel-open {
background-color: white!important;
transition: background-color linear .3s;
}
.close-btn-icon {
position: absolute;
left: 14px;
}
.close-btn-label {
position: absolute;
font-size: 12px;
font-weight: 300;
color: white;
top: calc(49% + 20px);
left: 10px;
}
.content-when-left-panel-open {
margin-left: 192px;
}
}
.left-panel {
position: absolute;
width: 192px;
background-color: white;
transition: margin-left linear .3s;
}
.left-panel-closed {
margin-left: -192px;
}
.content {
transition: margin-left linear .3s;
min-height: 100vh;
} }
</style> </style>

78
src/components/Album.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<div ref="element" class="album"
:style="{'background-image': backgroundStyle,
'min-height': height}">
{{ data.name }}
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref } from 'vue-property-decorator';
export interface IAlbum {
name: string;
description: string;
protected: boolean;
folderName: string;
files: string[];
}
@Component
export default class Album extends Vue {
@Prop({required: true}) public readonly data!: IAlbum;
@Ref('element') public readonly element!: HTMLElement;
public height: string = '10px';
get backgroundStyle() {
return `url('pictures/albums/${this.data.folderName}/${this.data.files[1]}')`;
}
updateHeight(): void {
if (this.element === undefined)
return;
console.log("update");
this.height = `${this.element.clientWidth}px`;
}
created() {
window.addEventListener("resize", this.updateHeight);
}
destroyed() {
window.removeEventListener("resize", this.updateHeight);
}
mounted() {
this.updateHeight();
}
}
</script>
<style scoped>
.album {
background-size: cover;
}
@media (max-width: 461px) {
.album {
flex: 1 100%;
}
}
@media (min-width: 460px) and (max-width: 1401px) {
.album {
flex: 1 50%;
}
}
@media (min-width: 1400px) and (max-width: 1801px) {
.album {
flex: 1 33%;
}
}
</style>

93
src/components/LeftBlock.vue Normal file
View File

@@ -0,0 +1,93 @@
<template>
<div class="left-block text-center"
:style="{'background-image': backgroundStyle}">
<div class="text-block background"
:class="{'background-when-left-panel-opened': !leftPanelClosed}">
<p class="title">{{ title }}</p>
<p class="description">{{ description }}</p>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class LeftBlock extends Vue {
@Prop({required: true}) public readonly title!: string;
@Prop({required: true}) public readonly description!: string;
@Prop({required: true}) public readonly picture!: string;
@Prop({required: true}) public readonly leftPanelClosed!: boolean;
get backgroundStyle(): string {
return `url('${this.picture}')`
}
}
</script>
<style scoped>
.left-block {
display: inline-block;
}
.background {
background-color: rgba(0, 0, 0, 0.5);
transition: background-color linear .3s;
}
.background-when-left-panel-opened {
background-color: rgba(0, 0, 0, 1);
transition: background-color linear .3s;
}
@media (max-width: 961px) {
.left-block {
background-position: center center;
background-size: cover;
width: 100%;
height: 300px;
}
.text-block {
padding-top: 130px;
}
.background {
width: 100%;
height: 300px;
}
}
@media (min-width: 960px) {
.left-block {
background-size: cover;
min-height: 100vh;
width: 405px;
}
.text-block {
padding-top: 43vh;
padding-left: 45px;
}
.background {
height: 100vh;
}
}
.title {
font-size: 32px;
color: white;
font-family: 'Open Sans', sans-serif;
}
.description {
font-size: 20px;
color: white;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
</style>

122
src/components/LeftPanel.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<div>
<div class="left-panel-background">
</div>
<div class="main-column links text-center">
<div class="link-wrapper">
<router-link class="link"
:class="{'active-link': isActiveLink('Home')}"
:to="{'name': 'Home'}">HOME</router-link>
</div>
<div class="link-wrapper">
<router-link class="link"
:class="{'active-link': isActiveLink('About Me')}"
:to="{'name': 'About Me'}">ABOUT ME</router-link>
</div>
</div>
<div class="main-column socials text-center">
<div class="row no-gutters">
<div class="col-12">
<div class="social">
<i class="fa fa-twitter"></i>
</div>
<div class="social">
<i class="fa fa-facebook"></i>
</div>
<div class="social">
<i class="fa fa-flickr"></i>
</div>
<div class="social">
<i class="fa fa-instagram"></i>
</div>
</div>
</div>
</div>
<div class="main-column copyright text-center">
<span>© Kreorg</span>
</div>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class LeftPanel extends Vue {
public closed: boolean = true;
isActiveLink(name: string): boolean {
return this.$route.name === name;
}
}
</script>
<style scoped>
.left-panel-background {
background-color: white;
height: 100vh;
}
.main-column {
width: 142px;
position: absolute;
left: 58px;
}
.no-gutters {
padding: 0;
}
.links {
top: 45vh;
}
.socials {
top: 63vh
}
.social {
display: inline-block;
width: 25px;
height: 25px;
padding: 1px 1px;
border-radius: 100%;
font-size: 15px;
text-align: center;
margin-right: 3px;
margin-left: 3px;
color: white;
background-color: black;
}
.copyright {
position: absolute;
top: 93vh;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
letter-spacing: 0px;
}
.link {
font-size: 14px;
color: #999999;
text-decoration: none;
}
.link:hover {
color: black;
}
.active-link {
font-weight: 900;
color: black;
}
.link-wrapper {
padding-top: 8px;
padding-bottom: 8px;
}
</style>

11
src/router/index.ts
View File

@@ -1,6 +1,8 @@
import Vue from 'vue' import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router' import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
Vue.use(VueRouter) Vue.use(VueRouter)
@@ -12,11 +14,8 @@ Vue.use(VueRouter)
}, },
{ {
path: '/about', path: '/about',
name: 'About', name: 'About Me',
// route level code-splitting component: About
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
} }
] ]

86
src/views/Home.vue
View File

@@ -1,18 +1,88 @@
<template> <template>
<div class="home"> <div>
<img alt="Vue logo" src="../assets/logo.png"> <LeftBlock title="HOME" description="kreorg photos" picture="/pictures/home.jpg" :leftPanelClosed="leftPanelClosed"></LeftBlock>
<HelloWorld msg="Welcome to Your Vue.js App"/> <div class="albums-wrapper">
<div class="albums">
<Album v-for="album in albums" :key="album.folderName" :data="album"></Album>
</div>
</div>
</div> </div>
</template> </template>
<script> <script lang="ts">
// @ is an alias to /src import { Component, Prop, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'
export default { import LeftBlock from '@/components/LeftBlock.vue';
import Album, { IAlbum } from '@/components/Album.vue';
@Component({
name: 'Home', name: 'Home',
components: { components: {
HelloWorld LeftBlock,
Album,
} }
})
export default class Home extends Vue {
@Prop({required: true}) public readonly leftPanelClosed!: boolean;
public albums: IAlbum[] = [
{
name: 'Test',
description: 'Test description',
protected: false,
folderName: 'test',
files: [
'p (1).jpg',
'p (2).jpg',
'p (3).jpg',
'p (4).jpg',
'p (5).jpg',
'p (6).jpg',
]
},
{
name: 'Test 2',
description: 'Test 2 description',
protected: false,
folderName: 'test2',
files: [
'p (1).jpg',
'p (2).jpg',
'p (3).jpg',
'p (4).jpg',
'p (5).jpg',
]
},
{
name: 'Test 3',
description: 'Test 3 description',
protected: false,
folderName: 'test3',
files: [
'p (1).jpg',
'p (2).jpg',
'p (3).jpg',
'p (4).jpg',
'p (5).jpg',
]
}
];
} }
</script> </script>
<style scoped>
.albums-wrapper {
display: inline-block;
width: calc(100vw - 425px);
vertical-align: top;
}
.albums {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
</style>