Updates on front end :D

_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))

_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)    
   }

_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">
+<button aria-label="Select multiple" class="action mobile-only" id="multiple-selection-activate">
-        <i class="material-icons">check_circle</i>
+<i class="material-icons">check_circle</i>
-        <span>Select</span>
+<span>Select</span>
-    </button>
+</button>
-    {{- end }}
+{{- 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 and (not .IsDir) (.User.AllowEdit) }}
-    {{- if .Editor}}
+{{- if .Editor}}
 
-    {{- if eq .Data.Mode "markdown" }}
+{{- if eq .Data.Mode "markdown" }}
-    <button aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
+<button aria-label="Preview" class="action" id="preview" onclick="notImplemented(event);">
-        <i class="material-icons" title="Preview">remove_red_eye</i>
+<i class="material-icons" title="Preview">remove_red_eye</i>
-    </button>
+</button>
-    {{- end }}
+{{- end }}
 
-    {{- if eq .Data.Visual true }}
+{{- if eq .Data.Visual true }}
-    <button aria-label="Toggle edit source" class="action" id="edit-source">
+<button aria-label="Toggle edit source" class="action" id="edit-source">
-        <i class="material-icons" title="Toggle edit source">code</i>
+<i class="material-icons" title="Toggle edit source">code</i>
-    </button>
+</button>
-    {{- end }}
+{{- end }}
 
-    {{/* end if editor */}}
+{{/* end if editor */}}
 
-    <button aria-label="Save" class="action" id="save">
+<button aria-label="Save" class="action" id="save">
-        <i class="material-icons" title="Save">save</i>
+<i class="material-icons" title="Save">save</i>
-    </button>
+</button>
-    {{- end }}
+{{- 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 }}

_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: {

_assets/index.html

@@ -42,6 +42,7 @@
       showHelp: false,
       showDelete: false,
       showRename: false,
+      showMove: false,
       listing: {
         selected: [],
         multiple: false

_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
     }
   }
 }

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

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

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

_assets/src/components/Listing.vue

@@ -57,9 +57,7 @@
           </item>
         </div>
 
-        <!--
+        <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
-          <input style="display:none" type="file" id="upload-input" onchange="listing.handleFiles(this.files, '')" 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 = []

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

_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
     }
   }
 }

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

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

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

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

_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 {

_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 */