diff --git a/_assets/.editorconfig b/.editorconfig
similarity index 100%
rename from _assets/.editorconfig
rename to .editorconfig
diff --git a/_assets/_old/js/common_old.js b/_assets/_old/js/common_old.js
index 4fc09a5e..6ab995cb 100644
--- a/_assets/_old/js/common_old.js
+++ b/_assets/_old/js/common_old.js
@@ -1,7 +1,5 @@
'use strict'
-var data = (window.data || window.alert('Something is wrong, please refresh!'))
-
var tempID = '_fm_internal_temporary_id'
var templates = {}
@@ -9,8 +7,6 @@ var selectedItems = []
var overlay
var clickOverlay
-
-
// Sends a costum event to itself
Document.prototype.sendCostumEvent = function (text) {
this.dispatchEvent(new window.CustomEvent(text))
diff --git a/_assets/_old/js/listing.js b/_assets/_old/js/listing.js
index 097b3f65..e6610a2b 100644
--- a/_assets/_old/js/listing.js
+++ b/_assets/_old/js/listing.js
@@ -350,9 +350,6 @@ document.addEventListener('DOMContentLoaded', event => {
let items = document.getElementsByClassName('item')
if (user.AllowNew) {
- buttons.upload.addEventListener('click', (event) => {
- document.getElementById('upload-input').click()
- })
buttons.new.addEventListener('click', listing.newFileButton)
}
diff --git a/_assets/_old/templates/actions.tmpl b/_assets/_old/templates/actions.tmpl
index 0d50c9e1..41b3e6be 100644
--- a/_assets/_old/templates/actions.tmpl
+++ b/_assets/_old/templates/actions.tmpl
@@ -1,91 +1,33 @@
-{{ define "right-side-actions" }}
- {{ template "info-button" }}
-{{ end }}
-
{{ define "right" }}
{{- if not .IsEditor }}
- <a aria-label="Switch View" href="?display={{- if eq .Display "mosaic" }}list{{ else }}mosaic{{ end }}" class="action">
- <i class="material-icons">{{- if eq .Display "mosaic" }}view_list{{ else }}view_module{{ end }}</i>
- <span>Switch view</span>
- </a>
- <button aria-label="Select multiple" class="action mobile-only" id="multiple-selection-activate">
- <i class="material-icons">check_circle</i>
- <span>Select</span>
- </button>
- {{- end }}
+<button aria-label="Select multiple" class="action mobile-only" id="multiple-selection-activate">
+<i class="material-icons">check_circle</i>
+<span>Select</span>
+</button>
+{{- end }}
- {{- if and (.User.AllowNew) (not .IsEditor) }}
- <button aria-label="Upload" title="Upload" class="action" id="upload">
- <i class="material-icons">file_upload</i>
- <span>Upload</span>
- </button>
- {{- end }}
-
-
- <button {{ if .IsDir }}data-dropdown{{ end }} aria-label="Download" title="Download" class="action" id="download">
- {{- if .IsEditor}}<a href="?download=true">{{ end }}
- <i class="material-icons">file_download</i><span>Download</span>
- {{- if .IsEditor}}</a>{{ end }}
-
- {{- if not .IsEditor }}
- <ul class="dropdown" id="download-drop">
- <a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
- <a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
- <a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
- <a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
- <a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
- </ul>
- {{- end }}
- </button>
-
-
{{ end }}
-
-{{ define "left-side-actions" }}
-
-{{ end }}
-
{{ define "left" }}
- {{- if and (not .IsDir) (.User.AllowEdit) }}
- {{- if .Editor}}
+{{- if and (not .IsDir) (.User.AllowEdit) }}
+{{- if .Editor}}
- {{- if eq .Data.Mode "markdown" }}
- <button aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
- <i class="material-icons" title="Preview">remove_red_eye</i>
- </button>
- {{- end }}
+{{- if eq .Data.Mode "markdown" }}
+<button aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
+<i class="material-icons" title="Preview">remove_red_eye</i>
+</button>
+{{- end }}
- {{- if eq .Data.Visual true }}
- <button aria-label="Toggle edit source" class="action" id="edit-source">
- <i class="material-icons" title="Toggle edit source">code</i>
- </button>
- {{- end }}
+{{- if eq .Data.Visual true }}
+<button aria-label="Toggle edit source" class="action" id="edit-source">
+<i class="material-icons" title="Toggle edit source">code</i>
+</button>
+{{- end }}
- {{/* end if editor */}}
+{{/* end if editor */}}
- <button aria-label="Save" class="action" id="save">
- <i class="material-icons" title="Save">save</i>
- </button>
- {{- end }}
-
- {{/* end if not dir and AllowEdit */}}
- {{- end }}
-
- {{- if and .IsDir .User.AllowEdit }}
- <button aria-label="Edit" class="action" id="rename">
- <i class="material-icons" title="Edit">mode_edit</i>
- <span>Rename</span>
- </button>
-
- <button aria-label="Move" class="action" id="move">
- <i class="material-icons" title="Move">forward</i>
- <span>Move file</span>
- </button>
-
- <button aria-label="Delete" class="action" id="delete">
- <i class="material-icons" title="Delete">delete</i><span>Delete</span>
- </button>
- {{- end }}
- {{ end }}
\ No newline at end of file
+<button aria-label="Save" class="action" id="save">
+<i class="material-icons" title="Save">save</i>
+</button>
+{{- end }}
diff --git a/_assets/build/webpack.prod.conf.js b/_assets/build/webpack.prod.conf.js
index e084e9cb..8cba2668 100644
--- a/_assets/build/webpack.prod.conf.js
+++ b/_assets/build/webpack.prod.conf.js
@@ -2,7 +2,7 @@ var fs = require('fs')
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
-var config = require('../config')
+var config = require('./config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -52,7 +52,7 @@ var webpackConfig = merge(baseWebpackConfig, {
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
- filename: config.prod.index,
+ filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
diff --git a/_assets/index.html b/_assets/index.html
index fe6e4260..420eddf7 100644
--- a/_assets/index.html
+++ b/_assets/index.html
@@ -42,6 +42,7 @@
showHelp: false,
showDelete: false,
showRename: false,
+ showMove: false,
listing: {
selected: [],
multiple: false
diff --git a/_assets/src/App.vue b/_assets/src/App.vue
index 08191c7f..67caad42 100644
--- a/_assets/src/App.vue
+++ b/_assets/src/App.vue
@@ -6,7 +6,12 @@
<search></search>
</div>
<div>
+ <rename-button></rename-button>
+ <move-button></move-button>
<delete-button></delete-button>
+ <switch-button v-show="req.kind !== 'editor'"></switch-button>
+ <download-button></download-button>
+ <upload-button v-show="showUpload()"></upload-button>
<info-button></info-button>
</div>
<!-- <div id="click-overlay"></div> -->
@@ -22,10 +27,10 @@
</div>
</nav>
<main>
- <listing v-if="req.kind == 'listing'"></listing>
+ <listing v-if="req.kind === 'listing'"></listing>
</main>
- <preview v-if="req.kind == 'preview'"></preview>
+ <preview v-if="req.kind === 'preview'"></preview>
<!-- TODO: show on listing and allowedit -->
<div class="floating">
@@ -59,6 +64,11 @@ import Listing from './components/Listing'
import InfoButton from './components/InfoButton'
import InfoPrompt from './components/InfoPrompt'
import DeleteButton from './components/DeleteButton'
+import RenameButton from './components/RenameButton'
+import UploadButton from './components/UploadButton'
+import DownloadButton from './components/DownloadButton'
+import SwitchButton from './components/SwitchViewButton'
+import MoveButton from './components/MoveButton'
import css from './css.js'
function updateColumnSizes () {
@@ -75,6 +85,7 @@ window.addEventListener('keydown', (event) => {
window.info.showInfo = false
window.info.showDelete = false
window.info.showRename = false
+ window.info.showMove = false
// Unselect all files and folders.
if (window.info.req.kind === 'listing') {
@@ -123,18 +134,38 @@ window.addEventListener('keydown', (event) => {
export default {
name: 'app',
- components: { Search, Preview, Listing, InfoButton, InfoPrompt, Help, DeleteButton },
+ components: {
+ Search,
+ Preview,
+ Listing,
+ InfoButton,
+ InfoPrompt,
+ Help,
+ DeleteButton,
+ RenameButton,
+ DownloadButton,
+ UploadButton,
+ SwitchButton,
+ MoveButton
+ },
mounted: function () {
updateColumnSizes()
window.addEventListener('resize', updateColumnSizes)
- window.history.replaceState({ url: window.location.pathname, name: document.title }, document.title, window.location.pathname)
+ window.history.replaceState({
+ url: window.location.pathname,
+ name: document.title
+ }, document.title, window.location.pathname)
},
data: function () {
return window.info
},
methods: {
showOverlay: function () {
- return this.showInfo || this.showHelp
+ return this.showInfo || this.showHelp || this.showDelete || this.showRename || this.showMove
+ },
+ showUpload: function () {
+ if (this.req.kind === 'editor') return false
+ return this.user.allowNew
}
}
}
diff --git a/_assets/src/components/DeleteButton.vue b/_assets/src/components/DeleteButton.vue
index 0e553bc7..559b6fb4 100644
--- a/_assets/src/components/DeleteButton.vue
+++ b/_assets/src/components/DeleteButton.vue
@@ -1,5 +1,5 @@
<template>
- <button @click="show" aria-label="Delete" title="Delete" class="action" id="delete">
+ <button @click="show" aria-label="Delete" title="Delete" class="action">
<i class="material-icons">delete</i>
<span>Delete</span>
</button>
diff --git a/_assets/src/components/DownloadButton.vue b/_assets/src/components/DownloadButton.vue
new file mode 100644
index 00000000..93bd5394
--- /dev/null
+++ b/_assets/src/components/DownloadButton.vue
@@ -0,0 +1,35 @@
+<template>
+ <button @click="download" aria-label="Download" title="Download" class="action">
+ <i class="material-icons">file_download</i>
+ <span>Download</span>
+ </button>
+</template>
+
+<script>
+var $ = window.info
+
+export default {
+ name: 'download-button',
+ methods: {
+ download: function (event) {
+ if ($.req.kind !== 'listing') {
+ window.location = window.location.pathname + '?download=true'
+ return
+ }
+
+ /*
+ <ul class="dropdown" id="download-drop">
+ <a tabindex="0" aria-label="Download as Zip" data-format="zip" href="?download=zip"><li>zip</li></a>
+ <a tabindex="0" aria-label="Download as Tar" data-format="tar" href="?download=tar"><li>tar</li></a>
+ <a tabindex="0" aria-label="Download as TarGz" data-format="targz" href="?download=targz"><li>tar.gz</li></a>
+ <a tabindex="0" aria-label="Download as TarBz2" data-format="tarbz2" href="?download=tarbz2"><li>tar.bz2</li></a>
+ <a tabindex="0" aria-label="Download as TarXz" data-format="tarbz2" href="?download=tarxz"><li>tar.xz</li></a>
+ </ul>
+ */
+ // document.getElementById('upload-input').click()
+ // TODO
+ alert('Not Implemented!')
+ }
+ }
+}
+</script>
diff --git a/_assets/src/components/InfoButton.vue b/_assets/src/components/InfoButton.vue
index 4e101b6d..1704d887 100644
--- a/_assets/src/components/InfoButton.vue
+++ b/_assets/src/components/InfoButton.vue
@@ -1,5 +1,5 @@
<template>
- <button @click="show" title="Info" aria-label="Info" class="action" id="info">
+ <button @click="show" title="Info" aria-label="Info" class="action">
<i class="material-icons">info</i>
<span>Info</span>
</button>
diff --git a/_assets/src/components/Listing.vue b/_assets/src/components/Listing.vue
index 0d3b96b3..6b22edf6 100644
--- a/_assets/src/components/Listing.vue
+++ b/_assets/src/components/Listing.vue
@@ -57,9 +57,7 @@
</item>
</div>
- <!--
- <input style="display:none" type="file" id="upload-input" onchange="listing.handleFiles(this.files, '')" value="Upload" multiple>
- -->
+ <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
</div>
</template>
@@ -155,6 +153,9 @@ export default {
})
}
},
+ uploadInput: function (event) {
+ this.handleFiles(event.currentTarget.files, '')
+ },
handleFiles: function (files, base) {
// buttons.setLoading('upload')
let promises = []
diff --git a/_assets/src/components/MoveButton.vue b/_assets/src/components/MoveButton.vue
new file mode 100644
index 00000000..d15ef264
--- /dev/null
+++ b/_assets/src/components/MoveButton.vue
@@ -0,0 +1,17 @@
+<template>
+ <button @click="show" aria-label="Move" title="Move" class="action">
+ <i class="material-icons">forward</i>
+ <span>Move file</span>
+ </button>
+</template>
+
+<script>
+export default {
+ name: 'move-button',
+ methods: {
+ show: function (event) {
+ window.info.showMove = true
+ }
+ }
+}
+</script>
diff --git a/_assets/src/components/Preview.vue b/_assets/src/components/Preview.vue
index aedfbf17..063169aa 100644
--- a/_assets/src/components/Preview.vue
+++ b/_assets/src/components/Preview.vue
@@ -4,7 +4,11 @@
<button @click="back" class="action" aria-label="Close Preview" id="close">
<i class="material-icons">close</i>
</button>
- <!-- TODO: add more buttons -->
+
+ <rename-button v-if="allowEdit()"></rename-button>
+ <delete-button v-if="allowEdit()"></delete-button>
+ <download-button></download-button>
+ <info-button></info-button>
</div>
<div class="preview">
@@ -24,9 +28,19 @@
<script>
import page from '../page'
+import InfoButton from './InfoButton'
+import DeleteButton from './DeleteButton'
+import RenameButton from './RenameButton'
+import DownloadButton from './DownloadButton'
export default {
name: 'preview',
+ components: {
+ InfoButton,
+ DeleteButton,
+ RenameButton,
+ DownloadButton
+ },
data: function () {
return window.info.req.data
},
@@ -37,6 +51,9 @@ export default {
back: function (event) {
let url = page.removeLastDir(window.location.pathname)
page.open(url)
+ },
+ allowEdit: function (event) {
+ return window.info.user.allowEdit
}
}
}
diff --git a/_assets/src/components/RenameButton.vue b/_assets/src/components/RenameButton.vue
new file mode 100644
index 00000000..875dd5fa
--- /dev/null
+++ b/_assets/src/components/RenameButton.vue
@@ -0,0 +1,17 @@
+<template>
+ <button @click="show" aria-label="Rename" title="Rename" class="action">
+ <i class="material-icons">mode_edit</i>
+ <span>Rename</span>
+ </button>
+</template>
+
+<script>
+export default {
+ name: 'rename-button',
+ methods: {
+ show: function (event) {
+ window.info.showRename = true
+ }
+ }
+}
+</script>
diff --git a/_assets/src/components/SwitchViewButton.vue b/_assets/src/components/SwitchViewButton.vue
new file mode 100644
index 00000000..d2a1890a
--- /dev/null
+++ b/_assets/src/components/SwitchViewButton.vue
@@ -0,0 +1,33 @@
+<template>
+ <button @click="change" aria-label="Switch View" title="Switch View" class="action">
+ <i class="material-icons">{{ icon() }}</i>
+ <span>Switch view</span>
+ </button>
+</template>
+
+<script>
+import page from '../page'
+
+var $ = window.info
+
+export default {
+ name: 'switch-button',
+ methods: {
+ change: function (event) {
+ let url = window.location.pathname + '?display='
+
+ if ($.req.data.display === 'mosaic') {
+ url += 'list'
+ } else {
+ url += 'mosaic'
+ }
+
+ page.open(url)
+ },
+ icon: function () {
+ if ($.req.data.display === 'mosaic') return 'view_list'
+ return 'view_module'
+ }
+ }
+}
+</script>
diff --git a/_assets/src/components/UploadButton.vue b/_assets/src/components/UploadButton.vue
new file mode 100644
index 00000000..551fd072
--- /dev/null
+++ b/_assets/src/components/UploadButton.vue
@@ -0,0 +1,17 @@
+<template>
+ <button @click="upload" aria-label="Upload" title="Upload" class="action">
+ <i class="material-icons">file_upload</i>
+ <span>Upload</span>
+ </button>
+</template>
+
+<script>
+export default {
+ name: 'upload-button',
+ methods: {
+ upload: function (event) {
+ document.getElementById('upload-input').click()
+ }
+ }
+}
+</script>
diff --git a/_assets/src/css/listing.css b/_assets/src/css/listing.css
new file mode 100644
index 00000000..e2bcb119
--- /dev/null
+++ b/_assets/src/css/listing.css
@@ -0,0 +1,243 @@
+
+
+/* * * * * * * * * * * * * * * *
+ * LISTING *
+ * * * * * * * * * * * * * * * */
+
+#listing {
+ max-width: calc(100% - 1.2em);
+ width: 100%;
+}
+
+#listing h2 {
+ margin: 0 0 0 0.5em;
+ font-size: .9em;
+ color: rgba(0, 0, 0, 0.38);
+ font-weight: 500;
+}
+
+#listing .item div:last-of-type * {
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+#listing>div {
+ display: flex;
+ padding: 0;
+ flex-wrap: wrap;
+ justify-content: flex-start;
+ position: relative;
+}
+
+#listing .item {
+ background-color: #fff;
+ position: relative;
+ display: flex;
+ flex-wrap: nowrap;
+ color: #6f6f6f;
+ transition: .1s ease all;
+ align-items: center;
+ cursor: pointer;
+}
+
+#listing .item div:last-of-type {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+#listing .item p {
+ margin: 0;
+}
+
+#listing .item .size,
+#listing .item .modified {
+ font-size: 0.9em;
+}
+
+#listing .item .name {
+ font-weight: bold;
+}
+
+#listing .item i {
+ font-size: 4em;
+ margin-right: 0.1em;
+ vertical-align: bottom;
+}
+
+#listing h2.message,
+.message {
+ text-align: center;
+ font-size: 3em;
+ margin: 1em auto;
+ display: block !important;
+ width: 95%;
+ color: rgba(0, 0, 0, 0.3);
+ font-weight: 500;
+}
+
+.message i {
+ font-size: inherit;
+ vertical-align: middle;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ * LISTING - MOSAIC *
+ * * * * * * * * * * * * * * * */
+
+#listing.mosaic {
+ padding-top: 1em;
+}
+
+#listing.mosaic .item {
+ width: calc(33% - 1em);
+ margin: .5em;
+ padding: 0.5em;
+ border-radius: 0.2em;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+}
+
+#listing.mosaic .item:hover {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
+}
+
+#listing.mosaic .header {
+ display: none;
+}
+
+#listing.mosaic .item div:first-of-type {
+ width: 5em;
+}
+
+#listing.mosaic .item div:last-of-type {
+ width: calc(100% - 5vw);
+}
+
+
+/* * * * * * * * * * * * * * * *
+ * LISTING - DETAIL *
+ * * * * * * * * * * * * * * * */
+
+#listing.list {
+ flex-direction: column;
+ padding-top: 3.25em;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+}
+
+#listing.list .item {
+ width: 100%;
+ margin: 0;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ padding: 1em;
+ border-top: 0;
+}
+
+#listing.list h2 {
+ display: none;
+}
+
+#listing .item[aria-selected=true] {
+ background: #2196f3 !important;
+ color: #fff !important;
+}
+
+#listing.list .item div:first-of-type {
+ width: 3em;
+}
+
+#listing.list .item div:first-of-type i {
+ font-size: 2em;
+}
+
+#listing.list .item div:last-of-type {
+ width: calc(100% - 3em);
+ display: flex;
+ align-items: center;
+}
+
+#listing.list .item .name {
+ width: 50%;
+}
+
+#listing.list .item .size {
+ width: 25%;
+}
+
+#listing .item.header {
+ display: none !important;
+ background-color: #ccc;
+}
+
+#listing.list .header i {
+ font-size: 1.5em;
+ vertical-align: middle;
+ margin-left: .2em;
+}
+
+#listing.list .item.header {
+ display: flex !important;
+ background: #f8f8f8;
+ position: fixed;
+ width: 78%;
+ top: 4em;
+ left: 20%;
+ z-index: 999;
+ padding: .85em;
+ border: 0;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#listing.list .item.header>div:first-child {
+ width: 0;
+}
+
+#listing.list .item.header .name {
+ margin-right: 3em;
+}
+
+#listing.list .header {
+ display: flex;
+ background: #fafafa;
+ position: fixed;
+ width: 100%;
+ top: 7.8em;
+ left: 0;
+ z-index: 999;
+}
+
+#listing.list .header a {
+ color: inherit;
+}
+
+#listing.list .item.header>div:first-child {
+ width: 0;
+}
+
+#listing.list .name {
+ font-weight: normal;
+}
+
+#listing.list .item.header .name {
+ margin-right: 3em;
+}
+
+#listing.list .header span {
+ vertical-align: middle;
+}
+
+#listing.list .header i {
+ opacity: 0;
+ transition: .1s ease all;
+}
+
+#listing.list .header p:hover i,
+#listing.list .header .active i {
+ opacity: 1;
+}
+
+#listing.list .item.header .active {
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/_assets/src/css/prompts.css b/_assets/src/css/prompts.css
index e4ac6c32..a28adf3a 100644
--- a/_assets/src/css/prompts.css
+++ b/_assets/src/css/prompts.css
@@ -26,7 +26,7 @@
.overlay.active,
.prompt.active,
.help.active {
- animation: .2s show forwards;
+ animation: .1s show forwards;
}
.prompt h3 {
diff --git a/_assets/src/css/styles.css b/_assets/src/css/styles.css
index 1c9c1598..b977bbb8 100644
--- a/_assets/src/css/styles.css
+++ b/_assets/src/css/styles.css
@@ -2,6 +2,7 @@
@import "./normalize.css";
@import "./header.css";
@import "./prompts.css";
+@import "./listing.css";
body {
font-family: 'Roboto', sans-serif;
@@ -432,248 +433,6 @@ main {
}
-/* * * * * * * * * * * * * * * *
- * LISTING *
- * * * * * * * * * * * * * * * */
-
-#listing {
- max-width: calc(100% - 1.2em);
- width: 100%;
-}
-
-#listing h2 {
- margin: 0 0 0 0.5em;
- font-size: .9em;
- color: rgba(0, 0, 0, 0.38);
- font-weight: 500;
-}
-
-#listing .item div:last-of-type * {
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-#listing>div {
- display: flex;
- padding: 0;
- flex-wrap: wrap;
- justify-content: flex-start;
- position: relative;
-}
-
-#listing .item {
- background-color: #fff;
- position: relative;
- display: flex;
- flex-wrap: nowrap;
- color: #6f6f6f;
- transition: .1s ease all;
- align-items: center;
- cursor: pointer;
-}
-
-#listing .item div:last-of-type {
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-}
-
-#listing .item p {
- margin: 0;
-}
-
-#listing .item .size,
-#listing .item .modified {
- font-size: 0.9em;
-}
-
-#listing .item .name {
- font-weight: bold;
-}
-
-#listing .item i {
- font-size: 4em;
- margin-right: 0.1em;
- vertical-align: bottom;
-}
-
-#listing h2.message,
-.message {
- text-align: center;
- font-size: 3em;
- margin: 1em auto;
- display: block !important;
- width: 95%;
- color: rgba(0, 0, 0, 0.3);
- font-weight: 500;
-}
-
-.message i {
- font-size: inherit;
- vertical-align: middle;
-}
-
-
-/* * * * * * * * * * * * * * * *
- * LISTING - MOSAIC *
- * * * * * * * * * * * * * * * */
-
-#listing.mosaic {
- padding-top: 1em;
-}
-
-#listing.mosaic .item {
- width: calc(33% - 1em);
- margin: .5em;
- padding: 0.5em;
- border-radius: 0.2em;
- box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
-}
-
-#listing.mosaic .item:hover {
- box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
-}
-
-#listing.mosaic .header {
- display: none;
-}
-
-#listing.mosaic .item div:first-of-type {
- width: 5em;
-}
-
-#listing.mosaic .item div:last-of-type {
- width: calc(100% - 5vw);
-}
-
-
-/* * * * * * * * * * * * * * * *
- * LISTING - DETAIL *
- * * * * * * * * * * * * * * * */
-
-#listing.list {
- flex-direction: column;
- padding-top: 3.25em;
- width: 100%;
- max-width: 100%;
- margin: 0;
-}
-
-#listing.list .item {
- width: 100%;
- margin: 0;
- border: 1px solid rgba(0, 0, 0, 0.1);
- padding: 1em;
- border-top: 0;
-}
-
-#listing.list h2 {
- display: none;
-}
-
-#listing .item[aria-selected=true] {
- background: #2196f3 !important;
- color: #fff !important;
-}
-
-#listing.list .item div:first-of-type {
- width: 3em;
-}
-
-#listing.list .item div:first-of-type i {
- font-size: 2em;
-}
-
-#listing.list .item div:last-of-type {
- width: calc(100% - 3em);
- display: flex;
- align-items: center;
-}
-
-#listing.list .item .name {
- width: 50%;
-}
-
-#listing.list .item .size {
- width: 25%;
-}
-
-#listing .item.header {
- display: none !important;
- background-color: #ccc;
-}
-
-#listing.list .header i {
- font-size: 1.5em;
- vertical-align: middle;
- margin-left: .2em;
-}
-
-#listing.list .item.header {
- display: flex !important;
- background: #f8f8f8;
- position: fixed;
- width: 78%;
- top: 7.8em;
- left: 20%;
- z-index: 999;
- padding: .85em;
- border: 0;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-#listing.list .item.header>div:first-child {
- width: 0;
-}
-
-#listing.list .item.header .name {
- margin-right: 3em;
-}
-
-#listing.list .header {
- display: flex;
- background: #fafafa;
- position: fixed;
- width: 100%;
- top: 7.8em;
- left: 0;
- z-index: 999;
-}
-
-#listing.list .header a {
- color: inherit;
-}
-
-#listing.list .item.header>div:first-child {
- width: 0;
-}
-
-#listing.list .name {
- font-weight: normal;
-}
-
-#listing.list .item.header .name {
- margin-right: 3em;
-}
-
-#listing.list .header span {
- vertical-align: middle;
-}
-
-#listing.list .header i {
- opacity: 0;
- transition: .1s ease all;
-}
-
-#listing.list .header p:hover i,
-#listing.list .header .active i {
- opacity: 1;
-}
-
-#listing.list .item.header .active {
- font-weight: bold;
-}
-
/* PREVIEWER */