s153131/PracowniaProgramowania
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[front] transition nieskonczona

Browse Source
This commit is contained in:
monastyr 2018-11-08 01:37:21 +01:00
parent eda56a43ec
commit 91ae736470
11 changed files with 182 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/app/src/App.vue
View File

@ -1,7 +1,5 @@
<template>
<div id="app">
<sidenav-menu></sidenav-menu>
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
@ -14,12 +12,5 @@ export default {
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

103
frontend/app/src/components/HelloWorld.vue
View File

@ -1,113 +1,16 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
<div class="hello2">
<sidenav-menu></sidenav-menu>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

192
frontend/app/src/components/SidenavMenu.vue
View File

@ -1,30 +1,155 @@
<template>
<div id="sidenav-menu" >
<div id="burger-icon" v-on:click="isHidden=!isHidden">
<div></div>
<div></div>
<div></div>
<!-- <transition name="menu-popover">
<div id="sidenav-menu" v-bind:class="overlay" v-bind:style="{'width': widthValue}">
<div id="slide-element" v-on:click="changeWidth()">
<div class='top_image'>
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
</div>
</div>
<transition name="fade">
<div id="menu-links" v-show="!isHidden">
<div id="menu-links" v-if="show" >
<div id="menu-links" class="overlay" v-if="show" >
<ul>
<li v-for="linkObj in menuLinks">
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
</li>
</ul>
</div>
</div>
</transition> -->
<div class="wrapper">
<span class="label">+</span><div class="contents">
<div class="inner">
<div id="slide-element" v-on:click="changeWidth()">
<div class='top_image'>
<img id="menu-icon" src="../img//page-first.svg" v-if="show"/>
<img id="menu-icon" src="../img//page-last.svg" v-if="!show"/>
</div>
</div>
<div id="menu-links" v-if="show" >
<div id="menu-links" class="overlay" v-if="show" >
<ul>
<li v-for="linkObj in menuLinks">
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
<a v-bind:href="linkObj.address">{{linkObj.name}}</a>
</li>
</ul>
</div>
</transition>
</div>
</div>
</div>
</div>
</template>
<style>
<style scoped>
/* Obrazek do menu*/
.wrapper {
background:#DDD;
display:inline-block;
padding: 10px;
height: 20px;
width:auto;
}
.label {
display: inline-block;
width: 1em;
}
.contents, .contents .inner {
display:inline-block;
}
.contents {
white-space:nowrap;
margin-left: -1em;
padding-left: 1em;
}
.contents .inner {
background:#c3c;
width:0%;
overflow:hidden;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.wrapper:hover .contents .inner {
width:100%;
}
.top_image {
/* width:950px;
background-color:white;
margin: 0px auto 0px auto;
background:red; */
text-align: center;
padding: 10px 0;
overflow: hidden;
}
.top_image img {
margin: 0px auto 0px auto;
}
/*------------- Obrazek do menu -------------*/
.overlay {
width: 50px;
height: 90vh;
background-color: red;
opacity: 0.5;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
transition: opacity 0.25s;
}
.fade-enter-to {
opacity: 0.5;
}
.fade-leave {
opacity: 0.5;
}
.fade-leave-active {
transition: opacity 2s;
}
.fade-leave-to {
opacity: 0;
}
.overlay #slide-element{
background: rebeccapurple;
position: relative;
top: 95%;
}
/* wystylizowanie calosci */
#sidenav-menu{
/* wystylizowanie calosci */
position: left;
width: 30%;
height: 100%;
width: 10%;
height:100vh; /**/
background-color: green;
}
#burger-icon div{
@ -37,26 +162,49 @@
#menu-links ul li a{
background-color: yellow;
height:100vh; /**/
}
/* Animacja opóźnienia */
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
#slide-element{
position: relative;
top: 0%;
height: 5%;
background-color: grey
}
</style>
<script>
export default {
name: 'sidenav-menu',
data(){
return{
isHidden :false//false
data () {
return {
show: false,
widthValue: 30
}
},
created:{
widthValue: 30
},
methods:{
changeWidth(){
this.show = !this.show;
if (this.show){
console.log(this.show);
this.widthValue = '20%';
}
else{
console.log("False: ",this.show);
this.widthValue = '5%';
}
console.log(this.widthValue);
}
},
computed:{
menuLinks(){ //linki do menu głównego

1
frontend/app/src/img/graphql.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,5.37L11.56,5.31L6,14.9C6.24,15.11 6.4,15.38 6.47,15.68H17.53C17.6,15.38 17.76,15.11 18,14.9L12.44,5.31L12,5.37M6.6,16.53L10.88,19.06C11.17,18.79 11.57,18.63 12,18.63C12.43,18.63 12.83,18.79 13.12,19.06L17.4,16.53H6.6M12,22A1.68,1.68 0 0,1 10.32,20.32L10.41,19.76L6.11,17.21C5.8,17.57 5.35,17.79 4.84,17.79A1.68,1.68 0 0,1 3.16,16.11C3.16,15.32 3.69,14.66 4.42,14.47V9.36C3.59,9.25 2.95,8.54 2.95,7.68A1.68,1.68 0 0,1 4.63,6C5.18,6 5.66,6.26 5.97,6.66L10.38,4.13L10.32,3.68C10.32,2.75 11.07,2 12,2C12.93,2 13.68,2.75 13.68,3.68L13.62,4.13L18.03,6.66C18.34,6.26 18.82,6 19.37,6A1.68,1.68 0 0,1 21.05,7.68C21.05,8.54 20.41,9.25 19.58,9.36V14.47C20.31,14.66 20.84,15.32 20.84,16.11A1.68,1.68 0 0,1 19.16,17.79C18.65,17.79 18.2,17.57 17.89,17.21L13.59,19.76L13.68,20.32A1.68,1.68 0 0,1 12,22M10.8,4.86L6.3,7.44L6.32,7.68C6.32,8.39 5.88,9 5.26,9.25L5.29,14.5L10.8,4.86M13.2,4.86L18.71,14.5L18.74,9.25C18.12,9 17.68,8.39 17.68,7.68L17.7,7.44L13.2,4.86Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
frontend/app/src/img/page-first.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M18.41,16.59L13.82,12L18.41,7.41L17,6L11,12L17,18L18.41,16.59M6,6H8V18H6V6Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 370 B

1
frontend/app/src/img/page-last.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M5.59,7.41L10.18,12L5.59,16.59L7,18L13,12L7,6L5.59,7.41M16,6H18V18H16V6Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 367 B

1
frontend/app/src/img/pan-horizontal.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7,8L2.5,12L7,16V8M17,8V16L21.5,12L17,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 405 B

1
frontend/app/src/img/view-headline.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M4,5V7H21V5M4,11H21V9H4M4,19H21V17H4M4,15H21V13H4V15Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 348 B

1
frontend/app/src/img/wrap-disabled.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M16,7H3V5H16V7M3,19H16V17H3V19M22,12L18,9V11H3V13H18V15L22,12Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 357 B

1
frontend/app/src/img/wrap.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M21,5H3V7H21V5M3,19H10V17H3V19M3,13H18C19,13 20,13.43 20,15C20,16.57 19,17 18,17H16V15L12,18L16,21V19H18C20.95,19 22,17.73 22,15C22,12.28 21,11 18,11H3V13Z" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 450 B

2
frontend/app/src/store/store.js
View File

@ -9,7 +9,7 @@ export const store = new Vuex.Store({
menuLinks: [
{name: '1', address: 'https://www.google.com/'},
{name: '1', address: 'https://www.google.com/'},
{name: '1', address: 'https://www.google.com/'},
{name: '9090', address: 'https://www.google.com/'},
{name: '1', address: 'https://www.google.com/'},
{name: '1', address: 'https://www.google.com/'},
{name: '1', address: 'https://www.google.com/'},