From 6636b29abe660805b14a15b04e8c735ea94f5445 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Sun, 18 Mar 2018 04:50:03 +0100
Subject: [PATCH] Fixed a minor issue

---
 assets/sass/_nav.sass               |  39 +++++
 assets/sass/_page_image_detail.sass | 109 +++++++++++++
 assets/sass/_page_image_list.sass   |  40 +++++
 assets/sass/_page_upload.sass       |  62 ++++++++
 assets/sass/style.sass              | 239 +---------------------------
 5 files changed, 254 insertions(+), 235 deletions(-)
 create mode 100644 assets/sass/_nav.sass
 create mode 100644 assets/sass/_page_image_detail.sass
 create mode 100644 assets/sass/_page_image_list.sass
 create mode 100644 assets/sass/_page_upload.sass

diff --git a/assets/sass/_nav.sass b/assets/sass/_nav.sass
new file mode 100644
index 0000000..12644a5
--- /dev/null
+++ b/assets/sass/_nav.sass
@@ -0,0 +1,39 @@
+nav
+  position: sticky
+  top: 0
+  background: #333333
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
+  padding: 0 16px
+  ul
+    display: flex
+    max-width: 1024px
+    margin: 0 auto
+    height: 56px
+    align-items: center
+    li, li > *
+      color: #282828
+      text-decoration: none
+    li
+      display: block
+      line-height: 24px
+      &.title, &.title > *
+        font-size: 24px
+        color: #FFC107
+        font-weight: 700
+      &.spacer
+        flex-grow: 1
+      &:not(.spacer)
+        margin: 0 8px
+        &:first-child
+          margin-left: 0
+        &:last-child
+          margin-right: 0
+        &:not(.title) a
+          display: block
+          background: #FFC107
+          padding: 4px 16px
+          border-radius: 2px
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+          &:hover, &:focus
+            background: #FFD54F
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
\ No newline at end of file
diff --git a/assets/sass/_page_image_detail.sass b/assets/sass/_page_image_detail.sass
new file mode 100644
index 0000000..8a11420
--- /dev/null
+++ b/assets/sass/_page_image_detail.sass
@@ -0,0 +1,109 @@
+.detailpage
+  display: flex
+  flex-direction: row
+  align-items: start
+  align-self: center
+  margin: 32px
+  .sidebar
+    width: 250px
+    margin-left: 32px
+    .url
+      background: #333333
+      border-radius: 4px
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
+      display: flex
+      flex-direction: row
+      #url-field
+        background: none
+        color: #fff
+        border: none
+        flex-shrink: 1
+        display: block
+        flex-grow: 1
+        width: 0
+        margin: 8px
+        text-overflow: ellipsis
+      #copy-url
+        display: block
+        background: #FFC107
+        padding: 4px 16px
+        border-radius: 2px
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+        border: none
+        font-family: 'Lato', sans-serif
+        font-size: 10pt
+        line-height: 24px
+        margin: 8px
+        cursor: pointer
+    .actions
+      background: #333333
+      border-radius: 4px
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
+      display: flex
+      flex-direction: row
+      margin-bottom: 8px
+      .delete-form, .update-form
+        display: flex
+        flex-grow: 1
+        input[type=submit]
+          display: block
+          background: #FFC107
+          padding: 4px 16px
+          border-radius: 2px
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
+          border: none
+          font-family: 'Lato', sans-serif
+          font-size: 10pt
+          line-height: 24px
+          margin: 8px
+          flex-grow: 1
+          cursor: pointer
+          &:hover, &:focus
+            background: #FFD54F
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
+  .detail
+    max-width: 640px
+    width: 100%
+    background: #333333
+    border-radius: 4px
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
+    .title
+      line-height: 1.25
+      padding: 16px
+      vertical-align: middle
+      font-size: 14pt
+      font-weight: normal
+      color: #eee
+      background: none
+      border: none
+      width: 100%
+      box-sizing: border-box
+      &:not(.fake-input):empty
+        display: none
+        & + .image
+          border-top-left-radius: 4px
+          border-top-right-radius: 4px
+    .image
+      background: #000
+      display: flex
+      flex-direction: row
+      justify-content: center
+    .description
+      line-height: 1.25
+      padding: 16px
+      vertical-align: middle
+      font-size: 11pt
+      font-weight: normal
+      color: #eee
+      background: none
+      border: none
+      width: 100%
+      box-sizing: border-box
+      font-family: 'Lato', sans-serif
+      resize: vertical
+      white-space: pre-line
+      &:not(.fake-input):empty
+        display: none
+  .fake-input[contenteditable]:empty:before
+    opacity: 0.4
+    content: attr(placeholder)
\ No newline at end of file
diff --git a/assets/sass/_page_image_list.sass b/assets/sass/_page_image_list.sass
new file mode 100644
index 0000000..65d6834
--- /dev/null
+++ b/assets/sass/_page_image_list.sass
@@ -0,0 +1,40 @@
+.images
+  display: flex
+  max-width: 1024px
+  margin: 0 auto
+  align-items: start
+  flex-wrap: wrap
+  .image
+    padding: 8px
+    margin: 8px
+    position: relative
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
+    transition: all 200ms
+    text-decoration: none
+    width: 160px
+    background: #333333
+    border-radius: 2px
+    &:hover, &:focus
+      margin-top: 4px
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4)
+    .image-container
+      display: flex
+      justify-content: center
+      align-content: center
+      justify-items: center
+      align-items: center
+      flex-direction: column
+      height: 160px
+      width: 160px
+      background: #000000
+    .info
+      display: block
+      z-index: 1
+      color: #eeeeee
+      line-height: 1.25
+      font-size: 10pt
+      padding-top: 12px
+      p
+        white-space: nowrap
+        text-overflow: ellipsis
+        overflow: hidden
\ No newline at end of file
diff --git a/assets/sass/_page_upload.sass b/assets/sass/_page_upload.sass
new file mode 100644
index 0000000..ac6a33e
--- /dev/null
+++ b/assets/sass/_page_upload.sass
@@ -0,0 +1,62 @@
+.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
+      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
+      display: none
\ No newline at end of file
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index b73e067..0139a63 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -19,46 +19,6 @@ body
   display: flex
   flex-direction: column
 
