Mercurial > libervia-templates
changeset 402:2bbcb7da56bc default tip
bulma: use Font-Awesome instead of Fontello + start of major redesign:
- Font-Awesome is now used instead of Fontello, following change in Libervia Media.
- This is a beginning of a major redesign of the web templates/web frontend. This
currently breaks a lot of thing.
| author | Goffi <goffi@goffi.org> |
|---|---|
| date | Sat, 26 Oct 2024 22:53:26 +0200 |
| parents | 0e454358ca49 |
| children | |
| files | sat_templates/templates/bulma/_browser/browser_meta.json sat_templates/templates/bulma/base/base.html sat_templates/templates/bulma/components/common.html sat_templates/templates/bulma/static/styles.css |
| diffstat | 4 files changed, 49 insertions(+), 817 deletions(-) [+] |
line wrap: on
line diff
--- a/sat_templates/templates/bulma/_browser/browser_meta.json Wed Oct 02 17:23:03 2024 +0200 +++ b/sat_templates/templates/bulma/_browser/browser_meta.json Sat Oct 26 22:53:26 2024 +0200 @@ -2,7 +2,8 @@ "js": { "package": { "dependencies": { - "bulma": "^1.0.2" + "bulma": "^1.0.2", + "@fortawesome/fontawesome-free": "^6.6.0" } } }
--- a/sat_templates/templates/bulma/base/base.html Wed Oct 02 17:23:03 2024 +0200 +++ b/sat_templates/templates/bulma/base/base.html Sat Oct 26 22:53:26 2024 +0200 @@ -16,8 +16,8 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> {# using SVG directly doesn't always play well with Bulma, so we also use the icon font #} - <link rel='stylesheet' type="text/css" href='{{media_path}}fonts/fontello/css/fontello.css'> - <link rel='stylesheet' type="text/css" href='{{build_path}}bulma_libervia.css'> + <link rel='stylesheet' type="text/css" href='{{build_path}}node_modules/@fortawesome/fontawesome-free/css/all.min.css'> + <link rel='stylesheet' type="text/css" href='{{build_path}}node_modules/bulma/css/bulma.min.css'> {% if norobots %} <meta name="robots" content="noindex, nofollow">
--- a/sat_templates/templates/bulma/components/common.html Wed Oct 02 17:23:03 2024 +0200 +++ b/sat_templates/templates/bulma/components/common.html Sat Oct 26 22:53:26 2024 +0200 @@ -1,13 +1,21 @@ {% import 'components/menu_labels.html' as ml with context %} {# We need to use "with context" to disable cache, needed for i18n. #} -{% macro menu(menus, class='has-background-primary') %} - <nav class="navbar main_menu {{class}} {{'is-fixed-top' if menu_fixed_top}}"> +{% macro menu(menus, class='is-light') %} + {{ icon_defs("bell", "circle-user") }} + {% for menu in menus %} + {{ icon_defs(menu.icon) }} + {% endfor %} + <nav class="navbar main_menu {{class}} {{'is-fixed-top' if menu_fixed_top}}" + role="navigation" aria-label="main navigation" + > + <div class="navbar-brand"> <a class="navbar-item" href="/"> <img src="{{media_path}}icons/apps/64/sat.png"> </a> - <a role="button" id="main_menu_burger" class="navbar-burger burger" data-target="main_menu"> + <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="main_menu"> + <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> @@ -15,26 +23,48 @@ </div> <div id="main_menu" class="navbar-menu"> <div class="navbar-start"> - {% for name, url in menus %} + {% for menu in menus %} <a - class="navbar-item {% if name == current_page %}is-tab is-active{% endif%}" - {{ {'href': url}|xmlattr }} + class="navbar-item {% if menu.name == current_page %}is-tab is-active{% endif%}" + {{ {'href': menu.url}|xmlattr }} {# External links should not replace current page. #} - {% if url.startswith('http:') or url.startswith('https:') -%}target="_blank"{%- endif %} + {% if menu.url.startswith('http:') or menu.url.startswith('https:') -%}target="_blank"{%- endif %} > - {{ml.label[name] or name}} + <span class="icon">{{ icon(menu.icon) }}</span> + <span class="menu-item">{{ml.label[menu.name] or menu.name}}</span> </a> {% endfor %} </div> <div class="navbar-end"> <div class="navbar-item has-dropdown is-hoverable"> - <span class="navbar-link">{{locale.language_name}}</span> + <span class="menu-item navbar-link"><span class="menu-item">{{locale.language_name}}</span></span> <div class="navbar-dropdown"> {% for l in locales|reject("eq", locale) %} <a class="navbar-item" href="?{{C.KEY_LANG}}={{l}}">{{l.language_name}}</a> {% endfor %} + </div> </div> + <div class="navbar-item" id="menu_notifs"> + <div class="buttons"> + <a class="button is-light"> + <span class="icon">{{ icon("bell") }}</span> + <span class="tag is-danger has-text-white menu-item">3</span> + </a> + <a {{ {'href': login_url}|xmlattr }}> + {% if profile %} + <div class="button is-light"> + <span class="icon">{{ icon("circle-user") }}</span> + <span class="menu-item">{{profile}}</span> + </div> + {% else %} + <div class="button is-light"> + <span class="menu-item">Log In</span> + </div> + {% endif %} + </a> + </div> + </div> </div> </div> </nav>
--- a/sat_templates/templates/bulma/static/styles.css Wed Oct 02 17:23:03 2024 +0200 +++ b/sat_templates/templates/bulma/static/styles.css Sat Oct 26 22:53:26 2024 +0200 @@ -1,813 +1,14 @@ -:root { - --photo-height: 280px; - --photo-height--poster: 500px; - --col-primary: #82baff; - --grey-light: hsl(0, 0%, 71%); -} - -html { - /* Bulma default force scrollbar, we don't want this */ - overflow-y: auto; -} - -body.body--fullscreen { - display: flex; - flex-direction: column; - height: 100vh; - width: 100vw; - overflow: hidden; -} - +html, body { -input[type="search"]::-webkit-search-cancel-button { - /* We disable cancel button on webkit based browser for consistency, as we add our */ - /* own when necessary */ - display: none; -} - - -.is-full-below-menu { - /* full viewport minus top menu height */ - position:relative; - height: calc(100vh - 52px); -} - -.has-whitespace-pre-wrap { - white-space: pre-wrap; -} - -.has-whitespace-pre-line { - white-space: pre-line; -} - -.has-decoration-line-through { - text-decoration: line-through; -} - -.is-avatar { - height: 64px; - width: 64px; - border-radius: 50%; - border: 1px solid #bbb; - background-color: #eee; + height: 100%; overflow: hidden; } -.is-video-thumbnail-wrapper { - background-color: black; -} - -.is-video-thumbnail-wrapper, .is-video-thumbnail { - height: 100%; - width: 100%; -} - - -.is-photo-thumbnail { - max-height: var(--photo-height); - max-width: 100%; -} - -.is-photo-thumbnail-container { - height: var(--photo-height); - -} - -.is-top-right { - /* position element on top right corner, outside document flow (abolute positioning) - * useful for delete icon - */ - position: absolute; - top: 0.25rem; - right: 0.25rem; -} - -.is-top-left { - position: absolute; - top: 0.25em; - left: 0.25em; -} - -.has-items-centered { - align-items: center; - justify-content: center; -} - -.is-poster { - height: var(--photo-height--poster) !important; -} - -.is-poster>.is-photo-thumbnail { - max-height: var(--photo-height--poster) !important; -} - -.has-items-vcentered { - align-items: center; -} - -.is-valign-middle { - vertical-align: middle; -} - -.x-is-hoverable:hover { - background-color: #eee !important; -} - -.x-is-hoverable-primary:hover { - background-color: var(--col-primary) !important; - border-radius: 50%; - box-shadow: 0px 0px 0 0.25rem var(--col-primary); -} - -.media.is-chat-message { - margin: 0.5rem 0 0; - padding: 0; - border: 0; -} - -.is-text-content { - white-space: break-spaces; -} - - -a.is-wrapping { - line-height: 0; -} - -.has-no-background { - box-shadow: none !important; - background-color: initial !important; -} - -.pagination-disabled { - background-color: white; - border-color: #dbdbdb; - color: #b5b5b5; - cursor: auto; -} - -.pagination-disabled:hover { - background-color: white; - border-color: #dbdbdb; - color: #b5b5b5; -} - -.has-text-shortenable { - overflow: hidden; - text-overflow: ellipsis; -} - -.has-border-dashed { - border-style: dashed; -} - -.has-border-grey-light { - border-color: var(--grey-light); -} - -.has-justify-start { - justify-content: start; -} - -.has-width-7 { - width: 7em; -} - -.media-content { - min-width: 15em; -} - -.column { - max-width: 100%; -} - -:not(div.highlight>pre)>code { - border: 1px solid #DDD; - color: initial; - background-color: unset; - padding: 0.05em 0.25em 0.05em; -} - -/************** - * selections * - **************/ - -.is-selected-search_item { - border: solid 2px #3273dc; - background-color: #eff3fa; - transform: scale(1.03); - box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); -} - -.is-not-selectable { - user-select: none; -} - -.selected_for_action { - outline: solid var(--col-primary) 0.25rem; -} - -.selected_for_deletion { - outline: solid red 0.25rem; -} - -/************** - * JID Search * - **************/ - -.search-item__group-tags { - /* we want the item with no group to have the same height as an item with one */ - min-height: 40px; -} - -/*************** - * misc states * - ***************/ - -.state_deleted { - opacity: 0; - transform: scale(0); - transition: opacity 0.5s ease-out, transform 0.5s ease-out; -} - -/********** - * editor * - **********/ - -.tag_input { - flex-grow: 1; - margin-bottom: 0.5rem; - width: auto; +.navbar-item { + gap: 0; } -/*********** - * dialogs * - ***********/ - -.modal-dialog { - transform: scaleY(0); -} - -div.state_appended .modal-dialog, div.main_notification.state_appended { - transform: scaleY(1); - transition: transform 0.15s ease-in; -} - -div.main_notification.state_closing { - transform: scaleY(0); -} - -.main_notification { - position: fixed; - top: 2rem; - left: 0; - right: 0; - z-index: 10000; - transform: scaleY(0); - transition: transform 0.15s ease-in; -} - -div.main_notification>div.column { - display: flex; - max-width: 95%; -} -div.main_notification>div.column>div.notification { - max-width: 80rem; -} - -.click_to_close { - cursor: pointer; -} - -div.search_dialog.is-active>div.dropdown-menu { - display: none; -} - -div.search_dialog.open>div.dropdown-menu { - display: block; -} - -div.dropdown-item.selected { - background-color: var(--col-primary); -} - -/********** - * panels * - **********/ - -.panel_wrapper { - position: absolute; - top: 0; - right: 0; - height: 100vh; - width: 100vw; - z-index: 150; -} - -.comments_side_panel, .invitation_manager_side_panel { - position: absolute; - top: 0; - right: 0; - height: 100vh; - width: 0; - max-width: 80%; - z-index: 200; - background: white; - transition: width 0.3s ease-out; - overflow: auto; - color: black; -} - -.comments_side_panel.open, .invitation_manager_side_panel.open { - width: 55rem; - transition: width 0.3s ease-out; -} - -/********* - * embed * - *********/ - -.embed { - width: 100%; - height: 100%; -} - -/**************** - * media player * - ****************/ - -div.media_player>div.media_elt, -div.media_player>div.media_elt>ogvjs, -div.media_player>div.media_elt>video { - width: 100%; - height: 100%; -} - -/* div.media_player:fullscreen>div.media_elt, */ -/* div.media_player:fullscreen>div.media_elt>ogvjs, */ -/* div.media_player:fullscreen>div.media_elt>video */ -/* { */ -/* height: 100%; */ -/* } */ - -div.media_player { - position: relative; - background-color: black; -} - -div.media_overlay_play { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - -div.media_overlay_play>.icon { - height: 12rem; - width: 12rem; - font-size: 10rem; - color: #eee; -} - -div.media_player.in_use>div.media_overlay_play { - display: none !important; -} - -div.media_player .media_pause, div.media_player .media_sound_off, -div.media_player .media_resize_small { - display: none; -} - -div.media_player.playing .media_pause { - display: inline-block; -} - -div.media_player.playing .media_play { - display: none; -} - -div.media_player.muted .media_sound_off { - display: inline-block; -} - -div.media_player.muted .media_sound_on { - display: none; -} - -div.media_player:fullscreen .media_resize_small { - display: inline-block; -} - -div.media_player:fullscreen .media_resize_full { - display: none; -} - -div.media_controls { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - margin: 0; - background-color: #000A; - color: #eee; - z-index: 150; -} - -div.media_controls progress { - cursor: pointer; -} - -div.media_player.playing:hover>.media_controls, -div.media_player.playing>.media_controls.hidden:hover -{ - opacity: 1; - transition: opacity 0.5s; -} - -div.media_player.playing>.media_controls, -div.media_player.playing>.media_controls.hidden { - opacity: 0; - transition: opacity 2s; -} - -div.media_player .media_controls .icon:hover { - background-color: #777; - cursor: pointer; -} - -div.media_player .timer { - cursor: pointer; - width: 5em; - text-align: center; -} - -div.media_player.no_fullscreen>div.media_controls>div.click_to_fullscreen { - display: none; -} - - -/************* - * slideshow * - *************/ - -.slideshow { - position: absolute; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - background-color: black; - color: white; - z-index: 100; - overflow: hidden; -} - -div.slideshow>button.delete { - z-index: 100; - background-color: var(--grey-light); - position: absolute; - top: 1rem; - right: 2rem; -} - -div.slideshow>div.click_to_comment { - z-index: 100; - position: absolute; - right: 1.7rem; - bottom: 3rem; - cursor: pointer; -} - -div.slideshow>div.comments__count { - z-index: 100; - position: absolute; - right: 1.7rem; - bottom: 0.5rem; - font-weight: bold; -} - -.swiper-slide { - display: flex; - align-items: center; - justify-content: center; -} - -.swiper-container { - height: 100%; - width: 100%; -} - -.swiper-button-prev { - left: 2.1rem !important; - color: #f1f1f1 !important; - z-index: 150; -} - -.swiper-button-next { - right: 2.1rem !important; - color: #f1f1f1 !important; - z-index: 150; -} - -.slide_img { - max-height: 100%; - max-width: 100%; -} - -.slide_video { - height: 100%; - width: 100%; -} - -div.slideshow.flag_no_pagination>div.swiper-container>div.swiper-pagination { - display: none; +.menu-item { + padding-top: 0.225em; } - -div.slideshow.flag_no_scrollbar>div.swiper-container>div.swiper-scrollbar { - display: none; -} - - -/*************** - * progression * - ***************/ - -.progress_started img { - filter: grayscale(100%); -} - -.progress_finished img { - filter: grayscale(0%); - transition: filter 1.5s ease-out; -} - -.progress_finished progress { - height: 0; - opacity: 0; - transition: all 1.5s ease-out; -} - -.progress { - transition: width 5s ease; -} - - -/********** - * drawer * - **********/ - - -.panel-drawer { - /* A panel which is hidden by default but can be - opened when it's clicked */ - max-height: 0; - opacity: 0; - overflow: hidden; - transition: max-height 0.5s, opacity 0.5s; -} - -.panel-drawer.state_clicked { - opacity: 1; -} - -/******** - * code * - ********/ - -.highlight { - overflow: auto; -} - -/********** - * blocks * - **********/ - -.block_separator { - font-size: 1.4em; - display: flex; - margin: 1rem 0; -} - -.block_separator__label { - display: inline-block; - margin: 0 0.2em; -} - -.block_separator__line { - height: 1px; - background: #ccc; - flex: 1; - margin-top: 0.7em; -} - -/******** - * tabs * - ********/ - -#tab_guests { - overflow: auto; -} - -.tab__page { - display: None; -} - -.tab__page.state_clicked { - display: block; -} - -/********* - * icons * - *********/ - -.svg-icon { - fill: currentColor; -} - -.icon_animate_spin { - animation: spin 2s infinite linear; - display: inline-block; -} - -@keyframes spin { - 0% { - transform: rotate(0deg); - } - - 100% { - transform: rotate(359deg); - } -} - -/******************* - * common features * - ******************/ - -.reaction { - border-radius: 12px; /* Rounded background */ - cursor: pointer; /* Pointer cursor for the entire reaction */ - border: 1px solid #dbdbdb; /* Discreet but visible border */ -} - -.reaction .emoji { - margin-right: .5rem; /* Space between emoji and counter using rem unit */ -} - -.own-reaction { - border-color: #3273dc; -} - -/************** - * animations * - *************/ - -/* Fade In */ - -@keyframes fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -.fade-in { - animation: fade-in 0.5s ease-in forwards; -} - -@keyframes fade-in-x { - 0% { - opacity: 0; - transform: scaleX(0); - } - 100% { - opacity: 1; - transform: scaleX(1); - } -} - -.fade-in-x { - animation: fade-in-x 0.5s ease-in forwards; -} - -@keyframes fade-in-y { - 0% { - opacity: 0; - transform: scaleY(0); - } - 100% { - opacity: 1; - transform: scaleY(1); - } -} - -.fade-in-y { - animation: fade-in-y 0.5s ease-in forwards; -} - -@keyframes fade-in-xy { - 0% { - opacity: 0; - transform: scale(0); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -.fade-in-xy { - animation: fade-in-xy 0.5s ease-in forwards; -} - -/* Fade Out */ - -@keyframes fade-out { - 0% { - opacity: 1; - } - 100% { - opacity: 0; - } -} - -.fade-out { - animation: fade-out 0.5s ease-in forwards; -} - -@keyframes fade-out-x { - 0% { - opacity: 1; - transform: scaleX(1); - } - 100% { - opacity: 0; - transform: scaleX(0); - } -} - -.fade-out-x { - animation: fade-out-x 0.5s ease-in forwards; -} - -@keyframes fade-out-y { - 0% { - opacity: 1; - transform: scaleY(1); - } - 100% { - opacity: 0; - transform: scaleY(0); - } -} - -.fade-out-y { - animation: fade-out-y 0.5s ease-in forwards; -} - -@keyframes fade-out-xy { - 0% { - opacity: 1; - transform: scale(1); - } - 100% { - opacity: 0; - transform: scale(0); - } -} - -.fade-out-xy { - animation: fade-out-xy 0.5s ease-in forwards; -} - -/* Slide In */ -@keyframes slide-in { - 0% { - transform: translateY(100%); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } -} - -.slide-in { - animation: slide-in 0.5s ease-in-out forwards; -} - -.animation-reverse { - animation-direction: reverse; -} - -/*************** - * third party * - **************/ - -emoji-picker { - width: 100%; - /* height: 30rem; */ -}