add ability to upload banner image for community page#199
add ability to upload banner image for community page#199mannynotfound merged 5 commits intomainfrom
Conversation
mannynotfound
force-pushed
the
manny/cas-238
branch
from
e085e8c to
4b3794a
Compare
| getRootProps: getBannerRootProps, | ||
| getInputProps: getBannerInputProps, | ||
| } = useDropzone({ | ||
| onDrop: onDrop('community_banner', 'banner', MAX_FILE_SIZE, 1200), |
There was a problem hiding this comment.
added a 1200px resize on banners on david's suggestion
germanurrus
left a comment
germanurrus
left a comment
There was a problem hiding this comment.
Looks good! made a couple of comments
| @@ -179,16 +194,9 @@ export default function StepOne({ | |||
| position: 'relative', | |||
| ...(!logo ? { border: '1px dashed #757575' } : undefined), | |||
There was a problem hiding this comment.
same here border: '2px dashed #757575'
| > | ||
| {banner ? ( | ||
| <div | ||
| className="is-flex flex-1 is-flex-direction-column is-align-items-center is-justify-content-center" |
There was a problem hiding this comment.
same here adding rounded-lg
| <div className="columns"> | ||
| <div className="column is-12"> | ||
| <div | ||
| className="is-flex is-flex-direction-column is-align-items-center is-justify-content-center cursor-pointer rounded-lg border-dashed-dark" |
There was a problem hiding this comment.
same here:
className={is-flex is-flex-direction-column is-align-items-center is-justify-content-center cursor-pointer rounded-lg ${!banner ? 'border-dashed-dark': ''}}
| backgroundPosition: 'center', | ||
| }} | ||
| > | ||
| <div className={headerContainerClassNames}> |
There was a problem hiding this comment.
I think this might be more a design question but depending on the background image tabs will kind of look faded away:
| @@ -143,13 +172,13 @@ function CommunityEditorProfile({ | |||
| ? { border: '1px dashed #757575' } | |||
There was a problem hiding this comment.
I think this one should be border: '2px dashed #757575' I know it's not related to this PR but just to keep borders consistency
| )} | ||
| {bannerImage?.imageUrl && ( | ||
| <div | ||
| className="is-flex flex-1 is-flex-direction-column is-align-items-center is-justify-content-center" |
There was a problem hiding this comment.
can you add rounded-lg here too so image is rounded like the container?
| <div className="columns"> | ||
| <div className="column is-12"> | ||
| <div | ||
| className="is-flex is-flex-direction-column is-align-items-center is-justify-content-center cursor-pointer rounded-lg border-dashed-dark" |
There was a problem hiding this comment.
to keep it the same as the avatar, when the image is added I think we should remove the border, maybe something like this?
className={is-flex is-flex-direction-column is-align-items-center is-justify-content-center cursor-pointer rounded-lg ${!bannerImage ? 'border-dashed-dark': ''}}
| }} | ||
| /> | ||
| )} | ||
| {!(isUpdating && image.file) ? ( |
There was a problem hiding this comment.
Not sure about this change, I know it's kind of tricky but I didn't want to show the message 'Uploading' on top of the image when the user was just updating the community name and not uploading a new image, since the variable isUpdating comes form the hook I didn't have a better way to check what kind of update was done. If we change this, then uploading will show up for any text update on the community. Also if you didn't add any new image and want to keep it with the bloquies avatar it will still show "Uploading..."
There was a problem hiding this comment.
its not the prettiest but ill add isUpdatingImage and isUpdatingBanner to distinguish this logic
germanurrus
left a comment
germanurrus
left a comment
There was a problem hiding this comment.
Looks good! thanks @mannynotfound for the updates!
2 participants
open questions