Skip to content

Commit

Permalink
Update style same as Now platform directory listing (#93)
Browse files Browse the repository at this point in the history 
* update style same as Now platform directory listing

* remove platform specific
  • Loading branch information
@thasophearak
thasophearak authored Jul 5, 2019
1 parent 408eae4 commit 1a4cef4
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 117 deletions.
173 changes: 57 additions & 116 deletions src/directory.jst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,176 +6,131 @@

<title>Files within {{!it.directory}}</title>

<style>
<style>
body {
background: #fff;
margin: 0;
padding: 30px;
background: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
font-family: Menlo, Consolas, monospace;
}
main {
max-width: 920px;
}
header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#toggle {
display: none;
cursor: pointer;
}
#toggle:before {
display: inline-block;
content: url("data:image/svg+xml; utf8, <svg height='24px' version='1.1' viewBox='0 0 24 24' width='24px' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd' stroke='none' stroke-width='1'><g transform='translate(-431.000000, -479.000000)'><g transform='translate(215.000000, 119.000000)'/><path d='M432,480 L432,486 L438,486 L438,480 L432,480 Z M440,480 L440,486 L446,486 L446,480 L440,480 Z M448,480 L448,486 L454,486 L454,480 L448,480 Z M449,481 L449,485 L453,485 L453,481 L449,481 Z M441,481 L441,485 L445,485 L445,481 L441,481 Z M433,481 L433,485 L437,485 L437,481 L433,481 Z M432,488 L432,494 L438,494 L438,488 L432,488 Z M440,488 L440,494 L446,494 L446,488 L440,488 Z M448,488 L448,494 L454,494 L454,488 L448,488 Z M449,489 L449,493 L453,493 L453,489 L449,489 Z M441,489 L441,493 L445,493 L445,489 L441,489 Z M433,489 L433,493 L437,493 L437,489 L433,489 Z M432,496 L432,502 L438,502 L438,496 L432,496 Z M440,496 L440,502 L446,502 L446,496 L440,496 Z M448,496 L448,502 L454,502 L454,496 L448,496 Z M449,497 L449,501 L453,501 L453,497 L449,497 Z M441,497 L441,501 L445,501 L445,497 L441,497 Z M433,497 L433,501 L437,501 L437,497 L433,497 Z' fill='%23000000'/></g></g></svg>");
}
#toggle.single-column:before {
content: url("data:image/svg+xml; utf8, <svg height='24px' viewBox='0 0 24 24' width='24px' xmlns='http://www.w3.org/2000/svg'><g fill='none' fill-rule='evenodd' id='miu' stroke='none' stroke-width='1'><g transform='translate(-359.000000, -479.000000)'><g transform='translate(215.000000, 119.000000)'/><path d='M360.577138,485 C360.258394,485 360,485.221932 360,485.5 C360,485.776142 360.262396,486 360.577138,486 L381.422862,486 C381.741606,486 382,485.778068 382,485.5 C382,485.223858 381.737604,485 381.422862,485 L360.577138,485 L360.577138,485 Z M360.577138,490 C360.258394,490 360,490.221932 360,490.5 C360,490.776142 360.262396,491 360.577138,491 L381.422862,491 C381.741606,491 382,490.778068 382,490.5 C382,490.223858 381.737604,490 381.422862,490 L360.577138,490 L360.577138,490 Z M360.577138,495 C360.258394,495 360,495.221932 360,495.5 C360,495.776142 360.262396,496 360.577138,496 L381.422862,496 C381.741606,496 382,495.778068 382,495.5 C382,495.223858 381.737604,495 381.422862,495 L360.577138,495 L360.577138,495 Z' fill='%23000000'/></g></g></svg>");
}
a {
color: #1A00F2;
text-decoration: none;
}
h1 {
font-size: 18px;
font-weight: 500;
margin-top: 0;
color: #000;
font-family: -apple-system, Helvetica;
display: flex;
}
h1 a {
color: inherit;
font-weight: bold;
border-bottom: 1px dashed transparent;
}
h1 a:hover {
color: #7d7d7d;
header h1 a {
font-size: 18px;
font-weight: 500;
margin-top: 0;
color: #000;
}
h1 i {
font-style: normal;
}
ul {
margin: 0;
margin: 0 0 0 -2px;
padding: 20px 0 0 0;
}
ul.single-column {
flex-direction: column;
}
ul li {
list-style: none;
padding: 10px 0;
font-size: 14px;
display: flex;
justify-content: space-between;
}
ul li i {
color: #9B9B9B;
font-size: 11px;
display: block;
font-style: normal;
white-space: nowrap;
padding-left: 15px;
a {
text-decoration: none;
}
ul a {
color: #1A00F2;
color: #000;
padding: 10px 5px;
margin: 0 -5px;
white-space: nowrap;
overflow: hidden;
display: block;
width: 100%;
text-overflow: ellipsis;
}
/* file-icon – svg inlined here, but it should also be possible to separate out. */
header a {
color: #0076FF;
font-size: 11px;
font-weight: 400;
display: inline-block;
line-height: 20px;
}
svg {
height: 13px;
vertical-align: text-bottom;
}
ul a::before {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 64 64'><g fill='transparent' stroke='currentColor' stroke-miterlimit='10'><path stroke-width='4' d='M50.46 56H13.54V8h22.31a4.38 4.38 0 0 1 3.1 1.28l10.23 10.24a4.38 4.38 0 0 1 1.28 3.1z'/><path stroke-width='2' d='M35.29 8.31v14.72h14.06'/></g></svg>");
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 24px;
text-align: center;
line-height: 12px;
}
ul a:hover {
color: #000;
/* file-icon – svg inlined here, but it should also be possible to separate out. */
ul a.file::before {
content: url("data:image/svg+xml;utf8,<svg width='15' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M10 8C8.34 8 7 6.66 7 5V1H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h9c1.1 0 2-.9 2-2V8h-4zM8 5c0 1.1.9 2 2 2h3.59L8 1.41V5zM3 0h5l7 7v9c0 1.66-1.34 3-3 3H3c-1.66 0-3-1.34-3-3V3c0-1.66 1.34-3 3-3z' fill='black'/></svg>");
}
ul a[class=''] + i {
display: none;
ul a:hover {
text-decoration: underline;
}
/* folder-icon */
ul a[class='']::before {
content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 64 64'><path fill='transparent' stroke='currentColor' stroke-width='4' stroke-miterlimit='10' d='M56 53.71H8.17L8 21.06a2.13 2.13 0 0 1 2.13-2.13h2.33l2.13-4.28A4.78 4.78 0 0 1 18.87 12h9.65a4.78 4.78 0 0 1 4.28 2.65l2.13 4.28h17.36a3.55 3.55 0 0 1 3.55 3.55z'/></svg>");
ul a.folder::before {
content: url("data:image/svg+xml;utf8,<svg width='20' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.784 3.87a1.565 1.565 0 0 0-.565-.356V2.426c0-.648-.523-1.171-1.15-1.171H8.996L7.908.25A.89.89 0 0 0 7.302 0H2.094C1.445 0 .944.523.944 1.171v2.3c-.21.085-.398.21-.565.356a1.348 1.348 0 0 0-.377 1.004l.398 9.83C.42 15.393 1.048 16 1.8 16h15.583c.753 0 1.36-.586 1.4-1.339l.398-9.83c.021-.313-.125-.69-.397-.962zM1.843 3.41V1.191c0-.146.104-.272.25-.272H7.26l1.234 1.088c.083.042.167.104.293.104h8.282c.125 0 .25.126.25.272V3.41H1.844zm15.54 11.712H1.78a.47.47 0 0 1-.481-.46l-.397-9.83c0-.147.041-.252.125-.356a.504.504 0 0 1 .377-.147H17.78c.125 0 .272.063.377.147.083.083.125.209.125.334l-.418 9.83c-.021.272-.23.482-.481.482z' fill='black'/></svg>");
}
ul a.lambda::before {
content: url("data:image/svg+xml; utf8,<svg width='15' height='19' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M3.5 14.4354H5.31622L7.30541 9.81311H7.43514L8.65315 13.0797C9.05676 14.1643 9.55405 14.5 10.7 14.5C11.0171 14.5 11.291 14.4677 11.5 14.4032V13.1572C11.3847 13.1766 11.2622 13.2024 11.1541 13.2024C10.6351 13.2024 10.3829 13.0281 10.1595 12.4664L8.02613 7.07586C7.21171 5.01646 6.54865 4.5 5.11441 4.5C4.83333 4.5 4.62432 4.53228 4.37207 4.59038V5.83635C4.56667 5.81052 4.66036 5.79761 4.77568 5.79761C5.64775 5.79761 5.9 6.0042 6.4045 7.19852L6.64234 7.77954L3.5 14.4354Z' fill='black'/><rect x='0.5' y='0.5' width='14' height='18' rx='2.5' stroke='black'/></svg>");
}
/* image-icon */
ul a[class='gif']::before,
ul a[class='jpg']::before,
ul a[class='png']::before,
ul a[class='svg']::before {
content: url("data:image/svg+xml; utf8, <svg width='16' height='16' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='68' height='68' rx='5' ry='5'/><circle cx='24' cy='24' r='8'/><path d='M73 49L59 34 37 52M53 72L27 42 7 58'/></svg>");
width: 16px;
ul a.file.gif::before,
ul a.file.jpg::before,
ul a.file.png::before,
ul a.file.svg::before {
content: url("data:image/svg+xml;utf8,<svg width='16' height='16' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='6' width='68' height='68' rx='5' ry='5'/><circle cx='24' cy='24' r='8'/><path d='M73 49L59 34 37 52m16 20L27 42 7 58'/></svg>");
}
::selection {
background-color: #79FFE1;
color: #000;
}
::-moz-selection {
background-color: #79FFE1;
color: #000;
}
@media (min-width: 768px) {
#toggle {
display: inline-block;
}
ul {
display: flex;
flex-wrap: wrap;
}
ul li {
width: 230px;
padding-right: 20px;
}
ul.single-column li {
width: auto;
}
}
@media (min-width: 992px) {
body {
padding: 45px;
}
h1 {
h1,
header h1 a {
font-size: 15px;
}
ul li {
font-size: 13px;
box-sizing: border-box;
justify-content: flex-start;
}
ul li:hover i {
opacity: 1;
}
ul li i {
font-size: 10px;
opacity: 0;
margin-left: 10px;
margin-top: 3px;
padding-left: 0;
}
}
</style>
</head>
Expand All @@ -190,29 +145,15 @@
<a href="/{{!value.url}}">{{!value.name}}</a>
{{~}}
</h1>

<a class="single-column" id="toggle" title="click to toggle the view"></a>
</header>

<ul id="files">
{{~it.files :value:index}}
<li>
<a href="{{!value.relative}}" title="{{!value.title}}" class="{{!value.ext}}">{{!value.base}}</a>
{{? value.size}}
<i>{{!value.size}}</i>
{{?}}
<a href="{{!value.relative}}" title="{{!value.title}}" class="{{!value.type}} {{!value.ext}}">{{!value.base}}</a>
</li>
{{~}}
</ul>
</main>

<script type="text/javascript">
(function() {
toggle.addEventListener('click', function() {
files.classList.toggle('single-column');
toggle.classList.toggle('single-column');
});
})();
</script>
</main>
</body>
</html>
2 changes: 1 addition & 1 deletion src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -338,7 +338,7 @@ const renderDirectory = async (current, acceptsJSON, handlers, methods, config,
if (stats.isDirectory()) {
details.base += slashSuffix;
details.relative += slashSuffix;
details.type = 'directory';
details.type = 'folder';
} else {
if (canRenderSingle) {
return {
Expand Down

0 comments on commit 1a4cef4

Please sign in to comment.