~cadence/bibliogram-devel

3 2

[PATCH 1/2] Fix the rtl problem in the settings page.

Details
Message ID
<AM9P191MB1522E7B6A2D981D69D9ABDEDDFEC9@AM9P191MB1522.EURP191.PROD.OUTLOOK.COM>
DKIM signature
pass
Download raw message
Patch: +17 -4
---
 src/site/pug/settings.pug          |  8 ++++----
 src/site/sass/includes/_forms.sass | 13 +++++++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/site/pug/settings.pug b/src/site/pug/settings.pug
index 2649f0d..31f7319 100644
--- a/src/site/pug/settings.pug
+++ b/src/site/pug/settings.pug
@@ -10,7 +10,7 @@ mixin fieldset(name)
mixin input(id, description, placeholder, disabled, list)
	.field-row
		label.description(for=id)= description
		input(type="text" id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`)
		input(type="text" class=ll.meta_direction id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`)
		if list
			datalist(id=`${id}-list`)
				each item in list
@@ -21,17 +21,17 @@ mixin checkbox(id, description, label, disabled)
		label.description(for=id)= description
		input.checkbox(type="checkbox" id=id name=id checked=(settings[id] !== 0) disabled=disabled autocomplete="off")
		label.pill(for=id tabindex=(disabled ? null : 0) onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`)= label
			span.fake-checkbox
			span.fake-checkbox(class=ll.meta_direction)

mixin select(id, description, disabled, options)
	.field-row
		label.description(for=id)= description
		select(id=id name=id disabled=disabled)
		select(class=ll.meta_direction id=id name=id disabled=disabled)
			each option in options
				option(value=option.value selected=(option.value === settings[id]))= option.text

doctype html
html
html(class=ll.meta_direction)
	head
		title= `${ll.t_settings} | Bibliogram`
		include includes/head
diff --git a/src/site/sass/includes/_forms.sass b/src/site/sass/includes/_forms.sass
index 56219cc..4a18e9b 100644
--- a/src/site/sass/includes/_forms.sass
+++ b/src/site/sass/includes/_forms.sass
@@ -37,6 +37,9 @@
			@include inside-shadow
			@include curve-in

html.rtl
	direction: rtl

fieldset
	border: none
	padding: 55px 0px 0px 0px
@@ -99,9 +102,15 @@ input[type="text"]
	width: 200px
	padding: 5px 8px

input[type="text"].rtl
	direction: ltr

select
	padding: 4px 6px 4px 4px

select.rtl
    height: 45px

input:not(:disabled)
	&:hover
		@include medium-border
@@ -136,6 +145,10 @@ button
		margin-left: 8px
		position: relative
		outline: none

    .fake-checkbox.rtl
		margin-left: 0
		margin-right: 8px

	.checkbox
		display: none
-- 
2.25.1
Details
Message ID
<08e8ae1d-89a5-4b1a-a3cc-134423249052@disroot.org>
In-Reply-To
<AM9P191MB1522E7B6A2D981D69D9ABDEDDFEC9@AM9P191MB1522.EURP191.PROD.OUTLOOK.COM> (view parent)
DKIM signature
pass
Download raw message
Instead of using classes and CSS for direction, I prefer to use the `dir` 
attribute. You can see that `dir` has been used elsewhere in Bibliogram.

> + direction: ltr

Could you tell me why this is ltr rather than rtl?
Details
Message ID
<AM9P191MB152204F669833836C89CF3DBDFED9@AM9P191MB1522.EURP191.PROD.OUTLOOK.COM>
In-Reply-To
<08e8ae1d-89a5-4b1a-a3cc-134423249052@disroot.org> (view parent)
DKIM signature
pass
Download raw message
1. Ok, I'll do it with the attribute, but with the `margin-right` and 
`margin-left` for the `fake-checkbox` needs CSS: 
https://imgur.com/a/t6mtA16. I'll do just that with CSS.

2. The inputs were just URLs, and almost every URL is in English: 
https://imgur.com/eKzCQnR
Details
Message ID
<165ec6a5-bac3-4579-87ed-acc263f06a1b@disroot.org>
In-Reply-To
<AM9P191MB152204F669833836C89CF3DBDFED9@AM9P191MB1522.EURP191.PROD.OUTLOOK.COM> (view parent)
DKIM signature
pass
Download raw message
Changing the margin for the fake-checkbox with css, and attributes for 
everything else, sounds great, thanks!
Reply to thread Export thread (mbox)