ttt/transfer
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Extract CSS to styles.css

Browse Source
This commit is contained in:
Christoph Wiechert
2017-05-10 00:30:30 +02:00
parent e52047b5cd
commit 434fa09308
10 changed files with 216 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/src/Download.vue
View File

@@ -1,7 +1,6 @@
<template lang="pug">
.download-app
.btn-group(style='position: absolute; top: 15px; right: 15px;')
a.btn.btn-sm.btn-info(@click='newSession()', title='New Upload')
a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
i.fa.fa-fw.fa-cloud-upload
span.hidden-xs new upload
.alert.alert-danger(v-show="error")
@@ -9,7 +8,7 @@
i.fa.fa-exclamation-triangle
| {{ error }}
.well(v-if='needsPassword')
h3(style='margin-top: 0') Password
h3 Password
.form-group
input.form-control(type='password', v-model='password')
p.text-danger(v-show='passwordWrong')
@@ -21,8 +20,7 @@
.panel.panel-primary(v-if='!needsPassword')
.panel-heading
strong Files
div.pull-right(style="margin-top:-5px;")
span.btn-group(v-if="downloadsAvailable")
div.pull-right.btn-group.btn-download-archive(v-if="downloadsAvailable")
a.btn.btn-sm.btn-default(@click="downloadAll('zip')", title="Archive download is not resumeable!")
i.fa.fa-fw.fa-fw.fa-download
| zip
@@ -30,22 +28,22 @@
i.fa.fa-fw.fa-fw.fa-download
| tar.gz
.panel-body
table.table.table-hover.table-striped(style='margin-bottom: 0')
table.table.table-hover.table-striped
tbody
tr(v-for='file in files', style='cursor: pointer', @click='download(file)')
td(style='width: 60px')
td.file-icon
file-icon(:file='file')
td
div.pull-right
i.fa.fa-check.text-success(v-show='file.downloaded')
clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard', style='margin: 0 5px')
div.pull-right.btn-group
clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard')
a
i.fa.fa-fw.fa-copy
a.btn.btn-sm.btn-default(title="Preview", @click.prevent.stop="preview=file", v-if="file.previewType")
i.fa.fa-fw.fa-eye
i.pull-right.fa.fa-check.text-success.downloaded(v-show='file.downloaded')
p
strong {{ file.metadata.name }}
small(v-if="Number.isFinite(file.size)", style="margin-left:15px") ({{ humanFileSize(file.size) }})
small.file-size(v-if="Number.isFinite(file.size)") ({{ humanFileSize(file.size) }})
p {{ file.metadata.comment }}
preview-modal(:preview="preview", :files="previewFiles", :max-size="config.maxPreviewSize", @close="preview=false")

6
app/src/Download/PreviewModal.vue
View File

@@ -1,11 +1,11 @@
<template lang="pug">
modal(v-if="current", @close="current=false", :has-header="true", @next="next", @prev="prev")
div(slot="header")
modal.preview-modal(v-if="current", @close="current=false", :has-header="true", @next="next", @prev="prev")
div.header(slot="header")
p
strong {{current.metadata.name}}
div
small {{currentIndex+1}} / {{files.length}}
span.btn-group(style="margin-left: 15px")
span.btn-group
a.btn.btn-sm.btn-default(title="previous", @click="prev", v-show="currentIndex > 0")
i.fa.fa-fw.fa-arrow-left
a.btn.btn-sm.btn-default(title="next", @click="next", v-show="currentIndex < files.length-1")

21
app/src/Upload.vue
View File

