#38 Fix RTL problem on GetFedora's Home page
Opened a year ago by haghighi. Modified a year ago
fedora-web/ haghighi/websites 18-fix-rtl-problem  into  master

@@ -4,7 +4,7 @@ 

      <div class="col-9">

        <a href="{{learnmorelink}}"><img src="{{logo}}" class="mt-n5"/></a>

      </div>

-     <div class="col-3 line-height-1 text-muted text-right d-none d-sm-block">

+     <div dir="auto" class="col-3 line-height-1 text-muted text-right d-none d-sm-block">

        {% if official %}

        <span class="text-uppercase">

          {% trans trimmed %}Official Edition{% endtrans %}
@@ -13,17 +13,17 @@ 

      </div>

    </div>

    <div class="row py-3">

-     <div class="col-10 font-weight-light">

+     <div dir="auto" class="col-10 font-weight-light">

        {{description}}

      </div>

    </div>

    <div class="row align-items-end flex-grow-1">

-     <div class="col-sm-6 font-weight-normal pb-1">

+     <div dir="auto" class="col-sm-6 font-weight-normal pb-1">

        {% trans trimmed %}

        <a href="{{learnmorelink}}">Learn more.</a> 

        {% endtrans %}

      </div>

-     <div class="col-sm-6 text-right">

+     <div dir="auto" class="col-sm-6 text-right">

        {% trans trimmed %}

        <a href="{{download_link}}" class="btn btn-outline-fedora-{{color}}">Download Now</a>

        {% endtrans %}

@@ -5,13 +5,13 @@ 

          <a href="{{learnmorelink}}"><img src="{{logo}}" class="mt-n5"/></a>

        </div>

      </div>

-     <div class="row py-3">

+     <div dir="auto" class="row py-3">

          <div class="col-12 font-weight-light">

              {{description}}

          </div>

      </div>

      <div class="row align-items-end flex-grow-1">

-         <div class="col-12 lead  text-right font-weight-normal">

+         <div dir="auto" class="col-12 lead  text-right font-weight-normal">

              <a href="{{learnmorelink}}">

               {% trans trimmed %}Learn more.{% endtrans %}

              </a>

@@ -14,8 +14,8 @@ 

          <img class="w-75" src="/static/images/g-monitor-fedoralogo.png" />

        </div>

        <div class="col-lg-7 col-md-6">

-         <h1 class="font-weight-light pb-4 text-center text-md-left">{% trans trimmed %}Welcome to Freedom.{% endtrans %}</h1>

-         <h5 class="font-weight-light">{% trans trimmed %}Fedora creates an innovative, free, and open source platform for hardware, clouds, and containers that enables software developers and community members to build tailored solutions for their users.{% endtrans %}</h5>

+         <h1 dir="auto" class="font-weight-light pb-4 text-initial text-md-inherit">{% trans trimmed %}Welcome to Freedom.{% endtrans %}</h1>

+         <h5 dir="auto" class="font-weight-light text-initial">{% trans trimmed %}Fedora creates an innovative, free, and open source platform for hardware, clouds, and containers that enables software developers and community members to build tailored solutions for their users.{% endtrans %}</h5>

        </div>

      </div>

    </div>
@@ -50,28 +50,28 @@ 

  

  <div class="bg-gray-200 py-5">

    <div class="container">

-     <div class="row">

+     <div dir="auto" class="row">

        <div class="col-12 text-center">

-         <h2 class="font-weight-light">{% trans trimmed %}Emerging Fedora Editions{% endtrans %}</h2>

+         <h2 class="font-weight-light text-center">{% trans trimmed %}Emerging Fedora Editions{% endtrans %}</h2>

          <p class="lead">{% trans trimmed %}Preview the future of Fedora.{% endtrans %}</p>

        </div>

      </div>

      <div class="row">

-       <div class="col-lg-4 mt-5">

+       <div dir="auto" class="col-lg-4 mt-5">

          {{link_card(logo="/static/images/fedora-coreos-logo.png",

                      description=_('Fedora CoreOS an automatically updating, minimal, monolithic, container-focused operating system.'),

                      learnmorelink="https://coreos.fedoraproject.org/"

          )}}

        </div>

  

-       <div class="col-lg-4 mt-5">

+       <div dir="auto" class="col-lg-4 mt-5">

          {{link_card(logo="/static/images/fedora-silverblue-logo.png",

                      description=_('Fedora Silverblue is an immutable desktop operating system aimed at good support for container-focused workflows.'),

                      learnmorelink="https://silverblue.fedoraproject.org/"

          )}}

        </div>

  

-       <div class="col-lg-4 mt-5">

