diff --git a/assets/sass/style.sass b/assets/sass/style.sass index f97ce2344605f6d6840893ec5caffc800d90090b..1c9e46cc83303b1350306f6ef1b7bf30fa2094bc 100644 --- a/assets/sass/style.sass +++ b/assets/sass/style.sass @@ -179,51 +179,88 @@ form.upload text-overflow: ellipsis overflow: hidden -.detail - max-width: 640px - margin: 32px auto - 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 +.detailpage + display: flex + flex-direction: row + align-items: start + align-self: center + margin: 32px + + .actions + width: 250px + margin-left: 32px + background: #333333 + border-radius: 4px + box-shadow: 0 2px 4px rgba(0,0,0,0.4) 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 + + .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 + margin: 32px auto width: 100% - box-sizing: border-box - font-family: 'Lato', sans-serif - resize: vertical - white-space: pre-line - &:not(.fake-input):empty - display: none + 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 + .fake-input[contenteditable]:empty:before + opacity: 0.4 + content: attr(placeholder) \ No newline at end of file diff --git a/templates/image_detail.html b/templates/image_detail.html index c8475f30a11a3855f67a413b878cb4ffaf47d679..61e3e049c4c1490186cffe60d8a6cabc9e2a5a20 100644 --- a/templates/image_detail.html +++ b/templates/image_detail.html @@ -1,33 +1,40 @@ {{define "title"}}{{.Image.Title}} | i.k8r{{end}} {{define "content"}} -<div class="detail"> -{{if .IsMine}} - <h2 class="title fake-input" contenteditable="true" placeholder="Title">{{.Image.Title}}</h2> -{{else}} - <h2 class="title">{{.Image.Title}}</h2> -{{end}} - <div class="image"> - <img src="/{{.Image.Id}}"> - </div> -{{if .IsMine}} - <p class="description fake-input" contenteditable="true" placeholder="Description" data-multiline>{{.Image.Description}}</p> - <div class="actions"> - <form class="delete-form" method="post"> - <input type="hidden" name="action" value="delete"> - <input type="hidden" name="id" value="{{.Image.Id}}"> - <input type="submit" value="Delete"> - </form> - <form class="update-form" method="post"> - <input type="hidden" name="action" value="update"> - <input type="hidden" name="id" value="{{.Image.Id}}"> - <input type="hidden" name="title" value="{{.Image.Title}}"> - <input type="hidden" name="description" value="{{.Image.Description}}"> - <input type="submit" value="Save"> - </form> +<div class="detailpage"> + <div class="detail"> + {{if .IsMine}} + <h2 class="title fake-input" contenteditable="true" placeholder="Title">{{.Image.Title}}</h2> + {{else}} + <h2 class="title">{{.Image.Title}}</h2> + {{end}} + <div class="image"> + <img src="/{{.Image.Id}}"> + </div> + {{if .IsMine}} + <p class="description fake-input" contenteditable="true" placeholder="Description" + data-multiline>{{.Image.Description}}</p> + <div class="actions"> + <form class="delete-form" method="post"> + <input type="hidden" name="action" value="delete"> + <input type="hidden" name="id" value="{{.Image.Id}}"> + <input type="submit" value="Delete"> + </form> + <form class="update-form" method="post"> + <input type="hidden" name="action" value="update"> + <input type="hidden" name="id" value="{{.Image.Id}}"> + <input type="hidden" name="title" value="{{.Image.Title}}"> + <input type="hidden" name="description" value="{{.Image.Description}}"> + <input type="submit" value="Save"> + </form> + </div> + + <div class="url"> + <input type="text" value="https://i.k8r.eu/{{.Image.Id}}"> + </div> + {{else}} + <div class="description">{{.Image.Description}}</div> + {{end}} </div> -{{else}} - <div class="description">{{.Image.Description}}</div> -{{end}} </div> {{if .IsMine}} <script>