This is excellent! Lots of potential here.
On mobile, I just tested the default French lesson. Right now, the 'dictionary' seems to be displayed dependent on where the last appearance of the word in the text. This means that if I select a word in the first paragraph but the word also appears in the last paragraph, I have to scroll to the bottom to see its definition (and add it to 'my list'). (ex: 'protestaires' in the default FR lesson) The column, in mobile view, gets bumped to the bottom.
I don't think you have to go as far as a modal window - something as simple as 'position:fixed' would let it pop on top of the text (though right now, the dictionary box doesn't have a defined independent class and is not contained). It's probably best for the large-screen view as well: you don't want your text body to be moving around while reading.
But seriously, this is one of the simplest, smartest and most extensible language learning tools I've come across. Thank you for sharing it.
edit//
It's a FF/Webkit quirk, but because the parent element (.bx--content) has 'transform' property applied to it, it will prevent the child div from actually responding to 'position:fixed'.
On mobile, I just tested the default French lesson. Right now, the 'dictionary' seems to be displayed dependent on where the last appearance of the word in the text. This means that if I select a word in the first paragraph but the word also appears in the last paragraph, I have to scroll to the bottom to see its definition (and add it to 'my list'). (ex: 'protestaires' in the default FR lesson) The column, in mobile view, gets bumped to the bottom.
I don't think you have to go as far as a modal window - something as simple as 'position:fixed' would let it pop on top of the text (though right now, the dictionary box doesn't have a defined independent class and is not contained). It's probably best for the large-screen view as well: you don't want your text body to be moving around while reading.
But seriously, this is one of the simplest, smartest and most extensible language learning tools I've come across. Thank you for sharing it.
edit// It's a FF/Webkit quirk, but because the parent element (.bx--content) has 'transform' property applied to it, it will prevent the child div from actually responding to 'position:fixed'.