+       <div dir="auto" class="col-lg-4 mt-5">

          {{link_card(logo="/static/images/fedora-iot-logo.png",

                      description=_('Fedora IoT provides a trusted open source platform as a strong foundation for IoT ecosystems.'),

                      learnmorelink="https://iot.fedoraproject.org/"
@@ -87,7 +87,7 @@ 

        <div class="col-4">

          <a href="https://fedoramagazine.org/"><img src="/static/images/fmag-ribbon.png"></a>

        </div>

-       <div class="col-lg-8 pt-5 d-none d-lg-block">

+       <div dir="auto" class="col-lg-8 pt-5 d-none d-lg-block">

          <h2 class="pt-4 text-right font-weight-light">{% trans trimmed %}Make the most of using Fedora.{% endtrans %}</h2>

        </div>

      </div>
@@ -98,7 +98,7 @@ 

        </div>

      </div>

      <div class="row mb-4">

-       <div class="col-12 text-right">

+       <div dir="auto" class="col-12 text-right">

          <p>

            {% trans trimmed link="https://fedoramagazine.org/" %}

            View more articles on <a href="{{link}}">Fedora Magazine &raquo;</a>
@@ -112,7 +112,7 @@ 

  <div class="bg-gray-200 py-5">

    <div class="container">

      <div class="row">

-       <div class="col-12 text-center">

+       <div dir="auto"class="col-12 text-center">

          <h2 class="font-weight-light">{% trans trimmed %}Want more Fedora options?{% endtrans %}</h2>

        </div>

      </div>
@@ -147,7 +147,7 @@ 

        <div class="col-lg-5 col-md-6 pb-4 pb-md-0 text-center">

          <img class="w-75" src="/static/images/globe.png" />

        </div>

-       <div class="col-lg-7 col-md-6">

+       <div dir="auto" class="col-lg-7 col-md-6">

          <h5 class="display font-weight-light pt-3">{% trans trimmed %}Fedora is always free for anyone to <strong>use, modify, and distribute</strong>.{% endtrans %}</h5>

          <h5 class="display font-weight-light pb-3">{% trans trimmed %}It is built and used by people across the globe who work together as a community.{% endtrans %}</h5>

        </div>

@@ -1,7 +1,7 @@ 

  <div class="footer bg-dark text-white font-size-80">

    <div class="container py-4">

      <div class="row footerlinks justify-content-center">

-       <div class="col-sm-3 col-4 mt-3">

+       <div dir="auto" class="col-sm-3 col-4 mt-3 text-initial">

        <h5 class="text-uppercase"><small><strong>{% trans %}About{% endtrans %}</strong></small></h5>

          <div>

            <dl>
@@ -12,7 +12,7 @@ 

            </dl>

          </div>

        </div>

-       <div class="col-sm-3 col-4 mt-3">

+       <div dir="auto" class="col-sm-3 col-4 mt-3 text-initial">

          <h5 class="text-uppercase"><small><strong>{% trans %}Support{% endtrans %}</strong></small></h5>

          <div>

            <dl>
@@ -23,7 +23,7 @@ 

            </dl>

          </div>

        </div>

-       <div class="col-sm-3 col-4 mt-3">

+       <div dir="auto" class="col-sm-3 col-4 mt-3 text-initial">

          <h5 class="text-uppercase"><small><strong>{% trans %}Community{% endtrans %}</strong></small></h5>

          <div>

            <dl>
@@ -43,7 +43,7 @@ 

      </div>

  

      <div class="row footerlinks">

-       <div class="col-12 text-center">

+       <div dir="auto" class="col-12 text-center">

          <p>

            {% trans trimmed link="https://pagure.io/fedora-web/websites/" %}

  	  Direct comments and corrections to the <a href="{{link}}">websites team</a>.

@@ -9760,6 +9760,10 @@ 

    text-align: center !important;

  }

  

+ .text-initial {

+   text-align: initial !important;

+ }

+ 

  @media (min-width: 576px) {

    .text-sm-left {

      text-align: left !important;
@@ -9782,6 +9786,12 @@ 

    .text-md-center {

      text-align: center !important;

    }

+   .text-md-inherit {

+     text-align: inherit !important;

+   }

+   .text-md-initial {

+     text-align: initial !important;

+   }

  }

  

  @media (min-width: 992px) {

Hello all
Fix issue #18 for Only Home page (https://getfedora.org), I will add auto direction to the other pages ASAP.
I'm busy now and maybe it takes some weeks to fix direction on all pages/websites, I think we should not wait to/and make all pages ready. With this PR at-least we have a beautiful/useful Home page for all languages.

Screen shots:

Current Home page in Persian
New Home page in Persian with Auto Direction

WE DON'T HAVE ANY VISIBLE CHANGES ON LTR CONTENTS/PAGES