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.

Simplify and improve RTL support
51a013cf · Thijs Kinkhorst · 975878db · 975878db · 51a013cf · 51a013cf
Commit 51a013cf authored 3 years ago by Thijs Kinkhorst
--- a/resources/css/default-rtl.css
+++ b/resources/css/default-rtl.css
-/* 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;
-    }
-}
--- 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;
 }
+html[dir="rtl"] .pure-select {
-div .item {
  float: left;
 }

--- a/templates/_footer.twig
+++ b/templates/_footer.twig
@@ -2,7 +2,7 @@
  <div class="wrap">
    <div class="center copyrights">&copy; 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>

--- a/templates/_header.twig
+++ b/templates/_header.twig
 <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 %}

--- a/templates/base.twig
+++ b/templates/base.twig
 {% 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 %}

--- a/www/assets/css/src/default-rtl.css
+++ b/www/assets/css/src/default-rtl.css
-/* 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;
-    }
-}