File manager mockup
This commit is contained in:
@@ -3,20 +3,63 @@
|
||||
<head>
|
||||
{{template "meta_tags" "File Manager"}}
|
||||
<script type="text/javascript">var apiEndpoint = '{{.APIEndpoint}}';</script>
|
||||
<style>
|
||||
.file_manager {
|
||||
position: absolute;
|
||||
padding: 0px 8px 0px 8px;
|
||||
background-color: #252525;
|
||||
box-shadow: #000000 8px 8px 50px 5px;
|
||||
left:100px;
|
||||
top:100px;
|
||||
right: 100px;
|
||||
min-width: 600px;
|
||||
max-width: 1400px;
|
||||
}
|
||||
.file_manager > .nav_bar {
|
||||
display: flex;
|
||||
flex-direction: row
|
||||
}
|
||||
.file_manager > .nav_bar :first-child {margin-left: 5px;}
|
||||
.file_manager > .nav_bar :last-child {margin-right: 5px;}
|
||||
.file_manager > .nav_bar > button {flex: 0;}
|
||||
.file_manager > .nav_bar > .breadcrumbs {flex: 1; margin: 1px 10px; min-width: 100px;}
|
||||
.file_manager > .status_bar {text-align: left;}
|
||||
|
||||
.file_button {height: 40px !important;}
|
||||
.file_button > img {max-height: 40px !important;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
{{template "menu" .}}
|
||||
|
||||
<br/>
|
||||
{{range .Other.Files}}
|
||||
<a class="file_button" href="/u/{{.ID}}" target="_blank">
|
||||
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.FileName}}" />
|
||||
<span style="color: var(--highlight_color);">{{.FileName}}</span>
|
||||
<br/>
|
||||
{{.DateUpload}}
|
||||
</a>
|
||||
{{end}}
|
||||
<div class="file_manager">
|
||||
<div class="nav_bar highlight_light border_top border_bottom">
|
||||
<button>⇐</button>
|
||||
<button>⇑</button>
|
||||
<button style="margin-right: 16px;">⇒</button>
|
||||
<button>🏠</button>
|
||||
<input class="breadcrumbs" type="text" value="/{{.Username}}/Documents"/>
|
||||
<button>↻</button>
|
||||
<button>🔎</button>
|
||||
<button style="margin-left: 16px;">_</button>
|
||||
<button>☐</button>
|
||||
<button class="button_red">✕</button>
|
||||
</div>
|
||||
<div class="directory_area">
|
||||
{{$files := .PixelAPI.UserFiles 0 20}}
|
||||
{{range $files.Files}}
|
||||
<a class="file_button" href="/u/{{.ID}}" target="_blank">
|
||||
<img src="{{$.APIEndpoint}}/file/{{.ID}}/thumbnail" alt="{{.FileName}}" />
|
||||
{{.FileName}}
|
||||
</a>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="status_bar highlight_light border_top border_bottom">
|
||||
13 items (5 directories, 7 files). Total size: 1.23 GB
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
|
||||
@@ -13,13 +13,13 @@
|
||||
<link rel="shortcut icon" href="/res/img/tray32.png"/>
|
||||
<link rel="icon" sizes="180x180" href="/res/img/pixeldrain.png"/>
|
||||
<link rel="icon" sizes="256x256" href="/res/img/pixeldrain_big.png"/>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"/>
|
||||
|
||||
|
||||
<!-- <link rel="alternate" type="application/json+oembed" th:href="*{oEmbedHref}" th:title="*{ogTitle}" /> OEmbed will return soon -->
|
||||
|
||||
|
||||
{{template "bgpattern"}}
|
||||
|
||||
|
||||
<meta name="theme-color" content="#202020"/>
|
||||
<meta name="twitter:image" content="{{.OGData.Image}}" />
|
||||
<meta property="og:title" content="{{.OGData.Title}}" />
|
||||
@@ -49,12 +49,10 @@
|
||||
|
||||
<!--Views: <span id="views" th:text="${data.views}">0</span>--><br/>
|
||||
|
||||
<form action="/" target="_self">
|
||||
<button id="btnHome" class="toolbar_button button_full_width">
|
||||
<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>
|
||||
<span>Home</span>
|
||||
</button>
|
||||
</form>
|
||||
<a href="/" id="btnHome" class="button toolbar_button button_full_width">
|
||||
<img src="/res/img/pixeldrain_small.png" alt="Back to the Home page"/>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
|
||||
<button id="btnDownload" class="toolbar_button button_full_width" onClick="Toolbar.download();">
|
||||
<img src="/res/img/floppy_small.png" alt="Download this file"/>
|
||||
@@ -77,8 +75,8 @@
|
||||
</button>
|
||||
|
||||
<iframe id='sponsors' data-aa='73974'
|
||||
src='//ad.a-ads.com/73974?size=120x600&background_color=000000&text_color=eeeeee&title_color=eeeeee&link_color=9fcf6c&link_hover_color=d2ffa1&title_hover_color=d2ffa1'
|
||||
scrolling='no' allowtransparency='true' seamless="seamless">
|
||||
src='//ad.a-ads.com/73974?size=120x600&background_color=000000&text_color=eeeeee&title_color=eeeeee&link_color=9fcf6c&link_hover_color=d2ffa1&title_hover_color=d2ffa1'
|
||||
scrolling='no' allowtransparency='true' seamless="seamless">
|
||||
</iframe>
|
||||
|
||||
<iframe id="frmDownload">
|
||||
@@ -87,7 +85,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="sharebar" class="sidebar">
|
||||
Share on:<br/>
|
||||
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
|
||||
@@ -125,20 +123,20 @@
|
||||
</div>
|
||||
|
||||
<div id="info-popup" class="full-popup">
|
||||
<img alt="Close" src="/res/img/cross.png"
|
||||
<img alt="Close" src="/res/img/cross.png"
|
||||
style="position: absolute; top: 5px; right: 5px; width: 40px; height: 40px; cursor: pointer;"
|
||||
onclick="DetailsWindow.toggle();"/>
|
||||
Click the help button again to close this overlay.<br/>
|
||||
|
||||
|
||||
<h3>File Info</h3>
|
||||
<span id="info-fileDetails"></span>
|
||||
<span id="info-about">{{template "file_info_popup"}}</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="filepreview">
|
||||
Loading...
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/res/script/jquery.js"></script>
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
|
||||
<script src="/res/script/Keyboard.js"></script>
|
||||
@@ -147,7 +145,7 @@
|
||||
<script src="/res/script/DetailsWindow.js"></script>
|
||||
<script src="/res/script/Viewer.js"></script>
|
||||
<script src="/res/script/ListNavigator.js"></script>
|
||||
|
||||
|
||||
<script>
|
||||
// This info gets filled in on the server side to prevent having to make an API call right after the page loads.
|
||||
// Just to slice another few milliseconds from the load time :)
|
||||
@@ -157,4 +155,4 @@
|
||||
{{template "analytics"}}
|
||||
</body>
|
||||
</html>
|
||||
{{end}}
|
||||
{{end}}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
The Sia integration is still very experimental and could
|
||||
fail, resulting in data loss. Do not upload files to this server
|
||||
that you cannot afford to lose. Use the stable main server instead:
|
||||
<a href="https://pixeldrain.com">https://pixeldrain.com</a>.
|
||||
<a class="button" href="https://pixeldrain.com">https://pixeldrain.com</a>.
|
||||
</p>
|
||||
<p>
|
||||
But don't let all that stop you from trying the new Pixeldrain!
|
||||
|
||||
@@ -30,11 +30,10 @@
|
||||
<img src="/res/img/upload_small.png" alt="Start Upload"/>
|
||||
<span>Upload</span>
|
||||
</button>
|
||||
<form action="/">
|
||||
<button class="toolbar_button button_full_width">
|
||||
<a href="/" class="button toolbar_button button_full_width">
|
||||
<img src="/res/img/pixeldrain_small.png" alt="Visit the home page" style="width:22px; height: 22px;"/>
|
||||
<span>Home</span>
|
||||
</button>
|
||||
</a>
|
||||
</form>
|
||||
<iframe id='sponsors' data-aa='73974'
|
||||
src='//ad.a-ads.com/73974?size=120x600&background_color=000000&text_color=eeeeee&title_color=eeeeee&link_color=9fcf6c&link_hover_color=d2ffa1&title_hover_color=d2ffa1'
|
||||
|
||||
Reference in New Issue
Block a user