--------------------------------------------------------------------------------
/theme/nginx-header.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
--------------------------------------------------------------------------------
/theme/scripts.js:
--------------------------------------------------------------------------------
1 | // pretty date function
2 | function prettyDate(time){
3 | var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
4 | diff = (((new Date()).getTime() - date.getTime()) / 1000),
5 | day_diff = Math.floor(diff / 86400);
6 |
7 | if (isNaN(day_diff) || day_diff < 0)
8 | return;
9 |
10 | return day_diff == 0 && (
11 | diff < 60 && "just now" ||
12 | diff < 120 && "1 minute ago" ||
13 | diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
14 | diff < 7200 && "1 hour ago" ||
15 | diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
16 | day_diff == 1 && "Yesterday" ||
17 | day_diff < 7 && day_diff + " days ago" ||
18 | day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago" ||
19 | day_diff > 31 && Math.round(day_diff / 31) + " months ago";
20 | }
21 |
22 | // search function
23 | function search(search_val){
24 | var suche = search_val.toLowerCase();
25 | var table = document.getElementById("directory");
26 | var cellNr = 1;
27 | var ele;
28 | for (var r = 1; r < table.rows.length; r++){
29 | ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g,"");
30 | if (ele.toLowerCase().indexOf(suche)>=0 ) {
31 | table.rows[r].style.display = '';
32 | } else {
33 | table.rows[r].style.display = 'none';
34 | }
35 | }
36 | }
37 |
38 |
39 | var el = document.querySelectorAll('tr:nth-child(2)')[0].querySelectorAll('td:nth-child(2)')[0];
40 | if (el.textContent == 'Parent Directory'){
41 | var parent_row = document.querySelectorAll('tr:nth-child(2)')[0];
42 | if (parent_row.classList){
43 | parent_row.classList.add('parent');
44 | } else {
45 | parent_row.className += ' ' + 'parent';
46 | }
47 | }
48 |
49 | var rows = document.querySelectorAll('tr:not(.parent)');
50 | Array.prototype.forEach.call(rows, function(item, index){
51 | if (index !== 0) {
52 | var date_holder = item.querySelectorAll('td:nth-child(3)')[0];
53 | var date = date_holder.textContent;
54 | date = prettyDate(date);
55 | date_holder.innerHTML = date;
56 | }
57 | });
58 |
59 | var cells = document.querySelectorAll('td a');
60 | Array.prototype.forEach.call(cells, function(item, index){
61 | var link = item.getAttribute('href');
62 | link = link.replace('.html', '');
63 | item.setAttribute('href', link);
64 | });
65 |
66 | var our_table = document.querySelectorAll('table')[0];
67 | our_table.setAttribute('id', 'directory');
68 |
69 | // search script
70 | var search_input = document.querySelectorAll('input[name="filter"]')[0];
71 | var clear_button = document.querySelectorAll('a.clear')[0];
72 |
73 | if (search_input.value !== ''){
74 | search(search_input.value);
75 | }
76 |
77 | search_input.addEventListener('keyup', function(e){
78 | e.preventDefault();
79 | search(search_input.value);
80 | });
81 |
82 | search_input.addEventListener('keypress', function(e){
83 | if ( e.which == 13 ) {
84 | e.preventDefault();
85 | }
86 | });
87 |
88 | clear_button.addEventListener('click', function(e){
89 | search_input.value = '';
90 | search('');
91 | });
--------------------------------------------------------------------------------
/theme/search.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jessfraz/directory-theme/5ebaec435a9514f0040bab38951539ed5a9071cd/theme/search.png
--------------------------------------------------------------------------------
/theme/search.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
17 |
--------------------------------------------------------------------------------
/theme/style.css:
--------------------------------------------------------------------------------
1 | @import url('http://fonts.googleapis.com/css?family=Open+Sans:400,300');
2 | /* Have to use @import for the font, as you can only specify a single stylesheet */
3 | * {
4 | margin:0;
5 | padding:0;
6 | -webkit-box-sizing:border-box;
7 | -moz-box-sizing:border-box;
8 | box-sizing: border-box;
9 | }
10 |
11 | html {
12 | min-height:100%;
13 | border-top:10px solid #ECEEF1;
14 | border-bottom:10px solid #ECEEF1;
15 | color:#61666c;
16 | font-weight:300;
17 | font-size:1em;
18 | font-family:'Open Sans', sans-serif;
19 | line-height:2em;
20 | }
21 | body {
22 | padding:20px;
23 | -webkit-backface-visibility:hidden;
24 | }
25 | code {
26 | font-family:Inconsolata,monospace;
27 | }
28 | a {
29 | color:#61666c;
30 | text-decoration:none;
31 | }
32 | a:hover {
33 | color:#2a2a2a;
34 | }
35 | /*------------------------------------*\
36 | Wrapper
37 | \*------------------------------------*/
38 | .wrapper {
39 | margin:0 auto;
40 | padding-top:20px;
41 | max-width:800px;
42 | }
43 | /*------------------------------------*\
44 | Demo block
45 | \*------------------------------------*/
46 | .block {
47 | font-size:.875em;
48 | margin:20px 0;
49 | padding:20px;
50 | color:#9099A3;
51 | }
52 |
53 | h1 {
54 | font-weight:200;
55 | text-align:center;
56 | font-size:1.4em;
57 | line-height:3em;
58 | font-family:'Museo Slab','Open Sans',monospace;
59 | }
60 | form {
61 | text-align:center;
62 | }
63 | input {
64 | margin: 0 auto;
65 | font-size: 100%;
66 | vertical-align: middle;
67 | *overflow: visible;
68 | line-height: normal;
69 | font-family:'Open Sans', sans-serif;
70 | font-size: 12px;
71 | font-weight: 300;
72 | line-height: 18px;
73 | color:#555555;
74 | display: inline-block;
75 | height: 20px;
76 | padding: 4px 32px 4px 6px;
77 | margin-bottom: 9px;
78 | font-size: 14px;
79 | line-height: 20px;
80 | color: #555555;
81 | -webkit-border-radius: 3px;
82 | -moz-border-radius: 3px;
83 | border-radius: 3px;
84 | width: 196px;
85 | background-color: #ffffff;
86 | border: 1px solid #cccccc;
87 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
88 | -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
89 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
90 | -webkit-transition: border linear .2s, box-shadow linear .2s;
91 | -moz-transition: border linear .2s, box-shadow linear .2s;
92 | -o-transition: border linear .2s, box-shadow linear .2s;
93 | transition: border linear .2s, box-shadow linear .2s;
94 | background: url('search.svg') no-repeat 211px center;
95 | background-size:auto 20px;
96 | }
97 |
98 | input:focus {
99 | border-color: rgba(82, 168, 236, 0.8);
100 | outline: 0;
101 | outline: thin dotted \9;
102 | /* IE6-9 */
103 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
104 | -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
105 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
106 | }
107 |
108 | input::-moz-focus-inner {
109 | padding: 0;
110 | border: 0;
111 | }
112 |
113 | input[type="search"] {
114 | margin-top: 20px;
115 | -webkit-box-sizing: content-box;
116 | -moz-box-sizing: content-box;
117 | box-sizing: content-box;
118 | -webkit-appearance: textfield;
119 | -webkit-transition:all 300ms ease-in;
120 | -moz-transition:all 300ms ease-in;
121 | -ms-transition:all 300ms ease-in;
122 | -o-transition:all 300ms ease-in;
123 | transition:all 300ms ease-in;
124 | }
125 |
126 | input[type="search"]::-webkit-search-decoration,
127 | input[type="search"]::-webkit-search-cancel-button {
128 | -webkit-appearance: none;
129 | }
130 | a.clear, a.clear:link, a.clear:visited {
131 | color:#666;
132 | padding:2px 0 2px 0;
133 | font-weight: 400;
134 | font-size: 14px;
135 | margin:0px 0 0 20px;
136 | line-height: 14px;
137 | display: inline-block;
138 | border-bottom: transparent 1px solid;
139 | vertical-align: -10px;
140 | -webkit-transition:all 300ms ease-in;
141 | -moz-transition:all 300ms ease-in;
142 | -ms-transition:all 300ms ease-in;
143 | -o-transition:all 300ms ease-in;
144 | transition:all 300ms ease-in;
145 | }
146 | a.clear:hover {
147 | text-decoration: none;
148 | color:#333;
149 | cursor: pointer;
150 | }
151 | /*------------------------------------*\
152 | Table (directory listing)
153 | \*------------------------------------*/
154 | table {
155 | border-collapse:collapse;
156 | font-size:.875em;
157 | max-width:100%;
158 | margin:20px auto 0px auto;
159 | }
160 | tr {
161 | outline:0;
162 | border:0;
163 | }
164 | tr:hover td {
165 | background:#f6f6f6;
166 | }
167 | th {
168 | text-align:left;
169 | font-size:.75em;
170 | padding-right:20px;
171 | }
172 | /* 2nd Column: Filename */
173 | th + th {
174 | width:65%;
175 | }
176 | /* 3rd Column: Last Modified */
177 | th + th + th {
178 | }
179 | /* 4th Column: Size */
180 | th + th + th + th {
181 | width:5%;
182 | }
183 | tr td:first-of-type {
184 | padding-left:10px;
185 | padding-right:10px;
186 | }
187 | td {
188 | padding:5px 0;
189 | outline:0;
190 | border:0;
191 | border-bottom:1px solid #edf1f5;
192 | vertical-align:middle;
193 | text-align:left;
194 | -webkit-transition:background 300ms ease-in;
195 | -moz-transition:background 300ms ease-in;
196 | -ms-transition:background 300ms ease-in;
197 | -o-transition:background 300ms ease-in;
198 | transition:background 300ms ease-in;
199 | }
200 | td:last-child, th:last-child {
201 | text-align:right;
202 | padding-right:0px;
203 | }
204 | td a{
205 | display: block;
206 | }
207 | tr.parent a {
208 | color:#9099A3;
209 | }
210 | .parent a:hover {
211 | color:#2a2a2a;
212 | }
213 | /*------------------------------------*\
214 | Footer
215 | \*------------------------------------*/
216 | .footer {
217 | text-align:center;
218 | font-size:.75em;
219 | margin-top:50px;
220 | }
221 | img {
222 | outline:none;
223 | border:none;
224 | max-height:16px;
225 | }
226 |
--------------------------------------------------------------------------------