From 9848dacaae9a9b102bb3b7e444dc5a6a7706b781 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 18:36:05 +0100
Subject: [PATCH] Improved upload API
---
assets/sass/_page_image_detail.sass | 2 +-
assets/sass/_page_image_list.sass | 2 +-
assets/sass/_page_upload.sass | 111 +++++++++++++---------------
templates/image_detail.html | 2 +-
templates/image_list.html | 2 +-
templates/upload.html | 4 +-
6 files changed, 58 insertions(+), 65 deletions(-)
diff --git a/assets/sass/_page_image_detail.sass b/assets/sass/_page_image_detail.sass
index b5f362d..b29ad95 100644
--- a/assets/sass/_page_image_detail.sass
+++ b/assets/sass/_page_image_detail.sass
@@ -1,4 +1,4 @@
-.detailpage
+.page.image.detail
display: flex
flex-direction: row
align-items: start
diff --git a/assets/sass/_page_image_list.sass b/assets/sass/_page_image_list.sass
index 65d6834..3dc8cfc 100644
--- a/assets/sass/_page_image_list.sass
+++ b/assets/sass/_page_image_list.sass
@@ -1,4 +1,4 @@
-.images
+.page.image.list
display: flex
max-width: 1024px
margin: 0 auto
diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass
index ac6a33e..2dee03e 100644
--- a/assets/sass/_page_upload.sass
+++ b/assets/sass/_page_upload.sass
@@ -1,62 +1,57 @@
-.alert
- padding: 16px
- margin: 16px 0
- box-shadow: 0 2px 4px rgba(33, 33, 33, 0.2)
- text-decoration: none
- border-radius: 2px
- &.success
- background: #DCEDC8
- color: #689F38
- border-color: #689F38
- a
- color: #33691E
- &.error
- background: #FFEBEE
- color: #F44336
- border-color: #F44336
- a
- color: #D32F2F
+.page.upload
+ .alert
+ padding: 16px
+ margin: 16px 0
+ box-shadow: 0 2px 4px rgba(33, 33, 33, 0.2)
+ text-decoration: none
+ border-radius: 2px
+ &.success
+ background: #DCEDC8
+ color: #689F38
+ border-color: #689F38
+ a
+ color: #33691E
+ &.error
+ background: #FFEBEE
+ color: #F44336
+ border-color: #F44336
+ a
+ color: #D32F2F
-form.upload
- padding: 96px 0
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
- text-decoration: none
- border-radius: 2px
- text-align: center
- background: #333333
- .upload-label
- font-size: 18pt
- color: #fff
- label
- position: relative
- display: inline-block
- overflow: hidden
- span.text
+ form.upload
+ padding: 96px 0
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
+ text-decoration: none
+ border-radius: 2px
+ text-align: center
+ background: #333333
+ .upload-label
+ font-size: 18pt
+ color: #fff
+ label
position: relative
display: inline-block
- background: #FFC107
- padding: 4px 16px
- border-radius: 2px
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
- line-height: 24px
- color: #282828
- cursor: pointer
- z-index: 1
- &:hover, &:focus
- background: #FFD54F
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
- input[type=file]
- position: absolute
- left: 0
- right: 0
- top: 0
- bottom: 0
- opacity: 0
- input[type=submit]
- display: none
- &:not(.submitted)
- .upload-label
- display: none
- .submitted
- label, input
+ overflow: hidden
+ span.text
+ position: relative
+ display: inline-block
+ background: #FFC107
+ padding: 4px 16px
+ border-radius: 2px
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+ line-height: 24px
+ color: #282828
+ cursor: pointer
+ z-index: 1
+ &:hover, &:focus
+ background: #FFD54F
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
+ input[type=file]
+ position: absolute
+ left: 0
+ right: 0
+ top: 0
+ bottom: 0
+ opacity: 0
+ &.submitted
display: none
\ No newline at end of file
diff --git a/templates/image_detail.html b/templates/image_detail.html
index f9622d3..ca3646c 100644
--- a/templates/image_detail.html
+++ b/templates/image_detail.html
@@ -1,6 +1,6 @@
{{define "title"}}{{.Image.Title}} | i.k8r{{end}}
{{define "content"}}
-<div class="detailpage">
+<div class="page image detail">
<div class="detail">
{{if .IsMine}}
<h2 class="title fake-input" contenteditable="true" placeholder="Title">{{.Image.Title}}</h2>
diff --git a/templates/image_list.html b/templates/image_list.html
index 331819a..e9f6fd4 100644
--- a/templates/image_list.html
+++ b/templates/image_list.html
@@ -1,6 +1,6 @@
{{define "title"}}My Images | i.k8r{{end}}
{{define "content"}}
-<div class="images">
+<div class="page image list">
{{range .Images}}
<a class="image" href="/i/{{.Id}}">
<div class="image-container">
diff --git a/templates/upload.html b/templates/upload.html
index 38ebd82..cecd3a8 100644
--- a/templates/upload.html
+++ b/templates/upload.html
@@ -1,6 +1,6 @@
{{define "title"}}Upload | i.k8r{{end}}
{{define "content"}}
-<div class="container centered">
+<div class="page upload container centered">
{{range .Results}}
{{if .Success}}
<div class="alert success">
@@ -24,8 +24,6 @@
<span class="text">Select Files</span>
<input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov" multiple/>
</label>
- <input type="submit" value="Upload"/>
- <p class="upload-label">Uploading…</p>
</form>
<div class="uploading images"></div>
</div>
--
GitLab