feat: customize height and width of the certificate #29
Conversation
|
Thanks @prabalsingh24, for opening the pull request! 🙌 One of our mentors will review the pull request soon. ✅ Star ⭐ this project and tweet 🐦 about your contributions. |
| name: layout.name, | ||
| content: layout.content, | ||
| params: layout.params, | ||
| height: layout.height ? layout.height : 408, |
There was a problem hiding this comment.
layout.height || 408
| onChange={e => setEditingLayout({ ...editingLayout, name: e.target.value})} | ||
| /> | ||
| <label>Width</label> |
There was a problem hiding this comment.
apply class ml-2 for a little margin on left
| @@ -55,7 +75,7 @@ export default props => { | |||
| /> | |||
| </div> | |||
| <div className='col-6'> | |||
| <iframe srcDoc={editingLayout.content} className='w-100' style={{ height: '75vh' }}> | |||
| <iframe srcDoc={editingLayout.content} width={editingLayout.width} height={editingLayout.height}> | |||
There was a problem hiding this comment.
setting exact width is an issue for us and will create a messy UI, can we calculate the aspect ratio and set a fixed width (w-50) ?
src/plugins/worker/handlers.js
Outdated
| @@ -79,8 +79,8 @@ module.exports = { | |||
| template: layout.content, | |||
| context: data.substitutions, | |||
| options: { | |||
| height: '408px', | |||
| width: '842px', | |||
| height: layout.height ? `${layout.height}px` :'408px', | |||
There was a problem hiding this comment.
'${+layout.height || 408}px'
…o the aspect ratio
| @@ -55,7 +75,7 @@ export default props => { | |||
| /> | |||
| </div> | |||
| <div className='col-6'> | |||
| <iframe srcDoc={editingLayout.content} className='w-100' style={{ height: '75vh' }}> | |||
| <iframe srcDoc={editingLayout.content} className='w-100' style={{height: `${50*editingLayout.height/editingLayout.width}vw`}}> | |||
There was a problem hiding this comment.
w-100 here equals 50 percent visible-width (because of col-6 ), hence height = 50*height/width visible width
|
Congratualtions @prabalsingh24, your pull request is merged! 🎉 Thanks for your contributions and participating in BOSS 2020. 🙌 You can claim your bounty points here. 💰 |
#26
