Adding direction to the client- participation (compdemocracy#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>
DFE-Digital · Apr 3, 2023 · 38d4630 · 38d4630
1 parent 4de33b2
commit 38d4630
Show file tree

Hide file tree

Showing 40 changed files with 178 additions and 157 deletions.
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

diff --git a/client-participation/css/polis/modules/_accordion.scss b/client-participation/css/polis/modules/_accordion.scss
@@ -18,14 +18,14 @@
 }
 
 .Accordion-toggle {
- margin-right: 10px;
+ margin-inline-end: 10px;
 
  color: $dark-gray;
 }
 
 .Accordion-content {
  padding-top: $default-whitespace;
- margin-left: $default-whitespace;
+ margin-inline-start: $default-whitespace;
 
  font-family: $serif-font;
 }
diff --git a/client-participation/css/polis/modules/_buttons.scss b/client-participation/css/polis/modules/_buttons.scss
@@ -51,7 +51,7 @@
  background-color: $bg-alt-color;
  color: $gray;
  letter-spacing: 0.05em;
- margin-right: 5px;
+ margin-inline-end: 5px;
 
  &:hover, &:focus {
  background-color: #d9dadc;
@@ -74,7 +74,7 @@
 // Voting buttons: agree and disagree
 //
 #agreeButton, #disagreeButton {
- border-right: 0px
+ border-inline-end: 0px
 }
 
 .Btn-vote {
@@ -143,12 +143,12 @@
  letter-spacing: normal;
  line-height: 24px;
  margin-bottom: 16px;
- margin-left: 0px;
- margin-right: 0px;
+ margin-inline-start: 0px;
+ margin-inline-end: 0px;
  margin-top: 0px;
  padding-bottom: 6px;
- padding-left: 56px;
- padding-right: 25px;
+ padding-inline-start: 56px;
+ padding-inline-end: 25px;
  padding-top: 8px;
  position: relative;
  text-align: center;

diff --git a/client-participation/css/polis/modules/_footer.scss b/client-participation/css/polis/modules/_footer.scss
@@ -52,7 +52,7 @@
 }
 
 .footer_item {
- margin-right: 40px;
+ margin-inline-end: 40px;
  position: relative;
  top: 14px;
 }

diff --git a/client-participation/css/polis/modules/_formSwitch.scss b/client-participation/css/polis/modules/_formSwitch.scss
@@ -12,8 +12,8 @@
 .SwitchForms-text {
  text-align: center;
  position: relative;
- padding-left: 10px;
- padding-right: 10px;
+ padding-inline-start: 10px;
+ padding-inline-end: 10px;
  background-color: $bg-color;
  font-weight: 400;
 }

diff --git a/client-participation/css/polis/modules/_forms.scss b/client-participation/css/polis/modules/_forms.scss
@@ -46,7 +46,7 @@
  font-family: $sans-font;
  font-size: 22px;
  font-weight: 400;
- text-align: left;
+ text-align: start;
 }
 
 .FormControl {
@@ -88,7 +88,7 @@
 
  font-family: $serif-font;
  line-height: 2;
- text-align: right;
+ text-align: end;
 }
 
 //