Improve UI styling
This commit is contained in:
Lena Fuhrimann
parent
5ee6a263bc
commit
6a50b1b1c7
4 changed files with 54 additions and 53 deletions
|
|
@ -62,7 +62,7 @@ func HandleBucketView(s3 S3, tmplDir string) http.HandlerFunc {
|
|||
func icon(fileName string) string {
|
||||
e := path.Ext(fileName)
|
||||
switch e {
|
||||
case ".tgz", ".gz":
|
||||
case ".tgz", ".gz", ".zip":
|
||||
return "archive"
|
||||
case ".png", ".jpg", ".gif", ".svg":
|
||||
return "photo"
|
||||
|
|
|
|||
|
|
@ -1,44 +1,49 @@
|
|||
{{ define "content" }}
|
||||
<nav class="purple" role="navigation">
|
||||
<nav>
|
||||
<div class="nav-wrapper container">
|
||||
<span href="#" class="brand-logo"><i class="material-icons">folder_open</i>{{ .BucketName }}</span>
|
||||
{{ if not .Objects }}
|
||||
<a href="#" class="right" onclick="deleteBucket({{ .BucketName }})"><i class="material-icons">delete</i> Delete</a>
|
||||
<ul class="right">
|
||||
<li>
|
||||
<a class="waves-effect waves-light btn" href="#" onclick="deleteBucket({{ .BucketName }})">
|
||||
Delete <i class="material-icons right">delete</i>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="section">
|
||||
<a href="/buckets" style="padding-left: 25px; vertical-align: middle;"><i class="material-icons" style="vertical-align: middle;">arrow_back</i> Buckets</a>
|
||||
<a href="/buckets" style="padding-left:25px;vertical-align:middle;">
|
||||
<i class="material-icons" style="vertical-align: middle;">arrow_back</i> Buckets
|
||||
</a>
|
||||
|
||||
{{ if .Objects }}
|
||||
<table class="highlight bordered">
|
||||
|
||||
<table class="striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th style="width:75px;"></th>
|
||||
<th>Key</th>
|
||||
<th>Size</th>
|
||||
<th>Owner</th>
|
||||
<th>Last Modified</th>
|
||||
<th></th>
|
||||
<th style="min-width:165px;"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{{ range $index, $object := .Objects }}
|
||||
<tr>
|
||||
<td style="padding-left: 25px;"><i class="material-icons">{{ $object.Icon }}</i></td>
|
||||
<td style="padding-left:25px;"><i class="material-icons">{{ $object.Icon }}</i></td>
|
||||
<td>{{ $object.Info.Key }}</td>
|
||||
<td>{{ $object.Info.Size }} bytes</td>
|
||||
<td>{{ $object.Info.Owner }}</td>
|
||||
<td>{{ $object.Info.LastModified }}</td>
|
||||
<td>
|
||||
<!-- Dropdown Trigger -->
|
||||
<a class="dropdown-button waves-effect waves-teal btn-flat" href="#" data-activates="actions-dropdown-{{ $index }}">
|
||||
<button class="dropdown-trigger waves-effect waves-teal btn" data-target="actions-dropdown-{{ $index }}">
|
||||
Actions <i class="material-icons right">arrow_drop_down</i>
|
||||
</a>
|
||||
|
||||
</button>
|
||||
<!-- Dropdown Structure -->
|
||||
<ul id="actions-dropdown-{{ $index }}" class="dropdown-content">
|
||||
<li><a href="/api/buckets/{{ $.BucketName }}/objects/{{ $object.Info.Key }}">Download</a></li>
|
||||
|
|
@ -48,20 +53,19 @@
|
|||
</tr>
|
||||
{{ end }}
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
{{ end }}
|
||||
|
||||
{{ if not .Objects }}
|
||||
<p style="text-align: center;margin-top: 2em;">No objects in <strong>{{ .BucketName }}</strong> yet</p>
|
||||
<p style="text-align:center;margin-top:2em;color:gray;">No objects in <strong>{{ .BucketName }}</strong> yet</p>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="fixed-action-btn">
|
||||
<a class="btn-floating btn-large red modal-trigger" href="#modal-create-object">
|
||||
<button type="button" class="btn-floating btn-large red modal-trigger" data-target="modal-create-object">
|
||||
<i class="large material-icons">add</i>
|
||||
</a>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-create-object" class="modal">
|
||||
|
|
@ -86,8 +90,8 @@
|
|||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="submit" class="modal-action modal-close waves-effect waves-green btn-flat">Upload</button>
|
||||
<button class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</button>
|
||||
<button type="button" class="modal-close waves-effect waves-green btn-flat">Cancel</button>
|
||||
<button type="submit" class="modal-close waves-effect waves-green btn">Upload</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "content" }}
|
||||
<nav class="purple" role="navigation">
|
||||
<nav>
|
||||
<div class="nav-wrapper container">
|
||||
<a href="/" class="brand-logo">S3 Manager</a>
|
||||
</div>
|
||||
|
|
@ -11,11 +11,11 @@
|
|||
|
||||
{{ if . }}
|
||||
{{ range $bucket := . }}
|
||||
<div class="col m12 l6">
|
||||
<a href="/buckets/{{ $bucket.Name }}" style="color: black;">
|
||||
<div class="col l6 m12">
|
||||
<a href="/buckets/{{ $bucket.Name }}" style="color:black;">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<div class="row" style="margin-bottom: 0;">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<i class="material-icons large">folder_open</i>
|
||||
</div>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<span class="card-title">
|
||||
{{ $bucket.Name }}
|
||||
</span>
|
||||
<p style="color: gray;">Created on {{ $bucket.CreationDate }}</p>
|
||||
<p style="color:gray;">Created on {{ $bucket.CreationDate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{{ end }}
|
||||
|
||||
{{ if not . }}
|
||||
<p style="text-align: center;margin-top: 2em;">No buckets yet</p>
|
||||
<p style="text-align:center;margin-top:2em;color:gray;">No buckets yet</p>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
|
@ -42,50 +42,46 @@
|
|||
</div>
|
||||
|
||||
<div class="fixed-action-btn">
|
||||
<a class="btn-floating btn-large red modal-trigger" href="#modal-create-bucket">
|
||||
<i class="large material-icons">add</i>
|
||||
</a>
|
||||
<button type="button" class="btn-floating btn-large red modal-trigger" data-target="modal-create-bucket">
|
||||
<i class="material-icons large">add</i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="modal-create-bucket" class="modal">
|
||||
<form id="create-bucket-form">
|
||||
|
||||
<div class="modal-content">
|
||||
<h4>Create Bucket</h4>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col s6">
|
||||
<div class="input-field">
|
||||
<input placeholder="My Bucket" id="name" type="text" name="name">
|
||||
<label for="name">Name</label>
|
||||
</div>
|
||||
<div class="input-field col m6">
|
||||
<input id="name" type="text" name="name" placeholder="My Bucket">
|
||||
<label for="name">Name</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" onclick="createBucket()" class="modal-action modal-close waves-effect waves-green btn-flat">Create</button>
|
||||
<button class="modal-action modal-close waves-effect waves-green btn-flat">Cancel</button>
|
||||
<button type="button" class="modal-close waves-effect waves-green btn-flat">Cancel</button>
|
||||
<button type="button" class="modal-close waves-effect waves-green btn" onclick="createBucket()">Create</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function createBucket() {
|
||||
var formData = {};
|
||||
$.each($('#create-bucket-form')
|
||||
.serializeArray(), function(i, field) {
|
||||
formData[field.name] = field.value;
|
||||
function createBucket() {
|
||||
var formData = {};
|
||||
$.each($('#create-bucket-form')
|
||||
.serializeArray(), function(i, field) {
|
||||
formData[field.name] = field.value;
|
||||
});
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/api/buckets',
|
||||
data: JSON.stringify(formData),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
success: function() { location.reload(); }
|
||||
});
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: '/api/buckets',
|
||||
data: JSON.stringify(formData),
|
||||
dataType: 'json',
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
success: function() { location.reload(); }
|
||||
});
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -18,13 +18,14 @@
|
|||
{{ template "content" . }}
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
src="https://code.jquery.com/jquery-3.4.1.min.js"
|
||||
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" integrity="sha256-U/cHDMTIHCeMcvehBv1xQ052bPSbJtbuiw4QA9cTKz0=" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('.dropdown-trigger').dropdown();
|
||||
$('.modal').modal();
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue