Skip to content
Snippets Groups Projects
Commit 9aed3873 authored by Janne Mareike Koschinski's avatar Janne Mareike Koschinski
Browse files

Improved mobile UI

parent 78183ea7
No related branches found
No related tags found
No related merge requests found
.page.image.detail .page.image.detail, .page.upload .uploading.images
display: flex display: flex
flex-direction: row flex-direction: row
align-items: start align-items: start
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
flex-direction: column flex-direction: column
padding: 32px 0 padding: 32px 0
align-items: stretch align-items: stretch
justify-content: start
.sidebar .sidebar
width: 250px width: 250px
max-width: 640px max-width: 640px
......
...@@ -58,96 +58,7 @@ ...@@ -58,96 +58,7 @@
bottom: 0 bottom: 0
opacity: 0 opacity: 0
.uploading.images .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 .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 .progress
position: absolute position: absolute
top: -4px top: -4px
...@@ -181,34 +92,6 @@ ...@@ -181,34 +92,6 @@
animation-delay: 1.125s animation-delay: 1.125s
&:not(.uploading) .progress &:not(.uploading) .progress
opacity: 0 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 &.submitted .container.centered
display: none display: none
&:not(.submitted) .uploading.images &:not(.submitted) .uploading.images
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment