f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00
Code Wiki Activity

flex working, but odd vertical spacing

Browse Source
This commit is contained in:
Gazook89
2022-09-15 12:29:25 -05:00
parent c8742289de
commit bb25d30663
2 changed files with 54 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -231,23 +231,25 @@ const MetadataEditor = createClass({
value={this.props.metadata.title}
onChange={(e)=>this.handleFieldChange('title', e)} />
</div>
<div className='field description'>
<label>description</label>
<textarea value={this.props.metadata.description} className='value'
onChange={(e)=>this.handleFieldChange('description', e)} />
</div>
<div className='field thumbnail'>
<label>thumbnail</label>
<input type='text'
value={this.props.metadata.thumbnail}
placeholder='my.thumbnail.url'
className='value'
onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
<button className='display' onClick={this.toggleThumbnailDisplay}>
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button>
{this.renderThumbnail()}
<div className='field-group'>
<div className='field description'>
<label>description</label>
<textarea value={this.props.metadata.description} className='value'
onChange={(e)=>this.handleFieldChange('description', e)} />
</div>
<div className='field thumbnail'>
<label>thumbnail</label>
<input type='text'
value={this.props.metadata.thumbnail}
placeholder='my.thumbnail.url'
className='value'
onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
<button className='display' onClick={this.toggleThumbnailDisplay}>
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button>
</div>
</div>
{this.renderThumbnail()}
<StringArrayEditor label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]}
placeholder='add tag' unique={true}

50
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -7,10 +7,21 @@
width : 100%;
padding : 25px;
background-color : #999;
height : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar. probably a better way to dynamic get this.
display: flex;
flex-wrap: wrap;
gap: 10px;
.field-group {
display: flex;
flex-direction: column;
flex: 5;
gap: 10px;
}
.field{
display : flex;
width : 100%;
margin-bottom : 10px;
&>label{
display : inline-block;
vertical-align : top;
@@ -23,7 +34,7 @@
}
&>.value{
flex : 1 1 auto;
min-width : 200px;
width : 50px;
}
&.thumbnail{
height : 1.4em;
@@ -43,22 +54,33 @@
background-color: #777;
}
}
.thumbnail-preview{
position : relative;
width : 80px;
height : min-content;
border : 2px solid white;
margin-left : 5px;
max-height : 115px;
}
&.description {
flex: 1;
textarea.value {
resize : none;
height : auto;
font-family : 'Open Sans', sans-serif;
font-size : 0.8em;
}
}
}
.description.field textarea.value{
resize : none;
height : 5em;
font-family : 'Open Sans', sans-serif;
font-size : 0.8em;
.thumbnail-preview {
position: relative;
justify-self: center;
width: 80px;
height: min-content;
border: 2px solid white;
flex: 1 1;
max-height: 115px;
aspect-ratio: 1 / 1;
object-fit: contain;
background-color: cadetblue;
}
.systems.field .value{
label{
vertical-align : middle;