KevinMidboe/seasoned
1
0
Fork 0
Code Issues 12 Pull Requests 1 Packages Projects Releases 1 Wiki Activity

Moved sidebar html to a separate component

Browse Source
This commit is contained in:
Kevin
2019-06-29 13:39:20 +02:00
parent 7e926bb37f
commit d74aab1b7a
3 changed files with 112 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -98,7 +98,7 @@
<title>Does not exsits</title>
<path d="M18.916 8.792c0.443 0.511 0.695 1.355 0.695 2.159 0 0.531-0.115 0.996-0.333 1.345-0.284 0.454-0.738 0.704-1.278 0.704h-2.618c1.425 2.591 1.785 4.543 1.070 5.807-0.499 0.881-1.413 1.193-2.045 1.193-0.25 0-0.462-0.185-0.495-0.433-0.179-1.319-1.188-2.893-2.768-4.318-1.514-1.365-3.374-2.456-5.286-3.11-0.241 0.508-0.758 0.86-1.356 0.86h-3c-0.827 0-1.5-0.673-1.5-1.5v-9c0-0.827 0.673-1.5 1.5-1.5h3c0.634 0 1.176 0.395 1.396 0.952 1.961-0.246 2.699-0.64 3.414-1.022 0.895-0.478 1.739-0.93 4.503-0.93 0.72 0 1.398 0.188 1.91 0.529 0.5 0.333 0.82 0.801 0.926 1.343 0.399 0.162 0.753 0.536 1.024 1.092 0.264 0.541 0.435 1.232 0.435 1.761 0 0.099-0.006 0.19-0.017 0.274 0.253 0.186 0.48 0.473 0.667 0.851 0.27 0.545 0.432 1.228 0.432 1.826 0 0.424-0.079 0.777-0.234 1.051-0.013 0.022-0.026 0.044-0.039 0.065zM4.5 2h-3c-0.276 0-0.5 0.224-0.5 0.5v9c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-8.999c0-0 0-0.001 0-0.001-0-0.276-0.224-0.5-0.5-0.5zM18.339 9.726c-0.151-0.304-0.304-0.414-0.37-0.414-0.276 0-0.5-0.224-0.5-0.5s0.224-0.5 0.5-0.5c0.042 0 0.072 0 0.117-0.078 0.066-0.117 0.104-0.32 0.104-0.558 0-0.445-0.126-0.974-0.328-1.382-0.198-0.399-0.399-0.544-0.487-0.544-0.276 0-0.5-0.224-0.5-0.5 0-0.177 0.092-0.333 0.231-0.422 0.031-0.317-0.117-1.165-0.501-1.718-0.145-0.209-0.298-0.329-0.418-0.329-0.276 0-0.5-0.224-0.5-0.5 0-0.88-0.972-1.281-1.875-1.281-2.513 0-3.217 0.376-4.032 0.812-0.762 0.407-1.618 0.865-3.781 1.134v8.187c2.101 0.689 4.152 1.877 5.812 3.373 1.593 1.436 2.639 2.988 2.994 4.426 0.272-0.087 0.579-0.271 0.776-0.618 0.334-0.59 0.584-2.096-1.493-5.557-0.093-0.154-0.095-0.347-0.006-0.504s0.255-0.254 0.435-0.254h3.483c0.199 0 0.327-0.070 0.43-0.234 0.117-0.187 0.181-0.477 0.181-0.815 0-0.424-0.102-0.882-0.272-1.225z" fill-rule="nozero" transform="scale(1.4)"></path>
</symbol>
<symbol id="iconExsits" viewBox="0 0 30 26">
<symbol id="iconExists" viewBox="0 0 30 26">
<title>Exsists</title>
<path d="M18.916 11.208c0.443-0.511 0.695-1.355 0.695-2.159 0-0.531-0.115-0.996-0.333-1.345-0.284-0.454-0.738-0.704-1.278-0.704h-2.618c1.425-2.591 1.785-4.543 1.070-5.807-0.499-0.881-1.413-1.193-2.045-1.193-0.25 0-0.462 0.185-0.495 0.433-0.179 1.319-1.188 2.893-2.768 4.318-1.514 1.365-3.374 2.456-5.286 3.11-0.241-0.508-0.758-0.86-1.356-0.86h-3c-0.827 0-1.5 0.673-1.5 1.5v9c0 0.827 0.673 1.5 1.5 1.5h3c0.634 0 1.176-0.395 1.396-0.952 1.961 0.246 2.699 0.64 3.414 1.022 0.895 0.478 1.739 0.93 4.503 0.93 0.72 0 1.398-0.188 1.91-0.529 0.5-0.333 0.82-0.801 0.926-1.343 0.399-0.162 0.753-0.536 1.024-1.092 0.264-0.541 0.435-1.232 0.435-1.761 0-0.099-0.006-0.19-0.017-0.274 0.253-0.186 0.48-0.473 0.667-0.851 0.27-0.545 0.432-1.228 0.432-1.826 0-0.424-0.079-0.777-0.234-1.051-0.013-0.022-0.026-0.044-0.039-0.065zM4.5 18h-3c-0.276 0-0.5-0.224-0.5-0.5v-9c0-0.276 0.224-0.5 0.5-0.5h3c0.276 0 0.5 0.224 0.5 0.5v8.999c0 0 0 0.001 0 0.001-0 0.276-0.224 0.5-0.5 0.5zM18.339 10.274c-0.151 0.304-0.304 0.414-0.37 0.414-0.276 0-0.5 0.224-0.5 0.5s0.224 0.5 0.5 0.5c0.042 0 0.072 0 0.117 0.078 0.066 0.117 0.104 0.32 0.104 0.558 0 0.445-0.126 0.974-0.328 1.382-0.198 0.399-0.399 0.544-0.487 0.544-0.276 0-0.5 0.224-0.5 0.5 0 0.177 0.092 0.333 0.231 0.422 0.031 0.317-0.117 1.165-0.501 1.718-0.145 0.209-0.298 0.329-0.418 0.329-0.276 0-0.5 0.224-0.5 0.5 0 0.88-0.972 1.281-1.875 1.281-2.513 0-3.217-0.376-4.032-0.812-0.762-0.407-1.618-0.865-3.781-1.134v-8.187c2.101-0.689 4.152-1.877 5.812-3.373 1.593-1.436 2.639-2.988 2.994-4.426 0.272 0.087 0.579 0.271 0.776 0.618 0.334 0.59 0.584 2.096-1.493 5.557-0.093 0.154-0.095 0.347-0.006 0.504s0.255 0.254 0.435 0.254h3.483c0.199 0 0.327 0.070 0.43 0.234 0.117 0.187 0.181 0.477 0.181 0.815 0 0.424-0.102 0.882-0.272 1.225z" fill-rule="nozero" transform="scale(1.4)"></path>
</symbol>

