# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1729976006 -7200
# Node ID 2bbcb7da56bcaa213c709dd0cb9d5d5456e699d4
# Parent  0e454358ca4900fef20ec2c590db7d1e35bb7a17
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.

diff -r 0e454358ca49 -r 2bbcb7da56bc sat_templates/templates/bulma/_browser/browser_meta.json
--- 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"
             }
         }
     }
diff -r 0e454358ca49 -r 2bbcb7da56bc sat_templates/templates/bulma/base/base.html
--- 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">
diff -r 0e454358ca49 -r 2bbcb7da56bc sat_templates/templates/bulma/components/common.html
--- 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>
diff -r 0e454358ca49 -r 2bbcb7da56bc sat_templates/templates/bulma/static/styles.css
--- 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; */
-}