diff --git a/components/Collection/templates/collection/actors.html.twig b/components/Collection/templates/collection/actors.html.twig index 26c2202ed9..7fa9136d63 100644 --- a/components/Collection/templates/collection/actors.html.twig +++ b/components/Collection/templates/collection/actors.html.twig @@ -4,7 +4,7 @@ {% block body %}
-

{{ title }}

+

{{ title }}

{% trans %}Sort by:{% endtrans %}

@@ -26,7 +26,7 @@ {% endfor %}

{% trans %}Page: %page%{% endtrans %}

{% else %} -

{{ empty_message }}

+

{{ empty_message }}

{% endif %}
diff --git a/components/Collection/templates/collection/widget_add_to.html.twig b/components/Collection/templates/collection/widget_add_to.html.twig index cce9f48c45..57fa8e44db 100644 --- a/components/Collection/templates/collection/widget_add_to.html.twig +++ b/components/Collection/templates/collection/widget_add_to.html.twig @@ -4,23 +4,23 @@

{{ctitle}}

{% if has_collections %} -
+
{{ form(add_form) }} -
+
{% trans %}Other options{% endtrans %} -
+
{{ form(create_form) }} -
+
{% else %} -
+
{{ form(create_form) }} -
+ {% endif %} diff --git a/components/LeftPanel/templates/left_panel/view.html.twig b/components/LeftPanel/templates/left_panel/view.html.twig index 15b513ad2c..43cae5b4d9 100644 --- a/components/LeftPanel/templates/left_panel/view.html.twig +++ b/components/LeftPanel/templates/left_panel/view.html.twig @@ -1,28 +1,24 @@ {% block leftpanel %} -
- - - + + + -
+ {{ block("footer", "cards/navigation/view.html.twig") }} + + {% endblock leftpanel %} diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig index a63e422328..b1e309c601 100644 --- a/components/RightPanel/templates/right_panel/view.html.twig +++ b/components/RightPanel/templates/right_panel/view.html.twig @@ -1,69 +1,65 @@ {% block rightpanel %} -
- - - + + + -
+ {% set extra_blocks = get_right_panel_blocks({'path': current_path, 'request': app.request, 'vars': (right_panel_vars | default)}) %} + {% for block in extra_blocks %} + {{ block | raw }} + {% endfor %} + + {% endblock rightpanel %} diff --git a/components/Search/templates/cards/search/view.html.twig b/components/Search/templates/cards/search/view.html.twig index 0412edf1d0..fe25b6481a 100644 --- a/components/Search/templates/cards/search/view.html.twig +++ b/components/Search/templates/cards/search/view.html.twig @@ -1,8 +1,6 @@ -
- + diff --git a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig index e78b50ee55..9a3f317fb6 100644 --- a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig +++ b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig @@ -3,9 +3,9 @@

Web Monetization

