mirrors/nginx-fancyindex-flat-theme
1
0
Fork 0
mirror of https://github.com/alehaa/nginx-fancyindex-flat-theme.git synced 2025-04-27 01:19:54 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
Alexander Haase 2018-02-18 04:43:44 +01:00
commit 95119011db
14 changed files with 1472 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

23
layout/footer.html Normal file
View file

@ -0,0 +1,23 @@
</div>
</div>
</div>
<footer class="footer navbar">
<div class="container">
<div class="col text-right text-muted text-small text-nowrap">
<small>
Powered by <a href="http://nginx.org">nginx</a>,
<a href="https://github.com/aperezdc/ngx-fancyindex">fancyindex</a>
and the <a href="https://github.com/alehaa/nginx-fancyindex-flat-theme">flat theme</a>.
</small>
</div>
</div>
</footer>
<script type="text/javascript">
breadcrumbs();
styleList();
</script>
</body>
</html>

34
layout/header.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>File Browser</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/theme/theme.css">
<script type="text/javascript" src="/theme/js/breadcrumbs.js"></script>
<script type="text/javascript" src="/theme/js/list.js"></script>
</head>
<body>
<div class="header">
<nav class="navbar sticky-top container">
<div class="navbar-brand">
<i class="fa fa-fw fa-files-o" aria-hidden="true"></i>
File Browser
</div>
</nav>
</div>
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb" id="breadcrumbs"/>
</nav>
<div class="row">
<div class="col">

69
layout/js/breadcrumbs.js Normal file
View file

@ -0,0 +1,69 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* Print the breadcrumbs.
*
* This function will generate the breadcrumbs for the current page and updates
* the 'breadcrumbs' element with the list of crumbs.
*/
function breadcrumbs()
{
/**
* Print a single breadcrumb.
*
*
* @param string name the name of the breadcrumb
* @param string url the url of the breadcrumb
* @param string active wheter this breadcrumb is active or not
*
* @return string the breadcrumb string
*/
function crumb(name, url, active)
{
return '<li class="breadcrumb-item' +
(active ? ' active aria-current="page' : '') + '">' +
(active ? '' : '<a href="' + url + '">') + name +
(active ? '' : '</a>');
}
/* Get the path of the current directory and split it into the list of paths.
* The trailing slash will be removed to avoid an empty breadcrumb at the end
* of the list. */
var crumbs = window.location.pathname.replace(/\/$/, '').split('/');
/* Iterate over the breadcrumbs and generate a link for each crumb. The home
* directory will have the special name 'Home' and the current directory will
* not be a link, but just plain text. */
var nav = '';
var path = '';
for (var i = 0; i < crumbs.length; i++)
{
path += crumbs[i] + '/';
nav +=
crumb((i == 0) ? 'Home' : crumbs[i], path, (i == crumbs.length - 1));
}
/* Update the breadcrumbs element's contents with the breadcrumbs navigation
* generated above. */
document.getElementById('breadcrumbs').innerHTML = nav;
}

207
layout/js/list.js Normal file
View file

