Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-07-12 02:15:55 +02:00
Code Issues Releases Activity

Fix CSS height for details; Update code spacing in PhonologyDisplay

Browse source
This commit is contained in:
Robbie Antenesse 2017-08-21 14:37:26 -06:00 • committed by Robbie Antenesse
parent d49ffa8d94
commit 211cb5f5f9
2 changed files with 61 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/display/DictionaryDetails/DetailsSection/PhonologyDisplay.jsx
View file

@ -15,28 +15,32 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
<div className='column is-half'> <div className='column is-half'>
<strong>Consonants:</strong> <strong>Consonants:</strong>
<div className='tags'> <div className='tags'>
{phonologyContent.consonants.map(consonant => { {
phonologyContent.consonants.map(consonant => {
return ( return (
<span key={`consonant_${ consonant }_${ Date.now().toString() }`} <span key={`consonant_${ consonant }_${ Date.now().toString() }`}
className='tag'> className='tag'>
{ consonant } { consonant }
</span> </span>
); );
})} })
}
</div> </div>
</div> </div>
<div className='column is-half'> <div className='column is-half'>
<strong>Vowels:</strong> <strong>Vowels:</strong>
<div className='tags'> <div className='tags'>
{phonologyContent.vowels.map(vowel => { {
phonologyContent.vowels.map(vowel => {
return ( return (
<span key={`vowel_${ vowel }_${ Date.now().toString() }`} <span key={`vowel_${ vowel }_${ Date.now().toString() }`}
className='tag'> className='tag'>
{ vowel } { vowel }
</span> </span>
); );
})} })
}
</div> </div>
</div> </div>
@ -50,14 +54,16 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
<div className='column'> <div className='column'>
<strong>Polyphthongs{'\u200B'}/{'\u200B'}Blends:</strong> <strong>Polyphthongs{'\u200B'}/{'\u200B'}Blends:</strong>
<div className='tags'> <div className='tags'>
{phonologyContent.blends.map(blend => { {
phonologyContent.blends.map(blend => {
return ( return (
<span key={`blend_${ blend }_${ Date.now().toString() }`} <span key={`blend_${ blend }_${ Date.now().toString() }`}
className='tag'> className='tag'>
{ blend } { blend }
</span> </span>
); );
})} })
}
</div> </div>
</div> </div>
@ -80,42 +86,48 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
<div className='column is-one-third'> <div className='column is-one-third'>
<strong>Onset:</strong> <strong>Onset:</strong>
<div className='tags'> <div className='tags'>
{phonologyContent.phonotactics.onset.map(onset => { {
phonologyContent.phonotactics.onset.map(onset => {
return ( return (
<span key={`onset_${ onset }_${ Date.now().toString() }`} <span key={`onset_${ onset }_${ Date.now().toString() }`}
className='tag'> className='tag'>
{ onset } { onset }
</span> </span>
); );
})} })
}
</div> </div>
</div> </div>
<div className='column is-one-third'> <div className='column is-one-third'>
<strong>Nucleus:</strong> <strong>Nucleus:</strong>
<div className='tags'> <div className='tags'>
{phonologyContent.phonotactics.nucleus.map(nucleus => { {
phonologyContent.phonotactics.nucleus.map(nucleus => {
return ( return (
<span key={`onset_${ nucleus }_${ Date.now().toString() }`} <span key={`onset_${ nucleus }_${ Date.now().toString() }`}
className='tag'> className='tag'>
{ nucleus } { nucleus }
</span> </span>
); );
})} })
}
</div> </div>
</div> </div>
<div className='column is-one-third'> <div className='column is-one-third'>
<strong>Coda:</strong> <strong>Coda:</strong>
<div className='tags'> <div className='tags'>
{phonologyContent.phonotactics.coda.map(coda => { {
phonologyContent.phonotactics.coda.map(coda => {
return ( return (
<span key={`onset_${ coda }_${ Date.now().toString() }`} <span key={`onset_${ coda }_${ Date.now().toString() }`}
className='tag'> className='tag'>
{ coda } { coda }
</span> </span>
); );
})} })
}
</div> </div>
</div> </div>

1
src/components/display/DictionaryDetails/DetailsSection/styles.scss
View file

@ -6,6 +6,7 @@
.details-menu, .details-menu,
.details-display { .details-display {
height: 100%;
max-height: 500px; max-height: 500px;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;