@@ -1,7 +1,6 @@
<template lang="pug">
.upload-app#uploadApp
.btn-group(style='position: absolute; top: 15px; right: 15px;')
a.btn.btn-sm.btn-info(@click='newSession()', title='New Upload')
a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
i.fa.fa-fw.fa-cloud-upload
span.hidden-xs new upload
.alert.alert-danger(v-show="error")
@@ -9,27 +8,27 @@
i.fa.fa-exclamation-triangle
| {{ error }}
.well(v-show="state === 'uploaded'")
.pull-right
a.btn.btn-primary(style="margin-right: 5px", :href="mailLnk")
.pull-right.btn-group
a.btn.btn-primary(:href="mailLnk")
i.fa.fa-fw.fa-envelope
| Mail
clipboard.btn.btn-primary(:value='shareUrl')
h3.text-success(style='margin-top: 0')
h3.text-success
i.fa.fa-check
| Upload completed
div(style='margin-top: 1rem; padding-bottom: 0')
strong(style="margin-right: 5px") Download Link:
div.share-link
span.title Download Link:
|
a(:href='shareUrl') {{ shareUrl }}
.row(style="margin-bottom:10px", v-show="state === 'uploading'")
.row.overall-process(v-show="state === 'uploading'")
.col-xs-12
i.fa.fa-spinner.fa-spin.fa-2x.fa-fw.pull-left
.progress(style="height:25px")
.progress-bar.progress-bar-success.progress-bar-striped.active(:style="{width: percentUploaded+'%'}", style="line-height:25px")
.progress
.progress-bar.progress-bar-success.progress-bar-striped.active(:style="{width: percentUploaded+'%'}")
span(v-show='percentUploaded>10') {{ percentUploaded }}%
.row
.col-sm-7
files(:value="[]")
files
.col-sm-5
settings
.text-right(v-show='files.length && !disabled')

28
app/src/Upload/Files.vue
View File

@@ -1,18 +1,19 @@
<template lang="pug">
div
div.upload-files
.panel.panel-default(:class="{'panel-primary': !disabled}")
.panel-heading Files
.panel-body
.dropHint(:style="{cursor: disabled ? 'default' : 'pointer'}",
.empty-files-big-plus(:style="{cursor: disabled ? 'default' : 'pointer'}",
onclick="document.getElementById('fileInput').click();",
v-show="files.length === 0")
a
i.fa.fa-plus.fa-4x
br
| Drop your files here
table.table.table-striped
tbody
tr(v-for="file in files")
td(style="width: 60px")
td.file-icon
file-icon(:file="file._File")
td
p
@@ -23,11 +24,11 @@
.alert.alert-danger(v-if="file.error")
i.fa.fa-fw.fa-exclamation-triangle
| {{ file.error }}
.progress(v-show="!file.error && (state === 'uploading' || state === 'uploaded')", style="height:7px")
.progress(v-show="!file.error && (state === 'uploading' || state === 'uploaded')")
.progress-bar.progress-bar-success.progress-bar-striped(:style="{width: file.progress.percentage+'%'}",:class="{active:!file.uploaded}")
td(style="width: 33px;")
a.btn.btn-warning.btn-sm(@click="!disabled && $store.commit('upload/REMOVE_FILE', file)", :disabled="disabled")
i.fa.fa-trash.pull-right(style="display: inline-block; margin-left: auto; margin-right: auto;")
td.btns
a(style="cursor:pointer", @click="!disabled && $store.commit('upload/REMOVE_FILE', file)", :disabled="disabled")
i.fa.fa-fw.fa-times
input#fileInput(type="file", @change="$store.dispatch('upload/addFiles', $event.target.files)", multiple="", :disabled="disabled", style="display: none")
.text-right
@@ -59,16 +60,3 @@
}
};
</script>
<style>
.dropHint {
text-align: center;
padding: 19px 0;
}
.dropHint i {
color: #337AB7;
}
.dropHint:hover i {
color: #286090;
}
</style>

4
app/src/common/FileIcon.vue
View File

@@ -1,8 +1,8 @@
<template lang="pug">
div
div.file-icon
i.fa.fa-fw.fa-3x(v-if='!isImageBlob', :class='iconClass')
|
img(v-if='isImageBlob', :src='blobUrl', style='width:54px; height:auto;')
img(v-if='isImageBlob', :src='blobUrl')
</template>

15
app/src/common/Modal.vue
View File

@@ -39,18 +39,3 @@
}
}
</script>
<style>
.background-darken {
background: rgba(0, 0, 0, 0.3);
}
.modal.in {
overflow-x: auto;
overflow-y: scroll;
}
@media (min-width: 768px) {
.modal-fluid {
width: 90%;
}
}
</style>

3
app/webpack.config.js
View File

@@ -65,8 +65,7 @@ module.exports = {
// Proxy requests to BE in DEV mode
// https://webpack.github.io/docs/webpack-dev-server.html#proxy
{
// everything except of js, html, css
context: ['/**', '!/**.js', '!/**.html', '!/**.css'],
context: ['/**'],
target: 'http://localhost:3000/'
}
]