@ -0,0 +1,207 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* Apply the styling of the directory listing table.
*
* The default directory listing table can be styled only basically via CSS.
* This function will apply additional styles to it and adds an extra column for
* icons.
*/
function styleList()
{
/**
* Get the font awesome icon to be used for a specific file.
*
*
* @param string filename the filename to be checked
*
* @return string the HTML icon tag to be used
*/
function getIcon(filename)
{
/**
* Get the font awesome class of the icon to be used.
*
*
* @param string filename the filename to be checked
*
* @return string the icon class to be used
*/
function getFontAwesomeClass(filename)
{
/* If the file is a directory (i.e. has a trailing slash), return the
* folder icon without further checking. */
if (filename.endsWith('/'))
return 'fa-folder';
/* For all other kinds of files, check the file extension and select an
* icon based on this extension. */
switch (filename.split('.').pop())
{
case 'txt':
return 'fa-file-text-o';
case 'pdf':
return 'fa-file-pdf-o';
case 'bmp':
case 'gif':
case 'jpeg':
case 'jpg':
case 'png':
case 'tif':
case 'tiff':
return 'fa-file-image-o';
case 'aac':
case 'aiff':
case 'm4a':
case 'mp3':
case 'ogg':
case 'opus':
case 'wav':
return 'fa-file-audio-o';
case 'amv':
case 'avi':
case 'flv':
case 'm4v':
case 'mkv':
case 'mov':
case 'mp4':
case 'm4p':
case 'mpeg':
case 'mpg':
case 'ogv':
case 'vob':
case 'webm':
case 'wmv':
return 'fa-file-video-o';
case '7z':
case 'a':
case 'apk':
case 'ar':
case 'bin':
case 'bz2':
case 'cab':
case 'dmg':
case 'gz':
case 'iso':
case 'jar':
case 'lz':
case 'lzma':
case 'lzo':
case 'pak':
case 'partimg':
case 'rar':
case 's7z':
case 'tar':
case 'tbz2':
case 'tgz':
case 'tlz':
case 'txz':
case 'xz':
case 'zip':
return 'fa-file-archive-o';
case 'doc':
case 'docx':
case 'odt':
case 'rtf':
return 'fa-file-word-o';
case 'csv':
case 'ods':
case 'xls':
case 'xlsx':
return 'fa-file-excel-o';
case 'odp':
case 'ppt':
case 'pptx':
return 'fa-file-powerpoint-o';
case 'c':
case 'class':
case 'cpp':
case 'cs':
case 'h':
case 'hpp':
case 'hxx':
case 'java':
case 'py':
case 'sh':
case 'swift':
case 'vb':
return 'fa-file-code-o';
/* If none of the previous types matched, use a generic file icon. */
default:
return 'fa-file-o';
}
}
/* Return the file icon HTML tag to be used for the file passed to this
* function. */
return '<i class="fa fa-fw ' + getFontAwesomeClass(filename) +
'" aria-hidden="true"></i>';
}
var list = document.getElementById("list");
/* Remove the default style attributes and add the bootstrap table classes. By
* default, text will be not wrapped. However, long filenames will be, as they
* use the 'filename' class (see below). */
list.removeAttribute("cellpadding");
list.removeAttribute("cellspacing");
list.classList.add('table', 'table-sm', 'table-hover', 'text-nowrap');
/* As file size and last-modified date will be hidden at mobile devices, also
* hide the the table header for mobile devices, as it's unneccessary for the
* single remaining cell containig the filename. */
list.tHead.children[0].classList.add('d-none', 'd-md-table-row');
/* If we're in a subdirectory, remove the 'Parent Directory' row, as the
* navigation is covered by the breadcrumbs. */
if (window.location.pathname != '/')
list.deleteRow(1);
/* Iterate over all rows (including the thead) to add individual classes for
* each cell or adding new cells. */
for (var i = 0, row; row = list.rows[i]; i++)
{
/* Add a new cell for the file-type icon. */
row.insertCell(0).innerHTML =
(i > 0) ? getIcon(row.cells[1].children[0].innerHTML) : '';
/* Set the classes for all cells. All cells except the filename will fit
* their contents. The filename cell is the only allowed to wrap. The last
* two cells (file size and last-modified date) will be hidden on small
* (i.e. mobile) devices.*/
row.cells[0].classList.add('col-auto');
row.cells[1].classList.add('col', 'filename');
row.cells[2].classList.add('col-auto', 'd-none', 'd-md-table-cell');
row.cells[3].classList.add('col-auto', 'd-none', 'd-md-table-cell');
}
}

34
layout/less/body.less Normal file
View file

@ -0,0 +1,34 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* This file includes some general settings for the body of this template, e.g.
* the background-color and paddings for the footer.
*/
body {
background-color: @gray-100;
/* If the body fits the entire page, there should be a little spacer between
* the content and the footer. */
padding-bottom: @footer-height;
}

44
layout/less/breadcrumb.less Normal file
View file

@ -0,0 +1,44 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* This file includes tweaks for the breadcrumbs.
*
* Breadcrumbs of this template should have no background (i.e. transparent
* background) and its crumbs should have the primary color of this theme.
*/
.breadcrumb {
/* Override the default colors of bootstrap breadcrumbs, so there is no
* background anymore and links are colorized with the theme's default green
* tone. */
background-color: transparent;
.breadcrumb-item {
a {
color: @brandColor;
}
}
/* Breadcrumbs should be aligned with the text in the navbar-branding and
* the directory index table. Therefore a left-padding is required. */
padding-left: 35px;
}

74
layout/less/colors.less Normal file
View file

@ -0,0 +1,74 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* Color definitions.
*
* As this theme doesn't use bootstrap source files, the following color
* definitions are required for classes setting colors for elements. If the
* color is taken from the original Bootstrap source, the name is identical to
* the one in Bootstrap for compatibility.
*/
/**
* Grayscale colors.
*
* NOTE: Although not all colors of the grayscale palette will be used, all
* colors have been copied for simlicity when fixing color issues in
* future commits.
*/
@white: #fff;
@gray-100: #f8f9fa;
@gray-200: #e9ecef;
@gray-300: #dee2e6;
@gray-400: #ced4da;
@gray-500: #adb5bd;
@gray-600: #6c757d;
@gray-700: #495057;
@gray-800: #343a40;
@gray-900: #212529;
@black: #000;
/**
* Colors from Google's material design.
*
* The application's primary color is a green-tone taken from Google's material
* design, licensed under the MIT license.
*/
@red: #f44336;
@pink: #e91e63;
@purple: #9c27b0;
@deepPurple: #673ab7;
@indigo: #3f51b5;
@blue: #2196f3;
@lightBlue: #03a9f4;
@cyan: #00bcd4;
@teal: #009688;
@green: #4caf50;
@lightGreen: #8bc34a;
@lime: #cddc39;
@yellow: #ffeb3b;
@amber: #ffc107;
@orange: #ff9800;
@deepOrange: #ff5722;
@brown: #795548;
@blueGrey: #607d8b;

