From 692ecf1c9925b2da0d535684aedcebc452499228 Mon Sep 17 00:00:00 2001 From: Eliseu Amaro Date: Mon, 17 Jan 2022 16:32:41 +0000 Subject: [PATCH] [TWIG] Improved templates HTML structure, removed unnecessary element nesting, and refactored content sectioning [COMPONENTS][Search] Refactored widget event as 'PrependRightPanel' (making it able to accomodate more generic blocks) --- .../Attachment/Controller/Attachment.php | 2 +- .../templates/collection/notes.html.twig | 76 +++++++++---------- components/LeftPanel/LeftPanel.php | 2 +- .../templates/left_panel/view.html.twig | 39 +++++----- components/RightPanel/RightPanel.php | 2 +- .../templates/right_panel/view.html.twig | 73 ++++++++++-------- components/Search/Controller/Search.php | 2 +- components/Search/Search.php | 7 +- .../templates/cards/search/view.html.twig | 8 ++ .../search/{show.html.twig => view.html.twig} | 0 .../assets/default_theme/css/pages/feeds.css | 19 +++-- public/assets/default_theme/css/reset.css | 4 +- .../default_theme/css/widgets/sections.css | 40 ++++++++++ .../{Left => LeftPanel}/assets/css/view.css | 9 ++- .../{Right => RightPanel}/assets/css/view.css | 14 +++- templates/base.html.twig | 17 +---- templates/cards/note/view.html.twig | 65 ++++++++-------- 17 files changed, 224 insertions(+), 155 deletions(-) create mode 100644 components/Search/templates/cards/search/view.html.twig rename components/Search/templates/search/{show.html.twig => view.html.twig} (100%) rename public/components/{Left => LeftPanel}/assets/css/view.css (87%) rename public/components/{Right => RightPanel}/assets/css/view.css (71%) diff --git a/components/Attachment/Controller/Attachment.php b/components/Attachment/Controller/Attachment.php index 3e363bc9b8..36a75a9ba1 100644 --- a/components/Attachment/Controller/Attachment.php +++ b/components/Attachment/Controller/Attachment.php @@ -89,7 +89,7 @@ class Attachment extends Controller try { return $this->attachment($attachment_id, $note_id, function ($res) use ($note_id, $attachment_id) { return [ - '_template' => '/cards/attachments/show.html.twig', + '_template' => '/cards/attachments/view.html.twig', 'download' => $res['attachment']->getDownloadUrl(note: $note_id), 'title' => $res['title'], 'attachment' => $res['attachment'], diff --git a/components/Collection/templates/collection/notes.html.twig b/components/Collection/templates/collection/notes.html.twig index 7c6af08feb..f53758b513 100644 --- a/components/Collection/templates/collection/notes.html.twig +++ b/components/Collection/templates/collection/notes.html.twig @@ -14,46 +14,44 @@ {% endfor %} {% if notes is defined %} -
-
- {% if page_title is defined %} -

{{ page_title | trans }}

- {% else %} -

{{ 'Notes' | trans }}

- {% endif %} - -
- - {% if notes is not empty %} - {# Backwards compatibility with hAtom 0.1 #} -
-
- {% for conversation in notes %} - {% block current_note %} - {% if conversation is instanceof('array') %} - {{ noteView.macro_note(conversation['note'], conversation['replies']) }} - {% else %} - {{ noteView.macro_note(conversation) }} - {% endif %} -
- {% endblock current_note %} - {% endfor %} -
-
+
+
+ {% if page_title is defined %} +

{{ page_title | trans }}

+ {% else %} +

{{ 'Notes' | trans }}

{% endif %} + +
+ + {% if notes is not empty %} + {# Backwards compatibility with hAtom 0.1 #} +
+ {% for conversation in notes %} + {% block current_note %} + {% if conversation is instanceof('array') %} + {{ noteView.macro_note(conversation['note'], conversation['replies']) }} + {% else %} + {{ noteView.macro_note(conversation) }} + {% endif %} +
+ {% endblock current_note %} + {% endfor %}
+ {% endif %} +
{% endif %} {% endblock body %} diff --git a/components/LeftPanel/LeftPanel.php b/components/LeftPanel/LeftPanel.php index 938ca289d9..f1c2d06015 100644 --- a/components/LeftPanel/LeftPanel.php +++ b/components/LeftPanel/LeftPanel.php @@ -77,7 +77,7 @@ class LeftPanel extends Component */ public function onEndShowStyles(array &$styles, string $route): bool { - $styles[] = 'components/Left/assets/css/view.css'; + $styles[] = 'components/LeftPanel/assets/css/view.css'; return Event::next; } } diff --git a/components/LeftPanel/templates/left_panel/view.html.twig b/components/LeftPanel/templates/left_panel/view.html.twig index e66da4555b..15b513ad2c 100644 --- a/components/LeftPanel/templates/left_panel/view.html.twig +++ b/components/LeftPanel/templates/left_panel/view.html.twig @@ -1,25 +1,28 @@ {% block leftpanel %} - - - +
+ + + -
-
{% endblock leftpanel %} diff --git a/components/RightPanel/RightPanel.php b/components/RightPanel/RightPanel.php index 032c2fa6eb..94cef52048 100644 --- a/components/RightPanel/RightPanel.php +++ b/components/RightPanel/RightPanel.php @@ -35,7 +35,7 @@ class RightPanel extends Component */ public function onEndShowStyles(array &$styles, string $route): bool { - $styles[] = 'components/Right/assets/css/view.css'; + $styles[] = 'components/RightPanel/assets/css/view.css'; return Event::next; } } diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig index b0c2bef134..a63e422328 100644 --- a/components/RightPanel/templates/right_panel/view.html.twig +++ b/components/RightPanel/templates/right_panel/view.html.twig @@ -1,31 +1,38 @@ {% block rightpanel %} - - - +
+ + + -
-
+
{% endblock rightpanel %} diff --git a/components/Search/Controller/Search.php b/components/Search/Controller/Search.php index 0fa2adf3fc..922bbecfef 100644 --- a/components/Search/Controller/Search.php +++ b/components/Search/Controller/Search.php @@ -130,7 +130,7 @@ class Search extends FeedController } return [ - '_template' => 'search/show.html.twig', + '_template' => 'search/view.html.twig', 'actor' => $actor, 'search_form' => Comp\Search::searchForm($request, query: $q, add_subscribe: !\is_null($actor)), 'search_builder_form' => $search_builder_form->createView(), diff --git a/components/Search/Search.php b/components/Search/Search.php index 50446ae971..872bcb45da 100644 --- a/components/Search/Search.php +++ b/components/Search/Search.php @@ -29,6 +29,7 @@ use function App\Core\I18n\_m; use App\Core\Modules\Component; use App\Util\Common; use App\Util\Exception\RedirectException; +use App\Util\Formatting; use Symfony\Component\Form\Extension\Core\Type\SubmitType; use Symfony\Component\Form\Extension\Core\Type\TextType; use Symfony\Component\Form\FormView; @@ -83,7 +84,7 @@ class Search extends Component 'label' => _m('Search'), 'attr' => [ //'class' => 'button-container search-button-container', - 'title' => _m('Query notes for specific tags.'), + 'title' => _m('Perform search'), ], ], ]; @@ -119,9 +120,9 @@ class Search extends Component * * @throws RedirectException */ - public function onAddExtraHeaderForms(Request $request, array &$elements) + public function onPrependRightPanel(Request $request, array &$elements) { - $elements[] = self::searchForm($request); + $elements[] = Formatting::twigRenderFile('cards/search/view.html.twig', ['search' => self::searchForm($request)]); return Event::next; } diff --git a/components/Search/templates/cards/search/view.html.twig b/components/Search/templates/cards/search/view.html.twig new file mode 100644 index 0000000000..0412edf1d0 --- /dev/null +++ b/components/Search/templates/cards/search/view.html.twig @@ -0,0 +1,8 @@ +
+
+ {{ form_start(search) }} + {{ form_row(search.search_query) }}{{ form_row(search.submit_search) }} + {{ form_rest(search) }} + {{ form_end(search) }} +
+
diff --git a/components/Search/templates/search/show.html.twig b/components/Search/templates/search/view.html.twig similarity index 100% rename from components/Search/templates/search/show.html.twig rename to components/Search/templates/search/view.html.twig diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css index 23356ec3f4..e376b2ec7c 100644 --- a/public/assets/default_theme/css/pages/feeds.css +++ b/public/assets/default_theme/css/pages/feeds.css @@ -188,18 +188,25 @@ embed header { } .note-actions { - display: flex; + display: inline-block; align-items: center; margin-left: auto; } -.note-actions ul { - display: flex; - vertical-align: middle; +.note-actions > li { + display: inline-block; + margin-left: 2px; + margin-right: 2px; } -.note-actions ul > li { - margin-left: 8px; +.note-actions-separator { + display: inline-block; + background: var(--foreground); + opacity: 0.33; + width: 1px; + height: 1em; + margin-left: 2px; + margin-right: 2px; } .note-actions-extra-details { diff --git a/public/assets/default_theme/css/reset.css b/public/assets/default_theme/css/reset.css index b8a1eec377..0a4950d908 100644 --- a/public/assets/default_theme/css/reset.css +++ b/public/assets/default_theme/css/reset.css @@ -35,8 +35,10 @@ hr { background-color: var(--border) !important; } -ol, +menu, ul { + padding: unset; + margin: unset; list-style: none; } diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css index d4ffa64177..16174f8e84 100644 --- a/public/assets/default_theme/css/widgets/sections.css +++ b/public/assets/default_theme/css/widgets/sections.css @@ -272,6 +272,46 @@ textarea.form-row-widget { resize: vertical; } +.form-search { + display: inline-block; + padding-left: unset; + padding-right: unset; + padding-bottom: unset; + margin-bottom: var(--m); +} + +.form-search label { + display: block; + opacity: 0; + width: 0; + height: 0; +} + +.form-search span { + display: inline-flex; + width: 100%; +} + +.form-search .form-row { + margin-bottom: unset; + width: 100%; +} + +.form-search span input[type='text'] { + margin: unset; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + height: 100%; +} + +.form-search span button { + margin: unset; + border-left: none !important; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + height: 100%; +} + .alert, .alert-danger, .form-error, diff --git a/public/components/Left/assets/css/view.css b/public/components/LeftPanel/assets/css/view.css similarity index 87% rename from public/components/Left/assets/css/view.css rename to public/components/LeftPanel/assets/css/view.css index 7870eb9f32..bf552b5e25 100644 --- a/public/components/Left/assets/css/view.css +++ b/public/components/LeftPanel/assets/css/view.css @@ -1,6 +1,7 @@ .section-panel-left { + position: absolute; left: 0; } @@ -12,7 +13,9 @@ .panel-left-icon { cursor: pointer !important; + padding-left: var(--s); border: 2px solid transparent; + vertical-align: middle; } .profile-navigation { @@ -66,8 +69,12 @@ /* > 720p */ @media only screen and (min-width:1281px) { + .section-panel-left #panel-left-toggle ~ .header-panel { + left: 0; + } + .panel-left-icon { - display: none; + opacity: 0; } } diff --git a/public/components/Right/assets/css/view.css b/public/components/RightPanel/assets/css/view.css similarity index 71% rename from public/components/Right/assets/css/view.css rename to public/components/RightPanel/assets/css/view.css index 084b04f2bd..095a87ede2 100644 --- a/public/components/Right/assets/css/view.css +++ b/public/components/RightPanel/assets/css/view.css @@ -1,6 +1,7 @@ .section-panel-right { + position: absolute; right: 0; } @@ -10,10 +11,15 @@ top: -100%; } +.section-panel-right #panel-right-toggle:checked ~ .header-panel { + left: 0; +} + .panel-right-icon { - margin-left: var(--m) !important; cursor: pointer !important; + padding-right: var(--s); border: 2px solid transparent; + vertical-align: middle; } .section-panel-right textarea { @@ -21,8 +27,12 @@ } @media only screen and (min-width: 1281px) { + .section-panel-right #panel-right-toggle ~ .header-panel { + right: 0; + } + .panel-right-icon { - display: none; + opacity: 0; } } diff --git a/templates/base.html.twig b/templates/base.html.twig index 07659a1e9c..96d63cb68f 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -95,8 +95,6 @@ {% block header %} - {% set extra_header_forms = handle_event('AddExtraHeaderForms', request) %} -
{{ block("leftpanel", "stdgrid.html.twig") }} @@ -107,22 +105,11 @@

{{ icon('logo', 'icon icon-logo') | raw }}{{ config('site', 'name') }}

-
- - {{ icon('kebab', 'icon icon-details-open') | raw }} - -
- {% for extra_form in extra_header_forms %} - {{ form(extra_form) }} - {% endfor %} -
-
- {{ block("rightpanel", "stdgrid.html.twig") }}
{% endblock header %} -
+
@@ -130,7 +117,7 @@ {% block body %}{% endblock %} {% block javascripts %}{% endblock javascripts %}
-
+ diff --git a/templates/cards/note/view.html.twig b/templates/cards/note/view.html.twig index 2893a85cdd..9aa4616442 100644 --- a/templates/cards/note/view.html.twig +++ b/templates/cards/note/view.html.twig @@ -1,42 +1,42 @@ {% block note_actions %} {% if app.user or note_actions_hide is defined %} -
-
    -
  • -
    - - {{ icon('kebab', 'icon icon-note-actions-extra') | raw }} {# button-container #} - - +
    +
    • + + {% for current_action in get_note_actions(note) %} +
  • +
    • - {% for current_action in get_note_actions(note) %} -
  • - -
    • - {% endfor %} -
-
+ {% endfor %} + {% endif %} {% endblock note_actions %} {% block note_replies %} {% if replies is defined and replies is not empty %}
- {{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }} + {{ 'Replies to ' | trans }}{{ nickname }}{{ '\'s note' | trans }} {% for conversation in replies %} {{ _self.macro_note(conversation['note'], conversation['replies']) }}
@@ -158,10 +158,10 @@ class="h-entry hentry note" lang={{ note.getLanguageLocale() }}> {{ block('note_sidebar') }}
-
+
{{ block('note_info') }} {{ block('note_actions') }} -
+
{% endmacro macro_note %} @@ -187,9 +186,9 @@
{{ block('note_sidebar') }}
-
+
{{ block('note_info') }} -
+