]> git.agnieray.net Git - galette.git/commitdiff
Projects / galette.git / commitdiff
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 8238a6e)
Handle RTL
authorGuillaume AGNIERAY <dev@agnieray.net>
Fri, 3 Mar 2023 16:04:42 +0000 (17:04 +0100)
committerJohan Cwiklinski <johan@x-tnd.be>
Sat, 4 Mar 2023 21:11:20 +0000 (22:11 +0100)
Load RTL CSS
Flip the language dropdown menu on rtl languages
Flip logged in background image on rtl languages

galette/templates/default/elements/header.html.twig patch | blob | history
galette/templates/default/elements/language.html.twig patch | blob | history
galette/templates/default/page.html.twig patch | blob | history
galette/templates/default/public_page.html.twig patch | blob | history
ui/semantic/galette/assets/images/bg-rtl.png [new file with mode: 0644] patch | blob
ui/semantic/galette/globals/site.overrides patch | blob | history
ui/semantic/galette/globals/site.variables patch | blob | history
ui/semantic/galette/modules/dropdown.overrides patch | blob | history

diff --git a/galette/templates/default/elements/header.html.twig b/galette/templates/default/elements/header.html.twig
index 1dc29c55f88b4faa0cfd90da135febee4e885458..9365db6aacb7c5e1bbdd0a40f549e15402138534 100644 (file)
--- a/galette/templates/default/elements/header.html.twig
+++ b/galette/templates/default/elements/header.html.twig
@@ -2,7 +2,7 @@
         <title>{% if preferences.pref_slogan != "" %}{{ preferences.pref_slogan }} - {% endif %}{% if page_title != "" %}{{ page_title }} - {% endif %}Galette {{ constant('GALETTE_VERSION') }}</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width" />
-        <link rel="stylesheet" type="text/css" href="{{ base_path() }}/{{ constant('GALETTE_THEME') }}ui/semantic.min.css" />
+        <link rel="stylesheet" type="text/css" href="{{ base_path() }}/{{ constant('GALETTE_THEME') }}ui/semantic{% if i18n.isRtl() %}.rtl{% endif %}.min.css" />
 
     {% if html_editor %}
         <link rel="stylesheet" type="text/css" href="{{ base_path() }}/assets/css/codemirror.css">
diff --git a/galette/templates/default/elements/language.html.twig b/galette/templates/default/elements/language.html.twig
index 7da5d6fcc236b7588088cabe019d231e5c58da17..0cf918aa705bab7ce495c44d9b73446720c35578 100644 (file)
--- a/galette/templates/default/elements/language.html.twig
+++ b/galette/templates/default/elements/language.html.twig
@@ -10,7 +10,7 @@
     {% endif %}
 {% endif %}
 
-<div class="{{ component_classes }}" title="{{ _T("Choose your language") }}">
+<div class="{{ component_classes }}{% if i18n.isRtl() %} rtl{% endif %}" title="{{ _T("Choose your language") }}">
 {% if header == true %}
 <div class="image header title">
 {% endif %}
diff --git a/galette/templates/default/page.html.twig b/galette/templates/default/page.html.twig
index af306ba47447aba4669f53ff64768baa8f1ccf0b..ec55afbd2280d65b9b10c2b23537a056c580bd3d 100644 (file)
--- a/galette/templates/default/page.html.twig
+++ b/galette/templates/default/page.html.twig
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 
-<html lang="{{ galette_lang }}">
+<html lang="{{ galette_lang }}"{% if i18n.isRtl() %} dir="rtl"{% endif %}>
     <head>
-        {% include 'elements/header.html.twig' %}
+        {% include 'elements/header.html.twig' with {
+            galette_lang: galette_lang
+        } %}
     </head>
     <body id="galette_body" class="pushable dimmable{% if login.isLogged() %} loggedin{% endif %} nojs">
         {% include 'elements/navigation/navigation_sidebar.html.twig' %}
         {% include 'elements/navigation/navigation_topbar.html.twig' %}
         <div class="pusher">
-            <div id="main" class="{% if not login.isLogged() %}container{% else %} full height{% endif %}">
+            <div id="main" class="{% if not login.isLogged() %}container{% else %} full height{% if i18n.isRtl() %} rtl{% endif %}{% endif %}">
 {%  if login.isLogged() %}
     {% include 'elements/navigation/navigation_aside.html.twig' %}
 {% endif %}
