mirror_html/DirectoryLister
1
0
Fork 0
mirror of https://github.com/DirectoryLister/DirectoryLister.git synced 2025-08-26 07:15:30 +02:00
Code Issues Projects Releases Wiki Activity

Redesigned header for small screens

Browse Source
This commit is contained in:
Chris Kankiewicz
2020-04-27 14:50:06 -07:00
parent 1cdb68bd7e
commit f905ff054b
3 changed files with 27 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/resources/js/app.js
View File

@@ -3,10 +3,19 @@ window.Vue = require('vue');
Vue.component('file-info-modal', require('./components/file-info-modal.vue').default);
const app = new Vue({
el: '#app',
el: "#app",
data: function () {
return { menuOpen: false };
},
computed: {
menuStyles() { return { 'hidden': ! this.menuOpen } }
},
methods: {
showFileInfo(filePath) {
this.$refs.fileInfoModal.show(filePath);
},
toggleMenuVisibility() {
this.menuOpen = ! this.menuOpen;
}
},
mounted: function() {

21
app/views/components/header.twig
View File

@@ -1,6 +1,6 @@
<header id="header" class="bg-blue-600 shadow sticky top-0">
<div class="container flex flex-col flex-coljustify-between items-center mx-auto p-4 md:flex-row">
<div class="flex-grow font-mono text-white text-sm tracking-tight mb-2 md:my-1">
<div class="container flex justify-between flex-wrap items-center mx-auto p-4 md:flex-row">
<div class="flex-1 font-mono text-white text-sm tracking-tight my-1">
<a href="." class="inline-block hover:underline">
{{ translate('home') }}
</a>
@@ -12,14 +12,25 @@
{% endif %}
</div>
<div class="flex justify-end items-center">
<button class="inline-block text-white mx-2 hover:text-gray-400 md:hidden" v-on:click="toggleMenuVisibility">
<div v-if="menuOpen">
<i class="fas fa-times fa-lg fa-fw"></i>
</div>
<div v-else>
<i class="fas fa-ellipsis-v fa-lg fa-fw"></i>
</div>
</button>
<div class="flex items-center flex-grow flex-shrink-0 w-full pt-4 space-x-2 md:flex md:max-w-xs md:p-0" v-bind:class="menuStyles">
{% if path and files is not empty and config('zip_downloads') %}
<a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white mx-2 p-1 hover:text-gray-400">
<a href="{{ zip_url(path) }}" title="{{ translate('download') }}" class="inline-block text-white p-1 hover:text-gray-400">
<i class="fas fa-download fa-lg"></i>
</a>
{% endif %}
{% include 'components/search.twig' %}
<div class="flex-1">
{% include 'components/search.twig' %}
</div>
</div>
</div>
</header>

2
app/views/components/search.twig
View File

@@ -1,4 +1,4 @@
<form id="search" action="." method="get" class="flex-grow group relative block bg-blue-700 rounded-full shadow-inner">
<form id="search" action="." method="get" class="group relative block bg-blue-700 rounded-full shadow-inner">
<input type="text" value="{{ search }}" name="search" placeholder="{{ translate('search') }}..."
class="bg-transparent placeholder-gray-900 text-white w-full px-10 py-2"
ref="searchInput" v-on:focus="$event.target.select()"