Skip to content

Instantly share code, notes, and snippets.

@rikkix
Created February 3, 2021 04:19
Show Gist options
  • Save rikkix/87bcef49b24ef84957e16a5fdd6c0bd8 to your computer and use it in GitHub Desktop.
Save rikkix/87bcef49b24ef84957e16a5fdd6c0bd8 to your computer and use it in GitHub Desktop.
thanks for onelist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drive</title>
<style>
@font-face{
font-family: 'icomoon';
src : url("data:application/x-font-woff;charset=utf-8;base64,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") format('woff');
font-weight: normal;
font-style: normal;
font-display: block;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e900";
}
.icon-folder-open:before {
content: "\e930";
}
.icon-file-text2:before {
content: "\e926";
}
.icon-arrow-left2:before {
content: "\ea40";
}
body {
background-color: rgb(247, 247, 249);
}
h1 {
text-align: center;
color: rgb(51, 51, 51);
font-size: 28px;
letter-spacing: 2px;
line-height: 64px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: underline;
}
th {
font-weight: normal;
}
.list-wrapper {
width: 80%;
margin: 0 auto;
margin-bottom: 40px;
position: relative;
box-shadow: 0 0 32px 0 rgba(0, 0, 0, 0.1);
}
.list-header-container {
margin: 0;
border: 0 none;
padding: 15px 50px;
text-align: left;
font-weight: 400;
color: #000000;
background-color: #f7f7f9;
}
.list-title th {
font-weight: bold;
}
.list-body-container {
position: relative;
left: 0;
overflow-x: hidden;
overflow-y: auto;
box-sizing: border-box;
background: white;
}
.list-table {
width: 100%;
padding: 20px;
border-spacing: 0;
}
.list-table tr th{
text-align: center;
}
.list-table tr th:first-child {
text-align: left;
padding: 5px 0;
}
.list-table tr td{
text-align: center;
}
.list-table tr td:first-child {
text-align: left;
padding: 5px 0;
}
.item:hover {
font-weight: 200;
background-color: gainsboro;
}
#back{
position: absolute;
top: 35px;
left: 35px;
}
</style>
</head>
<body>
<h1>
<a href="/"><span>MSGraph-Drive</span></a>
</h1>
<div class="list-wrapper">
<div class="list-container">
<div class="list-header-container" style="height: 2.5em;">
{{ $current := .Current }}
{{ if and (ne $current "") (ne $current "/") }}
<a href="{{- .Parent -}}"><span id="back" class="icon-arrow-left2"></span></a>
{{ end }}
</div>
<div class="list-body-container">
<table class="list-table">
<thead class="list-title">
<tr>
<th>File</th>
<th>Date</th>
<th>Size</th>
</tr>
</thead>
<tbody>
{{ range $item := .Items }}
<tr>
{{ if $item.IsFolder }}
<td><a href="{{- $item.Name -}}/"><span class="icon-folder-open"> {{ $item.Name }}</span></a></td>
{{ else }}
<td><a href="{{- $item.Name -}}"><span class="icon-file-text2"> {{ $item.Name }}</span></a></td>
{{end}}
<td><span class="time" title="{{- $item.Date -}}">{{- $item.ReadableDate -}}</span></td>
<td>{{ $item.ReadableSize }}</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment