diff --git a/assets/sass/_page_image_detail.sass b/assets/sass/_page_image_detail.sass index b5f362d276d2668c79fbac1fbfaaf2b6039ae6bf..b29ad95ad00336404dc134906f9bcbe82f87b26d 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 65d68341c539d64477055193f747d278dd9c090d..3dc8cfcd82f3c019f35df643acdbaff8c1793881 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 ac6a33ea37526589c1c84fa8e8d05ee0016cefb1..2dee03e2de85f65ca12289667c5890a3f82fb49e 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 f9622d3f3295e522bbfea17c0103f4f1c3b97482..ca3646cf9818455346c7d0fa5643541b0d3cebf5 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 331819abf7535c80b1e1687db3c54f52f072864f..e9f6fd44fb39f3adb6a99cb44bcc242e97c89194 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 38ebd8259467254478d5a8b77d83f882a4beb1eb..cecd3a852eacae3ce5a6da1a212e0feb4be04fad 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>