michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-22 14:35:43 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fix top nav bar layout in RTL languages

Browse source 
Modify the margin direction in RTL layouts, and replace some occurrences of space-x to gap-x, for better RTL handling
This commit is contained in:
Azzam Alsharafi 2024-12-19 15:24:21 +08:00
parent 4eed37fc2c
commit 904e077b74
3 changed files with 21 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/css/compiled/main.css
View file

@ -1616,10 +1616,6 @@ select {
margin-left:-3rem
}
.-mr-2 {
margin-right:-0.5rem
}
.-mr-48 {
margin-right:-12rem
}
@ -2163,6 +2159,16 @@ select {
gap:1rem
}
.gap-x-3 {
-moz-column-gap:0.75rem;
column-gap:0.75rem
}
.gap-x-5 {
-moz-column-gap:1.25rem;
column-gap:1.25rem
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse:0;
margin-right:calc(0.5rem * var(--tw-space-x-reverse));
@ -5494,8 +5500,8 @@ pre {
margin-left:0.5rem
}
.ltr\:mr-14:where([dir="ltr"], [dir="ltr"] *) {
margin-right:3.5rem
.ltr\:mr-1:where([dir="ltr"], [dir="ltr"] *) {
margin-right:0.25rem
}
.ltr\:mr-4:where([dir="ltr"], [dir="ltr"] *) {
@ -5562,8 +5568,8 @@ pre {
margin-right:-1.25rem
}
.rtl\:ml-14:where([dir="rtl"], [dir="rtl"] *) {
margin-left:3.5rem
.rtl\:ml-1:where([dir="rtl"], [dir="rtl"] *) {
margin-left:0.25rem
}
.rtl\:ml-4:where([dir="rtl"], [dir="rtl"] *) {

12
layouts/partials/header/basic.html
View file

@ -1,5 +1,5 @@
<div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3">
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3">
{{ if .Site.Params.Logo }}
{{ $logo := resources.Get .Site.Params.Logo }}
{{ if $logo }}
@ -30,7 +30,7 @@
{{ end }}
</nav>
<nav class="hidden md:flex items-center space-x-5 md:ml-12 h-12">
<nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
{{ if .Site.Menus.main }}
{{ range .Site.Menus.main }}
@ -51,7 +51,7 @@
{{/* Appearance switch */}}
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
<div
class="{{ if .Site.Params.footer.showScrollToTop | default true -}} ltr:mr-14 rtl:ml-14 {{- end }} flex items-center">
class="{{ if .Site.Params.footer.showScrollToTop | default true -}} {{- end }} flex items-center">
<button id="appearance-switcher" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400">
<div class="flex items-center justify-center dark:hidden">
{{ partial "icon.html" "moon" }}
@ -64,7 +64,7 @@
{{ end }}
</nav>
<div class="flex md:hidden items-center space-x-5 md:ml-12 h-12">
<div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
<span></span>
@ -79,7 +79,7 @@
{{/* Appearance switch */}}
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
<button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400" style="margin-right:5px">
<button id="appearance-switcher-mobile" aria-label="Dark mode switcher" type="button" class="text-base hover:text-primary-600 dark:hover:text-primary-400 ltr:mr-1 rtl:ml-1">
<div class="flex items-center justify-center dark:hidden">
{{ partial "icon.html" "moon" }}
</div>
@ -91,7 +91,7 @@
</div>
</div>
<div class="-my-2 -mr-2 md:hidden">
<div class="-my-2 md:hidden">
<label id="menu-button" class="block">
{{ if .Site.Menus.main }}

2
layouts/partials/translations.html
View file

@ -1,7 +1,7 @@
{{ if .IsTranslated }}
<div>
<div class="cursor-pointer flex items-center nested-menu">
<span class="mr-1">
<span class="ltr:mr-1 rtl:ml-1">
{{ partial "icon.html" "language" }}
</span>
<div class="text-sm font-medium text-gray-500 hover:text-primary-600 dark:hover:text-primary-400" title="{{ .Title }}">