-nav
-  position: sticky
-  top: 0
-  background: #333333
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
-  padding: 0 16px
-  ul
-    display: flex
-    max-width: 1024px
-    margin: 0 auto
-    height: 56px
-    align-items: center
-    li, li > *
-      color: #282828
-      text-decoration: none
-    li
-      display: block
-      line-height: 24px
-      &.title, &.title > *
-        font-size: 24px
-        color: #FFC107
-        font-weight: 700
-      &.spacer
-        flex-grow: 1
-      &:not(.spacer)
-        margin: 0 8px
-        &:first-child
-          margin-left: 0
-        &:last-child
-          margin-right: 0
-        &:not(.title) a
-          display: block
-          background: #FFC107
-          padding: 4px 16px
-          border-radius: 2px
-          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
-          &:hover,&:focus
-            background: #FFD54F
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
-
 .container.centered
   flex-grow: 1
   display: flex
@@ -69,198 +29,7 @@ nav
   width: 100%
   max-width: 640px
 
-.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
-      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
-      display: none
-
-.images
-  display: flex
-  max-width: 1024px
-  margin: 0 auto
-  align-items: start
-  flex-wrap: wrap
-  .image
-    padding: 8px
-    margin: 8px
-    position: relative
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
-    transition: all 200ms
-    text-decoration: none
-    width: 160px
-    background: #333333
-    border-radius: 2px
-    &:hover,&:focus
-      margin-top: 4px
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4)
-    .image-container
-      display: flex
-      justify-content: center
-      align-content: center
-      justify-items: center
-      align-items: center
-      flex-direction: column
-      height: 160px
-      width: 160px
-      background: #000000
-    .info
-      display: block
-      z-index: 1
-      color: #eeeeee
-      line-height: 1.25
-      font-size: 10pt
-      padding-top: 12px
-      p
-        white-space: nowrap
-        text-overflow: ellipsis
-        overflow: hidden
-
-.detailpage
-  display: flex
-  flex-direction: row
-  align-items: start
-  align-self: center
-  margin: 32px
-
-  .sidebar
-    width: 250px
-    margin-left: 32px
-    .actions
-      background: #333333
-      border-radius: 4px
-      box-shadow: 0 2px 4px rgba(0,0,0,0.4)
-      display: flex
-      flex-direction: row
-
-      .delete-form, .update-form
-        display: flex
-        flex-grow: 1
-
-        input[type=submit]
-          display: block
-          background: #FFC107
-          padding: 4px 16px
-          border-radius: 2px
-          box-shadow: 0 1px 2px rgba(0,0,0,0.1)
-          border: none
-          font-family: 'Lato', sans-serif
-          font-size: 10pt
-          line-height: 24px
-          margin: 8px
-          flex-grow: 1
-          cursor: pointer
-          &:hover,&:focus
-            background: #FFD54F
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)
-
-  .detail
-    max-width: 640px
-    width: 100%
-    background: #333333
-    border-radius: 4px
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
-    .title
-      line-height: 1.25
-      padding: 16px
-      vertical-align: middle
-      font-size: 14pt
-      font-weight: normal
-      color: #eee
-      background: none
-      border: none
-      width: 100%
-      box-sizing: border-box
-      &:not(.fake-input):empty
-        display: none
-        & + .image
-          border-top-left-radius: 4px
-          border-top-right-radius: 4px
-    .image
-      background: #000
-      display: flex
-      flex-direction: row
-      justify-content: center
-    .description
-      line-height: 1.25
-      padding: 16px
-      vertical-align: middle
-      font-size: 11pt
-      font-weight: normal
-      color: #eee
-      background: none
-      border: none
-      width: 100%
-      box-sizing: border-box
-      font-family: 'Lato', sans-serif
-      resize: vertical
-      white-space: pre-line
-      &:not(.fake-input):empty
-        display: none
-
-  .fake-input[contenteditable]:empty:before
-    opacity: 0.4
-    content: attr(placeholder)
\ No newline at end of file
+@import "nav"
+@import "page_upload"
+@import "page_image_detail"
+@import "page_image_list"
-- 
GitLab