Skip to content
Snippets Groups Projects
Commit 51a013cf authored by Thijs Kinkhorst's avatar Thijs Kinkhorst
Browse files

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.
parent 975878db
No related branches found
No related tags found
No related merge requests found
/* 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;
}
}
...@@ -36,13 +36,19 @@ body { ...@@ -36,13 +36,19 @@ body {
position: relative; position: relative;
} }
.left { .logospace {
float: left; float: left;
} }
html[dir="rtl"] .logospace {
float: right;
}
.right { .menuspace {
float: right; float: right;
} }
html[dir="rtl"] .menuspace {
float: left;
}
.center { .center {
padding: auto; padding: auto;
...@@ -535,12 +541,16 @@ FOOTER ...@@ -535,12 +541,16 @@ FOOTER
font-size: .8rem; font-size: .8rem;
} }
.logo-footer-right { .logo-footer-space {
position: absolute; position: absolute;
right: 0; right: 0;
top: 50%; top: 50%;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
html[dir="rtl"] .logo-footer-space {
right: auto;
left: 0;
}
.logo-footer { .logo-footer {
height: 4rem; height: 4rem;
...@@ -605,8 +615,7 @@ input[type="file"] { ...@@ -605,8 +615,7 @@ input[type="file"] {
.pure-select { .pure-select {
float: right; float: right;
} }
html[dir="rtl"] .pure-select {
div .item {
float: left; float: left;
} }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="wrap"> <div class="wrap">
<div class="center copyrights">&copy; 2007-{{ year }} <a href="https://simplesamlphp.org/">SimpleSAMLphp</a> <div class="center copyrights">&copy; 2007-{{ year }} <a href="https://simplesamlphp.org/">SimpleSAMLphp</a>
</div> </div>
<div class="logo-footer-right show-for-large"> <div class="logo-footer-space show-for-large">
<div class="logo-footer"> <div class="logo-footer">
<img class="pure-img" src="{{ asset("icons/ssplogo-fish-small.png") }}" alt="Small fish logo"> <img class="pure-img" src="{{ asset("icons/ssplogo-fish-small.png") }}" alt="Small fish logo">
</div> </div>
......
<header id="header"> <header id="header">
<div class="wrap"> <div class="wrap">
<div class="left"> <div class="logospace">
<div class="v-center logo-header"> <div class="v-center logo-header">
<div id="logo"> <div id="logo">
{% if header == 'SimpleSAMLphp' %} {% if header == 'SimpleSAMLphp' %}
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
</div> </div>
</div> </div>
{% if not hideLanguageBar %} {% if not hideLanguageBar %}
<div class="right"> <div class="menuspace">
<a href="" id="menuLink" class="menu-link hide-for-large"> <a href="" id="menuLink" class="menu-link hide-for-large">
<span class="fa fa-globe fa-2x" aria-hidden="true"></span> <span class="fa fa-globe fa-2x" aria-hidden="true"></span>
</a> </a>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<div class="right show-for-large"> <div class="menuspace show-for-large">
<div class="v-center language-bar"> <div class="v-center language-bar">
<form id="language-form" class="pure-form" method="get"> <form id="language-form" class="pure-form" method="get">
{% if not hideLanguageBar %} {% if not hideLanguageBar %}
......
{% apply spaceless %} {% apply spaceless %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ currentLanguage }}" xml:lang="{{ currentLanguage }}"> <html lang="{{ currentLanguage }}" dir="{{ isRTL ? 'rtl' : 'ltr' }}">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0"> <meta name="viewport" content="initial-scale=1.0">
...@@ -8,9 +8,6 @@ ...@@ -8,9 +8,6 @@
<title>{{ pagetitle }}</title> <title>{{ pagetitle }}</title>
<link rel="stylesheet" href="{{ asset("css/stylesheet.css") }}"> <link rel="stylesheet" href="{{ asset("css/stylesheet.css") }}">
<link rel="icon" href="{{ asset("icons/favicon.ico") }}"> <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"> <meta name="robots" content="noindex, nofollow">
<link rel="preload" href="{{ asset('js/bundle.js') }}" as="script"> <link rel="preload" href="{{ asset('js/bundle.js') }}" as="script">
{% block preload %}{% endblock %} {% block preload %}{% endblock %}
......
/* 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;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment