f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 23:12:39 +00:00
Code Wiki Activity

Merge pull request #2372 from Gazook89/CSS-Flex-Meta-Editor

Browse Source 
Reposition Thumbnail Preview in Metadata Editor
This commit is contained in:
Trevor Buckner
2022-09-25 23:19:27 -04:00
committed by GitHub
parent 6e05186f1a f3c9dde801
commit f4580f9040
2 changed files with 64 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -231,21 +231,25 @@ const MetadataEditor = createClass({
value={this.props.metadata.title} value={this.props.metadata.title}
onChange={(e)=>this.handleFieldChange('title', e)} /> onChange={(e)=>this.handleFieldChange('title', e)} />
</div> </div>
<div className='field description'> <div className='field-group'>
<label>description</label> <div className='field-column'>
<textarea value={this.props.metadata.description} className='value' <div className='field description'>
onChange={(e)=>this.handleFieldChange('description', e)} /> <label>description</label>
</div> <textarea value={this.props.metadata.description} className='value'
<div className='field thumbnail'> onChange={(e)=>this.handleFieldChange('description', e)} />
<label>thumbnail</label> </div>
<input type='text' <div className='field thumbnail'>
value={this.props.metadata.thumbnail} <label>thumbnail</label>
placeholder='my.thumbnail.url' <input type='text'
className='value' value={this.props.metadata.thumbnail}
onChange={(e)=>this.handleFieldChange('thumbnail', e)} /> placeholder='my.thumbnail.url'
<button className='display' onClick={this.toggleThumbnailDisplay}> className='value'
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} /> onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
</button> <button className='display' onClick={this.toggleThumbnailDisplay}>
<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
</button>
</div>
</div>
{this.renderThumbnail()} {this.renderThumbnail()}
</div> </div>

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

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