maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-28 12:43:11 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

File input is taking thumbnail's form factor in current MVP design

Browse source
This commit is contained in:
Vesa Luusua 2017-05-11 17:53:40 +03:00
parent 587a06e3af
commit abd11255d0
4 changed files with 46 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/AddImages/AddImages.example.css
View file

@ -1,21 +1,23 @@
.addImageWrapper {
float: left;
width: 110px;
height: 110px;
margin: 5px;
&::after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
position: relative;
width: 100%;
margin: 5px 0;
overflow: hidden;
}
/* Firefox doesn't support image aspect ratio inside flexbox */
.aspectRatioWrapper {
padding-bottom: 60%; /* 5:3 Aspect Ratio = 100% / (w / h) */
}
.addImage {
width: 110px;
height: 110px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: lightgrey;
display: flex;
justify-content: center;

18
src/components/AddImages/AddImages.example.js
View file

@ -63,14 +63,16 @@ class AddImagesTest extends Component {
<div>
<AddImages images={this.state.images} onSortEnd={this.onSortEnd}>
<div className={css.addImageWrapper}>
<label className={css.addImage} htmlFor="addImageExampleInput">+ Add image</label>
<input
id="addImageExampleInput"
type="file"
accept="images/*"
onChange={this.onChange}
className={css.addImageInput}
/>
<div className={css.aspectRatioWrapper}>
<label className={css.addImage} htmlFor="addImageExampleInput">+ Add image</label>
<input
id="addImageExampleInput"
type="file"
accept="images/*"
onChange={this.onChange}
className={css.addImageInput}
/>
</div>
</div>
</AddImages>
</div>

23
src/containers/EditListingPhotosForm/EditListingPhotosForm.css
View file

@ -1,8 +1,9 @@
.addImageWrapper {
float: left;
width: 110px;
height: 110px;
margin: 5px;
position: relative;
width: 100%;
margin: 5px 0;
overflow: hidden;
&::after {
content: ".";
@ -13,9 +14,19 @@
}
}
/* Firefox doesn't support image aspect ratio inside flexbox */
.aspectRatioWrapper {
padding-bottom: 60%; /* 5:3 Aspect Ratio = 100% / (w / h) */
}
.addImage {
width: 110px;
height: 110px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color: lightgrey;
display: flex;
justify-content: center;
@ -37,5 +48,5 @@
}
.submitButton {
margin-top: 1rem;
margin-top: 5rem;
}

6
src/containers/EditListingPhotosForm/EditListingPhotosForm.js
View file

@ -25,8 +25,10 @@ const RenderAddImage = props => {
const inputProps = { accept, id: name, name, onChange, type };
return (
<div className={css.addImageWrapper}>
<Input {...inputProps} className={css.addImageInput} />
<label htmlFor={name} className={css.addImage}>{label}</label>
<div className={css.aspectRatioWrapper}>
<Input {...inputProps} className={css.addImageInput} />
<label htmlFor={name} className={css.addImage}>{label}</label>
</div>
</div>
);
};