Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-07-09 09:04:18 +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

108
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 => { {
return ( phonologyContent.consonants.map(consonant => {
<span key={`consonant_${ consonant }_${ Date.now().toString() }`} return (
className='tag'> <span key={`consonant_${ consonant }_${ Date.now().toString() }`}
{ consonant } className='tag'>
</span> { consonant }
); </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 => { {
return ( phonologyContent.vowels.map(vowel => {
<span key={`vowel_${ vowel }_${ Date.now().toString() }`} return (
className='tag'> <span key={`vowel_${ vowel }_${ Date.now().toString() }`}
{ vowel } className='tag'>
</span> { vowel }
); </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 => { {
return ( phonologyContent.blends.map(blend => {
<span key={`blend_${ blend }_${ Date.now().toString() }`} return (
className='tag'> <span key={`blend_${ blend }_${ Date.now().toString() }`}
{ blend } className='tag'>
</span> { blend }
); </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 => { {
return ( phonologyContent.phonotactics.onset.map(onset => {
<span key={`onset_${ onset }_${ Date.now().toString() }`} return (
className='tag'> <span key={`onset_${ onset }_${ Date.now().toString() }`}
{ onset } className='tag'>
</span> { onset }
); </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 => { {
return ( phonologyContent.phonotactics.nucleus.map(nucleus => {
<span key={`onset_${ nucleus }_${ Date.now().toString() }`} return (
className='tag'> <span key={`onset_${ nucleus }_${ Date.now().toString() }`}
{ nucleus } className='tag'>
</span> { nucleus }
); </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 => { {
return ( phonologyContent.phonotactics.coda.map(coda => {
<span key={`onset_${ coda }_${ Date.now().toString() }`} return (
className='tag'> <span key={`onset_${ coda }_${ Date.now().toString() }`}
{ coda } className='tag'>
</span> { coda }
); </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;