Add mixins to handle RTL languages

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
2021-11-04 18:14:36 +01:00
parent 547e222f5f
commit 39ea05a04a
36 changed files with 164 additions and 74 deletions
--- a/js/src/components/Account/ActorCard.vue
+++ b/js/src/components/Account/ActorCard.vue
@@ -53,6 +53,7 @@ export default class ActorCard extends Vue {
 </style>

 <style lang="scss">
+@use "@/styles/_mixins" as *;
 .tooltip {
  display: block !important;
  z-index: 10000;
@@ -105,7 +106,7 @@ export default class ActorCard extends Vue {
  }

  &[x-placement^="right"] {
-    margin-left: 5px;
+    @include margin-left(5px);

    .tooltip-arrow {
      border-width: 5px 5px 5px 0;
@@ -114,13 +115,13 @@ export default class ActorCard extends Vue {
      border-bottom-color: transparent !important;
      left: -5px;
      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
+      @include margin-left(0);
+      @include margin-right(0);
    }
  }

  &[x-placement^="left"] {
-    margin-right: 5px;
+    @include margin-right(5px);

    .tooltip-arrow {
      border-width: 5px 0 5px 5px;
@@ -129,8 +130,8 @@ export default class ActorCard extends Vue {
      border-bottom-color: transparent !important;
      right: -5px;
      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
+      @include margin-left(0);
+      @include margin-right(0);
    }
  }

--- a/js/src/components/Account/ActorInline.vue
+++ b/js/src/components/Account/ActorInline.vue
@@ -26,6 +26,7 @@ export default class ActorInline extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 div.actor-inline {
  align-items: flex-start;
  display: inline-flex;
@@ -36,7 +37,7 @@ div.actor-inline {
    flex-basis: auto;
    flex-grow: 0;
    flex-shrink: 0;
-    margin-right: 0.5rem;
+    @include margin-right(0.5rem);
  }
  div.actor-name {
    flex-basis: auto;
--- a/js/src/components/Address/AddressInfo.vue
+++ b/js/src/components/Address/AddressInfo.vue
@@ -103,6 +103,7 @@ export default class AddressInfo extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 address {
  font-style: normal;
  display: flex;
@@ -118,7 +119,7 @@ address {
  }

  span.icon {
-    padding-right: 1rem;
+    @include padding-right(1rem);
  }
 }
 </style>
--- a/js/src/components/Comment/Comment.vue
+++ b/js/src/components/Comment/Comment.vue
@@ -336,6 +336,7 @@ export default class Comment extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 form.reply {
  padding-bottom: 1rem;
 }
@@ -355,7 +356,7 @@ form.reply {
  }

  & > small {
-    margin-left: 0.3rem;
+    @include margin-left(0.3rem);
  }
 }

@@ -365,14 +366,14 @@ form.reply {

  .editor {
    flex: 1;
-    padding-right: 10px;
+    @include padding-right(10px);
    margin-bottom: 0;
  }
 }

 a.comment-link {
  text-decoration: none;
-  margin-left: 5px;
+  @include margin-left(5px);
  color: $text;
  &:hover {
    text-decoration: underline;
@@ -416,7 +417,7 @@ a.comment-link {
  }

  .media-left {
-    margin-right: 0.5rem;
+    @include margin-right(5px);
  }
 }

@@ -427,7 +428,7 @@ a.comment-link {
    display: flex;
    flex-direction: column;
    align-items: center;
-    margin-right: 10px;
+    @include margin-right(10px);

    .vertical-border {
      width: 3px;
@@ -516,7 +517,7 @@ article {
 }

 .reply-action .icon {
-  padding-right: 0.4rem;
+  @include padding-right(0.4rem);
 }

 .visually-hidden {
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -363,6 +363,7 @@ export default class CommentTree extends Vue {
 </script>

 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 form.new-comment {
  padding-bottom: 1rem;

@@ -373,7 +374,7 @@ form.new-comment {

    .field {
      flex: 1;
-      padding-right: 10px;
+      @include padding-right(10px);
      margin-bottom: 0;

      &.notify-participants {
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -148,6 +148,7 @@ export default class DiscussionComment extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 article.comment {
  display: flex;
  border-top: 1px solid #e9e9e9;
@@ -163,7 +164,7 @@ article.comment {
      padding: 0 1rem 0.3em;

      .name {
-        margin-right: auto;
+        @include margin-right(auto);
        flex: 1 1 auto;
        overflow: hidden;

@@ -216,7 +217,7 @@ article.comment {
        ::v-deep blockquote {
          border-left: 0.2em solid #333;
          display: block;
-          padding-left: 1em;
+          @include padding-left(1em);
        }

        ::v-deep p {
--- a/js/src/components/Discussion/DiscussionListItem.vue
+++ b/js/src/components/Discussion/DiscussionListItem.vue
@@ -83,6 +83,7 @@ export default class DiscussionListItem extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 .discussion-minimalist-card-wrapper {
  text-decoration: none;
  display: flex;
@@ -92,7 +93,7 @@ export default class DiscussionListItem extends Vue {
  align-items: center;

  .calendar-icon {
-    margin-right: 1rem;
+    @include margin-right(1rem);
  }

  .title-info-wrapper {
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -376,6 +376,7 @@ export default class EditorComponent extends Vue {
 }
 </script>
 <style lang="scss">
+@use "@/styles/_mixins" as *;
@import "./Editor/style.scss";

 $color-black: #000;
@@ -392,7 +393,7 @@ $color-white: #eee;
    border: 0;
    color: $color-black;
    padding: 0.2rem 0.5rem;
-    margin-right: 0.2rem;
+    @include margin-right(0.2rem);
    border-radius: 3px;
    cursor: pointer;

@@ -464,7 +465,7 @@ $color-white: #eee;

    ul,
    ol {
-      padding-left: 1rem;
+      @include padding-left(1rem);
    }

    ul {
@@ -480,7 +481,7 @@ $color-white: #eee;
    blockquote {
      border-left: 3px solid rgba($color-black, 0.1);
      color: rgba($color-black, 0.8);
-      padding-left: 0.8rem;
+      @include padding-left(0.8rem);
      font-style: italic;

      p {
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -133,6 +133,7 @@ export default class EventCard extends Vue {
 </script>

 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
@use "@/styles/_event-card";

 a.card {
@@ -170,7 +171,7 @@ a.card {
    position: absolute;
    top: 10px;
    right: 0;
-    margin-right: -3px;
+    @include margin-right(-3px);
    z-index: 10;
    max-width: 40%;

@@ -214,7 +215,7 @@ a.card {
        align-items: flex-end;
        align-self: flex-start;
        margin-bottom: 15px;
-        margin-left: 0rem;
+        @include margin-left(0);
      }

      & > .media-content {
--- a/js/src/components/Event/EventListViewCard.vue
+++ b/js/src/components/Event/EventListViewCard.vue
@@ -128,6 +128,7 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
 </script>

 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 article.box {
  div.content {
    padding: 5px;
@@ -148,7 +149,7 @@ article.box {

      div.date-component {
        flex: 0;
-        margin-right: 16px;
+        @include margin-right(16px);
      }

      .title {
--- a/js/src/components/Event/EventMap.vue
+++ b/js/src/components/Event/EventMap.vue
@@ -152,10 +152,11 @@ export default class EventMap extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 .modal-card-head {
  justify-content: flex-end;
  button.delete {
-    margin-right: 1rem;
+    @include margin-right(1rem);
  }
 }

--- a/js/src/components/Event/EventMetadataItem.vue
+++ b/js/src/components/Event/EventMetadataItem.vue
@@ -131,11 +131,12 @@ export default class EventMetadataItem extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 .card .media {
  align-items: center;

  & > button {
-    margin-left: 1rem;
+    @include margin-left(1rem);
  }
 }
 </style>
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -131,6 +131,7 @@ export default class EventMinimalistCard extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
@use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass";
@import "@/variables.scss";
@@ -163,7 +164,7 @@ export default class EventMinimalistCard extends Vue {
  }

  .calendar-icon {
-    margin-right: 1rem;
+    @include margin-right(1rem);
  }

  .title-info-wrapper {
--- a/js/src/components/Event/EventParticipationCard.vue
+++ b/js/src/components/Event/EventParticipationCard.vue
@@ -392,6 +392,7 @@ export default class EventParticipationCard extends mixins(
 </script>

 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
@use "@/styles/_event-card";
@import "~bulma/sass/utilities/mixins.sass";

@@ -400,7 +401,7 @@ article.box {
    position: absolute;
    top: 10px;
    right: 0;
-    margin-right: -5px;
+    @include margin-left(-5px);
    z-index: 10;
    max-width: 40%;

@@ -516,7 +517,7 @@ article.box {

    figure,
    span.icon {
-      padding-right: 3px;
+      @include padding-right(3px);
    }
  }

--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/js/src/components/Event/OrganizerPicker.vue
@@ -121,6 +121,7 @@ export default class OrganizerPicker extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 ::v-deep .list-item {
  box-sizing: content-box;

@@ -133,11 +134,11 @@ export default class OrganizerPicker extends Vue {

      figure.image,
      span.icon.media-left {
-        margin-right: 0.5rem;
+        @include margin-right(0.5rem);
      }

      span.icon.media-left {
-        margin-left: -0.25rem;
+        @include margin-left(-0.25rem);
      }
    }
  }
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -86,6 +86,7 @@ export default class GroupMemberCard extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 .card {
  .card-content {
    display: flex;
@@ -113,7 +114,7 @@ export default class GroupMemberCard extends Vue {

    figure,
    span.icon {
-      padding-right: 3px;
+      @include padding-right(3px);
    }
  }
 }
--- a/js/src/components/Group/GroupSection.vue
+++ b/js/src/components/Group/GroupSection.vue
@@ -33,6 +33,7 @@ export default class GroupSection extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 section {
  display: flex;
  flex-direction: column;
@@ -44,7 +45,7 @@ section {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 0.5rem;
-    padding-right: 0.5rem;
+    @include padding-right(0.5rem);
  }

  .main-slot {
@@ -68,7 +69,7 @@ div.group-section-title {

  ::v-deep & > a {
    align-self: center;
-    margin-right: 5px;
+    @include margin-right(5px);
    color: var(--title-color);
  }

--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -338,6 +338,7 @@ export default class NavBar extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 nav {
  .navbar-item {
    a.button {
@@ -370,7 +371,7 @@ nav {
  }

  .navbar-item.has-dropdown a.navbar-link figure {
-    margin-right: 0.75rem;
+    @include margin-right(0.75rem);
    display: flex;
    align-items: center;
  }
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@@ -51,13 +51,14 @@
 </template>

 <style scoped lang="scss">
+@use "@/styles/_mixins" as *;
 .root {
  display: flex;
  align-items: center;
 }

 figure.image {
-  margin-right: 30px;
+  @include margin-right(30px);
  max-height: 200px;
  max-width: 200px;
  overflow: hidden;
@@ -99,7 +100,7 @@ figure.image {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
-      margin-right: 5px;
+      @include margin-right(5px);
    }
  }
 }
--- a/js/src/components/Post/PostListItem.vue
+++ b/js/src/components/Post/PostListItem.vue
@@ -71,6 +71,7 @@ export default class PostListItem extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
@import "~bulma/sass/utilities/mixins.sass";

 .post-minimalist-card-wrapper {
@@ -100,7 +101,7 @@ export default class PostListItem extends Vue {
  }
  ::v-deep .icon {
    vertical-align: middle;
-    margin-right: 5px;
+    @include margin-right(5px);
  }

  ::v-deep .tags {
--- a/js/src/components/Resource/ResourceItem.vue
+++ b/js/src/components/Resource/ResourceItem.vue
@@ -82,6 +82,7 @@ export default class ResourceItem extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 .resource-wrapper {
  display: flex;
  flex: 1;
@@ -137,7 +138,7 @@ a {
      display: inline-block;
      width: 16px;
      height: 16px;
-      margin-right: 6px;
+      @include margin-right(6px);
      vertical-align: middle;
    }

--- a/js/src/components/Todo/CompactTodo.vue
+++ b/js/src/components/Todo/CompactTodo.vue
@@ -66,7 +66,8 @@ export default class Todo extends Vue {
 }
 </script>
 <style lang="scss" scoped>
+@use "@/styles/_mixins" as *;
 span.details {
-  margin-left: 1rem;
+  @include margin-left(1rem);
 }
 </style>