69
layout/less/footer.less Normal file
View file

@ -0,0 +1,69 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* This file configures the footer navbar. The navbar will be transparent with
* muted text. If the content doesn't fill the whole brwoser window, the footer
* will stick to the bottom of it, otherwise it will reside at the bottom of the
* page.
*
* The following classes will extend the 'navbar' and 'navbar-bottom' classes of
* bootstrap, so the footer tag should use these classes in addition to the
* 'footer' class defined below.
*/
/**
* The height of the footer navbar.
*
* The height of the footer is required for calculating paddings and margins for
* the body. Although it won't be set for the footer (the default value from
* bootstrap will be used), it will be defined here to be used in other files.
*/
@footer-height: 20px;
/* If the content doesn't fill the entire browser window, the footer should
* still fit to the bottom of the page - in this case the bottom of the browser
* window. The following snippet will expand the content of the page, so the
* footer will be displayed at the bottom of the page or the window, depending
* on the size of the content.
*
* This snippet is based on an answer (https://stackoverflow.com/a/27635568)
* of abmmhasan (https://stackoverflow.com/users/3300834) at
* stackoverlow.com, licensed under CC-BY-SA 3.0. */
html {
position: relative;
min-height: 100%;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 0;
a,
a:hover,
a:focus {
color: @brandColor;
}
}

53
layout/less/header.less Normal file
View file

@ -0,0 +1,53 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* This file configures the header navbar. There will be only slight differences
* from bootstrap's default navbar: the background is green with white text.
*
* NOTE: This class should be used together with the `navbar` class.
*/
/**
* The height of the header navbar.
*/
@header-height: 24px;
.header {
background-color: @brandColor;
color: @white;
/* The default bootstrap navbar is higher than we'd like to have it. The
* following snippet will minimize it to the configured height above.
*
* This snippet is based on an answer (https://stackoverflow.com/a/25093300)
* of Hoang Vu Tgtt (https://stackoverflow.com/users/1804068) at
* stackoverlow.com, licensed under CC-BY-SA 3.0. */
min-height: @header-height;
.navbar-brand {
padding: 0 @header-height / 3;
font-size: @header-height * 2/3;
line-height: @header-height;
height: @header-height;
}
}

51
layout/less/list.less Normal file
View file

@ -0,0 +1,51 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/**
* This file configures anything related to the directory index, that is not
* handled by the general classes, e.g. the handling of filenames.
*/
#list {
/* Filenames and the table headings may link to the relating file or sort
* the table. However, these links shoul NOT be highlighted. Decorations
* will be kept enabled for underlineing the link when hovering. */
a,
a:hover,
a:focus {
color: @black;
}
/* The colgroup needs to be hidden to stop the default fancyindex table to
* set the width of the columns. */
colgroup {
display: none;
}
.filename {
/* As the filenames could take more space than available, allow the
* browser to break it if needed. */
word-break: break-all;
white-space: normal;
}
}

80
layout/theme.less Normal file
View file

@ -0,0 +1,80 @@
/* This file is part of nginx-fancyindex-flat-theme.
*
* nginx-fancyindex-flat-theme is free software: you can redistribute it and/or
* modify it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or (at your
* option) any later version.
*
* nginx-fancyindex-flat-theme is distributed in the hope that it will be
* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
* Public License for more details.
*
* You should have received a copy of the GNU General Public License along with
* this program. If not, see
*
* http://www.gnu.org/licenses/
*
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*/
/* This theme heavily uses Twitter Bootstrap (v4). That means, bootstrap CSS
* classes will be used if possible and modified or enhanced by classes defined
* in this less file (and dependent files). However, the bootstrap sources will
* not be used and compiled in this theme for simplicity, so one served by a
* central CDN may be used.
*
* Although this code shouldn't be affected by Bootstrap's licensing and/or
* copyright, we'd like to inform anyone, that Bootstrap is licensed under the
* MIT license.
*
* Copyright (c) 2011-2018 Twitter, Inc.
* Copyright (c) 2011-2018 The Bootstrap Authors
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*
*
* NOTE: The following comment will be used as short version of the copyright
* notice above to be included in compressed files, too.
*/
/*!
* This file is part of the nginx-fancyindex-flat-theme (licensed under the GPL
* license) and uses Twitter Bootstrap (v4) (licensed under the MIT license).
*
* Copyright (C)
* 2018 Alexander Haase <ahaase@alexhaase.de>
*
* See the LICENSE file for details.
*/
@brandColor: @green;
/* Although imported files will be imported only once by the less compiler by
* default, the individual files will NOT import any other less files for
* simplicity, but all files included in this main file. However, as variables
* and functions are lazy loaded, there shouldn't be any dependency problems. */
@import "less/body";
@import "less/breadcrumb";
@import "less/colors";
@import "less/footer";
@import "less/header";
@import "less/list";