Permalink
Browse files

Add dragscroll

  • Loading branch information...
MHC03 committed Feb 16, 2018
1 parent c661222 commit 835bacb65072e3ef6c753c0e7648d9646a352c95
Showing with 28 additions and 7 deletions.
  1. 0 npm
  2. +5 −0 package-lock.json
  3. +1 −0 package.json
  4. +20 −6 src/components/pages/widgets/ScreenshotList.vue
  5. +2 −1 src/main.js
View
0 npm
No changes.
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -15,6 +15,7 @@
},
"dependencies": {
"vue": "^2.5.2",
"vue-dragscroll": "^1.3.1",
"vue-router": "^3.0.1"
},
"devDependencies": {
@@ -1,17 +1,23 @@
<template>
<div class="screenshots dragscroll">
<single-screenshot v-for="(screenshot, index) in getPlatform().screenshots" v-bind:key="index" v-bind:screenshotSrc="screenshot"></single-screenshot>
<!-- Screenshots -->
<div class="screenshot-spacer"></div>
<div v-dragscroll.x="true" class="screenshots">
<div id="scrollbar">
<single-screenshot v-for="(screenshot, index) in getPlatform().screenshots" v-bind:key="index" v-bind:screenshotSrc="screenshot"></single-screenshot>
<!-- Screenshots -->
<div style="width: 184px;height: 100px; background-color: #006600; margin-right: 40px;display: table;position: absolute"></div>
<div class="screenshot-spacer" style="background-color: cadetblue"></div>
</div>
</div>
</template>
<script>
import {dragscroll} from 'vue-dragscroll'
import SingleScreenshot from './SingleScreenshot'
export default {
name: 'ScreenshotList',
directives: {
dragscroll
},
components: {
SingleScreenshot
},
@@ -48,7 +54,7 @@ export default {
margin-bottom: 40px;
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
padding-left: calc(50vw - 92px);
&::-webkit-scrollbar {
background: transparent;
width: 0 !important;
@@ -58,7 +64,15 @@ export default {
width: calc(50vw - 92px);
height: 168px;
display: table;
}
}
#scrollbar {
display: inline-block;
padding-left: 50vw;
padding-right: 50vw;
background-color: #9b9d9e;
}
</style>
View
@@ -1,5 +1,6 @@
import Vue from 'vue'
import VueResource from 'vue-resource'
import VueDragscroll from 'vue-dragscroll'
import App from './App'
import router from './router'
@@ -11,7 +12,7 @@ Vue.filter('formatDate', function (d) {
}
})
Vue.use(VueResource)
Vue.use(VueDragscroll)
/* eslint-disable no-new */
new Vue({
el: '#app',

0 comments on commit 835bacb

Please sign in to comment.