Updates on front end :D
Former-commit-id: 032b13b1f3a6216ae6bafde75f583038916b4f74 [formerly 80588a95ad5168ecab65e3d8cc8968bad9a20a6b] [formerly 94b306854bac60361ddf1b945a3edec7204d1327 [formerly 193adea6bb]]
Former-commit-id: 67b5219c1a6488c1a797bec42a0dec2036441a48 [formerly 28183c674806c3125a285a48905a01e1e835be7e]
Former-commit-id: d2169aab351eab252ea34e07bb943411aa8e9cb4
pull/726/head
Henrique Dias
parent
3eb9505ec4
commit
a7b50c2de1
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
<button aria-label="Save" class="action" id="save">
|
||||
<i class="material-icons" title="Save">save</i>
|
||||
</button>
|
||||
{{- end }}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@
|
|||
showHelp: false,
|
||||
showDelete: false,
|
||||
showRename: false,
|
||||
showMove: false,
|
||||
listing: {
|
||||
selected: [],
|
||||
multiple: false
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 = []
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
.overlay.active,
|
||||
.prompt.active,
|
||||
.help.active {
|
||||
animation: .2s show forwards;
|
||||
animation: .1s show forwards;
|
||||
}
|
||||
|
||||
.prompt h3 {
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue