diff --git a/assets/css/views/_images.scss b/assets/css/views/_images.scss index a01e0f55..76e1f74c 100644 --- a/assets/css/views/_images.scss +++ b/assets/css/views/_images.scss @@ -200,18 +200,11 @@ span.spoiler div.image-container { } .image-description { - margin-bottom: 5px; overflow: auto; + img { max-width: 100%; } - background: $background_odd_color; - border: $border; -} - -.image-description__text { - padding: 0 6px; - margin-bottom: 2px; } .image-size { @@ -330,6 +323,7 @@ span.spoiler div.image-container { .image_source__icon, .image_source__link { padding: 0.5em; + overflow: hidden; } .image_source__icon { diff --git a/lib/philomena_web/templates/image/_description.html.slime b/lib/philomena_web/templates/image/_description.html.slime index 2e4a77d4..70764761 100644 --- a/lib/philomena_web/templates/image/_description.html.slime +++ b/lib/philomena_web/templates/image/_description.html.slime @@ -1,12 +1,15 @@ -div - p +.block + .block__header + span.block__header__title + i.fas.fa-file-lines> + ' Description + .block__content + p + = if String.length(@body) > 0 do + == @body + - else + em No description provided. = if can?(@conn, :edit_description, @image) do a.button#edit-description href="#" data-click-focus="#description" data-click-hide=".image-description" data-click-show="#description-form" title="Edit description" accessKey="d" i.fas.fa-edit> - ' Description: - - - else - ' Description: - - .image-description__text - == @body + ' Edit diff --git a/lib/philomena_web/templates/image/_source.html.slime b/lib/philomena_web/templates/image/_source.html.slime index 3264b2d4..e8fcab7e 100644 --- a/lib/philomena_web/templates/image/_source.html.slime +++ b/lib/philomena_web/templates/image/_source.html.slime @@ -2,7 +2,6 @@ - has_sources = Enum.any?(@image.sources) = form_for @changeset, Routes.image_source_path(@conn, :update, @image), [method: "put", class: "hidden", id: "source-form", data: [remote: "true"]], fn f -> = if can?(@conn, :edit_metadata, @image) and !@conn.assigns.current_ban do - = if @changeset.action do .alert.alert-danger p Oops, something went wrong! Please check the errors below. @@ -38,42 +37,49 @@ p ' You can't edit the source on this image. - .flex.flex--wrap.flex--column#image-source - .flex - a.button.button--separate-right#edit-source data-click-focus=".js-image-source" data-click-hide="#image-source" data-click-show="#source-form" title="Edit source" accessKey="s" - i.fas.fa-edit> + .block#image-source + .block__header + span.block__header__title + i.fas.fa-link> = if !has_sources || length(@image.sources) == 1 do - ' Source: + ' Source - else - ' Sources: - = if @source_change_count > 0 do - a.button.button--link.button--separate-left href=Routes.image_source_change_path(@conn, :index, @image) title="Source history" - i.fa.fa-history> - | History ( - = @source_change_count - | ) - - = if can?(@conn, :hide, @image) and not hide_staff_tools?(@conn) do - = form_for @changeset, Routes.image_source_history_path(@conn, :delete, @image), [method: "delete"], fn _f -> - button.button.button--state-danger.button--separate-left type="submit" data-confirm="Are you really, really sure?" title="Wipe sources" - i.fas.fa-eraser> - ' Wipe - .image_sources - = if has_sources do - - [first_source | sources] = @image.sources - .image_source__icon - i class=image_source_icon(first_source.source) - .image_source__link - a.js-source-link href=first_source.source - strong = first_source.source - = for source <- sources do + ' Sources + .block__content.flex.flex--wrap.flex--column + .image_sources + = if has_sources do + - [first_source | sources] = @image.sources .image_source__icon - i class=image_source_icon(source.source) + i class=image_source_icon(first_source.source) .image_source__link - a href=source.source - strong = source.source - - else - .image_source__icon - i.fa.fa-unlink - .image_source__link - em> not provided yet + a.js-source-link href=first_source.source + strong = first_source.source + = for source <- sources do + .image_source__icon + i class=image_source_icon(source.source) + .image_source__link + a href=source.source + strong = source.source + - else + .image_source__icon + i.fa.fa-unlink + .image_source__link + em> not provided yet + .flex + a.button#edit-source data-click-focus=".js-image-source" data-click-hide="#image-source" data-click-show="#source-form" title="Edit source" accessKey="s" + i.fas.fa-edit> + = if has_sources do + ' Add/Edit + - else + ' Add + = if @source_change_count > 0 do + a.button.button--link.button--separate-left href=Routes.image_source_change_path(@conn, :index, @image) title="Source history" + i.fa.fa-history> + | History ( + = @source_change_count + | ) + = if can?(@conn, :hide, @image) and not hide_staff_tools?(@conn) do + = form_for @changeset, Routes.image_source_history_path(@conn, :delete, @image), [method: "delete"], fn _f -> + button.button.button--state-danger.button--separate-left type="submit" data-confirm="Are you really, really sure?" title="Wipe sources" + i.fas.fa-eraser> + ' Wipe diff --git a/lib/philomena_web/templates/image/_tags.html.slime b/lib/philomena_web/templates/image/_tags.html.slime index d887964e..a66ecfad 100644 --- a/lib/philomena_web/templates/image/_tags.html.slime +++ b/lib/philomena_web/templates/image/_tags.html.slime @@ -56,17 +56,19 @@ p ' You can't edit the tags on this image. - .tagsauce - .block + .block.tagsauce + .block__header + span.block__header__title + i.fas.fa-tag> + ' Tags + .block__content + = render PhilomenaWeb.TagView, "_tag_list.html", tags: tags, conn: @conn a.button.js-tag-sauce-toggle#edit-tags data-click-toggle=".tagsauce, .js-imageform" data-click-focus=".js-taginput-plain:not(.hidden), .js-taginput-input" title="Edit tags" accessKey="t" i.fas.fa-edit> - ' Tags: - + ' Edit = if @tag_change_count > 0 do a.button.button--link.button--separate-left href=Routes.image_tag_change_path(@conn, :index, @image) title="Tag history" i.fa.fa-history> | History ( = @tag_change_count | ) - - = render PhilomenaWeb.TagView, "_tag_list.html", tags: tags, conn: @conn