Extract CSS to styles.css

app/src/Download.vue

@@ -1,15 +1,14 @@
 <template lang="pug">
   .download-app
-    .btn-group(style='position: absolute; top: 15px; right: 15px;')
+    a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
-      a.btn.btn-sm.btn-info(@click='newSession()', title='New Upload')
+      i.fa.fa-fw.fa-cloud-upload
-        i.fa.fa-fw.fa-cloud-upload
+      span.hidden-xs  new upload
-        span.hidden-xs  new upload
     .alert.alert-danger(v-show="error")
       strong
         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,31 +20,30 @@
     .panel.panel-primary(v-if='!needsPassword')
       .panel-heading
         strong Files
-        div.pull-right(style="margin-top:-5px;")
+        div.pull-right.btn-group.btn-download-archive(v-if="downloadsAvailable")
-          span.btn-group(v-if="downloadsAvailable")
+          a.btn.btn-sm.btn-default(@click="downloadAll('zip')", title="Archive download is not resumeable!")
-            a.btn.btn-sm.btn-default(@click="downloadAll('zip')", title="Archive download is not resumeable!")
+            i.fa.fa-fw.fa-fw.fa-download
-              i.fa.fa-fw.fa-fw.fa-download
+            |  zip
-              |  zip
+          a.btn.btn-sm.btn-default(@click="downloadAll('tar.gz')", title="Archive download is not resumeable!")
-            a.btn.btn-sm.btn-default(@click="downloadAll('tar.gz')", title="Archive download is not resumeable!")
+            i.fa.fa-fw.fa-fw.fa-download
-              i.fa.fa-fw.fa-fw.fa-download
+            |  tar.gz
-              |  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
+                div.pull-right.btn-group
-                  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')
-                  clipboard.btn.btn-sm.btn-default(:value='host + file.url', @change='copied(file, $event)', title='Copy to clipboard', style='margin: 0 5px')
                     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")

app/src/Download/PreviewModal.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-  modal(v-if="current", @close="current=false", :has-header="true", @next="next", @prev="prev")
+  modal.preview-modal(v-if="current", @close="current=false", :has-header="true", @next="next", @prev="prev")
-    div(slot="header")
+    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")

app/src/Upload.vue

@@ -1,35 +1,34 @@
 <template lang="pug">
   .upload-app#uploadApp
-    .btn-group(style='position: absolute; top: 15px; right: 15px;')
+    a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
-      a.btn.btn-sm.btn-info(@click='newSession()', title='New Upload')
+      i.fa.fa-fw.fa-cloud-upload
-        i.fa.fa-fw.fa-cloud-upload
+      span.hidden-xs  new upload
-        span.hidden-xs  new upload
     .alert.alert-danger(v-show="error")
       strong
         i.fa.fa-exclamation-triangle
         |  {{ error }}
     .well(v-show="state === 'uploaded'")
-      .pull-right
+      .pull-right.btn-group
-        a.btn.btn-primary(style="margin-right: 5px", :href="mailLnk")
+        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')
+      div.share-link
-        strong(style="margin-right: 5px") Download 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
-          .progress-bar.progress-bar-success.progress-bar-striped.active(:style="{width: percentUploaded+'%'}", style="line-height:25px")
+          .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')

app/src/Upload/Files.vue

@@ -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")
-          i.fa.fa-plus.fa-4x
+          a
-          br
+            i.fa.fa-plus.fa-4x
-          |  Drop your files here
+            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;")
+              td.btns
-                a.btn.btn-warning.btn-sm(@click="!disabled && $store.commit('upload/REMOVE_FILE', file)", :disabled="disabled")
+                a(style="cursor:pointer", @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;")
+                  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>

app/src/common/FileIcon.vue

@@ -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>
 
 

app/src/common/Modal.vue

@@ -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>

app/webpack.config.js

@@ -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: ['/**'],
-        context: ['/**', '!/**.js', '!/**.html', '!/**.css'],
         target: 'http://localhost:3000/'
       }
     ]

public/assets/styles.css

@@ -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;
+}

public/html/download.html

@@ -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>
+  <link href="/assets/styles.css" rel="stylesheet">
-    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>
 </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>

public/html/upload.html

@@ -1,70 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
-    <meta charset="utf-8">
+  <meta charset="utf-8">
-    <title>PsiTransfer</title>
+  <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="viewport" content="width=device-width, initial-scale=1">
-    <meta name="robots" content="noindex,nofollow">
+  <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/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">
+  <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>
+  <link href="/assets/styles.css" rel="stylesheet">
-      html {
+</head>
-        position: relative;
+
-        min-height: 100%;
+<body>
-      }
+
-      body > .container {
+  <div id="dropHelper"></div>
-        padding-bottom: 50px;
+
-        position: relative;
+  <div class="container">
-      }
+    <h1>
-      #dropHelper {
+      <i class="fa fa-fw fa-cloud-upload" style="color: #0275D8"></i>
-        position: absolute;
+      PsiTransfer
-        left: 0;
+    </h1>
-        top: 0;
+    <hr>
-        right: 0;
+    <div id="upload"></div>
-        bottom: 0;
+  </div>
-        z-index: -1;
+
-      }
+  <footer class="footer">
-      .drag #dropHelper {
+    <div class="container text-right">
-        background-color: rgba(40, 40, 40, 0.45);
+      <span class="text-muted"><a href="https://github.com/psi-4ward/psitransfer" target="_blank">Powered by PsiTransfer</a></span>
-        border: 4px dashed #eeeeee;
+    </div>
-        z-index: 100;
+  </footer>
-        font: normal normal normal 14px/1 FontAwesome;
+
-        text-rendering: auto;
+  <script src="/app/common.js"></script>
-        display: flex;
+  <script src="/app/upload.js"></script>
-        align-items: center;
+
-        justify-content: center;
+</body>
-      }
-      .drag #dropHelper:before {
-        content: "\f019";
-        font-size: 8em;
-      }
-      .footer {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        height: 40px;
-        line-height: 40px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="dropHelper"></div>
-    <div class="container">
-      <h1>
-        <i class="fa fa-fw fa-cloud-upload" style="color: #0275D8"></i>
-        PsiTransfer
-      </h1>
-      <hr>
-      <div id="upload"></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/upload.js"></script>
-  </body>
 </html>