Merge pull request #897 from MiguelMedeiros/fix-rtl-menu-mobile

UI/UX: Fix rtl mobile header menu.

frontend/src/app/components/master-page/master-page.component.scss

@@ -72,6 +72,14 @@ li.nav-item {
   width: 60%;
 }
 
+.navbar {
+  .dropdown {
+    button {
+      width: 62px;
+    }
+  }
+}
+
 @media (min-width: 576px) {
   .navbar-brand {
     width: 140px;
@@ -132,4 +140,4 @@ nav {
 }
 .navbar-dark .navbar-nav .nav-link {
   color: #f1f1f1;
-}
+}

frontend/src/app/components/search-form/search-form.component.scss

@@ -10,14 +10,14 @@ form {
   @media (min-width: 576px) {
     margin-top: 0px;
     margin-left: 8px;
-  }  
+  }
   @media (min-width: 992px) {
     width: 100%;
   }
 }
 
 .btn-block {
-  width: 58.55px;
+  width: 62px;
 }
 
 .search-box-container {
@@ -37,4 +37,4 @@ form {
   .btn {
     width: 100px;
   }
-}
+}

frontend/src/styles.scss

@@ -688,6 +688,25 @@ th {
 .reserved { color: #ff8c00 }
 
 .rtl-layout {
+
+  .navbar-brand {
+    margin-right: 0px;
+    text-align: right;
+  }
+  .dropdown {
+    margin-right: 1rem;
+    margin-left: 0;
+    @media (min-width: 576px) {
+      margin-left: 1rem;
+    }
+    @media (min-width: 768px) {
+      margin-left: 0;
+    }
+  }
+  .dropdown-menu-right {
+    left: 0px;
+    right: auto;
+  }
   .fa-arrow-alt-circle-right {
     @extend .fa-arrow-alt-circle-right;
     -webkit-transform: scaleX(-1);
@@ -737,7 +756,7 @@ th {
   }
 
   .bitcoin-block {
-      direction: rtl;
+    direction: rtl;
   }
 
   .next-previous-blocks {