fix: certificate detail page styling issues

edly-io · Jun 13, 2024 · 72e6c1b · 72e6c1b
1 parent 458a138
commit 72e6c1b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss
@@ -68,6 +68,7 @@
 
   .certificate-info-section {
     overflow: auto;
+    display: flex;
 
     .course-title-section,
     .course-number-section {
@@ -154,13 +155,29 @@
 
         position: absolute;
         top: $baseline;
-        right: $baseline;
         opacity: 0;
 
+        @include rtl {
+          left: $baseline;
+        }
+
+        // CASE: left to right layout
+        @include ltr {
+          right: $baseline;
+        }
+
         .action {
           display: inline-block;
           vertical-align: middle;
-          margin-right: ($baseline/4);
+
+          @include rtl {
+            margin-left: ($baseline/4);
+          }
+
+          // CASE: left to right layout
+          @include ltr {
+            margin-right: ($baseline/4);
+          }
 
           .edit {
             @extend %ui-btn-non-blue;
@@ -419,8 +436,17 @@
         }
 
         .wrapper-delete-button {
-          float: right;
-          padding: ($baseline/4) ($baseline/2);
+          // CASE: right to left layout
+          @include rtl {
+            float: left;
+            padding: ($baseline/2) ($baseline/4);
+          }
+
+          // CASE: left to right layout
+          @include ltr {
+            float: right;
+            padding: ($baseline/4) ($baseline/2);
+          }
 
           .is-disabled {
             color: $gray-l3;

diff --git a/cms/templates/js/certificate-details.underscore b/cms/templates/js/certificate-details.underscore
@@ -15,10 +15,10 @@
      <% if (showDetails) { %>
          <section class="certificate-settings course-details">
              <header>
-               <h2 class="title title-2"><%- gettext("Certificate Details") %></h2>
+               <h2 class="title"><%- gettext("Certificate Details") %></h2>
              </header>
              <div class='certificate-info-section'>
-                 <div class='course-title-section pull-left'>
+                 <div class='course-title-section'>
                     <p class="actual-course-title">
                             <span class="certificate-label"><%- gettext('Course Title') %>: </span>
                             <span class="certificate-value"><%- course.get('name') %></span>
@@ -37,7 +37,7 @@
                     <% } %>
                  </div>
 
-                <div class='course-number-section pull-left'>
+                <div class='course-number-section'>
                     <p class="actual-course-number">
                             <span class="certificate-label"><b><%- gettext('Course Number') %>: </b> </span>
                             <span class="certificate-value"><%- course.get('num') %></span>

diff --git a/cms/templates/js/certificate-editor.underscore b/cms/templates/js/certificate-editor.underscore
@@ -20,7 +20,7 @@
                 <span id="certificate-description-<%- uniqueId %>-tip" class="tip tip-stacked"><%- gettext("Description of the certificate") %></span>
             </div>
             <header>
-              <h2 class="title title-2"><%- gettext("Certificate Details") %></h2>
+              <h2 class="title"><%- gettext("Certificate Details") %></h2>
             </header>
             <div class="actual-course-title">
                 <span class="actual-course-title"><%- gettext("Course Title") %>: </span>

diff --git a/lms/templates/certificates/_accomplishment-rendering.html b/lms/templates/certificates/_accomplishment-rendering.html
@@ -12,7 +12,7 @@
         </style>
     </head>
     <body>
-        <div class="certificateWrapper" style="font-family:Diodrum">
+        <div class="certificateWrapper" style="font-family:Diodrum" dir="ltr">
             <div class="certificateWrapper__header">
                 <img
                     src="./../../static/images/SDAIA-Academy-logo.svg"
@@ -34,7 +34,7 @@ <h1 class="certificateWrapper__mainTitleWrap">
                                 Saudi Data and AI Authority (SDAIA) Certifies that
                             </div>
                             <div class="certificateWrapper__subTitleAR text-align diodrumFontFamily stronger">
-                                :الهيئة السعودية للبيانات والذكاء الاصطناعي ( سدايا ) تمنح
+                                الهيئة السعودية للبيانات والذكاء الاصطناعي ( سدايا ) تمنح
                             </div>
                         </div>
                         <div class="certificateWrapper__personWrap">