Mercurial > libervia-templates
changeset 405:5016fb0ff62f default tip
Blog redesign: work in progress redesign of the blog.
Some templates have been moved from chat to components to be re-used in other features,
like blog here.
Blog follows same global design as chat with a left panel to search/open blogs.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Wed, 21 May 2025 15:41:00 +0200 |
| parents | 66f98ee041d8 |
| children | |
| files | sat_templates/templates/bulma/base/base.html sat_templates/templates/bulma/blog/blog.html sat_templates/templates/bulma/blog/discover.html sat_templates/templates/bulma/blog/discover_panel.html sat_templates/templates/bulma/blog/item.html sat_templates/templates/bulma/chat/chat.html sat_templates/templates/bulma/chat/direct_messages.html sat_templates/templates/bulma/chat/message.html sat_templates/templates/bulma/chat/reactions.html sat_templates/templates/bulma/chat/reactions_details.html sat_templates/templates/bulma/components/avatar.html sat_templates/templates/bulma/components/contacts_links.html sat_templates/templates/bulma/components/reactions.html sat_templates/templates/bulma/components/reactions_details.html sat_templates/templates/bulma/static/chat.css sat_templates/templates/bulma/static/styles.css |
| diffstat | 16 files changed, 304 insertions(+), 189 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/base/base.html Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/base/base.html Wed May 21 15:41:00 2025 +0200 @@ -86,7 +86,7 @@ </head> <body{{ {'onload': body_onload} | xmlattr }} class="{{' body--fullscreen' if full_screen_body}}{{' has-navbar-fixed-top' if menu_fixed_top}}"> {% if atom_url is defined %} - {{ icon_defs('feed') }} + {{ icon_defs('rss') }} {% endif %} {% if loading_screen %} <div id="loading_screen" class="modal is-active">
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/blog/blog.html Wed May 21 15:41:00 2025 +0200 @@ -0,0 +1,72 @@ +{# blog_page indicate if blog is included in an other page or if it is the main one #} +{% if not embedded %}{% extends 'base/base.html' %}{% set blog_page = True %}{% endif %} +{% set single = blog_items['items']|length == 1 %} +{% set dates_format='relative' if single else 'short' %} +{% import 'components/avatar.html' as avatar with context %} +{% import 'blog/macros.html' as blog with context %} +{% import 'input/navigation.html' as navigation with context %} +{% import 'input/textbox.html' as textbox with context %} + +{%- block title scoped -%} + {%- if blog_page -%} + {%- if single -%} + {{- blog_items['items'][0].title|default(blog_items['items'][0].content, true)|truncate(60, True, '…') + ' - ' + C.APP_NAME -}} + {%- else -%} + {{C.APP_NAME}} + {# {{- super() -}} + FIXME: super() is failing if blog is embedded (i.e. base/base.html is not its direct parent) + not sure what's the best way to avoid that, so just using C.APP_NAME for now #} + {%- endif -%} + {%- endif -%} +{%- endblock title -%} + +{% block body %} + {{ icon_defs( + "ellipsis", "regular face-smile", "reply", "share", "star" + ) }} + + +<div class="columns is-gapless blog-container"> + <!-- Left Panel --> + <div class="column is-2 left-sidebar has-background-dark" id="left_panel"> + {% include 'blog/discover_panel.html' %} + </div> + <div class="column is-8 main-panel blog-main" id="main_panel"> + <div class="panel-header"> + <div class="level is-mobile"> + <div class="level-left"> + <div class="level-item"> + <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel"> + <span class="icon"><i class="fas fa-bars"></i></span> + </button> + </div> + </div> + <div class="level-right"> + <div class="level-item"> + <button class="button is-small is-primary"> + <span class="icon"><i class="fas fa-circle-plus"></i></span> + <span>New Post</span> + </button> + </div> + </div> + </div> + </div> + {% if blog_items['items'] %} + <div class="container mt-4"> + <div id="blog_items" class="columns"> + <div class="column"> + {{ blog.show_items(blog_items['items'], expanded=single) }} + </div> + </div> + </div> + {% else %} + <div class="message mt-4"> + <div class="message-body"> + {% trans %}No articles found in this blog!{% endtrans %} + </div> + </div> + {% endif %} + </div> +</div> + +{% endblock body %}
--- a/sat_templates/templates/bulma/blog/discover.html Tue May 06 00:37:41 2025 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,49 +0,0 @@ -{% extends 'base/base.html' %} -{% import 'components/block.html' as block %} -{% import 'components/images.html' as images with context %} -{% import 'components/avatar.html' as avatar with context %} -{% import 'input/form.html' as form with context %} -{% import 'input/field.html' as field with context %} - -{% block body %} -{{ icon_defs('blog', 'pencil') }} - -<section class="section"> - {% if url_blog_edit is defined %} - <div class="content has-items-centered is-flex"> - {{ component.action_button(url_blog_edit, _("new post"), "pencil") }} - </div> - {% endif %} - <article class="message has-text-centered"> - <div class="message-body"> - {% trans %} - Please select the blog you want to consult - {% endtrans %} - </div> - </article> - <div class="columns is-mobile is-multiline"> - {% for entity in disco_entities %} - <div class="column is-2-desktop is-4-touch"> - <div class="card x-is-hoverable"> - <a href="{{entities_url[entity]}}" class="items_vert--centered"> - <div class="card-image is-flex has-items-centered px-1 py-1"> - {{ avatar.avatar(entity, "is-64x64") }} - </div> - <div class="card-content has-text-centered has-text-shortenable px-1 py-1"> - <span>{{ identities[entity].nicknames[0] if identities[entity].nicknames else entity }}</span> - </div> - </a> - </div> - </div> - {% endfor %} - </div> -</section> - -<section class="section"> - <p class="content">{% trans %}Or enter the jid of a blog writer{% endtrans %}</p> - {% call form.form(class="form--single") %} - {{ field.text("jid", _("blog writer jid"), required=true)}} - {{ field.submit(_("Consult")) }} - {% endcall %} -</section> -{% endblock body %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/blog/discover_panel.html Wed May 21 15:41:00 2025 +0200 @@ -0,0 +1,28 @@ +{% import 'components/avatar.html' as avatar with context %} +{% import 'input/form.html' as form with context %} +{% import 'input/field.html' as field with context %} + +{{ icon_defs('blog', 'pencil') }} + +<aside class="menu mt-4 px-4 has-text-light"> + + + <p class="menu-label has-text-grey-light">{% trans %}Blog Search{% endtrans %}</p> + <div class="field"> + <p class="help">Use names, JIDs, or keywords.</p> + <div class="control has-icons-left has-icons-right"> + <input class="input search-input" type="search" + placeholder="Search blogs…"> + <span class="icon is-small is-left"> + <i class="fa-solid fa-magnifying-glass"></i> + </span> + <span class="icon is-right action_clear_search"> + <a role="button" class="delete is-small" aria-label="Clear search"></a> + </span> + </div> + </div> + <p class="menu-label has-text-grey-light"> + {% trans %}Contact Blogs{% endtrans %} + </p> + <div id="contact-blogs"></div> +</aside>
--- a/sat_templates/templates/bulma/blog/item.html Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/blog/item.html Wed May 21 15:41:00 2025 +0200 @@ -15,7 +15,7 @@ {# we may display items in different language in a specific way #} {% set other_lang = " other_lang" if expanded else " other_lang state_init" %} {% endif %} - <article id="{{item.id}}" class="media has-background-white px-4 py-3" > + <article id="{{item.id}}" class="blog-item media px-4 py-3" > {% if identities is defined %} {% if avatar is defined %} <div class="media-left"> @@ -69,6 +69,47 @@ {{- item.content|urlize -}} </p> {% endif %} + + <div class="blog-item-footer"></div> + + {# Actions #} + <div class="level mb-0 mt-1"> + <div class="level-left"> + <div class="level-item"> + {# + <button + class="button is-small is-text has-text-grey is-rounded mr-2" + aria-label="{% trans %}Reply{% endtrans %}" + > + {{ icon('reply', cls='icon is-small') }} + </button> + #} + + <button + class="reaction-button button is-small is-text has-text-grey is-rounded mr-2" + aria-label="{% trans %}React{% endtrans %}" + > + {{ icon('regular face-smile', cls='icon is-small') }} + </button> + + <button + class="button is-small is-text has-text-grey is-rounded mr-2" + aria-label="{% trans %}Mark the post as noticed{% endtrans %}" + > + {{ icon('star', cls='icon is-small') }} + </button> + + <button + class="button is-small is-text has-text-grey is-rounded" + aria-label="{% trans %}More options{% endtrans %}" + > + {{ icon('ellipsis', cls='icon is-small') }} + </button> + </div> + </div> + </div> + + {# comments #} {% for comments_data in item.comments %} {% for item in comments_data['items'] %} {% include 'blog/item.html' %}
--- a/sat_templates/templates/bulma/chat/chat.html Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/chat/chat.html Wed May 21 15:41:00 2025 +0200 @@ -13,7 +13,7 @@ <div class="columns is-gapless chat-container"> <!-- Left Panel --> - <div class="column is-2-desktop is-3-tablet chat-sidebar has-background-dark" id="left_panel"> + <div class="column is-2 left-sidebar has-background-dark" id="left_panel"> <aside class="menu pl-4"> <button class="button is-ghost has-text-grey-light mb-2 pl-1 is-align-items-center is-justify-content-start is-fullwidth" id="new_chat_btn" aria-label="Start new discussion"> <span class="icon"> @@ -39,8 +39,8 @@ </div> <!-- Main Chat Area --> - <div class="column is-8-desktop is-6-tablet chat-main" id="main_panel"> - <div class="chat-header"> + <div class="column is-8 main-panel chat-main" id="main_panel"> + <div class="panel-header"> <div class="level is-mobile"> <div class="level-left"> <div class="level-item"> @@ -107,7 +107,7 @@ <!-- Right Panel --> - <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel"> + <div class="column is-2-desktop is-3-tablet right-sidebar {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel"> <div class="box is-shadowless has-background-white-bis is-full-height"> <h3 class="title is-5 has-text-centered mb-4">Room Details</h3>
--- a/sat_templates/templates/bulma/chat/direct_messages.html Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/chat/direct_messages.html Wed May 21 15:41:00 2025 +0200 @@ -2,6 +2,6 @@ <ul class="menu-list"> {% for contact_jid, contact_data in roster.items() %} {%- set name = identities[contact_jid].nicknames[0] | default(contact_jid) -%} - <li><a {{ {'href': chat_url + '/' + contact_jid}|xmlattr}} class="has-background-inherit has-text-white"><span class="icon"><i class="fas fa-circle has-text-success"></i></span>{{name}}</a></li> + <li><a {{ {'href': chat_url + '/' + contact_jid}|xmlattr}} class="has-text-white"><span class="icon"><i class="fas fa-circle has-text-success"></i></span>{{name}}</a></li> {% endfor %} </ul>
--- a/sat_templates/templates/bulma/chat/message.html Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/chat/message.html Wed May 21 15:41:00 2025 +0200 @@ -78,7 +78,7 @@ <div id="msg_reactions_{{msg.id}}"> {% if msg.extra.reactions is defined %} {% set reactions = msg.extra.get("reactions") %} - {% include 'chat/reactions.html' %} + {% include 'components/reactions.html' %} {% endif %} </div> </div>
--- a/sat_templates/templates/bulma/chat/reactions.html Tue May 06 00:37:41 2025 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,19 +0,0 @@ -<div class="reactions-container is-flex-wrap-wrap"> - - {% if chat_type == "group" %} - {% set local_jid = own_local_jid %} - {% else %} - {% set local_jid = own_local_jid|bare_jid %} - {% endif %} - - {% for emoji, jids in reactions.items() %} - {% set own_reaction = local_jid in jids %} - <div - class="reaction is-inline-flex is-align-items-center {{ 'own-reaction' if own_reaction }}" - data-jids='{{jids|tojson}}' - > - <span class="emoji has-text-weight-semibold">{{ emoji }}</span> - <span class="counter">{{ jids|length }}</span> - </div> - {% endfor %} -</div>
--- a/sat_templates/templates/bulma/chat/reactions_details.html Tue May 06 00:37:41 2025 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,12 +0,0 @@ -{% import 'components/avatar.html' as avatar with context %} - -<div class="reacting-users-list"> - {% for jid in reacting_jids %} - <div class="reacting-user-item is-flex is-align-items-center mb-2"> - {{ avatar.avatar(jid, "is-24x24") }} - <span class="reacting-user-nickname ml-2"> - {{ identities[jid].nicknames[0] if identities[jid].nicknames else jid }} - </span> - </div> - {% endfor %} -</div>
--- a/sat_templates/templates/bulma/components/avatar.html Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/components/avatar.html Wed May 21 15:41:00 2025 +0200 @@ -3,7 +3,7 @@ {% set identity = identities.get(jid) %} {%- if identity and identity.avatar.filename %} <div class="avatar image {{class}}"> - <img src="/cache/common/{{identity.avatar.filename}}"> + <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}"> </div> {% else %} {% set nick = identity.nicknames[0] if identity.nicknames else jid %}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/components/contacts_links.html Wed May 21 15:41:00 2025 +0200 @@ -0,0 +1,20 @@ +{% import 'components/avatar.html' as avatar with context %} + +<ul> + {% for contact_jid, contact_data in roster.items() %} + + {%- set name = identities[contact_jid].nicknames[0] | default(contact_jid) -%} + <li class="pl-2 py-1"> + <a {{ {'href': base_url + '/' + contact_jid}|xmlattr}} class="has-text-white"> + <div class="is-flex is-align-items-center my-1"> + <div class="mr-2"> + {{ avatar.avatar(contact_jid) }} + </div> + <div class="is-flex-grow-1"> + <p class="mb-0">{{name}}</p> + </div> + </div> + </a> + </li> + {% endfor %} +</ul>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/components/reactions.html Wed May 21 15:41:00 2025 +0200 @@ -0,0 +1,13 @@ +<div class="reactions-container is-flex-wrap-wrap"> + + {% for emoji, jids in reactions.items() %} + {% set own_reaction = own_jid in jids %} + <div + class="reaction is-inline-flex is-align-items-center {{ 'own-reaction' if own_reaction }}" + data-jids='{{jids|tojson}}' + > + <span class="emoji has-text-weight-semibold">{{ emoji }}</span> + <span class="counter">{{ jids|length }}</span> + </div> + {% endfor %} +</div>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/sat_templates/templates/bulma/components/reactions_details.html Wed May 21 15:41:00 2025 +0200 @@ -0,0 +1,12 @@ +{% import 'components/avatar.html' as avatar with context %} + +<div class="reacting-users-list"> + {% for jid in reacting_jids %} + <div class="reacting-user-item is-flex is-align-items-center mb-2"> + {{ avatar.avatar(jid, "is-24x24") }} + <span class="reacting-user-nickname ml-2"> + {{ identities[jid].nicknames[0] if identities[jid].nicknames else jid }} + </span> + </div> + {% endfor %} +</div>
--- a/sat_templates/templates/bulma/static/chat.css Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/static/chat.css Wed May 21 15:41:00 2025 +0200 @@ -13,24 +13,6 @@ --message-background: #f5f5f5; --message-hover-background: #e8e8e8; - /* Reaction colors */ - --reaction-background: #ffffff; - --reaction-hover-background: #f5f5f5; - --reaction-border: #dbdbdb; - - /* User reaction colors */ - --reaction-user-background: #eef6fc; - --reaction-user-hover-background: #e3f1fc; - --reaction-user-border: #3273dc; - - /* Spacing */ - --reaction-padding: 0.25rem 0.5rem; - --reaction-gap: 0.5rem; - --reaction-margin-top: 0.5rem; - - /* Typography */ - --reaction-font-size: 0.875rem; - --reaction-counter-font-size: 0.75rem; } [data-theme="dark"] .chat-main { @@ -40,13 +22,6 @@ --message-background: #363636; --message-hover-background: #404040; - --reaction-background: #2c2c2c; - --reaction-hover-background: #404040; - --reaction-border: #4a4a4a; - - --reaction-user-background: #1a3b5c; - --reaction-user-hover-background: #234875; - --reaction-user-border: #3273dc; } .chat-container { @@ -60,42 +35,6 @@ flex-direction: column; } -.chat-header { - border-bottom: 1px solid #dbdbdb; - padding: 0.5rem 1rem; -} - - -/* Sidebar toggle transitions */ -.chat-sidebar, .chat-details { - transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease; - overflow-x: hidden; -} - -.chat-sidebar.is-collapsed { - transform: translateX(-100%); - max-width: 0; - padding: 0; - margin: 0; - opacity: 0; -} - -.chat-details.is-collapsed { - transform: translateX(100%); - max-width: 0; - padding: 0; - margin: 0; - opacity: 0; -} - -.chat-main.is-expanded-left { - margin-left: 0; -} - -.chat-main.is-expanded-right { - margin-right: 0; -} - .columns.is-gapless.chat-container { flex-wrap: nowrap; } @@ -113,10 +52,6 @@ background-color: inherit; } -#left_panel a:hover { - background-color: #444; -} - .chat-input { border-top: 1px solid #dbdbdb; padding: 1rem; @@ -153,41 +88,6 @@ display: flex; } -.reactions-container { - gap: var(--reaction-gap); - margin-top: var(--reaction-margin-top); -} -.reaction { - padding: var(--reaction-padding); - border-radius: 1rem; - background-color: var(--reaction-background); - font-size: var(--reaction-font-size); - cursor: pointer; - transition: all 0.2s ease; - border: 1px solid var(--reaction-border); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -} - -.reaction:hover { - background-color: var(--reaction-hover-background); -} - -.reaction .counter { - margin-left: 0.25rem; - font-size: var(--reaction-counter-font-size); - color: var(--color-text); -} - -.reaction.own-reaction { - background-color: var(--reaction-user-background); - border-color: var(--reaction-user-border); -} - -.reaction.own-reaction:hover { - background-color: var(--reaction-user-hover-background); -} - - #attachments { overflow-x: auto; white-space: nowrap;
--- a/sat_templates/templates/bulma/static/styles.css Tue May 06 00:37:41 2025 +0200 +++ b/sat_templates/templates/bulma/static/styles.css Wed May 21 15:41:00 2025 +0200 @@ -1,5 +1,33 @@ :root { --selected-item-bg: deepskyblue; + /* Reaction colors */ + --reaction-background: #ffffff; + --reaction-hover-background: #f5f5f5; + --reaction-border: #dbdbdb; + + /* User reaction colors */ + --reaction-user-background: #eef6fc; + --reaction-user-hover-background: #e3f1fc; + --reaction-user-border: #3273dc; + + /* Spacing */ + --reaction-padding: 0.25rem 0.5rem; + --reaction-gap: 0.5rem; + --reaction-margin-top: 0.5rem; + + /* Typography */ + --reaction-font-size: 0.875rem; + --reaction-counter-font-size: 0.75rem; +} + +[data-theme="dark"] { + --reaction-background: #2c2c2c; + --reaction-hover-background: #404040; + --reaction-border: #4a4a4a; + + --reaction-user-background: #1a3b5c; + --reaction-user-hover-background: #234875; + --reaction-user-border: #3273dc; } html, body { @@ -79,3 +107,84 @@ .collapsible-icon { transition: transform 0.2s ease-out; } + +/* Panels */ + +.panel-header { + border-bottom: 1px solid #dbdbdb; + padding: 0.5rem 1rem; +} + + +#left_panel li:hover { + background-color: #444; +} + + +/* Sidebar toggle transitions */ +.left-sidebar, .right-sidebar { + transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease; + overflow-x: hidden; +} + +.left-sidebar.is-collapsed { + transform: translateX(-100%); + max-width: 0; + padding: 0; + margin: 0; + opacity: 0; +} + +.right-sidebar.is-collapsed { + transform: translateX(100%); + max-width: 0; + padding: 0; + margin: 0; + opacity: 0; +} + +.main-panel.is-expanded-left { + margin-left: 0; +} + +.main-panel.is-expanded-right { + margin-right: 0; +} + +/* Common components */ +/* Reactions */ +.reactions-container { + gap: var(--reaction-gap); + margin-top: var(--reaction-margin-top); +} +.reaction { + padding: var(--reaction-padding); + border-radius: 1rem; + background-color: var(--reaction-background); + font-size: var(--reaction-font-size); + cursor: pointer; + transition: all 0.2s ease; + border: 1px solid var(--reaction-border); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.reaction:hover { + background-color: var(--reaction-hover-background); +} + +.reaction .counter { + margin-left: 0.25rem; + font-size: var(--reaction-counter-font-size); + color: var(--color-text); +} + +.reaction.own-reaction { + background-color: var(--reaction-user-background); + border-color: var(--reaction-user-border); +} + +.reaction.own-reaction:hover { + background-color: var(--reaction-user-hover-background); +} + +