-
+
{{ form(the_form) }} -
+
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css index ca96f9f230..d3d1c8aa4f 100644 --- a/public/assets/default_theme/css/base.css +++ b/public/assets/default_theme/css/base.css @@ -1,5 +1,6 @@ html { + font-family: 'Open Sans', sans-serif; scroll-margin-top: var(--xxl); } @@ -50,65 +51,25 @@ html { .page-header { z-index: 1; - display: inline-flex; - justify-content: center; position: fixed; + display: flex; top: 0; - align-items: baseline; - font-family: 'Poppins', sans-serif; height: var(--xxl); + align-items: baseline; padding: var(--s); background: var(--gradient) !important; box-shadow: var(--shadow); } .header-instance { - display: flex; - position: absolute; text-align: center; - align-items: center; - align-self: center; - margin-left: auto; + flex: 1; } -.header-instance > * { +.header-instance * { margin: unset; } -.header-extra-actions { - justify-self: flex-end; - margin-left: auto; -} - -.header-extra-actions[open] > *:not(summary) { - z-index: 2; - position: absolute; - top: 100%; - right: 0; - width: 16.5vw; - border-radius: 0 0 var(--s) var(--s); - padding: var(--s); - background: var(--background-hard); - box-shadow: var(--shadow); -} - -.header-panel { - display: flex; - flex-direction: column; - font-family: 'Open Sans', sans-serif; - position: fixed; - top: 0; - margin-top: var(--xxl); - height: calc(100% - var(--xxl)); - padding: var(--s); - overflow-y: auto; -} - -.panel-content { - display: flex; - flex-direction: column; -} - .page-content-wrapper { position: relative; top: var(--xxl); @@ -151,6 +112,26 @@ html { justify-content: space-evenly; } +.section-panel { + position: fixed; + top: var(--xxl); + padding: var(--s); +} + +.section-panel-left { + left: 0; +} + +.section-panel-right { + right: 0; +} + +.section-panel .panel-content { + display: block; + height: 100vh; + background: var(--background-hard); +} + @media only screen and (max-width: 1280px) { .page-header { width: 100%; @@ -164,23 +145,26 @@ html { max-width: 100%; } - .header-extra-actions[open] > *:not(summary) { - width: 100%; + label[for|="toggle-panel"] { + cursor: pointer; } - #panel-left-toggle:not(:checked) + .header-panel, - #panel-right-toggle:not(:checked) + .header-panel { + input[id|="toggle-panel"] { + position: absolute; + top: -100%; + } + + #toggle-panel-left:not(:checked) ~ .section-panel-left, + #toggle-panel-right:not(:checked) ~ .section-panel-right { display: none; } - #panel-left-toggle:checked + .header-panel, - #panel-right-toggle:checked + .header-panel, - a[id|="anchor"]:target ~ .panel-content { - display: flex; - width: 100%; - background-size: 100% 100%; - z-index: auto; - background-color: var(--background-hard) !important; + #toggle-panel-left:checked ~ .section-panel-left, + #toggle-panel-right:checked ~ .section-panel-right { + z-index: 1; + width: 100vw; + left: 0; + overflow-y: auto; } } @@ -189,7 +173,12 @@ html { width: 100%; } - .header-panel { + label[for|="toggle-panel"], + input[id|="toggle-panel"] { + display: none !important; + } + + .section-panel { width: 17vw; } @@ -213,7 +202,7 @@ html { * > .page-content-wrapper * 66% * 2/3 = 44% * - * > .header-panel + * > .section-panel * 66% - 44% = 22% * 22% / 2 = 11% */ @@ -222,10 +211,23 @@ html { align-self: center; } - .header-panel { + label[for|="toggle-panel"], + input[id|="toggle-panel"] { + display: none !important; + } + + .section-panel { width: 11vw; } + .section-panel-left { + left: 17vw; + } + + .section-panel-right { + right: 17vw; + } + .page-content-wrapper { width: 44vw; } diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css index e376b2ec7c..cbebcf83c9 100644 --- a/public/assets/default_theme/css/pages/feeds.css +++ b/public/assets/default_theme/css/pages/feeds.css @@ -32,8 +32,8 @@ } .note-sidebar > * { - max-width: 4rem; - max-height: 4rem; + max-width: 3rem; + max-height: 3rem; width: 100%; height: auto; border-radius: 2px; @@ -137,12 +137,11 @@ embed header { border-bottom: unset; border-radius: 0 var(--s) 0 0; line-height: initial; - padding: 8px var(--s) 8px 0; + padding: 4px var(--s) 4px 0; } .note-info { margin-top: 2px; - margin-right: 2px; background: var(--gradient-backwards); } @@ -152,6 +151,7 @@ embed header { .note-info-start { display: flex; + flex: 1; flex-wrap: wrap; } @@ -188,9 +188,7 @@ embed header { } .note-actions { - display: inline-block; - align-items: center; - margin-left: auto; + float: right; } .note-actions > li { @@ -269,10 +267,10 @@ embed header { .button-container { border: none !important; mask-repeat: no-repeat !important; - mask-size: cover !important; + mask-size: contain !important; display: inline-block; - width: var(--unit); - height: var(--unit); + width: 14px; + height: 14px; background-color: var(--foreground); opacity: 0.33; } @@ -322,7 +320,7 @@ embed header { display: flex; flex-direction: column; border-radius: 0 0 var(--s) var(--s); - padding: 0 var(--s) var(--s) 0; + padding: 0 4px 4px 0; } .note-text a { @@ -341,7 +339,6 @@ embed header { border-radius: var(--s); padding: var(--s); align-self: flex-start; - background-color: var(--background-card) !important; } .note-attachments-unit:not(:only-child) { @@ -401,13 +398,8 @@ embed header { .note-sidebar { padding: 8px 2px 0 2px; } - - .note-sidebar .avatar { - width: 60%; - } - - .button-container { - width: 0.937rem; - height: 0.937rem; + .note-sidebar > * { + max-width: 2rem; + max-height: 2rem; } } \ No newline at end of file diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css index e9c4efff5a..baf8746697 100644 --- a/public/assets/default_theme/css/widgets/sections.css +++ b/public/assets/default_theme/css/widgets/sections.css @@ -74,6 +74,10 @@ margin: 4px unset unset; } +.profile-navigation > * { + display: block; +} + .profile-extra-actions { margin-top: var(--s); margin-right: var(--s); @@ -346,4 +350,13 @@ textarea.form-row-widget { padding: 2px 6px; margin-top: 6px; margin-bottom: 6px; +} + +.footer ul { + display: flex; + flex-wrap: wrap; +} + +.footer ul li { + margin-right: var(--s); } \ No newline at end of file diff --git a/public/components/LeftPanel/assets/css/view.css b/public/components/LeftPanel/assets/css/view.css deleted file mode 100644 index bf552b5e25..0000000000 --- a/public/components/LeftPanel/assets/css/view.css +++ /dev/null @@ -1,95 +0,0 @@ - - -.section-panel-left { - position: absolute; - left: 0; -} - -#panel-left-toggle:not(:checked), -#panel-left-toggle:checked { - position: absolute; - top: -100%; -} - -.panel-left-icon { - cursor: pointer !important; - padding-left: var(--s); - border: 2px solid transparent; - vertical-align: middle; -} - -.profile-navigation { - display: flex; - flex-direction: column; -} - - -/* FEED NAVIGATION / PLUGINS */ -.feed-nav { - margin-bottom: var(--xl); -} - -.feed-nav a { - display: flex; -} - -.feed-nav hr { - flex: 1; - background: linear-gradient(90deg, var(--accent), transparent); -} - -.feed-nav a { - color: var(--foreground); -} - -.feed-nav .active { - color: var(--foreground); -} - -.main-nav a { - display: flex; - flex-direction: column; -} - -.footer { - margin-top: auto; - font-size: var(--unit); -} - -.footer ul { - display: inline-flex; - flex-wrap: wrap; - width: 100%; - justify-content: flex-start; -} - -.footer ul li { - margin-right: 5px; -} - -/* > 720p */ -@media only screen and (min-width:1281px) { - .section-panel-left #panel-left-toggle ~ .header-panel { - left: 0; - } - - .panel-left-icon { - opacity: 0; - } -} - -/* > 1080p */ -@media only screen and (min-width:1921px) { - /* - * Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio - * - * 50% - (100 * 2/3) / 2 = 33% - * - * > .section-panel-left - * 50 % - 33% = 17% - */ - .section-panel-left { - left: 0; - margin-left: 17vw; - } -} diff --git a/public/components/RightPanel/assets/css/view.css b/public/components/RightPanel/assets/css/view.css deleted file mode 100644 index 095a87ede2..0000000000 --- a/public/components/RightPanel/assets/css/view.css +++ /dev/null @@ -1,52 +0,0 @@ - - -.section-panel-right { - position: absolute; - right: 0; -} - -#panel-right-toggle:not(:checked), -#panel-right-toggle:checked { - position: absolute; - top: -100%; -} - -.section-panel-right #panel-right-toggle:checked ~ .header-panel { - left: 0; -} - -.panel-right-icon { - cursor: pointer !important; - padding-right: var(--s); - border: 2px solid transparent; - vertical-align: middle; -} - -.section-panel-right textarea { - resize: vertical; -} - -@media only screen and (min-width: 1281px) { - .section-panel-right #panel-right-toggle ~ .header-panel { - right: 0; - } - - .panel-right-icon { - opacity: 0; - } -} - -/* > 1080p */ -@media only screen and (min-width:1921px) { - /* - * Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio - * - * 50% - (100 * 2/3) / 2 = 33% - * - * > .section-panel-right - * 50 % - 33% = 17% - */ - .section-panel-right { - margin-right: 17vw; - } -} \ No newline at end of file diff --git a/templates/base.html.twig b/templates/base.html.twig index 69fdd6eb99..d7231c6bfb 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -94,12 +94,14 @@ diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig index 10a9791a3a..38db492125 100644 --- a/templates/settings/base.html.twig +++ b/templates/settings/base.html.twig @@ -12,7 +12,7 @@ {% block body %}