diff --git a/assets/css/common/mixins.css b/assets/css/common/mixins.css index ec72599c..311ab539 100644 --- a/assets/css/common/mixins.css +++ b/assets/css/common/mixins.css @@ -64,3 +64,23 @@ color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease; } + +@define-mixin no-bottom-border-radius { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +@define-mixin no-top-border-radius { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +@define-mixin first-last-child-border-radius $classname { + .$(classname) > *:first-child { + @mixin no-top-border-radius; + } + + $(classname) > *:last-child { + @mixin no-bottom-border-radius; + } +} diff --git a/assets/css/elements/button.css b/assets/css/elements/button.css index 97df77e7..18cbad76 100644 --- a/assets/css/elements/button.css +++ b/assets/css/elements/button.css @@ -103,7 +103,7 @@ width: fit-content; font-weight: bold; font-size: var(--font-size); - background: var(--primary-muted-color); + background: var(--secondary-dark-color); color: var(--link-color); border-radius: var(--border-radius-inner); padding: 0 var(--padding-small); @@ -117,7 +117,7 @@ .button:active { @mixin animated-transition; color: var(--text-color); - background: var(--primary-dark-color); + background: var(--secondary-muted-color); border-radius: var(--border-radius-inner); cursor: pointer; } diff --git a/assets/css/elements/list.css b/assets/css/elements/list.css index 574af0b3..ee4f4c82 100644 --- a/assets/css/elements/list.css +++ b/assets/css/elements/list.css @@ -1,10 +1,23 @@ ul, ol { - padding: 0; - list-style-type: none; + display: flex; + flex-flow: column; + gap: var(--padding-small); + margin: 0; + margin-left: var(--padding-small); + padding-inline-start: var(--padding-normal); +} + +li > ul, +li > ol { + padding-top: var(--padding-small); } .horizontal-list { display: flex; + flex-flow: row; gap: var(--padding-normal); + list-style-type: none; + padding: 0; + margin: 0; } diff --git a/assets/css/elements/media.css b/assets/css/elements/media.css index 748e38e3..b27d7a0e 100644 --- a/assets/css/elements/media.css +++ b/assets/css/elements/media.css @@ -110,6 +110,7 @@ .image-container { display: flex; + position: relative; flex-direction: column; align-items: center; justify-content: center; diff --git a/assets/css/elements/table.css b/assets/css/elements/table.css index cdf9f713..10efe5b0 100644 --- a/assets/css/elements/table.css +++ b/assets/css/elements/table.css @@ -1,27 +1,59 @@ -.table { +.table, +.communication__body__text table { border-collapse: collapse; width: 100%; } -.table > thead { - border-radius: var(--border-radius-inner); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; -} - -.table > tbody { - border-radius: var(--border-radius-inner); - border-top-left-radius: 0; - border-top-right-radius: 0; -} - -.table td, -th { - padding: var(--padding-small); - border: 1px solid var(--secondary-muted-color); - text-align: left; +.table thead, +.communication__body__text table thead { + background: var(--secondary-muted-color); } .table th { background: var(--secondary-color); + padding: var(--padding-normal) var(--padding-small); +} + +.table td, +.table th { + padding: var(--padding-small); + text-align: left; +} + +.communication__body__text table th { + background: var(--secondary-color); + padding: var(--padding-normal) var(--padding-small); +} + +.communication__body__text table td, +.communication__body__text table th { + padding: var(--padding-small); + text-align: left; +} + +.table tr, +.communication__body__text table tr { + border-bottom: 1px solid var(--secondary-muted-color); +} + +.table thead th:last-child { + border-top-right-radius: var(--border-radius-inner); +} + +.table thead th:first-child { + border-top-left-radius: var(--border-radius-inner); +} + +.communication__body__text table thead th:first-child { + border-top-left-radius: var(--border-radius-inner); +} + +.communication__body__text table thead th:last-child { + border-top-right-radius: var(--border-radius-inner); +} + +.table tbody, +.communication__body__text table tbody { + border-top: 2px solid var(--secondary-muted-color); + border-bottom: 2px solid var(--secondary-muted-color); } diff --git a/assets/css/views/markdown.css b/assets/css/views/markdown.css index d3e3509f..9efe06ce 100644 --- a/assets/css/views/markdown.css +++ b/assets/css/views/markdown.css @@ -31,3 +31,43 @@ .walloftext { line-height: var(--readable-line-height); } + +pre, +code { + font-family: var(--font-family-monospace); + background: var(--background-color); + border: 1px solid var(--primary-border-color); + border-radius: var(--border-radius-inner); + padding: calc(var(--padding-tiny) / 2) var(--padding-tiny); +} + +pre { + padding: var(--padding-small); + line-height: var(--readable-line-height); + margin: var(--padding-small); + margin-right: 0; +} + +pre code { + border: 0; + background: 0; + padding: 0; +} + +blockquote { + position: relative; + margin: 0; + padding: var(--padding-normal); +} + +blockquote:before { + content: ""; + display: block; + position: absolute; + background: var(--secondary-color); + border-radius: var(--border-radius-inner); + width: var(--padding-tiny); + height: 100%; + left: 0; + top: 0; +} diff --git a/lib/philomena_web/templates/filter/_filter.html.slime b/lib/philomena_web/templates/filter/_filter.html.slime index ab4e9260..da9159d7 100644 --- a/lib/philomena_web/templates/filter/_filter.html.slime +++ b/lib/philomena_web/templates/filter/_filter.html.slime @@ -1,39 +1,59 @@ -.filter - h3 - = @filter.name +.block + .block__content + h3 = @filter.name - = if @filter.user do - p - ' Maintained by - = render PhilomenaWeb.UserAttributionView, "_user.html", object: @filter, conn: @conn + .flex.flex--row + .button__group--standalone + = link to: ~p"/filters/#{@filter}" do + i.fa.fa-eye> + | View this filter + .separator--vertical + = link to: ~p"/filters/new?#{[based_on: @filter]}" do + i.fa.fa-copy> + | Copy and customize - = if @filter.system do - p - ' Maintained by staff - - .filter-options - ul - li - ' Spoilers - = length(@filter.spoilered_tag_ids) - ' , hides - = length(@filter.hidden_tag_ids) - - li - = link "View this filter", to: ~p"/filters/#{@filter}", class: "button" - li - = link "Copy and Customize", to: ~p"/filters/new?#{[based_on: @filter]}", class: "button" = if can?(@conn, :edit, @filter) do - li - = link "Edit this filter", to: ~p"/filters/#{@filter}/edit", class: "button" + .button__group--standalone.button__group--warning + = link to: ~p"/filters/#{@filter}/edit" do + i.fa.fa-edit> + | Edit this filter = if @filter.id == @conn.assigns.current_filter.id do - li - strong Your current filter + .button__group--standalone.button__group--success + a + i.fa.fa-check> + | Your current filter - else - li - = button_to "Use this filter", ~p"/filters/current?#{[id: @filter]}", method: "put", class: "button" + .button__group--standalone + = button_to ~p"/filters/current?#{[id: @filter]}", method: "put", class: "button" do + i.fa.fa-arrow-right-to-bracket> + | Use this filter + + = cond do + - @filter.user -> + p + i.fa.fa-wrench.icon--fixed> + ' Maintained by + = render PhilomenaWeb.UserAttributionView, "_user.html", object: @filter, conn: @conn + - @filter.system -> + p + i.fa.fa-wrench.icon--fixed> + ' Maintained by site staff + - true -> + p + ' Unknown maintainer p + i.fa.fa-shield.icon--fixed> + ' Spoilers + => length(@filter.spoilered_tag_ids) + ' tag(s) + p + i.fa.fa-eye-slash.icon--fixed> + ' Hides + => length(@filter.hidden_tag_ids) + ' tag(s) + p + i.fa.fa-circle-info.icon--fixed> em = @filter.description diff --git a/lib/philomena_web/templates/filter/index.html.slime b/lib/philomena_web/templates/filter/index.html.slime index 8b94a091..cebe5a47 100644 --- a/lib/philomena_web/templates/filter/index.html.slime +++ b/lib/philomena_web/templates/filter/index.html.slime @@ -27,12 +27,15 @@ = if !@conn.params["fq"] do h2 My Filters = if @current_user do - p - = link("Click here to make a new filter from scratch", to: ~p"/filters/new") + = link to: ~p"/filters/new", class: "button" do + i.fa.fa-plus> + | Click here to make a new filter from scratch + br = for filter <- @my_filters do = render PhilomenaWeb.FilterView, "_filter.html", conn: @conn, filter: filter - else p + i.fa.fa-circle-info.icon--fixed> ' If you're logged in, you can create and maintain custom filters here. h2 Global Filters diff --git a/lib/philomena_web/templates/user_attribution/_user.html.slime b/lib/philomena_web/templates/user_attribution/_user.html.slime index 848706b4..e2e88d78 100644 --- a/lib/philomena_web/templates/user_attribution/_user.html.slime +++ b/lib/philomena_web/templates/user_attribution/_user.html.slime @@ -2,7 +2,7 @@ strong<> - icon = user_icon(@object.user) = if icon do - i class="fa #{icon}"> + i> class="fa #{icon}" = link(@object.user.name, to: ~p"/profiles/#{@object.user}") = if assigns[:awards] do = render PhilomenaWeb.ProfileView, "_awards.html", awards: @object.user.awards diff --git a/lib/philomena_web/views/app_view.ex b/lib/philomena_web/views/app_view.ex index d6f3a7d8..a89e7130 100644 --- a/lib/philomena_web/views/app_view.ex +++ b/lib/philomena_web/views/app_view.ex @@ -102,7 +102,17 @@ defmodule PhilomenaWeb.AppView do end end - def button_to(text, route, args \\ []) do + def button_to(route, args \\ [], do: fun) do + method = Keyword.get(args, :method, "get") + class = Keyword.get(args, :class, nil) + data = Keyword.get(args, :data, []) + + form_for(nil, route, [method: method, class: "button_to"], fn _f -> + submit([class: class, data: data], do: fun) + end) + end + + def button_to(text, route, args) do method = Keyword.get(args, :method, "get") class = Keyword.get(args, :class, nil) data = Keyword.get(args, :data, [])