44
src/components/Movie.vue
View File

@@ -32,33 +32,20 @@
<!-- SIDEBAR ACTIONS -->
<div class="movie__actions" v-if="movie">
<a class="movie__actions-link" v-if="matched" :class="{'active' : matched}">
<svg class="movie__actions-icon"><use xlink:href="#iconExsits"></use></svg>
<span class="movie__actions-text"> Already in plex &nbsp;🎉</span>
</a>
<a class="movie__actions-link" v-else="matched">
<svg class="movie__actions-icon"><use xlink:href="#iconNot_exsits"></use></svg>
<span class="movie__actions-text"> Not in plex yet</span>
</a>
<a class="movie__actions-link" :class="{'active' : requested}" v-if="this.requested">
<svg class="movie__actions-icon"><use xlink:href="#iconSent"></use></svg>
<span class="movie__actions-text"> Requested to be downloaded</span>
</a>
<a class="movie__actions-link" v-else="this.requested" @click.prevent="sendRequest">
<svg class="movie__actions-icon" :class="{'waiting' : requested}"><use xlink:href="#iconUnmatched"></use></svg>
<span class="movie__actions-text"> Request to be downloaded?</span>
</a>
<a class="movie__actions-link" @click="showTorrents=!showTorrents" v-if="admin==='true'" :class="{'active' : showTorrents}">
<svg class="movie__actions-icon"><use xlink:href="#icon_torrents"></use></svg>
<span class="movie__actions-text"> Search for torrents</span>
</a>
<a class="movie__actions-link" @click.prevent="openTmdb">
<svg class="movie__actions-icon"><use xlink:href="#icon_info"></use></svg>
<span class="movie__actions-text"> See more info</span>
</a>
<sidebar-action
:text="'Not yet in plex'" :iconRef="'#iconNot_exsits'"
:textActive="'Already in plex 🎉'" :iconRefActive="'#iconExists'"
:active="matched"></sidebar-action>
<sidebar-action
:text="'Request to be downloaded?'" :iconRef="'#iconSent'"
:textActive="'Requested to be downloaded'"
:active="requested"></sidebar-action>
<sidebar-action
v-if="admin" @click="showTorrents=!showTorrents"
:text="'Search for torrents'" :iconRef="'#icon_torrents'"
:active="showTorrents"></sidebar-action>
<sidebar-action
:iconRef="'#icon_info'" :text="'See more info'"></sidebar-action>
</div>
<!-- Loading placeholder -->
@@ -126,6 +113,7 @@ import storage from '@/storage.js'
import img from '@/directives/v-image.js'
import TorrentList from './TorrentList.vue'
import Person from './Person.vue'
import SidebarAction from './movie/SidebarAction.vue'
import LoadingPlaceholder from './ui/LoadingPlaceholder.vue'
@@ -133,7 +121,7 @@ import { getMovie, getShow, request, getRequestStatus } from '@/api.js'
export default {
props: ['id', 'type'],
components: { TorrentList, Person, LoadingPlaceholder },
components: { TorrentList, Person, LoadingPlaceholder, SidebarAction },
directives: { img: img }, // TODO decide to remove or use
data(){
return{

95
src/components/movie/SidebarAction.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<div class="action">
<a class="action-link" :class="{'active': active}" @click="$emit('click')">
<svg class="action-icon">
<use v-if="active && iconRefActive" :xlink:href="iconRefActive"></use>
<use v-else :xlink:href="iconRef"></use>
</svg>
<span class="action-text">{{ active && textActive ? textActive : text }}</span>
</a>
</div>
</template>
<script>
export default {
props: {
iconRef: {
type: String,
required: true
},
iconRefActive: {
type: String,
required: false
},
active: {
type: Boolean,
default: false,
},
text: {
type: String,
required: true
},
textActive: {
type: String,
required: false
}
}
}
</script>
<style lang="scss" scoped>
@import "./src/scss/loading-placeholder";
@import "./src/scss/variables";
@import "./src/scss/media-queries";
.action {
&-link {
display: flex;
align-items: center;
text-decoration: none;
text-transform: uppercase;
color: rgba($c-dark, 0.5);
transition: color 0.5s ease;
font-size: 11px;
padding: 5px 0;
border-bottom: 1px solid rgba($c-dark, 0.05);
&:hover {
color: rgba($c-dark, 0.75);
}
&.active {
color: $c-dark;
}
&.pending {
color: #f8bd2d;
}
}
&-icon {
width: 18px;
height: 18px;
margin: 0 10px 0 0;
fill: rgba($c-dark, 0.5);
transition: fill 0.5s ease, transform 0.5s ease;
&.waiting {
transform: scale(0.8, 0.8);
}
&.pending {
fill: #f8bd2d;
}
}
&-link:hover &-icon {
fill: rgba($c-dark, 0.75);
cursor: pointer;
}
&-link.active &-icon {
fill: $c-green;
}
&-text {
display: block;
padding-top: 2px;
cursor: pointer;
margin:4.4px;
margin-left: -3px;
}
}
</style>