Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline style update #36

Closed
wants to merge 1 commit into from
Closed

Inline style update #36

wants to merge 1 commit into from

Conversation

corstian
Copy link

With regards to #35.

Added a zero width non joiner (‌) in order to have a placeholder for the span element which influences rendering of text directly behind the element.

<small>
    <Avatar
        username="Corstian Boerman"
        inline size="30"
        class="mr-3"
        src="https://pbs.twimg.com/profile_images/940157009151721472/nVMbmnJf_400x400.jpg" />
        Corstian Boerman
        <br />
        <br />
    <Avatar
        username="Corstian Boerman"
        inline
        size="30"
        class="mr-3" />
            Corstian Boerman
</small>

Now parses to:

<small>
    <div class="vue-avatar--wrapper mr-3" style="width: 30px; height: 30px; border-radius: 50%; background: transparent url(&quot;https://pbs.twimg.com/profile_images/940157009151721472/nVMbmnJf_400x400.jpg&quot;) no-repeat scroll 0% 0% / 30px 30px content-box border-box; display: inline-flex; align-items: center;"><span></span></div>
    Corstian Boerman
    <br>
    <br>
    <div class="vue-avatar--wrapper mr-3" style="width: 30px; height: 30px; border-radius: 50%; background-color: rgb(158, 158, 158); font: bold 12px/301px Helvetica, Arial, sans-serif; display: inline-flex; align-items: center; justify-content: center; color: rgb(238, 238, 238);"><span>CB</span></div>
    Corstian Boerman
</small>

with the following visual result:

image

@saintplay
Copy link
Collaborator

Thanks for your PR, however I think the real problem here is that username shouldn't be required, because src can take its place.
So I remove the required flag from username prop here

Let me know if this solves your problem

@corstian
Copy link
Author

Sounds reasonable! However, when using the inline prop, any text placed behind the element is aligned differently based on whether an image or some text is being displayed as avatar.

Or my CSS might just be incredibly botched?

@saintplay
Copy link
Collaborator

That's because, currently the flex or Inline flex is applied only when not using the src. That sounds inconsistent and it is, I solve that problem In this branch.

I looking towards mergein that branch instead of this PR though

@corstian
Copy link
Author

Ah allright! Looking forward to it, and thanks for your time! :)

@corstian corstian closed this Jul 24, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants