mirror of
https://github.com/Alamantus/Lexiconga.git
synced 2025-07-08 16:44:16 +02:00
Fix CSS height for details; Update code spacing in PhonologyDisplay
This commit is contained in:
parent
d49ffa8d94
commit
211cb5f5f9
2 changed files with 61 additions and 48 deletions
|
@ -15,28 +15,32 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
|
|||
<div className='column is-half'>
|
||||
<strong>Consonants:</strong>
|
||||
<div className='tags'>
|
||||
{phonologyContent.consonants.map(consonant => {
|
||||
return (
|
||||
<span key={`consonant_${ consonant }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ consonant }
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{
|
||||
phonologyContent.consonants.map(consonant => {
|
||||
return (
|
||||
<span key={`consonant_${ consonant }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ consonant }
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='column is-half'>
|
||||
<strong>Vowels:</strong>
|
||||
<div className='tags'>
|
||||
{phonologyContent.vowels.map(vowel => {
|
||||
return (
|
||||
<span key={`vowel_${ vowel }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ vowel }
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{
|
||||
phonologyContent.vowels.map(vowel => {
|
||||
return (
|
||||
<span key={`vowel_${ vowel }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ vowel }
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -50,14 +54,16 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
|
|||
<div className='column'>
|
||||
<strong>Polyphthongs{'\u200B'}/{'\u200B'}Blends:</strong>
|
||||
<div className='tags'>
|
||||
{phonologyContent.blends.map(blend => {
|
||||
return (
|
||||
<span key={`blend_${ blend }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ blend }
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{
|
||||
phonologyContent.blends.map(blend => {
|
||||
return (
|
||||
<span key={`blend_${ blend }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ blend }
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -80,42 +86,48 @@ export const PhonologyDisplay = ({ phonologyContent }) => {
|
|||
<div className='column is-one-third'>
|
||||
<strong>Onset:</strong>
|
||||
<div className='tags'>
|
||||
{phonologyContent.phonotactics.onset.map(onset => {
|
||||
return (
|
||||
<span key={`onset_${ onset }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ onset }
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{
|
||||
phonologyContent.phonotactics.onset.map(onset => {
|
||||
return (
|
||||
<span key={`onset_${ onset }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ onset }
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='column is-one-third'>
|
||||
<strong>Nucleus:</strong>
|
||||
<div className='tags'>
|
||||
{phonologyContent.phonotactics.nucleus.map(nucleus => {
|
||||
return (
|
||||
<span key={`onset_${ nucleus }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ nucleus }
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{
|
||||
phonologyContent.phonotactics.nucleus.map(nucleus => {
|
||||
return (
|
||||
<span key={`onset_${ nucleus }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ nucleus }
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='column is-one-third'>
|
||||
<strong>Coda:</strong>
|
||||
<div className='tags'>
|
||||
{phonologyContent.phonotactics.coda.map(coda => {
|
||||
return (
|
||||
<span key={`onset_${ coda }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ coda }
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
{
|
||||
phonologyContent.phonotactics.coda.map(coda => {
|
||||
return (
|
||||
<span key={`onset_${ coda }_${ Date.now().toString() }`}
|
||||
className='tag'>
|
||||
{ coda }
|
||||
</span>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
.details-menu,
|
||||
.details-display {
|
||||
height: 100%;
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
Loading…
Add table
Reference in a new issue