Adding direction to the client- participation (#1561)

* Adding direction to the participation * Set client-participation text directions to auto and match css styles to flexibly adapt * Adjust css styles in css files, modules and admin section * Fixing the issue in statement margins caused by paragraph direction overriding page direction * switch from dir to direction for rtl vs ltr specificaiton in strings files * add direction to Farsi and Hebrew strings files * Fixing remaining comments floating issue on chrome Co-authored-by: Christopher Small <metasoarous@gmail.com>
compdemocracy · Jan 4, 2023 · 58906b6 · 58906b6
1 parent c528a0c
commit 58906b6
Show file tree

Hide file tree

Showing 44 changed files with 197 additions and 176 deletions.
diff --git a/client-admin/public/embed.html b/client-admin/public/embed.html
@@ -12,8 +12,8 @@
     height: 80px;
     width: 620px;
     margin-top: 40px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
     margin-bottom: 40px;
   }
   .paragraph {
@@ -22,8 +22,8 @@
     height: 20px;
     width: 620px;
     margin-top: 20px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
   }
   .last-line {
     width: 100px;

diff --git a/client-admin/public/embedPreprod.html b/client-admin/public/embedPreprod.html
@@ -12,8 +12,8 @@
     height: 80px;
     width: 620px;
     margin-top: 40px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
     margin-bottom: 40px;
   }
   .paragraph {
@@ -22,8 +22,8 @@
     height: 20px;
     width: 620px;
     margin-top: 20px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
   }
   .last-line {
     width: 100px;

diff --git a/client-admin/public/embedReport.html b/client-admin/public/embedReport.html
@@ -12,8 +12,8 @@
     height: 80px;
     width: 620px;
     margin-top: 40px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
     margin-bottom: 40px;
   }
   .paragraph {
@@ -22,8 +22,8 @@
     height: 20px;
     width: 620px;
     margin-top: 20px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
   }
   .last-line {
     width: 100px;

diff --git a/client-admin/public/embedReportPreprod.html b/client-admin/public/embedReportPreprod.html
@@ -12,8 +12,8 @@
     height: 80px;
     width: 620px;
     margin-top: 40px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
     margin-bottom: 40px;
   }
   .paragraph {
@@ -22,8 +22,8 @@
     height: 20px;
     width: 620px;
     margin-top: 20px;
-    margin-left: 10px;
-    margin-right: 10px;
+    margin-inline-start: 10px;
+    margin-inline-end: 10px;
   }
   .last-line {
     width: 100px;

diff --git a/client-participation/css/base.scss b/client-participation/css/base.scss
@@ -81,7 +81,7 @@
   text-decoration: none;
 }
 .createAnswer{
-  padding-left: 0px;
+  padding-inline-start: 0px;
 }
 .createAnswer:hover{
   text-decoration: none;
@@ -94,7 +94,7 @@
 }
 
 [data-view-name="metadataAnswerViewWithDelete"] {
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 .questionText { /* a medium weight / bolder brandon */
   font-weight: 500;
@@ -107,7 +107,7 @@
   // padding-bottom: 10px;
   margin-top: 5px;
   margin-bottom: 5px;
-  margin-left: 10px;
+  margin-inline-start: 10px;
 }
 
 .nobullets {
@@ -131,7 +131,7 @@
 }
 
 .metadataCheckbox {
-  margin-right: 5px;
+  margin-inline-end: 5px;
 }
 
 .unselectable {

diff --git a/client-participation/css/conversationView.scss b/client-participation/css/conversationView.scss
@@ -6,11 +6,11 @@ body {
 
 .top-comments-item, .divisive-comments-item {
   list-style: none;
-  text-align: left;
+  text-align: start;
 }
 
 .top-comments-list, .divisive-comments-list {
-  padding-left: 20px;
+  padding-inline-start: 20px;
 }
 
 .svgCenter {
@@ -120,7 +120,7 @@ img {
 }
 
 .config-option-row {
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 
 
@@ -135,8 +135,8 @@ img {
 
 // #helpTextBox {
 
-//   margin-left:auto;
-//   margin-right:auto;
+//   margin-inline-start:auto;
+//   margin-inline-end:auto;
 //   max-width:70%;
 //   min-width: 280px;
 //   text-align: center;
@@ -174,11 +174,11 @@ img {
 }
 
 #agreeButton, #disagreeButton {
-  border-right: 0px
+  border-inline-end: 0px
 }
 
 #agreeButton {
-  border-left: 0;
+  border-inline-start: 0;
   border-radius: 0 0 0 8px;
 }
 
@@ -192,8 +192,8 @@ img {
   -webkit-font-smoothing: antialiased;
 
   // prevent clipped right edge and extra padding on left edge on mobile
-  padding-left: 0px;
-  padding-right: 0px;
+  padding-inline-start: 0px;
+  padding-inline-end: 0px;
 
   // Only allow hovering when not on iOS ( see https://github.com/twbs/bootstrap/issues/12832 )
   &.vote-btn-w-hover {
@@ -268,13 +268,13 @@ img {
 
 .modButtonContainer {
   display: block;
-  margin-left: 55px;
+  margin-inline-start: 55px;
   margin-bottom: 25px;
 }
 
 .moderateButton {
   background-color: rgb(230,230,230);
-  margin-right: 20px;
+  margin-inline-end: 20px;
   border-radius: 3px;
   font-weight: 500;
   transition: all .2s ease-in-out;
@@ -330,7 +330,7 @@ img {
 }
 
 .nudgeLeft {
-  margin-left: -20px;
+  margin-inline-start: -20px;
 }
 
 .icon-remove {
@@ -535,16 +535,16 @@ svg {
 }
 
 .query_results {
-  margin-left: 0px;
+  margin-inline-start: 0px;
   list-style: none;
-  padding-left:0px;
+  padding-inline-start:0px;
 }
 
 .query_result_item {
     min-height: 50px;
     padding: 0px 10px 0px 10px;
     background-color: rgba(255,255,255,0.7);
-    margin-right: 10px;
+    margin-inline-end: 10px;
     cursor: hand;
 }
 
@@ -586,16 +586,16 @@ svg {
 
 // override bootstrap's negative margin on xs
 .row {
-  margin-left: 0px;
-  margin-right: 0px;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
 }
 
 .voteMoreText {
   font-size: 30px;
   margin: 20px;
 }
 .participationCount {
-  // float: right;
+  // float: inline-end;
 }
 .writingTipsParent {
   display: block;
@@ -613,7 +613,7 @@ svg {
 .analyze-group-member-container {
   position: relative;
   // top: -130px;
-  // padding-left: 20px;
+  // padding-inline-start: 20px;
   left: 10%;
   // text-align: center
 }
@@ -652,7 +652,7 @@ svg {
   // border-radius: 10px 10px 10px 10px;
   // border: 3px;
   // border-top: 1px;
-  // border-left: 1px;
+  // border-inline-start: 1px;
   // border-style:solid;
   // border-color: lightgray;
   // // background-color: white;
@@ -689,14 +689,14 @@ svg {
 }
 
 .facebookButton {
-  margin-right: 10px;
+  margin-inline-end: 10px;
   background-color: #3b5998;
 }
 
 .facebookCaveatText {
   font-size: 14px;
   list-style: none;
-  margin-left: 0px;
+  margin-inline-start: 0px;
   width: 65%;
 }
 
@@ -784,13 +784,13 @@ svg {
 
 .arrow_box:after {
   border-top: 4px solid transparent;
-  border-right: 5px solid #fff;
+  border-inline-end: 5px solid #fff;
   border-bottom: 4px solid transparent;
   margin-top: -4px;
 }
 .arrow_box:before {
   border-top: 5px solid transparent;
-  border-right: 6.5px solid #9b9b9b;
+  border-inline-end: 6.5px solid #9b9b9b;
   border-bottom: 5px solid transparent;
   margin-top: -5px;
 }
@@ -833,12 +833,12 @@ svg {
 
 
   #opinion_groups_label {
-    margin-left: 30px;
+    margin-inline-start: 30px;
   }
 
   // make flush with tab pane so we can draw the arrow pointint to the selected hull
   #vis_sibling_bottom {
-    margin-left: -30px;
+    margin-inline-start: -30px;
   }
 
   #groupStats {
@@ -847,9 +847,9 @@ svg {
 
 
   .write-pane {
-  //   border-right: 3px solid lightgrey;
+  //   border-inline-end: 3px solid lightgrey;
   //   border-bottom: 3px solid lightgrey;
-  //   border-left: 1px solid lightgrey;
+  //   border-inline-start: 1px solid lightgrey;
   // // padding-bottom: 48px;
   //   border-bottom-right-radius: 10px;
   //   border-bottom-left-radius: 10px;
@@ -885,8 +885,8 @@ svg {
     //margin-top: 20px;
   }
   .dropdown-menu {
-    right: 0;
-    left: auto;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
   }
 }
 
@@ -917,12 +917,12 @@ svg {
     // margin-top: 20px;
   }
   .nav-tabs > li > a {
-    padding-left: 12px !important;
-    padding-right: 12px !important;
+    padding-inline-start: 12px !important;
+    padding-inline-end: 12px !important;
   }
   .dropdown-menu {
-    right: 0;
-    left: auto;
+    inset-inline-end: 0;
+    inset-inline-start: auto;
   }
   #groupStats {
     display: none;
@@ -933,6 +933,6 @@ svg {
     // font-size:10px; // not needed since we're hiding the analyze tab, which makes space for the other tabs
   }
   #vis_sibling_bottom {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
 }
diff --git a/client-participation/css/owlcarousel/owl.carousel.scss b/client-participation/css/owlcarousel/owl.carousel.scss
@@ -38,7 +38,7 @@
 }
 
 .owl-carousel .owl-item{
-	float: left;
+	float: inline-start;
 }
 .owl-controls .owl-page,
 .owl-controls .owl-buttons div{

diff --git a/client-participation/css/polis/base/_utilities.scss b/client-participation/css/polis/base/_utilities.scss
@@ -33,17 +33,17 @@
 
 // Alignment
 .pull-left {
-  float: left;
+  float: inline-start;
 }
 .pull-right {
-  float: right;
+  float: inline-end;
 }
 
 .align-left {
-  text-align: left;
+  text-align: start;
 }
 .align-right {
-  text-align: right;
+  text-align: end;
 }
 
 // Display