128
public/assets/styles.css Normal file
View File

@@ -0,0 +1,128 @@
html {
position: relative;
min-height: 100%;
}
body > .container {
padding-bottom: 50px;
position: relative;
}
/* Fullscreen file drop */
#dropHelper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.drag #dropHelper {
background-color: rgba(40, 40, 40, 0.45);
border: 4px dashed #eeeeee;
z-index: 100;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
display: flex;
align-items: center;
justify-content: center;
}
.drag #dropHelper:before {
content: "\f019";
font-size: 8em;
}
/* Common */
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
}
.btn-new-session {
position: absolute;
top: 15px;
right: 15px;
}
.well h3 {
margin-top: 0;
}
td.file-icon {
width: 60px;
}
/* FileIcon Component */
.file-icon img {
width: 54px;
height: auto;
}
/* Modal Component */
.background-darken {
background: rgba(0, 0, 0, 0.3);
}
.modal.in {
overflow-x: auto;
overflow-y: scroll;
}
@media (min-width: 768px) {
.modal-fluid {
width: 90%;
}
}
/* Upload Component */
.upload-app .share-link {
margin-top: 1rem;
padding-bottom: 0
}
.upload-app .share-link .title {
font-weight: bold;
margin-right: 5px;
}
.upload-app .overall-process {
margin-bottom: 10px;
line-height: 25px
}
.upload-app .overall-process .progress {
height: 25px;
}
/* Upload::Files Component */
.upload-files .empty-files-big-plus {
text-align: center;
padding: 19px 0;
}
.upload-files td.btns {
width: 33px;
}
.upload-files .progress {
height: 7px;
}
/* Download Component */
.download-app .btn-download-archive {
margin-top: -5px;
}
.download-app .file-size {
margin-left: 10px;
}
.download-app table {
margin-bottom: 0;
}
.download-app i.fa.downloaded {
margin:10px;
}
/* Download::PreviewModal Component */
.preview-modal .header .btn-group {
margin-left: 15px;
}

26
public/html/download.html
View File

@@ -3,30 +3,16 @@
<head>
<meta charset="utf-8">
<title>PsiTransfer</title>
<link href="/assets/favicon.ico" rel="icon" type="image/x-icon"/>
<link href="/assets/favicon.ico" rel="icon" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
html {
position: relative;
min-height: 100%;
}
body > .container {
padding-bottom: 50px;
position: relative;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
}
</style>
<link href="/assets/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>
<i class="fa fa-fw fa-cloud-download" style="color: #0275D8"></i>
@@ -35,12 +21,16 @@
<hr>
<div id="download"></div>
</div>
<footer class="footer">
<div class="container text-right">
<span class="text-muted"><a href="https://github.com/psi-4ward/psitransfer" target="_blank">Powered by PsiTransfer</a></span>
</div>
</footer>
<script src="/app/common.js"></script>
<script src="/app/download.js"></script>
</body>
</html>

56
public/html/upload.html
View File

@@ -1,55 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<head>
<meta charset="utf-8">
<title>PsiTransfer</title>
<link href="/assets/favicon.ico" rel="icon" type="image/x-icon"/>
<link href="/assets/favicon.ico" rel="icon" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
html {
position: relative;
min-height: 100%;
}
body > .container {
padding-bottom: 50px;
position: relative;
}
#dropHelper {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.drag #dropHelper {
background-color: rgba(40, 40, 40, 0.45);
border: 4px dashed #eeeeee;
z-index: 100;
font: normal normal normal 14px/1 FontAwesome;
text-rendering: auto;
display: flex;
align-items: center;
justify-content: center;
}
.drag #dropHelper:before {
content: "\f019";
font-size: 8em;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<link href="/assets/styles.css" rel="stylesheet">
</head>
<body>
<div id="dropHelper"></div>
<div class="container">
<h1>
<i class="fa fa-fw fa-cloud-upload" style="color: #0275D8"></i>
@@ -64,7 +29,10 @@
<span class="text-muted"><a href="https://github.com/psi-4ward/psitransfer" target="_blank">Powered by PsiTransfer</a></span>
</div>
</footer>
<script src="/app/common.js"></script>
<script src="/app/upload.js"></script>
</body>
</body>
</html>