From 51a013cff4280bd5b76a5fb93484ad1607a4ac94 Mon Sep 17 00:00:00 2001
From: Thijs Kinkhorst <thijs@kinkhorst.com>
Date: Mon, 30 May 2022 22:53:48 +0200
Subject: [PATCH] Simplify and improve RTL support
Use the HTML 'dir' attribute to properly indicate text direction of this
language. Browser takes care of most issues already. Use value of dir
property in css to position things in the main layout that are explicitly
right or left aligned.
---
resources/css/default-rtl.css | 167 ----------------------------
resources/css/default.scss | 19 +++-
templates/_footer.twig | 2 +-
templates/_header.twig | 6 +-
templates/base.twig | 5 +-
www/assets/css/src/default-rtl.css | 168 -----------------------------
6 files changed, 19 insertions(+), 348 deletions(-)
delete mode 100644 resources/css/default-rtl.css
delete mode 100644 www/assets/css/src/default-rtl.css
diff --git a/resources/css/default-rtl.css b/resources/css/default-rtl.css
deleted file mode 100644
index aff3e40f6..000000000
--- a/resources/css/default-rtl.css
+++ /dev/null
@@ -1,167 +0,0 @@
-/* these styles are in the head of this page because this is a unique page */
-
-/* THE BIG GUYS */
-html {
- direction: rtl;
-}
-#header{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-#footer{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-/* LISTS */
-ul {
- margin: .3em 2em 1.5em 0;
-}
-
-li {
- margin-right: 2em;
-}
-
-/* TYPOGRAPHY */
-dl dd {
- margin-right: 3em;
-}
-
-.efieldlist {
- border-right: 1px solid #e6e6e6;
-}
-
-div.caution {
- padding: .2em 60px .2em .2em;
- background-position: right;
-}
-
-th.rowtitle {
- text-align: right;
-}
-.enablebox table {
- margin-right: 1em;
-}
-.enablebox.mini table {
- float: left;
-}
-.enablebox tr td {
- padding: .5px .5em 1px 1em;
-}
-
-/* Attribute presentation in example page */
-table.attributes td.attrname {
- text-align: left;
-}
-
-fieldset.fancyfieldset {
- margin: 2em 0px 1em 1em;
-}
-fieldset.fancyfieldset legend {
- margin-right: 2em;
-}
-
-
-/* Reverse Float Left <-> Right */
-.right {
- float: left;
-}
-.left {
- float: right;
-}
-.v-center-right{
- right: 0;
-}
-.logo-footer-right{
- left:0;
- right: auto;
-}
-.message-box {
- border-left-style: initial;
- order-left-width: 0;
- border-left-color: none;
- border-right-style: solid;
- border-right-width: 0.3125rem;
-}
-.message-box.error{
- border-right-color: #cc4b37;
-}
-.message-box.success{
- border-right-color: #46cc48;
-}
-.code-box-title .clipboard-btn {
- right: auto;
- left: 0;
- margin-left: 4px;
- margin-right: auto;
-}
-
-div .item{
- float: right;
-}
-
-/*purecss elements*/
-.pure-form-aligned .pure-control-group label {
- text-align: left;
- margin: 0 0 0 1em;
-}
-@media only screen and (max-width : 480px) {
- .pure-form-aligned .pure-control-group label {
- text-align: right;
- }
-}
-.pure-form-aligned .pure-controls {
- margin: 1.5em 11em 0 0;
-}
-.pure-form .pure-help-inline,
-.pure-form-message-inline {
- padding-left: 0;
- padding-right: 0.3em;
-}
-.pure-select{
- float: left;
-}
-.pure-table-attributes ul{
- margin:0;
-}
-.pure-table-attributes li{
- margin:0;
-}
-
-/* language side menu on medium and small screens*/
-#layout.active #menu {
- right: initial;
- left: 11em;
-}
-#layout.active .menu-link {
- right: initial;
- left: 11em;
-}
-#menu {
- right: initial;
- margin-right: 0;
- margin-left: -11em; /* "#menu" width */
- left: 0;
-}
-#menu a {
- padding: 0.6em 0.6em 0.6em 0em;
-}
-
-.menu-link {
- right: initial;
- left: 0; /* "#menu width" */
-}
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-@media screen and (max-width: 0em), screen and (min-width: 40em) {
- #layout.active {
- right: auto;
- left: 11em;
- }
- #menuLink.menu-link.active {
- right: auto;
- left: 13em;
- }
- #foot.active {
- margin-right: auto;
- margin-left: 11em;
- }
-}
diff --git a/resources/css/default.scss b/resources/css/default.scss
index 4fec2f530..7b4838d21 100644
--- a/resources/css/default.scss
+++ b/resources/css/default.scss
@@ -36,13 +36,19 @@ body {
position: relative;
}
-.left {
+.logospace {
float: left;
}
+html[dir="rtl"] .logospace {
+ float: right;
+}
-.right {
+.menuspace {
float: right;
}
+html[dir="rtl"] .menuspace {
+ float: left;
+}
.center {
padding: auto;
@@ -535,12 +541,16 @@ FOOTER
font-size: .8rem;
}
-.logo-footer-right {
+.logo-footer-space {
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
}
+html[dir="rtl"] .logo-footer-space {
+ right: auto;
+ left: 0;
+}
.logo-footer {
height: 4rem;
@@ -605,8 +615,7 @@ input[type="file"] {
.pure-select {
float: right;
}
-
-div .item {
+html[dir="rtl"] .pure-select {
float: left;
}
diff --git a/templates/_footer.twig b/templates/_footer.twig
index 45b630fa3..03561a324 100644
--- a/templates/_footer.twig
+++ b/templates/_footer.twig
@@ -2,7 +2,7 @@
<div class="wrap">
<div class="center copyrights">© 2007-{{ year }} <a href="https://simplesamlphp.org/">SimpleSAMLphp</a>
</div>
- <div class="logo-footer-right show-for-large">
+ <div class="logo-footer-space show-for-large">
<div class="logo-footer">
<img class="pure-img" src="{{ asset("icons/ssplogo-fish-small.png") }}" alt="Small fish logo">
</div>
diff --git a/templates/_header.twig b/templates/_header.twig
index e821e3845..8c377c28a 100644
--- a/templates/_header.twig
+++ b/templates/_header.twig
@@ -1,6 +1,6 @@
<header id="header">
<div class="wrap">
- <div class="left">
+ <div class="logospace">
<div class="v-center logo-header">
<div id="logo">
{% if header == 'SimpleSAMLphp' %}
@@ -15,7 +15,7 @@
</div>
</div>
{% if not hideLanguageBar %}
- <div class="right">
+ <div class="menuspace">
<a href="" id="menuLink" class="menu-link hide-for-large">
<span class="fa fa-globe fa-2x" aria-hidden="true"></span>
</a>
@@ -43,7 +43,7 @@
</div>
</div>
{% endif %}
- <div class="right show-for-large">
+ <div class="menuspace show-for-large">
<div class="v-center language-bar">
<form id="language-form" class="pure-form" method="get">
{% if not hideLanguageBar %}
diff --git a/templates/base.twig b/templates/base.twig
index 8579598f8..5893b7879 100644
--- a/templates/base.twig
+++ b/templates/base.twig
@@ -1,6 +1,6 @@
{% apply spaceless %}
<!DOCTYPE html>
-<html lang="{{ currentLanguage }}" xml:lang="{{ currentLanguage }}">
+<html lang="{{ currentLanguage }}" dir="{{ isRTL ? 'rtl' : 'ltr' }}">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0">
@@ -8,9 +8,6 @@
<title>{{ pagetitle }}</title>
<link rel="stylesheet" href="{{ asset("css/stylesheet.css") }}">
<link rel="icon" href="{{ asset("icons/favicon.ico") }}">
- {% if isRTL %}
- <link rel="stylesheet" href="{{ asset("assets/css/src/default-rtl.css") }}">
- {% endif %}
<meta name="robots" content="noindex, nofollow">
<link rel="preload" href="{{ asset('js/bundle.js') }}" as="script">
{% block preload %}{% endblock %}
diff --git a/www/assets/css/src/default-rtl.css b/www/assets/css/src/default-rtl.css
deleted file mode 100644
index 7cc1288a9..000000000
--- a/www/assets/css/src/default-rtl.css
+++ /dev/null
@@ -1,168 +0,0 @@
-/* these styles are in the head of this page because this is a unique page */
-
-/* THE BIG GUYS */
-html {
- direction: rtl;
-}
-#header{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-#footer{
- background: linear-gradient(-141deg, #b8002c 0%, #db0100 51%, #e8410c 75%);
-}
-/* LISTS */
-ul {
- margin: .3em 2em 1.5em 0;
-}
-
-li {
- margin-right: 2em;
-}
-
-/* TYPOGRAPHY */
-dl dd {
- margin-right: 3em;
-}
-
-.efieldlist {
- border-right: 1px solid #e6e6e6;
-}
-
-div.caution {
- padding: .2em 60px .2em .2em;
- background-position: right;
-}
-
-th.rowtitle {
- text-align: right;
-}
-.enablebox tr td {
- padding: .5px .5em 1px 1em;
-}
-
-/* Attribute presentation in example page */
-table.attributes td.attrname {
- text-align: left;
-}
-
-fieldset.fancyfieldset {
- margin: 2em 0px 1em 1em;
-}
-fieldset.fancyfieldset legend {
- margin-right: 2em;
-}
-
-
-/* Reverse Float Left <-> Right */
-.right {
- float: left;
-}
-.left {
- float: right;
-}
-.v-center-right{
- right: 0;
-}
-.logo-footer-right{
- left:0;
- right: auto;
-}
-.message-box {
- border-left-style: initial;
- order-left-width: 0;
- border-left-color: none;
- border-right-style: solid;
- border-right-width: 0.3125rem;
-}
-.message-box.error{
- border-right-color: #cc4b37;
-}
-.message-box.success{
- border-right-color: #46cc48;
-}
-.code-box-title .clipboard-btn {
- right: auto;
- left: 0;
- margin-left: 4px;
- margin-right: auto;
-}
-
-/*selectize elements*/
-div .item{
- float: right;
-}
-.selectize-input{
- padding-right:8px;
-}
-.selectize-input:after{
- transform: translate(-8px, 0);
-}
-
-/*purecss elements*/
-.pure-form-aligned .pure-control-group label {
- text-align: left;
- margin: 0 0 0 1em;
-}
-@media only screen and (max-width : 480px) {
- .pure-form-aligned .pure-control-group label {
- text-align: right;
- }
-}
-.pure-form-aligned .pure-controls {
- margin: 1.5em 11em 0 0;
-}
-.pure-form .pure-help-inline,
-.pure-form-message-inline {
- padding-left: 0;
- padding-right: 0.3em;
-}
-.pure-select{
- float: left;
-}
-.pure-table-attributes ul{
- margin:0;
-}
-.pure-table-attributes li{
- margin:0;
-}
-
-/* language side menu on medium and small screens*/
-#layout.active #menu {
- right: initial;
- left: 11em;
-}
-#layout.active .menu-link {
- right: initial;
- left: 11em;
-}
-#menu {
- right: initial;
- margin-right: 0;
- margin-left: -11em; /* "#menu" width */
- left: 0;
-}
-#menu a {
- padding: 0.6em 0.6em 0.6em 0em;
-}
-
-.menu-link {
- right: initial;
- left: 0; /* "#menu width" */
-}
-
-/* -- Responsive Styles (Media Queries) ------------------------------------- */
-
-@media screen and (max-width: 0em), screen and (min-width: 40em) {
- #layout.active {
- right: auto;
- left: 11em;
- }
- #menuLink.menu-link.active {
- right: auto;
- left: 13em;
- }
- #foot.active {
- margin-right: auto;
- margin-left: 11em;
- }
-}
--
GitLab