Commit 9aed3873 authored by Janne Koschinski's avatar Janne Koschinski

Improved mobile UI

parent 78183ea7
.page.image.detail
.page.image.detail, .page.upload .uploading.images
display: flex
flex-direction: row
align-items: start
......@@ -9,6 +9,7 @@
flex-direction: column
padding: 32px 0
align-items: stretch
justify-content: start
.sidebar
width: 250px
max-width: 640px
......
......@@ -58,96 +58,7 @@
bottom: 0
opacity: 0
.uploading.images
display: flex
flex-direction: row
align-items: start
align-self: stretch
padding: 32px 32px 128px
justify-content: center
.sidebar
width: 250px
margin-left: 32px
.url
background: #333333
border-radius: 4px
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4)
padding: 8px
margin-bottom: 8px
p
color: #ffffff
div
display: flex
flex-direction: row
input
background: none
color: #fff
opacity: 0.4
border: none
flex-shrink: 1
display: block
flex-grow: 1
width: 0
text-overflow: ellipsis
button.copy
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-left: 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
.progress
position: absolute
top: -4px
......@@ -181,34 +92,6 @@
animation-delay: 1.125s
&:not(.uploading) .progress
opacity: 0
.image
background: #000
display: flex
flex-direction: row
justify-content: center
align-items: start
position: relative
img
max-width: 100%
.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)
&.submitted .container.centered
display: none
&:not(.submitted) .uploading.images
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment