├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── app.js ├── app.json ├── article ├── img-deploy.png ├── img1.jpg ├── img2.png └── index.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── index_app.html ├── package-lock.json ├── package.json ├── prepare.js ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── AppFooter.vue │ ├── AppHeader.vue │ ├── Thumbs.vue │ └── Viewer.vue ├── config.js ├── event_bus.js └── main.js └── static ├── .gitkeep ├── css ├── font-awesome.min.css ├── ie8.css ├── ie9.css ├── images │ ├── arrow-small.svg │ ├── arrow.svg │ ├── close-small-alt.svg │ ├── close-small.svg │ ├── close.svg │ ├── open-small.svg │ ├── open.svg │ └── spinner.svg ├── main.css └── noscript.css ├── fonts ├── FontAwesome.otf ├── fontawesome-webfont.eot ├── fontawesome-webfont.svg ├── fontawesome-webfont.ttf ├── fontawesome-webfont.woff └── fontawesome-webfont.woff2 ├── images ├── fulls │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ ├── 06.jpg │ ├── 07.jpg │ ├── 08.jpg │ ├── 09.jpg │ ├── 10.jpg │ ├── 11.jpg │ └── 12.jpg └── thumbs │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ ├── 06.jpg │ ├── 07.jpg │ ├── 08.jpg │ ├── 09.jpg │ ├── 10.jpg │ ├── 11.jpg │ └── 12.jpg └── js ├── ie ├── PIE.htc ├── html5shiv.js └── respond.min.js ├── jquery.min.js ├── main.js └── skel.min.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-runtime"], 12 | "env": { 13 | "test": { 14 | "presets": ["env", "stage-2"], 15 | "plugins": ["istanbul"] 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | *.suo 11 | *.ntvs* 12 | *.njsproj 13 | *.sln 14 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | // to edit target browsers: use "browserslist" field in package.json 6 | "autoprefixer": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue.js Photo Gallery 2 | ![Image](https://cosmic-s3.imgix.net/c4747e70-785d-11e7-998b-6dbc6e078b76.jpg?w=1000) 3 | ### [View the demo](https://cosmicjs.com/apps/vuejs-photo-gallery) 4 | > A Vue.js Photo Gallery Powered by [Cosmic JS](https://cosmicjs.com) 5 | 6 | ## Install on Cosmic JS 7 | 1. Log in to [Cosmic JS](https://cosmicjs.com/login) 8 | 2. Create a new Bucket 9 | 3. Click "Install Free" on the [Vue Photo Gallery App](https://cosmicjs.com/apps/vuejs-photo-gallery) page 10 | 11 | 12 | ## Install and run locally 13 | ``` bash 14 | git clone https://github.com/cosmicjs/vuejs-photo-gallery 15 | cd vuejs-photo-gallery 16 | npm i 17 | npm run dev 18 | ``` 19 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | 4 | app.use(express.static('./dist')); 5 | 6 | app.listen(process.env.PORT, function () { 7 | }); -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dokku": { 4 | "predeploy": "node prepare.js && npm run build" 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /article/img-deploy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/article/img-deploy.png -------------------------------------------------------------------------------- /article/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/article/img1.jpg -------------------------------------------------------------------------------- /article/img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/article/img2.png -------------------------------------------------------------------------------- /article/index.md: -------------------------------------------------------------------------------- 1 | In this tutorial I’m going to show you how to build photo gallery with ready-to-use template, which will be hosted on CosmicJS App Server. 2 | 3 | ![](img1.jpg) 4 | 5 | # Prerequisites 6 | 7 | You’ll need the node JS and npm. Make sure you already have them before start. 8 | 9 | # Getting Started 10 | 11 | First of all we’ll need to install VueJS CLI and start the new project.Run the following commands to do this: 12 | 13 | ```bash 14 | npm install -g vue-cli 15 | vue init webpack vuejs-photo-gallery 16 | cd vuejs-photo-gallery 17 | npm install 18 | ``` 19 | 20 | After you’ll setup this project you’ll be able to run 21 | 22 | ```bash 23 | cd vuejs-photo-gallery 24 | npm run dev 25 | ``` 26 | 27 | And play with your app in browser 28 | 29 | # Doing everything using the existing git repo 30 | 31 | First of all, you have to be sure you have node > 6.x installed, than run the following commands: 32 | 33 | ```bash 34 | npm install -g vue-cli 35 | git clone https://github.com/cosmicjs/vuejs-photo-gallery.git 36 | cd vuejs-photo-gallery 37 | npm install 38 | npm run dev 39 | ``` 40 | 41 | Browser window will open automatically once you'll run the last command 42 | 43 | # Setting up Cosmic JS library 44 | 45 | First of all, install Cosmic JS Angular/JavaScript library 46 | 47 | ```bash 48 | npm install cosmicjs --save 49 | ``` 50 | 51 | Now you should be able to import Cosmic object and perform Cosmic JS API calls like following: 52 | 53 | ```typescript 54 | import Cosmic from 'cosmicjs'; 55 | const bucket = { slug: 'your-bucket-slug' }; 56 | 57 | Cosmic.getObjects({ bucket }, (err, res) => { 58 | console.log(res.objects); 59 | }); 60 | ``` 61 | 62 | # Setting up things with Cosmic JS 63 | 64 | Create the bucket and remeber the bucket name (`vuejs-photo-gallery` in our case): 65 | 66 | Than create a new object type named Photo. 67 | 68 | We also need a way to store the picture itself. Please enter the “Metafields Template” tab and add “Image/File” type metafield with key `image`. This metafield will store the image. We don’t need anything more, so just set the name and save object type. 69 | After save you’ll be redirected to ‘New Photo’ page. Create some photos using this page and save them - we'll use them as test data. 70 | 71 | ![](img2.png) 72 | 73 | The only thing left is to set site-wide things, such as title, tagline, social icons and footer text. Let's create one more object type named Global. 74 | And add the following metafields: 75 | 76 | * Tagline - Plain Text Area 77 | * Twitter - Plain Text Input 78 | * Instagram - Plain Text Input 79 | * Github - Plain Text Input 80 | * Email - Plain Text Input 81 | * Footer - Plain Text Area 82 | 83 | # VueJS environments 84 | 85 | We want to pick our bucket name automatically on deploy. In this case we'll need configuration file, which we'll populate with correct data during deploy. 86 | Create `src/config.js` to match the following: 87 | ```javascript 88 | Config = { 89 | bucket: 'vuejs-photo-gallery' 90 | }; 91 | 92 | module.exports = Config; 93 | ``` 94 | 95 | # Prepare assets 96 | 97 | Download the template ZIP and unzip it somewhere. In our case we have the following content: 98 | 99 | `index.html` - this is our HTML markup, we'll move it to Vue components later. 100 | `images` - this is sample images folder. We don't need it, our images will be served from CosmicJS servers 101 | `assets` - other assets such as CSS, fonts, javascript files. We'll need CSS and fonts. Let's ignore Javascript for now, since we're planning to use VueJS. 102 | Let's copy `assets/css` and `assets/fonts` folders to `static` folder inside our project. This will allow us to add these files to the build automatically as static assets. 103 | 104 | # Prepare index.html 105 | 106 | Now it's time to include our assets to `index.html`. Add the following to the `head` section: 107 | 108 | ```html 109 | 110 | 111 | 112 | 113 | 114 | 115 | ``` 116 | 117 | This will include our static assets. Once we'll implement correct markup, appearance will be automatically set via CSS. 118 | 119 | # VueJS components 120 | 121 | Looking into our page, we can define components we'll need: 122 | 123 | `Header` and `Footer` - for this will be very simple components, which will display global data which will be loaded on app startup 124 | `Thumbs` - this component will display photos thumbnails 125 | `Viwer` - this component will display the big photo and provide prev/next navigation. 126 | Please note - we're creating component's templates markup using template we downloaded before (doing copy-paste from index.html and applying VueJS directives). 127 | 128 | `Header` component: 129 | 130 | ```vue 131 | 143 | 144 | 171 | ``` 172 | 173 | `Footer` component is very similar: 174 | 175 | ```vue 176 | 181 | 182 | 199 | ``` 200 | 201 | Both components uses `EventBus` to receive data from parent component. I'll tell about the Event bus later in this post. 202 | 203 | # Thumbs component 204 | 205 | This component is more complicated than previous two: 206 | 207 | ```vue 208 | 219 | 220 | 260 | ``` 261 | 262 | On component creation we're fetching our photos list and subscribes to Event bus 'move' event. Than we just render these photos and emit a new event each time when user selects a new photo. 263 | 264 | # Viewer component 265 | 266 | ```vue 267 | 283 | 284 | 310 | ``` 311 | 312 | This component subscribes to `loaded` event via Event bus. This event means that uses selected a new photo and we have to show it bigger size; 313 | Another task of this component is to notify Thumbs component when users click prev/next buttons. Component uses Event bus for this purpose also. 314 | 315 | # Event bus 316 | 317 | Event bus follows publish-subscribe pattern and allows us setup communication between Thumbs and Viewer components. Both components are on the same level (no parent-child relationship), so we need something more complicated than simple event emission. 318 | Event bus implementation is very easy (`src/event_bus.js`): 319 | ```javascript 320 | import Vue from 'vue'; 321 | export const EventBus = new Vue(); 322 | ``` 323 | 324 | This event bus is used to fire events in one component (using `EventBus.$emit`) and subscribe on them in another component (using `EventBus.$on`). 325 | 326 | # Concatenating everything together 327 | 328 | Now it's time to concat everything with `App` component: 329 | 330 | ```vue 331 | 341 | 342 | 370 | ``` 371 | 372 | This component loads globals data on creation and notify `AppHeader` and `AppFooter` components via `EventBus`. 373 | 374 | # Deploy to CosmicJS servers 375 | 376 | CosmicJS has some requirements for deploying apps: 377 | 378 | * it must be in public git repo 379 | * [Specific requirements](https://devcenter.heroku.com/) depending on your platform must be met 380 | 381 | In our case we actually have HTML5 app, so we'll need some additional software. 382 | 383 | ## Prepare config 384 | 385 | Create a `prepare.js` file in your project directory: 386 | ```javascript 387 | var fs = require('fs'); 388 | 389 | var str = ` 390 | Config = { 391 | bucket: '${process.env.COSMIC_BUCKET}' 392 | }; 393 | 394 | module.exports = Config; 395 | `; 396 | fs.writeFile("./src/config.js", str, function(err) { 397 | if(err) { 398 | return console.log(err); 399 | } 400 | console.log("The file was saved!"); 401 | }); 402 | ``` 403 | 404 | This script will rewrite application config file (see more info above) file to use your CosmicJS bucket write key and bucket name. 405 | 406 | ## Modify package.json 407 | 408 | VueJS CLI adds some packaged on `package.json` as `devDependencies`. We have to move them all into `dependencies` to make our scripts work in CosmicJS servers. 409 | 410 | ## Prepare software 411 | 412 | We'll also need something to serve our Angular app. We'll use Express framework: 413 | 414 | ```bash 415 | npm install --save express 416 | ``` 417 | 418 | Add the following to your package.json: 419 | 420 | ```json 421 | { 422 | ... 423 | "scripts": { 424 | ... 425 | "start": "node app.js" 426 | }, 427 | ... 428 | } 429 | ``` 430 | 431 | The main point is to have `start` command defined in the `scripts` section (you can safely replace default angular `start` command). This is the command which will be run to start our app. So now we have the only thing left - create the `app.js` file: 432 | 433 | ```JavaScript 434 | const express = require('express') 435 | const app = express() 436 | 437 | app.use(express.static('./dist')); 438 | 439 | app.listen(process.env.PORT, function () { 440 | }); 441 | ``` 442 | 443 | This is a simple Express app which serves `dist` dir as dir of static files. Please take note - app listens on port specified via `PORT` environment variable, it's important to run apps on CosmicJS App Server. 444 | 445 | ## Build VueJS app for production 446 | 447 | We'll use `app.json` to do this (dokku `predeploy` section): 448 | 449 | ```json 450 | { 451 | "scripts": { 452 | "dokku": { 453 | "predeploy": "node prepare.js && npm run build" 454 | } 455 | } 456 | } 457 | ``` 458 | 459 | This script will be executed before we'll launch our express app to build the VueJS app for production. 460 | 461 | ## Run it! 462 | 463 | Now you can enter 'Deploy Web App' page in your CosmicJS Dashboard. 464 | 465 | ![](img-deploy.png) 466 | 467 | Simply enter your repo URL and click 'Deploy to Web' - deploy process will be started and app become ready in a couple of minutes. 468 | 469 | # Conclusion 470 | 471 | Using Cosmic JS App Server allows quickly deploy the application to hosting using a git repo and don't worry about server configuration and software installation - everything will be done by CosmicJS servers. -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | process.env.NODE_ENV = 'production' 4 | 5 | var ora = require('ora') 6 | var rm = require('rimraf') 7 | var path = require('path') 8 | var chalk = require('chalk') 9 | var webpack = require('webpack') 10 | var config = require('../config') 11 | var webpackConfig = require('./webpack.prod.conf') 12 | 13 | var spinner = ora('building for production...') 14 | spinner.start() 15 | 16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 17 | if (err) throw err 18 | webpack(webpackConfig, function (err, stats) { 19 | spinner.stop() 20 | if (err) throw err 21 | process.stdout.write(stats.toString({ 22 | colors: true, 23 | modules: false, 24 | children: false, 25 | chunks: false, 26 | chunkModules: false 27 | }) + '\n\n') 28 | 29 | console.log(chalk.cyan(' Build complete.\n')) 30 | console.log(chalk.yellow( 31 | ' Tip: built files are meant to be served over an HTTP server.\n' + 32 | ' Opening index.html over file:// won\'t work.\n' 33 | )) 34 | }) 35 | }) 36 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var chalk = require('chalk') 2 | var semver = require('semver') 3 | var packageConfig = require('../package.json') 4 | var shell = require('shelljs') 5 | function exec (cmd) { 6 | return require('child_process').execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | ] 16 | 17 | if (shell.which('npm')) { 18 | versionRequirements.push({ 19 | name: 'npm', 20 | currentVersion: exec('npm --version'), 21 | versionRequirement: packageConfig.engines.npm 22 | }) 23 | } 24 | 25 | module.exports = function () { 26 | var warnings = [] 27 | for (var i = 0; i < versionRequirements.length; i++) { 28 | var mod = versionRequirements[i] 29 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 30 | warnings.push(mod.name + ': ' + 31 | chalk.red(mod.currentVersion) + ' should be ' + 32 | chalk.green(mod.versionRequirement) 33 | ) 34 | } 35 | } 36 | 37 | if (warnings.length) { 38 | console.log('') 39 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 40 | console.log() 41 | for (var i = 0; i < warnings.length; i++) { 42 | var warning = warnings[i] 43 | console.log(' ' + warning) 44 | } 45 | console.log() 46 | process.exit(1) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | 3 | var config = require('../config') 4 | if (!process.env.NODE_ENV) { 5 | process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 6 | } 7 | 8 | var opn = require('opn') 9 | var path = require('path') 10 | var express = require('express') 11 | var webpack = require('webpack') 12 | var proxyMiddleware = require('http-proxy-middleware') 13 | var webpackConfig = require('./webpack.dev.conf') 14 | 15 | // default port where dev server listens for incoming traffic 16 | var port = process.env.PORT || config.dev.port 17 | // automatically open browser, if not set will be false 18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser 19 | // Define HTTP proxies to your custom API backend 20 | // https://github.com/chimurai/http-proxy-middleware 21 | var proxyTable = config.dev.proxyTable 22 | 23 | var app = express() 24 | var compiler = webpack(webpackConfig) 25 | 26 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 27 | publicPath: webpackConfig.output.publicPath, 28 | quiet: true 29 | }) 30 | 31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, { 32 | log: () => {}, 33 | heartbeat: 2000 34 | }) 35 | // force page reload when html-webpack-plugin template changes 36 | compiler.plugin('compilation', function (compilation) { 37 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 38 | hotMiddleware.publish({ action: 'reload' }) 39 | cb() 40 | }) 41 | }) 42 | 43 | // proxy api requests 44 | Object.keys(proxyTable).forEach(function (context) { 45 | var options = proxyTable[context] 46 | if (typeof options === 'string') { 47 | options = { target: options } 48 | } 49 | app.use(proxyMiddleware(options.filter || context, options)) 50 | }) 51 | 52 | // handle fallback for HTML5 history API 53 | app.use(require('connect-history-api-fallback')()) 54 | 55 | // serve webpack bundle output 56 | app.use(devMiddleware) 57 | 58 | // enable hot-reload and state-preserving 59 | // compilation error display 60 | app.use(hotMiddleware) 61 | 62 | // serve pure static assets 63 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 64 | app.use(staticPath, express.static('./static')) 65 | 66 | var uri = 'http://localhost:' + port 67 | 68 | var _resolve 69 | var readyPromise = new Promise(resolve => { 70 | _resolve = resolve 71 | }) 72 | 73 | console.log('> Starting dev server...') 74 | devMiddleware.waitUntilValid(() => { 75 | console.log('> Listening at ' + uri + '\n') 76 | // when env is testing, don't need open it 77 | if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 78 | opn(uri) 79 | } 80 | _resolve() 81 | }) 82 | 83 | var server = app.listen(port) 84 | 85 | module.exports = { 86 | ready: readyPromise, 87 | close: () => { 88 | server.close() 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | 15 | var cssLoader = { 16 | loader: 'css-loader', 17 | options: { 18 | minimize: process.env.NODE_ENV === 'production', 19 | sourceMap: options.sourceMap 20 | } 21 | } 22 | 23 | // generate loader string to be used with extract text plugin 24 | function generateLoaders (loader, loaderOptions) { 25 | var loaders = [cssLoader] 26 | if (loader) { 27 | loaders.push({ 28 | loader: loader + '-loader', 29 | options: Object.assign({}, loaderOptions, { 30 | sourceMap: options.sourceMap 31 | }) 32 | }) 33 | } 34 | 35 | // Extract CSS when that option is specified 36 | // (which is the case during production build) 37 | if (options.extract) { 38 | return ExtractTextPlugin.extract({ 39 | use: loaders, 40 | fallback: 'vue-style-loader' 41 | }) 42 | } else { 43 | return ['vue-style-loader'].concat(loaders) 44 | } 45 | } 46 | 47 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 48 | return { 49 | css: generateLoaders(), 50 | postcss: generateLoaders(), 51 | less: generateLoaders('less'), 52 | sass: generateLoaders('sass', { indentedSyntax: true }), 53 | scss: generateLoaders('sass'), 54 | stylus: generateLoaders('stylus'), 55 | styl: generateLoaders('stylus') 56 | } 57 | } 58 | 59 | // Generate loaders for standalone style files (outside of .vue) 60 | exports.styleLoaders = function (options) { 61 | var output = [] 62 | var loaders = exports.cssLoaders(options) 63 | for (var extension in loaders) { 64 | var loader = loaders[extension] 65 | output.push({ 66 | test: new RegExp('\\.' + extension + '$'), 67 | use: loader 68 | }) 69 | } 70 | return output 71 | } 72 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var config = require('../config') 3 | var isProduction = process.env.NODE_ENV === 'production' 4 | 5 | module.exports = { 6 | loaders: utils.cssLoaders({ 7 | sourceMap: isProduction 8 | ? config.build.productionSourceMap 9 | : config.dev.cssSourceMap, 10 | extract: isProduction 11 | }), 12 | transformToRequire: { 13 | video: 'src', 14 | source: 'src', 15 | img: 'src', 16 | image: 'xlink:href' 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var config = require('../config') 4 | var vueLoaderConfig = require('./vue-loader.conf') 5 | 6 | function resolve (dir) { 7 | return path.join(__dirname, '..', dir) 8 | } 9 | 10 | module.exports = { 11 | entry: { 12 | app: './src/main.js' 13 | }, 14 | output: { 15 | path: config.build.assetsRoot, 16 | filename: '[name].js', 17 | publicPath: process.env.NODE_ENV === 'production' 18 | ? config.build.assetsPublicPath 19 | : config.dev.assetsPublicPath 20 | }, 21 | resolve: { 22 | extensions: ['.js', '.vue', '.json'], 23 | alias: { 24 | 'vue$': 'vue/dist/vue.esm.js', 25 | '@': resolve('src') 26 | } 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.vue$/, 32 | loader: 'vue-loader', 33 | options: vueLoaderConfig 34 | }, 35 | { 36 | test: /\.js$/, 37 | loader: 'babel-loader', 38 | include: [resolve('src'), resolve('test')] 39 | }, 40 | { 41 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 42 | loader: 'url-loader', 43 | options: { 44 | limit: 10000, 45 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 46 | } 47 | }, 48 | { 49 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 50 | loader: 'url-loader', 51 | options: { 52 | limit: 10000, 53 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 54 | } 55 | }, 56 | { 57 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 58 | loader: 'url-loader', 59 | options: { 60 | limit: 10000, 61 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 62 | } 63 | } 64 | ] 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var utils = require('./utils') 2 | var webpack = require('webpack') 3 | var config = require('../config') 4 | var merge = require('webpack-merge') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 8 | 9 | // add hot-reload related code to entry chunks 10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 11 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 12 | }) 13 | 14 | module.exports = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 17 | }, 18 | // cheap-module-eval-source-map is faster for development 19 | devtool: '#cheap-module-eval-source-map', 20 | plugins: [ 21 | new webpack.DefinePlugin({ 22 | 'process.env': config.dev.env 23 | }), 24 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoEmitOnErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }), 33 | new FriendlyErrorsPlugin() 34 | ] 35 | }) 36 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var utils = require('./utils') 3 | var webpack = require('webpack') 4 | var config = require('../config') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var CopyWebpackPlugin = require('copy-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 11 | 12 | var env = config.build.env 13 | 14 | var webpackConfig = merge(baseWebpackConfig, { 15 | module: { 16 | rules: utils.styleLoaders({ 17 | sourceMap: config.build.productionSourceMap, 18 | extract: true 19 | }) 20 | }, 21 | devtool: config.build.productionSourceMap ? '#source-map' : false, 22 | output: { 23 | path: config.build.assetsRoot, 24 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 25 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | }, 36 | sourceMap: true 37 | }), 38 | // extract css into its own file 39 | new ExtractTextPlugin({ 40 | filename: utils.assetsPath('css/[name].[contenthash].css') 41 | }), 42 | // Compress extracted CSS. We are using this plugin so that possible 43 | // duplicated CSS from different components can be deduped. 44 | new OptimizeCSSPlugin({ 45 | cssProcessorOptions: { 46 | safe: true 47 | } 48 | }), 49 | // generate dist index.html with correct asset hash for caching. 50 | // you can customize output by editing /index.html 51 | // see https://github.com/ampedandwired/html-webpack-plugin 52 | new HtmlWebpackPlugin({ 53 | filename: config.build.index, 54 | template: 'index.html', 55 | inject: true, 56 | minify: { 57 | removeComments: true, 58 | collapseWhitespace: true, 59 | removeAttributeQuotes: true 60 | // more options: 61 | // https://github.com/kangax/html-minifier#options-quick-reference 62 | }, 63 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 64 | chunksSortMode: 'dependency' 65 | }), 66 | // split vendor js into its own file 67 | new webpack.optimize.CommonsChunkPlugin({ 68 | name: 'vendor', 69 | minChunks: function (module, count) { 70 | // any required modules inside node_modules are extracted to vendor 71 | return ( 72 | module.resource && 73 | /\.js$/.test(module.resource) && 74 | module.resource.indexOf( 75 | path.join(__dirname, '../node_modules') 76 | ) === 0 77 | ) 78 | } 79 | }), 80 | // extract webpack runtime and module manifest to its own file in order to 81 | // prevent vendor hash from being updated whenever app bundle is updated 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'manifest', 84 | chunks: ['vendor'] 85 | }), 86 | // copy custom static assets 87 | new CopyWebpackPlugin([ 88 | { 89 | from: path.resolve(__dirname, '../static'), 90 | to: config.build.assetsSubDirectory, 91 | ignore: ['.*'] 92 | } 93 | ]) 94 | ] 95 | }) 96 | 97 | if (config.build.productionGzip) { 98 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 99 | 100 | webpackConfig.plugins.push( 101 | new CompressionWebpackPlugin({ 102 | asset: '[path].gz[query]', 103 | algorithm: 'gzip', 104 | test: new RegExp( 105 | '\\.(' + 106 | config.build.productionGzipExtensions.join('|') + 107 | ')$' 108 | ), 109 | threshold: 10240, 110 | minRatio: 0.8 111 | }) 112 | ) 113 | } 114 | 115 | if (config.build.bundleAnalyzerReport) { 116 | var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 117 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 118 | } 119 | 120 | module.exports = webpackConfig 121 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'], 18 | // Run the build command with an extra argument to 19 | // View the bundle analyzer report after build finishes: 20 | // `npm run build --report` 21 | // Set to `true` or `false` to always turn it on or off 22 | bundleAnalyzerReport: process.env.npm_config_report 23 | }, 24 | dev: { 25 | env: require('./dev.env'), 26 | port: 8080, 27 | autoOpenBrowser: true, 28 | assetsSubDirectory: 'static', 29 | assetsPublicPath: '/', 30 | proxyTable: {}, 31 | // CSS Sourcemaps off by default because relative paths are "buggy" 32 | // with this option, according to the CSS-Loader README 33 | // (https://github.com/webpack/css-loader#sourcemaps) 34 | // In our experience, they generally work as expected, 35 | // just be aware of this issue when enabling this option. 36 | cssSourceMap: false 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | Lens by HTML5 UP 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /index_app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cosmic-vue 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cosmic-vue", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "Ivan Larionov ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "start": "node app.js", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "cosmicjs": "^2.39.91", 14 | "express": "^4.14.1", 15 | "vue": "^2.3.3", 16 | "autoprefixer": "^7.1.2", 17 | "babel-core": "^6.22.1", 18 | "babel-loader": "^7.1.1", 19 | "babel-plugin-transform-runtime": "^6.22.0", 20 | "babel-preset-env": "^1.3.2", 21 | "babel-preset-stage-2": "^6.22.0", 22 | "babel-register": "^6.22.0", 23 | "chalk": "^2.0.1", 24 | "connect-history-api-fallback": "^1.3.0", 25 | "copy-webpack-plugin": "^4.0.1", 26 | "css-loader": "^0.28.0", 27 | "cssnano": "^3.10.0", 28 | "eventsource-polyfill": "^0.9.6", 29 | "extract-text-webpack-plugin": "^2.0.0", 30 | "file-loader": "^0.11.1", 31 | "friendly-errors-webpack-plugin": "^1.1.3", 32 | "html-webpack-plugin": "^2.28.0", 33 | "http-proxy-middleware": "^0.17.3", 34 | "webpack-bundle-analyzer": "^2.2.1", 35 | "semver": "^5.3.0", 36 | "shelljs": "^0.7.6", 37 | "opn": "^5.1.0", 38 | "optimize-css-assets-webpack-plugin": "^2.0.0", 39 | "ora": "^1.2.0", 40 | "rimraf": "^2.6.0", 41 | "url-loader": "^0.5.8", 42 | "vue-loader": "^12.1.0", 43 | "vue-style-loader": "^3.0.1", 44 | "vue-template-compiler": "^2.3.3", 45 | "webpack": "^2.6.1", 46 | "webpack-dev-middleware": "^1.10.0", 47 | "webpack-hot-middleware": "^2.18.0", 48 | "webpack-merge": "^4.1.0" 49 | }, 50 | "engines": { 51 | "node": ">= 4.0.0", 52 | "npm": ">= 3.0.0" 53 | }, 54 | "browserslist": [ 55 | "> 1%", 56 | "last 2 versions", 57 | "not ie <= 8" 58 | ] 59 | } 60 | -------------------------------------------------------------------------------- /prepare.js: -------------------------------------------------------------------------------- 1 | var fs = require('fs'); 2 | 3 | var str = ` 4 | Config = { 5 | bucket: '${process.env.COSMIC_BUCKET}' 6 | }; 7 | 8 | module.exports = Config; 9 | `; 10 | fs.writeFile("./src/config.js", str, function(err) { 11 | if(err) { 12 | return console.log(err); 13 | } 14 | console.log("The file was saved!"); 15 | }); -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 40 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/AppFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/components/AppHeader.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | -------------------------------------------------------------------------------- /src/components/Thumbs.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/Viewer.vue: -------------------------------------------------------------------------------- 1 | 17 | 18 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | Config = { 2 | bucket: 'vuejs-photo-gallery' 3 | }; 4 | 5 | module.exports = Config; -------------------------------------------------------------------------------- /src/event_bus.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | export const EventBus = new Vue(); -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | 6 | Vue.config.productionTip = false 7 | 8 | /* eslint-disable no-new */ 9 | new Vue({ 10 | el: '#app', 11 | template: '', 12 | components: { App } 13 | }) 14 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/.gitkeep -------------------------------------------------------------------------------- /static/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.6.3');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} 5 | -------------------------------------------------------------------------------- /static/css/ie8.css: -------------------------------------------------------------------------------- 1 | /* 2 | Lens by HTML5 UP 3 | html5up.net | @ajlkn 4 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | */ 6 | 7 | /* Viewer */ 8 | 9 | #viewer { 10 | width: 100%; 11 | } -------------------------------------------------------------------------------- /static/css/ie9.css: -------------------------------------------------------------------------------- 1 | /* 2 | Lens by HTML5 UP 3 | html5up.net | @ajlkn 4 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | */ 6 | 7 | /* Thumbnails */ 8 | 9 | #thumbnails:after { 10 | content: ''; 11 | display: block; 12 | clear: both; 13 | } 14 | 15 | #thumbnails article { 16 | float: left; 17 | } 18 | 19 | /* Viewer */ 20 | 21 | #viewer .inner { 22 | box-shadow: inset 0 0 9em 2em rgba(16, 16, 16, 0.2); 23 | } 24 | 25 | #viewer .inner:before { 26 | display: none; 27 | } 28 | 29 | #viewer .slide .caption { 30 | background-color: rgba(16, 16, 16, 0.5); 31 | } -------------------------------------------------------------------------------- /static/css/images/arrow-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /static/css/images/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /static/css/images/close-small-alt.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /static/css/images/close-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /static/css/images/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /static/css/images/open-small.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /static/css/images/open.svg: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /static/css/images/spinner.svg: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /static/css/main.css: -------------------------------------------------------------------------------- 1 | @import url(font-awesome.min.css); 2 | @import url("https://fonts.googleapis.com/css?family=Roboto:400,700"); 3 | 4 | /* 5 | Lens by HTML5 UP 6 | html5up.net | @ajlkn 7 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 8 | */ 9 | 10 | /* Reset */ 11 | 12 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 13 | margin: 0; 14 | padding: 0; 15 | border: 0; 16 | font-size: 100%; 17 | font: inherit; 18 | vertical-align: baseline; 19 | } 20 | 21 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 22 | display: block; 23 | } 24 | 25 | body { 26 | line-height: 1; 27 | } 28 | 29 | ol, ul { 30 | list-style: none; 31 | } 32 | 33 | blockquote, q { 34 | quotes: none; 35 | } 36 | 37 | blockquote:before, blockquote:after, q:before, q:after { 38 | content: ''; 39 | content: none; 40 | } 41 | 42 | table { 43 | border-collapse: collapse; 44 | border-spacing: 0; 45 | } 46 | 47 | body { 48 | -webkit-text-size-adjust: none; 49 | } 50 | 51 | /* Box Model */ 52 | 53 | *, *:before, *:after { 54 | -moz-box-sizing: border-box; 55 | -webkit-box-sizing: border-box; 56 | box-sizing: border-box; 57 | } 58 | 59 | /* Basic */ 60 | 61 | /* 62 | @-ms-viewport { 63 | width: device-width; 64 | } 65 | 66 | */ 67 | 68 | @media screen and (max-width: 480px) { 69 | 70 | html, body { 71 | min-width: 320px; 72 | } 73 | 74 | } 75 | 76 | body.is-loading-0 *, body.is-loading-0 *:before, body.is-loading-0 *:after { 77 | -moz-animation: none !important; 78 | -webkit-animation: none !important; 79 | -ms-animation: none !important; 80 | animation: none !important; 81 | -moz-transition: none !important; 82 | -webkit-transition: none !important; 83 | -ms-transition: none !important; 84 | transition: none !important; 85 | } 86 | 87 | html, body { 88 | background-color: #101010; 89 | overflow: hidden; 90 | } 91 | 92 | /* Type */ 93 | 94 | html { 95 | font-size: 16pt; 96 | } 97 | 98 | @media screen and (max-width: 1680px) { 99 | 100 | html { 101 | font-size: 12pt; 102 | } 103 | 104 | } 105 | 106 | @media screen and (max-width: 1280px) { 107 | 108 | html { 109 | font-size: 11pt; 110 | } 111 | 112 | } 113 | 114 | body { 115 | background-color: #fff; 116 | color: #aaa; 117 | } 118 | 119 | body, input, select, textarea { 120 | font-family: "Roboto", Helvetica, sans-serif; 121 | font-weight: 400; 122 | line-height: 1.65; 123 | font-size: 1em; 124 | color: #aaa; 125 | } 126 | 127 | a { 128 | -moz-transition: color 0.25s ease, border-bottom-color 0.25s ease; 129 | -webkit-transition: color 0.25s ease, border-bottom-color 0.25s ease; 130 | -ms-transition: color 0.25s ease, border-bottom-color 0.25s ease; 131 | transition: color 0.25s ease, border-bottom-color 0.25s ease; 132 | border-bottom: dotted 1px; 133 | color: inherit; 134 | text-decoration: none; 135 | } 136 | 137 | a:hover { 138 | border-bottom-color: transparent; 139 | color: #00D3B7; 140 | } 141 | 142 | strong, b { 143 | font-weight: 400; 144 | color: #555; 145 | } 146 | 147 | em, i { 148 | font-style: italic; 149 | } 150 | 151 | p { 152 | margin: 0 0 1.25em 0; 153 | } 154 | 155 | h1, h2, h3, h4, h5, h6 { 156 | font-weight: 400; 157 | line-height: 1.25; 158 | margin: 0 0 0.5em 0; 159 | color: #555; 160 | } 161 | 162 | h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { 163 | color: inherit; 164 | text-decoration: none; 165 | } 166 | 167 | h2 { 168 | font-size: 1.25em; 169 | } 170 | 171 | h3 { 172 | font-size: 1em; 173 | } 174 | 175 | h4 { 176 | font-size: 0.9em; 177 | } 178 | 179 | h5 { 180 | font-size: 0.8em; 181 | } 182 | 183 | h6 { 184 | font-size: 0.7em; 185 | } 186 | 187 | sub { 188 | font-size: 0.8em; 189 | position: relative; 190 | top: 0.5em; 191 | } 192 | 193 | sup { 194 | font-size: 0.8em; 195 | position: relative; 196 | top: -0.5em; 197 | } 198 | 199 | blockquote { 200 | border-left: solid 4px #ccc; 201 | font-style: italic; 202 | margin: 0 0 1.25em 0; 203 | padding: 0.3125em 0 0.3125em 1.25em; 204 | } 205 | 206 | code { 207 | border-radius: 4px; 208 | border: solid 1px; 209 | font-family: "Courier New", monospace; 210 | font-size: 0.9em; 211 | margin: 0 0.25em; 212 | padding: 0.25em 0.65em; 213 | border-color: #ccc; 214 | } 215 | 216 | pre { 217 | -webkit-overflow-scrolling: touch; 218 | font-family: "Courier New", monospace; 219 | font-size: 0.9em; 220 | margin: 0 0 1.25em 0; 221 | } 222 | 223 | pre code { 224 | display: block; 225 | padding: 1em 1.5em; 226 | overflow-x: auto; 227 | } 228 | 229 | hr { 230 | border: 0; 231 | border-bottom: solid 1px #ccc; 232 | margin: 1.25em 0; 233 | } 234 | 235 | hr.major { 236 | margin: 1.875em 0; 237 | } 238 | 239 | .align-left { 240 | text-align: left; 241 | } 242 | 243 | .align-center { 244 | text-align: center; 245 | } 246 | 247 | .align-right { 248 | text-align: right; 249 | } 250 | 251 | /* Button */ 252 | 253 | input[type="submit"], 254 | input[type="reset"], 255 | input[type="button"], 256 | button, 257 | .button { 258 | -moz-appearance: none; 259 | -webkit-appearance: none; 260 | -ms-appearance: none; 261 | appearance: none; 262 | -moz-transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out; 263 | -webkit-transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out; 264 | -ms-transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out; 265 | transition: background-color 0.25s ease-in-out, border-color 0.25s ease-in-out, color 0.25s ease-in-out; 266 | background-color: transparent; 267 | border-radius: 4px; 268 | border: solid 1px #ccc; 269 | color: #555; 270 | cursor: pointer; 271 | display: inline-block; 272 | line-height: 1; 273 | padding: 0.75em 1.5em; 274 | text-align: center; 275 | text-decoration: none; 276 | white-space: nowrap; 277 | } 278 | 279 | input[type="submit"]:hover, 280 | input[type="reset"]:hover, 281 | input[type="button"]:hover, 282 | button:hover, 283 | .button:hover { 284 | border-color: #00D3B7; 285 | color: #00D3B7; 286 | } 287 | 288 | input[type="submit"]:hover:active, 289 | input[type="reset"]:hover:active, 290 | input[type="button"]:hover:active, 291 | button:hover:active, 292 | .button:hover:active { 293 | background-color: rgba(0, 211, 183, 0.15); 294 | } 295 | 296 | input[type="submit"].icon, 297 | input[type="reset"].icon, 298 | input[type="button"].icon, 299 | button.icon, 300 | .button.icon { 301 | padding-left: 1.35em; 302 | } 303 | 304 | input[type="submit"].icon:before, 305 | input[type="reset"].icon:before, 306 | input[type="button"].icon:before, 307 | button.icon:before, 308 | .button.icon:before { 309 | margin-right: 0.5em; 310 | } 311 | 312 | input[type="submit"].fit, 313 | input[type="reset"].fit, 314 | input[type="button"].fit, 315 | button.fit, 316 | .button.fit { 317 | display: block; 318 | margin: 0 0 0.625em 0; 319 | width: 100%; 320 | } 321 | 322 | input[type="submit"].small, 323 | input[type="reset"].small, 324 | input[type="button"].small, 325 | button.small, 326 | .button.small { 327 | font-size: 0.8em; 328 | } 329 | 330 | input[type="submit"].big, 331 | input[type="reset"].big, 332 | input[type="button"].big, 333 | button.big, 334 | .button.big { 335 | font-size: 1.35em; 336 | } 337 | 338 | input[type="submit"].disabled, input[type="submit"]:disabled, 339 | input[type="reset"].disabled, 340 | input[type="reset"]:disabled, 341 | input[type="button"].disabled, 342 | input[type="button"]:disabled, 343 | button.disabled, 344 | button:disabled, 345 | .button.disabled, 346 | .button:disabled { 347 | -moz-pointer-events: none; 348 | -webkit-pointer-events: none; 349 | -ms-pointer-events: none; 350 | pointer-events: none; 351 | opacity: 0.25; 352 | } 353 | 354 | /* Form */ 355 | 356 | form { 357 | margin: 0 0 1.25em 0; 358 | } 359 | 360 | label { 361 | color: #555; 362 | display: block; 363 | font-size: 0.9em; 364 | font-weight: 400; 365 | margin: 0 0 0.625em 0; 366 | } 367 | 368 | input[type="text"], 369 | input[type="password"], 370 | input[type="email"], 371 | select, 372 | textarea { 373 | -moz-appearance: none; 374 | -webkit-appearance: none; 375 | -ms-appearance: none; 376 | appearance: none; 377 | background-color: transparent; 378 | border-radius: 4px; 379 | border: solid 1px #ccc; 380 | color: inherit; 381 | display: block; 382 | outline: 0; 383 | padding: 0 0.75em; 384 | text-decoration: none; 385 | width: 100%; 386 | } 387 | 388 | input[type="text"]:invalid, 389 | input[type="password"]:invalid, 390 | input[type="email"]:invalid, 391 | select:invalid, 392 | textarea:invalid { 393 | box-shadow: none; 394 | } 395 | 396 | input[type="text"]:focus, 397 | input[type="password"]:focus, 398 | input[type="email"]:focus, 399 | select:focus, 400 | textarea:focus { 401 | border-color: #00D3B7; 402 | } 403 | 404 | .select-wrapper { 405 | text-decoration: none; 406 | display: block; 407 | position: relative; 408 | } 409 | 410 | .select-wrapper:before { 411 | -moz-osx-font-smoothing: grayscale; 412 | -webkit-font-smoothing: antialiased; 413 | font-family: FontAwesome; 414 | font-style: normal; 415 | font-weight: normal; 416 | text-transform: none !important; 417 | } 418 | 419 | .select-wrapper:before { 420 | color: #ccc; 421 | content: '\f107'; 422 | display: block; 423 | height: 2.75em; 424 | line-height: 2.75em; 425 | pointer-events: none; 426 | position: absolute; 427 | right: 0; 428 | text-align: center; 429 | top: 0; 430 | width: 2.75em; 431 | } 432 | 433 | .select-wrapper select::-ms-expand { 434 | display: none; 435 | } 436 | 437 | input[type="text"], 438 | input[type="password"], 439 | input[type="email"], 440 | select { 441 | height: 2.75em; 442 | } 443 | 444 | textarea { 445 | padding: 0.75em 1em; 446 | } 447 | 448 | input[type="checkbox"], 449 | input[type="radio"] { 450 | -moz-appearance: none; 451 | -webkit-appearance: none; 452 | -ms-appearance: none; 453 | appearance: none; 454 | display: block; 455 | float: left; 456 | margin-right: -2em; 457 | opacity: 0; 458 | width: 1em; 459 | z-index: -1; 460 | } 461 | 462 | input[type="checkbox"] + label, 463 | input[type="radio"] + label { 464 | text-decoration: none; 465 | color: #aaa; 466 | cursor: pointer; 467 | display: inline-block; 468 | font-size: 1em; 469 | font-weight: 400; 470 | margin: 0; 471 | padding-left: 2.4em; 472 | padding-right: 0.75em; 473 | position: relative; 474 | } 475 | 476 | input[type="checkbox"] + label:before, 477 | input[type="radio"] + label:before { 478 | -moz-osx-font-smoothing: grayscale; 479 | -webkit-font-smoothing: antialiased; 480 | font-family: FontAwesome; 481 | font-style: normal; 482 | font-weight: normal; 483 | text-transform: none !important; 484 | } 485 | 486 | input[type="checkbox"] + label:before, 487 | input[type="radio"] + label:before { 488 | background: transparent; 489 | border-radius: 4px; 490 | border: solid 1px #ccc; 491 | content: ''; 492 | display: inline-block; 493 | height: 1.65em; 494 | left: 0; 495 | line-height: 1.58125em; 496 | position: absolute; 497 | text-align: center; 498 | top: 0; 499 | width: 1.65em; 500 | } 501 | 502 | input[type="checkbox"]:checked + label:before, 503 | input[type="radio"]:checked + label:before { 504 | background-color: #555; 505 | border-color: #555; 506 | color: #fff; 507 | content: '\f00c'; 508 | } 509 | 510 | input[type="checkbox"]:focus + label:before, 511 | input[type="radio"]:focus + label:before { 512 | border-color: #00D3B7; 513 | } 514 | 515 | input[type="checkbox"] + label:before { 516 | border-radius: 4px; 517 | } 518 | 519 | input[type="radio"] + label:before { 520 | border-radius: 100%; 521 | } 522 | 523 | ::-webkit-input-placeholder { 524 | opacity: 1.0; 525 | color: #ccc !important; 526 | } 527 | 528 | :-moz-placeholder { 529 | opacity: 1.0; 530 | color: #ccc !important; 531 | } 532 | 533 | ::-moz-placeholder { 534 | opacity: 1.0; 535 | color: #ccc !important; 536 | } 537 | 538 | :-ms-input-placeholder { 539 | opacity: 1.0; 540 | color: #ccc !important; 541 | } 542 | 543 | .formerize-placeholder { 544 | opacity: 1.0; 545 | color: #ccc !important; 546 | } 547 | 548 | .field { 549 | margin: 0 0 1.25em 0; 550 | } 551 | 552 | /* Icon */ 553 | 554 | .icon { 555 | text-decoration: none; 556 | border-bottom: none; 557 | position: relative; 558 | } 559 | 560 | .icon:before { 561 | -moz-osx-font-smoothing: grayscale; 562 | -webkit-font-smoothing: antialiased; 563 | font-family: FontAwesome; 564 | font-style: normal; 565 | font-weight: normal; 566 | text-transform: none !important; 567 | } 568 | 569 | .icon > .label { 570 | display: none; 571 | } 572 | 573 | /* List */ 574 | 575 | ol { 576 | list-style: decimal; 577 | margin: 0 0 1.25em 0; 578 | padding-left: 1.25em; 579 | } 580 | 581 | ol li { 582 | padding-left: 0.25em; 583 | } 584 | 585 | ul { 586 | list-style: disc; 587 | margin: 0 0 1.25em 0; 588 | padding-left: 1em; 589 | } 590 | 591 | ul li { 592 | padding-left: 0.5em; 593 | } 594 | 595 | ul.alt { 596 | list-style: none; 597 | padding-left: 0; 598 | } 599 | 600 | ul.alt li { 601 | border-top: solid 1px #ccc; 602 | padding: 0.5em 0; 603 | } 604 | 605 | ul.alt li:first-child { 606 | border-top: 0; 607 | padding-top: 0; 608 | } 609 | 610 | ul.icons { 611 | cursor: default; 612 | list-style: none; 613 | padding-left: 0; 614 | } 615 | 616 | ul.icons li { 617 | display: inline-block; 618 | padding: 0 1em 0 0; 619 | } 620 | 621 | ul.icons li:last-child { 622 | padding-right: 0; 623 | } 624 | 625 | ul.icons li .icon:before { 626 | font-size: 1.5rem; 627 | } 628 | 629 | ul.actions { 630 | cursor: default; 631 | list-style: none; 632 | padding-left: 0; 633 | } 634 | 635 | ul.actions li { 636 | display: inline-block; 637 | padding: 0 0.625em 0 0; 638 | vertical-align: middle; 639 | } 640 | 641 | ul.actions li:last-child { 642 | padding-right: 0; 643 | } 644 | 645 | ul.actions.small li { 646 | padding: 0 0.3125em 0 0; 647 | } 648 | 649 | ul.actions.vertical li { 650 | display: block; 651 | padding: 0.625em 0 0 0; 652 | } 653 | 654 | ul.actions.vertical li:first-child { 655 | padding-top: 0; 656 | } 657 | 658 | ul.actions.vertical li > * { 659 | margin-bottom: 0; 660 | } 661 | 662 | ul.actions.vertical.small li { 663 | padding: 0.3125em 0 0 0; 664 | } 665 | 666 | ul.actions.vertical.small li:first-child { 667 | padding-top: 0; 668 | } 669 | 670 | ul.actions.fit { 671 | display: table; 672 | margin-left: -0.625em; 673 | padding: 0; 674 | table-layout: fixed; 675 | width: calc(100% + 0.625em); 676 | } 677 | 678 | ul.actions.fit li { 679 | display: table-cell; 680 | padding: 0 0 0 0.625em; 681 | } 682 | 683 | ul.actions.fit li > * { 684 | margin-bottom: 0; 685 | } 686 | 687 | ul.actions.fit.small { 688 | margin-left: -0.3125em; 689 | width: calc(100% + 0.3125em); 690 | } 691 | 692 | ul.actions.fit.small li { 693 | padding: 0 0 0 0.3125em; 694 | } 695 | 696 | dl { 697 | margin: 0 0 1.25em 0; 698 | } 699 | 700 | dl dt { 701 | display: block; 702 | font-weight: 400; 703 | margin: 0 0 0.625em 0; 704 | } 705 | 706 | dl dd { 707 | margin-left: 1.25em; 708 | } 709 | 710 | /* Main */ 711 | 712 | #main { 713 | -moz-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s; 714 | -webkit-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s; 715 | -ms-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s; 716 | transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s; 717 | -webkit-overflow-scrolling: touch; 718 | position: fixed; 719 | top: 0; 720 | width: 22.5em; 721 | height: 100%; 722 | background: #fff; 723 | outline: 0; 724 | overflow-x: hidden; 725 | overflow-y: auto; 726 | text-align: right; 727 | visibility: visible; 728 | z-index: 10000; 729 | right: 0; 730 | } 731 | 732 | #main .toggle { 733 | -webkit-tap-highlight-color: transparent; 734 | position: absolute; 735 | top: 0; 736 | width: 4em; 737 | height: 4em; 738 | background-image: url("images/close-small-alt.svg"); 739 | background-repeat: no-repeat; 740 | background-size: 32px 32px; 741 | cursor: pointer; 742 | display: none; 743 | z-index: 1; 744 | background-position: 0.5em 0.5em; 745 | left: 0; 746 | } 747 | 748 | body.fullscreen #main { 749 | visibility: hidden; 750 | right: -22.5em; 751 | } 752 | 753 | body.is-loading-1 #main { 754 | opacity: 0; 755 | right: -2em; 756 | } 757 | 758 | @media screen and (max-width: 1280px) { 759 | 760 | #main { 761 | width: 19em; 762 | } 763 | 764 | body.fullscreen #main { 765 | right: -19em; 766 | } 767 | 768 | } 769 | 770 | @media screen and (max-width: 980px) { 771 | 772 | #main { 773 | background: rgba(255, 255, 255, 0.925); 774 | } 775 | 776 | #main .toggle { 777 | display: block; 778 | } 779 | 780 | } 781 | 782 | @media screen and (max-width: 480px) { 783 | 784 | #main { 785 | -moz-transition: opacity 0.5s ease, visibility 0.5s; 786 | -webkit-transition: opacity 0.5s ease, visibility 0.5s; 787 | -ms-transition: opacity 0.5s ease, visibility 0.5s; 788 | transition: opacity 0.5s ease, visibility 0.5s; 789 | width: 100%; 790 | background: #fff; 791 | text-align: center; 792 | } 793 | 794 | body.is-loading-1 #main { 795 | left: auto !important; 796 | right: auto !important; 797 | } 798 | 799 | body.fullscreen #main { 800 | left: auto !important; 801 | right: auto !important; 802 | opacity: 0; 803 | } 804 | 805 | #main .toggle { 806 | display: none; 807 | } 808 | 809 | } 810 | 811 | /* Header */ 812 | 813 | #header { 814 | padding: 3em 2.25em 1.75em 2.25em ; 815 | } 816 | 817 | #header h1 { 818 | font-size: 2.25em; 819 | font-weight: 700; 820 | } 821 | 822 | /* Footer */ 823 | 824 | #footer { 825 | padding: 2.25em 2.25em 1em 2.25em ; 826 | } 827 | 828 | #footer .copyright { 829 | list-style: none; 830 | padding: 0; 831 | } 832 | 833 | #footer .copyright li { 834 | display: inline-block; 835 | font-size: 0.8em; 836 | margin-left: 0.35em; 837 | padding: 0; 838 | } 839 | 840 | #footer .copyright li:first-child { 841 | margin-left: 0; 842 | } 843 | 844 | /* Thumbnails */ 845 | 846 | #thumbnails { 847 | display: -moz-flex; 848 | display: -webkit-flex; 849 | display: -ms-flex; 850 | display: flex; 851 | -moz-flex-wrap: wrap; 852 | -webkit-flex-wrap: wrap; 853 | -ms-flex-wrap: wrap; 854 | flex-wrap: wrap; 855 | padding: 0 0.75em; 856 | } 857 | 858 | #thumbnails article { 859 | position: relative; 860 | width: 50%; 861 | background: #101010; 862 | outline: 0; 863 | } 864 | 865 | #thumbnails article .thumbnail { 866 | -webkit-tap-highlight-color: transparent; 867 | display: block; 868 | position: relative; 869 | border: 0; 870 | outline: 0; 871 | } 872 | 873 | #thumbnails article .thumbnail img { 874 | display: block; 875 | width: 100%; 876 | } 877 | 878 | #thumbnails article .thumbnail:before { 879 | -moz-pointer-events: none; 880 | -webkit-pointer-events: none; 881 | -ms-pointer-events: none; 882 | pointer-events: none; 883 | -moz-transition: opacity 0.25s ease; 884 | -webkit-transition: opacity 0.25s ease; 885 | -ms-transition: opacity 0.25s ease; 886 | transition: opacity 0.25s ease; 887 | content: ''; 888 | position: absolute; 889 | left: 0; 890 | top: 0; 891 | width: 100%; 892 | height: 100%; 893 | box-shadow: inset 0 0 0 2px #00D3B7, inset 0 0 0px 3px rgba(0, 0, 0, 0.15); 894 | opacity: 0; 895 | z-index: 1; 896 | } 897 | 898 | #thumbnails article .thumbnail:focus:before { 899 | opacity: 0.5; 900 | } 901 | 902 | #thumbnails article h2, #thumbnails article p { 903 | display: none; 904 | } 905 | 906 | #thumbnails article.active .thumbnail:before { 907 | opacity: 1; 908 | } 909 | 910 | @media screen and (max-width: 480px) { 911 | 912 | #thumbnails article .thumbnail:before { 913 | display: none; 914 | } 915 | 916 | } 917 | 918 | /* Viewer */ 919 | 920 | @-moz-keyframes spinner { 921 | 0% { 922 | -moz-transform: rotate(0deg); 923 | -webkit-transform: rotate(0deg); 924 | -ms-transform: rotate(0deg); 925 | transform: rotate(0deg); 926 | } 927 | 928 | 100% { 929 | -moz-transform: rotate(360deg); 930 | -webkit-transform: rotate(360deg); 931 | -ms-transform: rotate(360deg); 932 | transform: rotate(360deg); 933 | } 934 | } 935 | 936 | @-webkit-keyframes spinner { 937 | 0% { 938 | -moz-transform: rotate(0deg); 939 | -webkit-transform: rotate(0deg); 940 | -ms-transform: rotate(0deg); 941 | transform: rotate(0deg); 942 | } 943 | 944 | 100% { 945 | -moz-transform: rotate(360deg); 946 | -webkit-transform: rotate(360deg); 947 | -ms-transform: rotate(360deg); 948 | transform: rotate(360deg); 949 | } 950 | } 951 | 952 | @-ms-keyframes spinner { 953 | 0% { 954 | -moz-transform: rotate(0deg); 955 | -webkit-transform: rotate(0deg); 956 | -ms-transform: rotate(0deg); 957 | transform: rotate(0deg); 958 | } 959 | 960 | 100% { 961 | -moz-transform: rotate(360deg); 962 | -webkit-transform: rotate(360deg); 963 | -ms-transform: rotate(360deg); 964 | transform: rotate(360deg); 965 | } 966 | } 967 | 968 | @keyframes spinner { 969 | 0% { 970 | -moz-transform: rotate(0deg); 971 | -webkit-transform: rotate(0deg); 972 | -ms-transform: rotate(0deg); 973 | transform: rotate(0deg); 974 | } 975 | 976 | 100% { 977 | -moz-transform: rotate(360deg); 978 | -webkit-transform: rotate(360deg); 979 | -ms-transform: rotate(360deg); 980 | transform: rotate(360deg); 981 | } 982 | } 983 | 984 | #viewer { 985 | -moz-transition: opacity 0.75s ease, width 0.75s ease; 986 | -webkit-transition: opacity 0.75s ease, width 0.75s ease; 987 | -ms-transition: opacity 0.75s ease, width 0.75s ease; 988 | transition: opacity 0.75s ease, width 0.75s ease; 989 | position: absolute; 990 | top: 0; 991 | width: calc(100% - 22.5em); 992 | height: 100%; 993 | left: 0; 994 | } 995 | 996 | #viewer .inner { 997 | -moz-pointer-events: none; 998 | -webkit-pointer-events: none; 999 | -ms-pointer-events: none; 1000 | pointer-events: none; 1001 | position: absolute; 1002 | top: 0; 1003 | left: 0; 1004 | width: 100%; 1005 | height: 100%; 1006 | z-index: 2; 1007 | } 1008 | 1009 | #viewer .inner > * { 1010 | -moz-pointer-events: auto; 1011 | -webkit-pointer-events: auto; 1012 | -ms-pointer-events: auto; 1013 | pointer-events: auto; 1014 | } 1015 | 1016 | #viewer .inner:before { 1017 | background-image: -moz-linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), -moz-linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)); 1018 | background-image: -webkit-linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), -webkit-linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)); 1019 | background-image: -ms-linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), -ms-linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)); 1020 | background-image: linear-gradient(left, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)), linear-gradient(right, rgba(16,16,16,0.2), rgba(16,16,16,0) 10em, rgba(16,16,16,0)); 1021 | content: ''; 1022 | display: block; 1023 | position: absolute; 1024 | top: 0; 1025 | left: 0; 1026 | width: 100%; 1027 | height: 100%; 1028 | } 1029 | 1030 | #viewer .inner .toggle { 1031 | -webkit-tap-highlight-color: transparent; 1032 | position: absolute; 1033 | top: 0; 1034 | width: 4em; 1035 | height: 4em; 1036 | background-image: url("images/close.svg"); 1037 | background-repeat: no-repeat; 1038 | background-size: 64px 64px; 1039 | cursor: pointer; 1040 | z-index: 1; 1041 | right: 0; 1042 | background-position: calc(100% - 0.75em) 0.75em; 1043 | } 1044 | 1045 | #viewer .inner .nav-next, 1046 | #viewer .inner .nav-previous { 1047 | -webkit-tap-highlight-color: transparent; 1048 | position: absolute; 1049 | top: 50%; 1050 | width: 6em; 1051 | height: 6em; 1052 | margin-top: -3em; 1053 | background-image: url("images/arrow.svg"); 1054 | background-position: center; 1055 | background-repeat: no-repeat; 1056 | background-size: contain; 1057 | cursor: pointer; 1058 | } 1059 | 1060 | #viewer .inner .nav-previous { 1061 | -moz-transform: scaleX(-1); 1062 | -webkit-transform: scaleX(-1); 1063 | -ms-transform: scaleX(-1); 1064 | transform: scaleX(-1); 1065 | left: 0; 1066 | } 1067 | 1068 | #viewer .inner .nav-next { 1069 | right: 0; 1070 | } 1071 | 1072 | #viewer .slide { 1073 | -moz-transition: opacity 0.5s ease-in-out; 1074 | -webkit-transition: opacity 0.5s ease-in-out; 1075 | -ms-transition: opacity 0.5s ease-in-out; 1076 | transition: opacity 0.5s ease-in-out; 1077 | position: absolute; 1078 | top: 0; 1079 | left: 0; 1080 | width: 100%; 1081 | height: 100%; 1082 | opacity: 1; 1083 | z-index: 1; 1084 | } 1085 | 1086 | #viewer .slide .caption { 1087 | background-image: -moz-linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0)); 1088 | background-image: -webkit-linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0)); 1089 | background-image: -ms-linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0)); 1090 | background-image: linear-gradient(bottom, rgba(16,16,16,0.75), rgba(16,16,16,0.25) 80%, rgba(16,16,16,0)); 1091 | padding: 2em 2em 0.75em 2em ; 1092 | position: absolute; 1093 | bottom: 0; 1094 | left: 0; 1095 | width: 100%; 1096 | color: rgba(255, 255, 255, 0.5); 1097 | z-index: 1; 1098 | } 1099 | 1100 | #viewer .slide .caption h2, #viewer .slide .caption h3, #viewer .slide .caption h4, #viewer .slide .caption h5, #viewer .slide .caption h6 { 1101 | color: #fff; 1102 | } 1103 | 1104 | #viewer .slide .image { 1105 | -moz-transition: opacity 0.5s ease-in-out; 1106 | -webkit-transition: opacity 0.5s ease-in-out; 1107 | -ms-transition: opacity 0.5s ease-in-out; 1108 | transition: opacity 0.5s ease-in-out; 1109 | position: absolute; 1110 | top: 0; 1111 | left: 0; 1112 | width: 100%; 1113 | height: 100%; 1114 | background-repeat: no-repeat; 1115 | background-size: cover; 1116 | opacity: 0; 1117 | } 1118 | 1119 | #viewer .slide:before { 1120 | -moz-animation: spinner 1s linear infinite; 1121 | -webkit-animation: spinner 1s linear infinite; 1122 | -ms-animation: spinner 1s linear infinite; 1123 | animation: spinner 1s linear infinite; 1124 | -moz-transition: opacity 0.5s ease-in-out; 1125 | -webkit-transition: opacity 0.5s ease-in-out; 1126 | -ms-transition: opacity 0.5s ease-in-out; 1127 | transition: opacity 0.5s ease-in-out; 1128 | content: ''; 1129 | display: block; 1130 | position: absolute; 1131 | top: 50%; 1132 | left: 50%; 1133 | width: 3em; 1134 | height: 3em; 1135 | background-image: url("images/spinner.svg"); 1136 | background-position: center; 1137 | background-repeat: no-repeat; 1138 | background-size: contain; 1139 | margin: -1.5em 0 0 -1.5em; 1140 | opacity: 0; 1141 | } 1142 | 1143 | #viewer .slide.loading:before { 1144 | opacity: 1; 1145 | } 1146 | 1147 | #viewer .slide.active .image { 1148 | opacity: 1; 1149 | } 1150 | 1151 | body.fullscreen #viewer { 1152 | width: 100%; 1153 | } 1154 | 1155 | body.fullscreen #viewer .inner .toggle { 1156 | background-image: url("images/open.svg"); 1157 | } 1158 | 1159 | body.is-loading-1 #viewer { 1160 | opacity: 0; 1161 | } 1162 | 1163 | body.is-loading-2 #viewer .slide { 1164 | opacity: 0; 1165 | } 1166 | 1167 | @media screen and (max-width: 1280px) { 1168 | 1169 | #viewer { 1170 | width: calc(100% - 19em); 1171 | } 1172 | 1173 | } 1174 | 1175 | @media screen and (max-width: 980px) { 1176 | 1177 | #viewer { 1178 | width: 100%; 1179 | } 1180 | 1181 | #viewer .inner .toggle { 1182 | -moz-transition: opacity 0.75s ease; 1183 | -webkit-transition: opacity 0.75s ease; 1184 | -ms-transition: opacity 0.75s ease; 1185 | transition: opacity 0.75s ease; 1186 | background-image: url("images/open.svg"); 1187 | opacity: 0; 1188 | right: 0; 1189 | } 1190 | 1191 | body.fullscreen #viewer .inner .toggle { 1192 | opacity: 1; 1193 | } 1194 | 1195 | } 1196 | 1197 | @media screen and (max-width: 736px) { 1198 | 1199 | #viewer .inner .toggle { 1200 | background-size: 32px 32px; 1201 | } 1202 | 1203 | #viewer .inner .nav-next, 1204 | #viewer .inner .nav-previous { 1205 | background-image: url("images/arrow-small.svg"); 1206 | background-size: 32px 32px; 1207 | } 1208 | 1209 | body.fullscreen #viewer .inner .toggle { 1210 | background-image: url("images/open-small.svg"); 1211 | } 1212 | 1213 | } 1214 | 1215 | @media screen and (max-width: 480px) { 1216 | 1217 | #viewer { 1218 | -moz-transition: opacity 0.5s ease; 1219 | -webkit-transition: opacity 0.5s ease; 1220 | -ms-transition: opacity 0.5s ease; 1221 | transition: opacity 0.5s ease; 1222 | -moz-transition-delay: 0s; 1223 | -webkit-transition-delay: 0s; 1224 | -ms-transition-delay: 0s; 1225 | transition-delay: 0s; 1226 | opacity: 0; 1227 | } 1228 | 1229 | #viewer .inner .toggle { 1230 | background-image: url("images/close-small.svg") !important; 1231 | background-size: 32px 32px; 1232 | } 1233 | 1234 | body.fullscreen #viewer { 1235 | -moz-transition-delay: 0.5s; 1236 | -webkit-transition-delay: 0.5s; 1237 | -ms-transition-delay: 0.5s; 1238 | transition-delay: 0.5s; 1239 | opacity: 1; 1240 | } 1241 | 1242 | } -------------------------------------------------------------------------------- /static/css/noscript.css: -------------------------------------------------------------------------------- 1 | /* 2 | Lens by HTML5 UP 3 | html5up.net | @ajlkn 4 | Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) 5 | */ 6 | 7 | /* Main */ 8 | 9 | #main { 10 | opacity: 1 !important; 11 | right: 0 !important; 12 | } 13 | 14 | body:before { 15 | content: 'Javascript is disabled :('; 16 | display: block; 17 | position: absolute; 18 | top: 50%; 19 | width: calc(100% - 22.5em * 0.333333333); 20 | height: 4em; 21 | margin-top: -2em; 22 | color: #272727; 23 | cursor: default; 24 | font-size: 3em; 25 | line-height: 4em; 26 | text-align: center; 27 | white-space: nowrap; 28 | left: 0; 29 | } -------------------------------------------------------------------------------- /static/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /static/images/fulls/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/01.jpg -------------------------------------------------------------------------------- /static/images/fulls/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/02.jpg -------------------------------------------------------------------------------- /static/images/fulls/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/03.jpg -------------------------------------------------------------------------------- /static/images/fulls/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/04.jpg -------------------------------------------------------------------------------- /static/images/fulls/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/05.jpg -------------------------------------------------------------------------------- /static/images/fulls/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/06.jpg -------------------------------------------------------------------------------- /static/images/fulls/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/07.jpg -------------------------------------------------------------------------------- /static/images/fulls/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/08.jpg -------------------------------------------------------------------------------- /static/images/fulls/09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/09.jpg -------------------------------------------------------------------------------- /static/images/fulls/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/10.jpg -------------------------------------------------------------------------------- /static/images/fulls/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/11.jpg -------------------------------------------------------------------------------- /static/images/fulls/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/fulls/12.jpg -------------------------------------------------------------------------------- /static/images/thumbs/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/01.jpg -------------------------------------------------------------------------------- /static/images/thumbs/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/02.jpg -------------------------------------------------------------------------------- /static/images/thumbs/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/03.jpg -------------------------------------------------------------------------------- /static/images/thumbs/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/04.jpg -------------------------------------------------------------------------------- /static/images/thumbs/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/05.jpg -------------------------------------------------------------------------------- /static/images/thumbs/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/06.jpg -------------------------------------------------------------------------------- /static/images/thumbs/07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/07.jpg -------------------------------------------------------------------------------- /static/images/thumbs/08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/08.jpg -------------------------------------------------------------------------------- /static/images/thumbs/09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/09.jpg -------------------------------------------------------------------------------- /static/images/thumbs/10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/10.jpg -------------------------------------------------------------------------------- /static/images/thumbs/11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/11.jpg -------------------------------------------------------------------------------- /static/images/thumbs/12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cosmicjs/vuejs-photo-gallery/903c92091eb86a34ede45258c2378e3861ce1763/static/images/thumbs/12.jpg -------------------------------------------------------------------------------- /static/js/ie/PIE.htc: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 96 | 97 | -------------------------------------------------------------------------------- /static/js/ie/html5shiv.js: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Shiv v3.6.2 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed 3 | */ 4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag(); 5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x"; 6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode|| 7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment(); 8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d #mq-test-1 { width: 42px; }',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){v(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},g=function(a){return a.replace(c.regex.minmaxwh,"").match(c.regex.other)};if(c.ajax=f,c.queue=d,c.unsupportedmq=g,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,comments:/\/\*[^*]*\*+([^/][^*]*\*+)*\//gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,maxw:/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/,minmaxwh:/\(\s*m(in|ax)\-(height|width)\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/gi,other:/\([^\)]*\)/g},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var h,i,j,k=a.document,l=k.documentElement,m=[],n=[],o=[],p={},q=30,r=k.getElementsByTagName("head")[0]||l,s=k.getElementsByTagName("base")[0],t=r.getElementsByTagName("link"),u=function(){var a,b=k.createElement("div"),c=k.body,d=l.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=k.createElement("body"),c.style.background="none"),l.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&l.insertBefore(c,l.firstChild),a=b.offsetWidth,f?l.removeChild(c):c.removeChild(b),l.style.fontSize=d,e&&(c.style.fontSize=e),a=j=parseFloat(a)},v=function(b){var c="clientWidth",d=l[c],e="CSS1Compat"===k.compatMode&&d||k.body[c]||d,f={},g=t[t.length-1],p=(new Date).getTime();if(b&&h&&q>p-h)return a.clearTimeout(i),i=a.setTimeout(v,q),void 0;h=p;for(var s in m)if(m.hasOwnProperty(s)){var w=m[s],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?j||u():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?j||u():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(n[w.rules]))}for(var C in o)o.hasOwnProperty(C)&&o[C]&&o[C].parentNode===r&&r.removeChild(o[C]);o.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=k.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,r.insertBefore(E,g.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(k.createTextNode(F)),o.push(E)}},w=function(a,b,d){var e=a.replace(c.regex.comments,"").replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},i=!f&&d;b.length&&(b+="/"),i&&(f=1);for(var j=0;f>j;j++){var k,l,o,p;i?(k=d,n.push(h(a))):(k=e[j].match(c.regex.findStyles)&&RegExp.$1,n.push(RegExp.$2&&h(RegExp.$2))),o=k.split(","),p=o.length;for(var q=0;p>q;q++)l=o[q],g(l)||m.push({media:l.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:n.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}v()},x=function(){if(d.length){var b=d.shift();f(b.href,function(c){w(c,b.href,b.media),p[b.href]=!0,a.setTimeout(function(){x()},0)})}},y=function(){for(var b=0;b' + 151 | '
' + 152 | '
' + 153 | '
' + 154 | '
' + 155 | '
' + 156 | '' 157 | ).appendTo(_.$body); 158 | 159 | // Nav. 160 | _.$navNext = _.$viewer.find('.nav-next'); 161 | _.$navPrevious = _.$viewer.find('.nav-previous'); 162 | 163 | // Main wrapper. 164 | _.$main = $('#main'); 165 | 166 | // Toggle. 167 | $('
') 168 | .appendTo(_.$main); 169 | 170 | _.$toggle = $('.toggle'); 171 | 172 | // IE<9: Fix viewer width (no calc support). 173 | if (skel.vars.IEVersion < 9) 174 | _.$window 175 | .on('resize', function() { 176 | window.setTimeout(function() { 177 | _.$viewer.css('width', _.$window.width() - _.$main.width()); 178 | }, 100); 179 | }) 180 | .trigger('resize'); 181 | 182 | }, 183 | 184 | /** 185 | * Initialize events. 186 | */ 187 | initEvents: function() { 188 | 189 | // Window. 190 | 191 | // Remove is-loading-* classes on load. 192 | _.$window.on('load', function() { 193 | 194 | _.$body.removeClass('is-loading-0'); 195 | 196 | window.setTimeout(function() { 197 | _.$body.removeClass('is-loading-1'); 198 | }, 100); 199 | 200 | window.setTimeout(function() { 201 | _.$body.removeClass('is-loading-2'); 202 | }, 100 + Math.max(_.settings.layoutDuration - 150, 0)); 203 | 204 | }); 205 | 206 | // Disable animations/transitions on resize. 207 | var resizeTimeout; 208 | 209 | _.$window.on('resize', function() { 210 | 211 | _.$body.addClass('is-loading-0'); 212 | window.clearTimeout(resizeTimeout); 213 | 214 | resizeTimeout = window.setTimeout(function() { 215 | _.$body.removeClass('is-loading-0'); 216 | }, 100); 217 | 218 | }); 219 | 220 | // Viewer. 221 | 222 | // Hide main wrapper on tap (<= medium only). 223 | _.$viewer.on('touchend', function() { 224 | 225 | if (skel.breakpoint('medium').active) 226 | _.hide(); 227 | 228 | }); 229 | 230 | // Touch gestures. 231 | _.$viewer 232 | .on('touchstart', function(event) { 233 | 234 | // Record start position. 235 | _.$viewer.touchPosX = event.originalEvent.touches[0].pageX; 236 | _.$viewer.touchPosY = event.originalEvent.touches[0].pageY; 237 | 238 | }) 239 | .on('touchmove', function(event) { 240 | 241 | // No start position recorded? Bail. 242 | if (_.$viewer.touchPosX === null 243 | || _.$viewer.touchPosY === null) 244 | return; 245 | 246 | // Calculate stuff. 247 | var diffX = _.$viewer.touchPosX - event.originalEvent.touches[0].pageX, 248 | diffY = _.$viewer.touchPosY - event.originalEvent.touches[0].pageY; 249 | boundary = 20, 250 | delta = 50; 251 | 252 | // Swipe left (next). 253 | if ( (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta) ) 254 | _.next(); 255 | 256 | // Swipe right (previous). 257 | else if ( (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)) ) 258 | _.previous(); 259 | 260 | // Overscroll fix. 261 | var th = _.$viewer.outerHeight(), 262 | ts = (_.$viewer.get(0).scrollHeight - _.$viewer.scrollTop()); 263 | 264 | if ((_.$viewer.scrollTop() <= 0 && diffY < 0) 265 | || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { 266 | 267 | event.preventDefault(); 268 | event.stopPropagation(); 269 | 270 | } 271 | 272 | }); 273 | 274 | // Main. 275 | 276 | // Touch gestures. 277 | _.$main 278 | .on('touchstart', function(event) { 279 | 280 | // Bail on xsmall. 281 | if (skel.breakpoint('xsmall').active) 282 | return; 283 | 284 | // Record start position. 285 | _.$main.touchPosX = event.originalEvent.touches[0].pageX; 286 | _.$main.touchPosY = event.originalEvent.touches[0].pageY; 287 | 288 | }) 289 | .on('touchmove', function(event) { 290 | 291 | // Bail on xsmall. 292 | if (skel.breakpoint('xsmall').active) 293 | return; 294 | 295 | // No start position recorded? Bail. 296 | if (_.$main.touchPosX === null 297 | || _.$main.touchPosY === null) 298 | return; 299 | 300 | // Calculate stuff. 301 | var diffX = _.$main.touchPosX - event.originalEvent.touches[0].pageX, 302 | diffY = _.$main.touchPosY - event.originalEvent.touches[0].pageY; 303 | boundary = 20, 304 | delta = 50, 305 | result = false; 306 | 307 | // Swipe to close. 308 | switch (_.settings.mainSide) { 309 | 310 | case 'left': 311 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); 312 | break; 313 | 314 | case 'right': 315 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); 316 | break; 317 | 318 | default: 319 | break; 320 | 321 | } 322 | 323 | if (result) 324 | _.hide(); 325 | 326 | // Overscroll fix. 327 | var th = _.$main.outerHeight(), 328 | ts = (_.$main.get(0).scrollHeight - _.$main.scrollTop()); 329 | 330 | if ((_.$main.scrollTop() <= 0 && diffY < 0) 331 | || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { 332 | 333 | event.preventDefault(); 334 | event.stopPropagation(); 335 | 336 | } 337 | 338 | }); 339 | // Toggle. 340 | _.$toggle.on('click', function() { 341 | _.toggle(); 342 | }); 343 | 344 | // Prevent event from bubbling up to "hide event on tap" event. 345 | _.$toggle.on('touchend', function(event) { 346 | event.stopPropagation(); 347 | }); 348 | 349 | // Nav. 350 | _.$navNext.on('click', function() { 351 | _.next(); 352 | }); 353 | 354 | _.$navPrevious.on('click', function() { 355 | _.previous(); 356 | }); 357 | 358 | // Keyboard shortcuts. 359 | 360 | // Ignore shortcuts within form elements. 361 | _.$body.on('keydown', 'input,select,textarea', function(event) { 362 | event.stopPropagation(); 363 | }); 364 | 365 | _.$window.on('keydown', function(event) { 366 | 367 | // Ignore if xsmall is active. 368 | if (skel.breakpoint('xsmall').active) 369 | return; 370 | 371 | // Check keycode. 372 | if (event.keyCode in _.keys) { 373 | 374 | // Stop other events. 375 | event.stopPropagation(); 376 | event.preventDefault(); 377 | 378 | // Call shortcut. 379 | (_.keys[event.keyCode])(); 380 | 381 | } 382 | 383 | }); 384 | 385 | }, 386 | 387 | /** 388 | * Initialize viewer. 389 | */ 390 | initViewer: function() { 391 | 392 | // Bind thumbnail click event. 393 | _.$thumbnails 394 | .on('click', '.thumbnail', function(event) { 395 | 396 | var $this = $(this); 397 | 398 | // Stop other events. 399 | event.preventDefault(); 400 | event.stopPropagation(); 401 | 402 | // Locked? Blur. 403 | if (_.locked) 404 | $this.blur(); 405 | 406 | // Switch to this thumbnail's slide. 407 | _.switchTo($this.data('index')); 408 | 409 | }); 410 | 411 | // Create slides from thumbnails. 412 | _.$thumbnails.children() 413 | .each(function() { 414 | 415 | var $this = $(this), 416 | $thumbnail = $this.children('.thumbnail'), 417 | s; 418 | 419 | // Slide object. 420 | s = { 421 | $parent: $this, 422 | $slide: null, 423 | $slideImage: null, 424 | $slideCaption: null, 425 | url: $thumbnail.attr('href'), 426 | loaded: false 427 | }; 428 | 429 | // Parent. 430 | $this.attr('tabIndex', '-1'); 431 | 432 | // Slide. 433 | 434 | // Create elements. 435 | s.$slide = $('
'); 436 | 437 | // Image. 438 | s.$slideImage = s.$slide.children('.image'); 439 | 440 | // Set background stuff. 441 | s.$slideImage 442 | .css('background-image', '') 443 | .css('background-position', ($thumbnail.data('position') || 'center')); 444 | 445 | // Caption. 446 | s.$slideCaption = s.$slide.find('.caption'); 447 | 448 | // Move everything *except* the thumbnail itself to the caption. 449 | $this.children().not($thumbnail) 450 | .appendTo(s.$slideCaption); 451 | 452 | // Preload? 453 | if (_.settings.preload) { 454 | 455 | // Force image to download. 456 | var $img = $(''); 457 | 458 | // Set slide's background image to it. 459 | s.$slideImage 460 | .css('background-image', 'url(' + s.url + ')'); 461 | 462 | // Mark slide as loaded. 463 | s.$slide.addClass('loaded'); 464 | s.loaded = true; 465 | 466 | } 467 | 468 | // Add to slides array. 469 | _.slides.push(s); 470 | 471 | // Set thumbnail's index. 472 | $thumbnail.data('index', _.slides.length - 1); 473 | 474 | }); 475 | 476 | }, 477 | 478 | /** 479 | * Initialize stuff. 480 | */ 481 | init: function() { 482 | 483 | 484 | // Everything else. 485 | _.initProperties(); 486 | _.initViewer(); 487 | 488 | }, 489 | 490 | /** 491 | * Switch to a specific slide. 492 | * @param {integer} index Index. 493 | */ 494 | switchTo: function(index, noHide) { 495 | 496 | // Already at index and xsmall isn't active? Bail. 497 | if (_.current == index 498 | && !skel.breakpoint('xsmall').active) 499 | return; 500 | 501 | // Locked? Bail. 502 | if (_.locked) 503 | return; 504 | 505 | // Lock. 506 | _.locked = true; 507 | 508 | // Hide main wrapper if medium is active. 509 | if (!noHide 510 | && skel.breakpoint('medium').active 511 | && skel.vars.IEVersion > 8) 512 | _.hide(); 513 | 514 | // Get slides. 515 | var oldSlide = (_.current !== null ? _.slides[_.current] : null), 516 | newSlide = _.slides[index]; 517 | 518 | // Update current. 519 | _.current = index; 520 | 521 | // Deactivate old slide (if there is one). 522 | if (oldSlide) { 523 | 524 | // Thumbnail. 525 | oldSlide.$parent 526 | .removeClass('active'); 527 | 528 | // Slide. 529 | oldSlide.$slide.removeClass('active'); 530 | 531 | } 532 | 533 | // Activate new slide. 534 | 535 | // Thumbnail. 536 | newSlide.$parent 537 | .addClass('active') 538 | .focus(); 539 | 540 | // Slide. 541 | var f = function() { 542 | 543 | // Old slide exists? Detach it. 544 | if (oldSlide) 545 | oldSlide.$slide.detach(); 546 | 547 | // Attach new slide. 548 | newSlide.$slide.appendTo(_.$viewer); 549 | 550 | // New slide not yet loaded? 551 | if (!newSlide.loaded) { 552 | 553 | window.setTimeout(function() { 554 | 555 | // Mark as loading. 556 | newSlide.$slide.addClass('loading'); 557 | 558 | // Wait for it to load. 559 | $('').on('load', function() { 560 | //window.setTimeout(function() { 561 | 562 | // Set background image. 563 | newSlide.$slideImage 564 | .css('background-image', 'url(' + newSlide.url + ')'); 565 | 566 | // Mark as loaded. 567 | newSlide.loaded = true; 568 | newSlide.$slide.removeClass('loading'); 569 | 570 | // Mark as active. 571 | newSlide.$slide.addClass('active'); 572 | 573 | // Unlock. 574 | window.setTimeout(function() { 575 | _.locked = false; 576 | }, 100); 577 | 578 | //}, 1000); 579 | }); 580 | 581 | }, 100); 582 | 583 | } 584 | 585 | // Otherwise ... 586 | else { 587 | 588 | window.setTimeout(function() { 589 | 590 | // Mark as active. 591 | newSlide.$slide.addClass('active'); 592 | 593 | // Unlock. 594 | window.setTimeout(function() { 595 | _.locked = false; 596 | }, 100); 597 | 598 | }, 100); 599 | 600 | } 601 | 602 | }; 603 | 604 | // No old slide? Switch immediately. 605 | if (!oldSlide) 606 | (f)(); 607 | 608 | // Otherwise, wait for old slide to disappear first. 609 | else 610 | window.setTimeout(f, _.settings.slideDuration); 611 | 612 | }, 613 | 614 | /** 615 | * Switches to the next slide. 616 | */ 617 | next: function() { 618 | 619 | // Calculate new index. 620 | var i, c = _.current, l = _.slides.length; 621 | 622 | if (c >= l - 1) 623 | i = 0; 624 | else 625 | i = c + 1; 626 | 627 | // Switch. 628 | _.switchTo(i); 629 | 630 | }, 631 | 632 | /** 633 | * Switches to the previous slide. 634 | */ 635 | previous: function() { 636 | 637 | // Calculate new index. 638 | var i, c = _.current, l = _.slides.length; 639 | 640 | if (c <= 0) 641 | i = l - 1; 642 | else 643 | i = c - 1; 644 | 645 | // Switch. 646 | _.switchTo(i); 647 | 648 | }, 649 | 650 | /** 651 | * Switches to slide "above" current. 652 | */ 653 | up: function() { 654 | 655 | // Fullscreen? Bail. 656 | if (_.$body.hasClass('fullscreen')) 657 | return; 658 | 659 | // Calculate new index. 660 | var i, c = _.current, l = _.slides.length, tpr = _.settings.thumbnailsPerRow; 661 | 662 | if (c <= (tpr - 1)) 663 | i = l - (tpr - 1 - c) - 1; 664 | else 665 | i = c - tpr; 666 | 667 | // Switch. 668 | _.switchTo(i); 669 | 670 | }, 671 | 672 | /** 673 | * Switches to slide "below" current. 674 | */ 675 | down: function() { 676 | 677 | // Fullscreen? Bail. 678 | if (_.$body.hasClass('fullscreen')) 679 | return; 680 | 681 | // Calculate new index. 682 | var i, c = _.current, l = _.slides.length, tpr = _.settings.thumbnailsPerRow; 683 | 684 | if (c >= l - tpr) 685 | i = c - l + tpr; 686 | else 687 | i = c + tpr; 688 | 689 | // Switch. 690 | _.switchTo(i); 691 | 692 | }, 693 | 694 | /** 695 | * Shows the main wrapper. 696 | */ 697 | show: function() { 698 | 699 | // Already visible? Bail. 700 | if (!_.$body.hasClass('fullscreen')) 701 | return; 702 | 703 | // Show main wrapper. 704 | _.$body.removeClass('fullscreen'); 705 | 706 | // Focus. 707 | _.$main.focus(); 708 | 709 | }, 710 | 711 | /** 712 | * Hides the main wrapper. 713 | */ 714 | hide: function() { 715 | 716 | // Already hidden? Bail. 717 | if (_.$body.hasClass('fullscreen')) 718 | return; 719 | 720 | // Hide main wrapper. 721 | _.$body.addClass('fullscreen'); 722 | 723 | // Blur. 724 | _.$main.blur(); 725 | 726 | }, 727 | 728 | /** 729 | * Toggles main wrapper. 730 | */ 731 | toggle: function() { 732 | 733 | if (_.$body.hasClass('fullscreen')) 734 | _.show(); 735 | else 736 | _.hide(); 737 | 738 | }, 739 | 740 | }; return _; })(jQuery); main.init(); -------------------------------------------------------------------------------- /static/js/skel.min.js: -------------------------------------------------------------------------------- 1 | /* skel.js v3.0.1 | (c) skel.io | MIT licensed */ 2 | var skel=function(){"use strict";var t={breakpointIds:null,events:{},isInit:!1,obj:{attachments:{},breakpoints:{},head:null,states:{}},sd:"/",state:null,stateHandlers:{},stateId:"",vars:{},DOMReady:null,indexOf:null,isArray:null,iterate:null,matchesMedia:null,extend:function(e,n){t.iterate(n,function(i){t.isArray(n[i])?(t.isArray(e[i])||(e[i]=[]),t.extend(e[i],n[i])):"object"==typeof n[i]?("object"!=typeof e[i]&&(e[i]={}),t.extend(e[i],n[i])):e[i]=n[i]})},newStyle:function(t){var e=document.createElement("style");return e.type="text/css",e.innerHTML=t,e},_canUse:null,canUse:function(e){t._canUse||(t._canUse=document.createElement("div"));var n=t._canUse.style,i=e.charAt(0).toUpperCase()+e.slice(1);return e in n||"Moz"+i in n||"Webkit"+i in n||"O"+i in n||"ms"+i in n},on:function(e,n){var i=e.split(/[\s]+/);return t.iterate(i,function(e){var a=i[e];if(t.isInit){if("init"==a)return void n();if("change"==a)n();else{var r=a.charAt(0);if("+"==r||"!"==r){var o=a.substring(1);if(o in t.obj.breakpoints)if("+"==r&&t.obj.breakpoints[o].active)n();else if("!"==r&&!t.obj.breakpoints[o].active)return void n()}}}t.events[a]||(t.events[a]=[]),t.events[a].push(n)}),t},trigger:function(e){return t.events[e]&&0!=t.events[e].length?(t.iterate(t.events[e],function(n){t.events[e][n]()}),t):void 0},breakpoint:function(e){return t.obj.breakpoints[e]},breakpoints:function(e){function n(t,e){this.name=this.id=t,this.media=e,this.active=!1,this.wasActive=!1}return n.prototype.matches=function(){return t.matchesMedia(this.media)},n.prototype.sync=function(){this.wasActive=this.active,this.active=this.matches()},t.iterate(e,function(i){t.obj.breakpoints[i]=new n(i,e[i])}),window.setTimeout(function(){t.poll()},0),t},addStateHandler:function(e,n){t.stateHandlers[e]=n},callStateHandler:function(e){var n=t.stateHandlers[e]();t.iterate(n,function(e){t.state.attachments.push(n[e])})},changeState:function(e){t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].sync()}),t.vars.lastStateId=t.stateId,t.stateId=e,t.breakpointIds=t.stateId===t.sd?[]:t.stateId.substring(1).split(t.sd),t.obj.states[t.stateId]?t.state=t.obj.states[t.stateId]:(t.obj.states[t.stateId]={attachments:[]},t.state=t.obj.states[t.stateId],t.iterate(t.stateHandlers,t.callStateHandler)),t.detachAll(t.state.attachments),t.attachAll(t.state.attachments),t.vars.stateId=t.stateId,t.vars.state=t.state,t.trigger("change"),t.iterate(t.obj.breakpoints,function(e){t.obj.breakpoints[e].active?t.obj.breakpoints[e].wasActive||t.trigger("+"+e):t.obj.breakpoints[e].wasActive&&t.trigger("-"+e)})},generateStateConfig:function(e,n){var i={};return t.extend(i,e),t.iterate(t.breakpointIds,function(e){t.extend(i,n[t.breakpointIds[e]])}),i},getStateId:function(){var e="";return t.iterate(t.obj.breakpoints,function(n){var i=t.obj.breakpoints[n];i.matches()&&(e+=t.sd+i.id)}),e},poll:function(){var e="";e=t.getStateId(),""===e&&(e=t.sd),e!==t.stateId&&t.changeState(e)},_attach:null,attach:function(e){var n=t.obj.head,i=e.element;return i.parentNode&&i.parentNode.tagName?!1:(t._attach||(t._attach=n.firstChild),n.insertBefore(i,t._attach.nextSibling),e.permanent&&(t._attach=i),!0)},attachAll:function(e){var n=[];t.iterate(e,function(t){n[e[t].priority]||(n[e[t].priority]=[]),n[e[t].priority].push(e[t])}),n.reverse(),t.iterate(n,function(e){t.iterate(n[e],function(i){t.attach(n[e][i])})})},detach:function(t){var e=t.element;return t.permanent||!e.parentNode||e.parentNode&&!e.parentNode.tagName?!1:(e.parentNode.removeChild(e),!0)},detachAll:function(e){var n={};t.iterate(e,function(t){n[e[t].id]=!0}),t.iterate(t.obj.attachments,function(e){e in n||t.detach(t.obj.attachments[e])})},attachment:function(e){return e in t.obj.attachments?t.obj.attachments[e]:null},newAttachment:function(e,n,i,a){return t.obj.attachments[e]={id:e,element:n,priority:i,permanent:a}},init:function(){t.initMethods(),t.initVars(),t.initEvents(),t.obj.head=document.getElementsByTagName("head")[0],t.isInit=!0,t.trigger("init")},initEvents:function(){t.on("resize",function(){t.poll()}),t.on("orientationChange",function(){t.poll()}),t.DOMReady(function(){t.trigger("ready")}),window.onload&&t.on("load",window.onload),window.onload=function(){t.trigger("load")},window.onresize&&t.on("resize",window.onresize),window.onresize=function(){t.trigger("resize")},window.onorientationchange&&t.on("orientationChange",window.onorientationchange),window.onorientationchange=function(){t.trigger("orientationChange")}},initMethods:function(){document.addEventListener?!function(e,n){t.DOMReady=n()}("domready",function(){function t(t){for(r=1;t=n.shift();)t()}var e,n=[],i=document,a="DOMContentLoaded",r=/^loaded|^c/.test(i.readyState);return i.addEventListener(a,e=function(){i.removeEventListener(a,e),t()}),function(t){r?t():n.push(t)}}):!function(e,n){t.DOMReady=n()}("domready",function(t){function e(t){for(h=1;t=i.shift();)t()}var n,i=[],a=!1,r=document,o=r.documentElement,s=o.doScroll,c="DOMContentLoaded",d="addEventListener",u="onreadystatechange",l="readyState",f=s?/^loaded|^c/:/^loaded|c/,h=f.test(r[l]);return r[d]&&r[d](c,n=function(){r.removeEventListener(c,n,a),e()},a),s&&r.attachEvent(u,n=function(){/^c/.test(r[l])&&(r.detachEvent(u,n),e())}),t=s?function(e){self!=top?h?e():i.push(e):function(){try{o.doScroll("left")}catch(n){return setTimeout(function(){t(e)},50)}e()}()}:function(t){h?t():i.push(t)}}),Array.prototype.indexOf?t.indexOf=function(t,e){return t.indexOf(e)}:t.indexOf=function(t,e){if("string"==typeof t)return t.indexOf(e);var n,i,a=e?e:0;if(!this)throw new TypeError;if(i=this.length,0===i||a>=i)return-1;for(0>a&&(a=i-Math.abs(a)),n=a;i>n;n++)if(this[n]===t)return n;return-1},Array.isArray?t.isArray=function(t){return Array.isArray(t)}:t.isArray=function(t){return"[object Array]"===Object.prototype.toString.call(t)},Object.keys?t.iterate=function(t,e){if(!t)return[];var n,i=Object.keys(t);for(n=0;i[n]&&e(i[n],t[i[n]])!==!1;n++);}:t.iterate=function(t,e){if(!t)return[];var n;for(n in t)if(Object.prototype.hasOwnProperty.call(t,n)&&e(n,t[n])===!1)break},window.matchMedia?t.matchesMedia=function(t){return""==t?!0:window.matchMedia(t).matches}:window.styleMedia||window.media?t.matchesMedia=function(t){if(""==t)return!0;var e=window.styleMedia||window.media;return e.matchMedium(t||"all")}:window.getComputedStyle?t.matchesMedia=function(t){if(""==t)return!0;var e=document.createElement("style"),n=document.getElementsByTagName("script")[0],i=null;e.type="text/css",e.id="matchmediajs-test",n.parentNode.insertBefore(e,n),i="getComputedStyle"in window&&window.getComputedStyle(e,null)||e.currentStyle;var a="@media "+t+"{ #matchmediajs-test { width: 1px; } }";return e.styleSheet?e.styleSheet.cssText=a:e.textContent=a,"1px"===i.width}:t.matchesMedia=function(t){if(""==t)return!0;var e,n,i,a,r={"min-width":null,"max-width":null},o=!1;for(i=t.split(/\s+and\s+/),e=0;er["max-width"]||null!==r["min-height"]&&cr["max-height"]?!1:!0},navigator.userAgent.match(/MSIE ([0-9]+)/)&&RegExp.$1<9&&(t.newStyle=function(t){var e=document.createElement("span");return e.innerHTML=' ",e})},initVars:function(){var e,n,i,a=navigator.userAgent;e="other",n=0,i=[["firefox",/Firefox\/([0-9\.]+)/],["bb",/BlackBerry.+Version\/([0-9\.]+)/],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/],["opera",/OPR\/([0-9\.]+)/],["opera",/Opera\/([0-9\.]+)/],["edge",/Edge\/([0-9\.]+)/],["safari",/Version\/([0-9\.]+).+Safari/],["chrome",/Chrome\/([0-9\.]+)/],["ie",/MSIE ([0-9]+)/],["ie",/Trident\/.+rv:([0-9]+)/]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(RegExp.$1),!1):void 0}),t.vars.browser=e,t.vars.browserVersion=n,e="other",n=0,i=[["ios",/([0-9_]+) like Mac OS X/,function(t){return t.replace("_",".").replace("_","")}],["ios",/CPU like Mac OS X/,function(t){return 0}],["wp",/Windows Phone ([0-9\.]+)/,null],["android",/Android ([0-9\.]+)/,null],["mac",/Macintosh.+Mac OS X ([0-9_]+)/,function(t){return t.replace("_",".").replace("_","")}],["windows",/Windows NT ([0-9\.]+)/,null],["bb",/BlackBerry.+Version\/([0-9\.]+)/,null],["bb",/BB[0-9]+.+Version\/([0-9\.]+)/,null]],t.iterate(i,function(t,i){return a.match(i[1])?(e=i[0],n=parseFloat(i[2]?i[2](RegExp.$1):RegExp.$1),!1):void 0}),t.vars.os=e,t.vars.osVersion=n,t.vars.IEVersion="ie"==t.vars.browser?t.vars.browserVersion:99,t.vars.touch="wp"==t.vars.os?navigator.msMaxTouchPoints>0:!!("ontouchstart"in window),t.vars.mobile="wp"==t.vars.os||"android"==t.vars.os||"ios"==t.vars.os||"bb"==t.vars.os}};return t.init(),t}();!function(t,e){"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?module.exports=e():t.skel=e()}(this,function(){return skel}); 3 | --------------------------------------------------------------------------------