diff --git a/galette/templates/default/public_page.html.twig b/galette/templates/default/public_page.html.twig
index 8993022a2bf5c6e025668a9572db2d355a5a025c..8136caf0ad8743b81531b89bd45740ff106573f1 100644 (file)
--- a/galette/templates/default/public_page.html.twig
+++ b/galette/templates/default/public_page.html.twig
@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 
-<html lang="{{ galette_lang }}" class="public_page{% if additionnal_html_class is defined %} {{ additionnal_html_class }}{% endif %}">
+<html lang="{{ galette_lang }}"{% if i18n.isRtl() %} dir="rtl"{% endif %} class="public_page{% if additionnal_html_class is defined %} {{ additionnal_html_class }}{% endif %}">
     <head>
-        {% include 'elements/header.html.twig' %}
+        {% include 'elements/header.html.twig' with {
+            galette_lang: galette_lang
+        } %}
     </head>
     <body class="{% if body_class is defined and body_class == "front_page" %}front-page {% endif %}pushable{% if login.isLogged() %} loggedin{% endif %} nojs">
         {% include 'elements/navigation/navigation_sidebar.html.twig' %}
         {% include 'elements/navigation/navigation_topbar.html.twig' %}
         <div class="pusher">
-            <div id="main" class="{% if cur_route == "login" or cur_route == "password-lost" or cur_route == "password-recovery" or cur_route == "directlink" %}text {% endif %}{% if not login.isLogged() %}ui container{% else %}full height{% endif %}">
+            <div id="main" class="{% if cur_route == "login" or cur_route == "password-lost" or cur_route == "password-recovery" or cur_route == "directlink" %}text {% endif %}{% if not login.isLogged() %}ui container{% else %}full height{% if i18n.isRtl() %} rtl{% endif %}{% endif %}">
 {% if login.isLogged() %}
                 {% include "elements/navigation/navigation_aside.html.twig" %}
 {% endif %}
diff --git a/ui/semantic/galette/assets/images/bg-rtl.png b/ui/semantic/galette/assets/images/bg-rtl.png
new file mode 100644 (file)
index 0000000..4798b35
Binary files /dev/null and b/ui/semantic/galette/assets/images/bg-rtl.png differ
diff --git a/ui/semantic/galette/globals/site.overrides b/ui/semantic/galette/globals/site.overrides
index 5f80399bca9c784b22f119b5eae3d88bb7126b97..1e4f60a9ece4e512292c00d9e9c0ba152c2f40a4 100644 (file)
--- a/ui/semantic/galette/globals/site.overrides
+++ b/ui/semantic/galette/globals/site.overrides
@@ -48,6 +48,10 @@ body.pushable:not(.loggedin) > .pusher {
     padding: 1.25rem;
   }
 }
+.loggedin #main.rtl {
+  background-image: url(@galetteBackgroundImageRtl);
+  background-position: left top;
+}
 
 #top-navbar,
 aside.computer.toc {
diff --git a/ui/semantic/galette/globals/site.variables b/ui/semantic/galette/globals/site.variables
index 95ef623da93358d0660ecff0e8d741429f21c8fc..4e587399bc4a481734d084cc78e08f1bb91027b7 100644 (file)
--- a/ui/semantic/galette/globals/site.variables
+++ b/ui/semantic/galette/globals/site.variables
@@ -5,6 +5,7 @@
 @fontName                   : 'PT Sans';
 
 @galetteBackgroundImage     : 'themes/galette/assets/images/bg.png';
+@galetteBackgroundImageRtl  : 'themes/galette/assets/images/bg-rtl.png';
 @galetteNavBackground       : rgba(99, 107, 112, .3);
 @galetteColor               : #ffb619;
 @lightGaletteColor          : #ffda8b;
diff --git a/ui/semantic/galette/modules/dropdown.overrides b/ui/semantic/galette/modules/dropdown.overrides
index 734d5cd60636e119fd2f5d2663950df898d977f7..163af89bb1766329110ddec1141d09f3183b0cba 100644 (file)
--- a/ui/semantic/galette/modules/dropdown.overrides
+++ b/ui/semantic/galette/modules/dropdown.overrides
@@ -9,6 +9,14 @@
   height: 7rem;
 }
 
+/*--------------------------
+     Language dropdown
+---------------------------*/
+.ui.language.dropdown.rtl .menu {
+    left: auto;
+    right: 0;
+}
+
 /*------------------------
      Search dropdown
 -------------------------*/
Galette membership management web application towards non profit (personal repository) | https://galette.eu