LBRYCommunity/spee.ch

Fork 0

Add more Social Share links Addressing issue #608 #617

Merged

rizdaprasetya merged 4 commits from patch-1 into master

2018-10-08 09:05:36 +02:00

rizdaprasetya commented

2018-10-03 09:19:30 +02:00

(Migrated from github.com)

Description

Addressing issue: https://github.com/lbryio/spee.ch/issues/608
Adding share to Mastodon button.

Preview/Demo

I can go on by adding share to Diaspora button and more, but it will make mobile view quite crowded & ugly. Desktop view is fine tho.

Might require CSS Styling changes, which I'm not currently familiar with this project CSS.

Share to Diaspora btn:

      <a
        className='link--primary'
        target='_blank'
        href={`https://share.diasporafoundation.org/?title=${name}&url=${host}/${shortId}/${name}`}
      >
        diaspora
      </a>

## Description Addressing issue: https://github.com/lbryio/spee.ch/issues/608 Adding share to Mastodon button. ## Preview/Demo ![screen shot 2018-10-03 at 2 10 52 pm](https://user-images.githubusercontent.com/13027142/46395568-f8ab8b80-c716-11e8-95e2-e7031deec8b3.png) I can go on by adding share to Diaspora button and more, but it will make mobile view quite crowded & ugly. Desktop view is fine tho. ![screen shot 2018-10-03 at 2 10 36 pm](https://user-images.githubusercontent.com/13027142/46395533-ddd91700-c716-11e8-88da-b4b9e2d333f3.png) Might require CSS Styling changes, which I'm not currently familiar with this project CSS. Share to Diaspora btn: ``` <a className='link--primary' target='_blank' href={`https://share.diasporafoundation.org/?title=${name}&url=${host}/${shortId}/${name}`} > diaspora </a> ```

👍 1

tzarebczan commented

2018-10-03 16:00:25 +02:00

(Migrated from github.com)

@rizdaprasetya Thanks so much for the PR! We'll get this reviewed. I saw your comment in the issue about it getting crowded...maybe we should have a secondary share menu with more options. Would that be something you'd want to work on?

Can we send you some LBC in appreciation?

skhameneh (Migrated from github.com) reviewed 2018-10-03 22:48:00 +02:00

skhameneh (Migrated from github.com) left a comment

Good work! Consider this a tentative approval once a CSS adjustment is in.
Can you add padding-right to the a tags (exclude the last)? box-sizing: border-box might help with this.

Let me know if you need any assistance

Good work! Consider this a tentative approval once a CSS adjustment is in. Can you add `padding-right` to the `a` tags (exclude the last)? `box-sizing: border-box` might help with this. Let me know if you need any assistance

rizdaprasetya commented

2018-10-04 09:21:08 +02:00

(Migrated from github.com)

thanks @tzarebczan , wow didn't know there's LBC offer for contributing, sure I'll follow the guide to claim the LBC later.

Would that be something you'd want to work on?

I'm no CSS expert, but let me see what I can do.

@skhameneh thanks for the approval, review & suggestion.

I think I found a way to make this more scalable when more social share button is added. By making the row auto wrap to new line, we don't need to manually add new row.
But I need to introduce new CSS class, something like this:

.row-social-share {
  flex-wrap: wrap;
  margin-right: -0.5em;
  margin-left: -0.5em;
}

.row-social-share > a{
  padding-right:0.5em;
  padding-left:0.5em;
}

Note: I didn't exclude last element from padding, because it didn't suit the auto wrapping flex, it only affect last (bottom right) element only.

Here's some of the preview:

Will do commits soon.

thanks @tzarebczan , wow didn't know there's LBC offer for contributing, sure I'll follow the guide to claim the LBC later. > Would that be something you'd want to work on? I'm no CSS expert, but let me see what I can do. @skhameneh thanks for the approval, review & suggestion. I think I found a way to make this more scalable when more social share button is added. By making the row auto wrap to new line, we don't need to manually add new row. But I need to introduce new CSS class, something like this: ``` .row-social-share { flex-wrap: wrap; margin-right: -0.5em; margin-left: -0.5em; } .row-social-share > a{ padding-right:0.5em; padding-left:0.5em; } ``` Note: I didn't exclude last element from padding, because it didn't suit the auto wrapping flex, it only affect last (bottom right) element only. Here's some of the preview: ![screen shot 2018-10-04 at 1 45 08 pm](https://user-images.githubusercontent.com/13027142/46458192-26f49e00-c7df-11e8-8928-a69cbf0b5289.png) ![screen shot 2018-10-04 at 1 04 24 pm](https://user-images.githubusercontent.com/13027142/46458247-54414c00-c7df-11e8-813d-de099932e534.png) ![screen shot 2018-10-04 at 1 47 02 pm](https://user-images.githubusercontent.com/13027142/46458292-7f2ba000-c7df-11e8-981b-d5d706e667ab.png) Will do commits soon.

rizdaprasetya commented

2018-10-04 11:09:58 +02:00

(Migrated from github.com)

Just made a few commit. Sorry can't verify if it will properly works.
I'm not familiar with react and don't know what I added on the css is properly following this project CSS standard. I'm not able to try to build this project as well due to the LBRY daemon dependency 😅

Just made a few commit. Sorry can't verify if it will properly works. I'm not familiar with react and don't know what I added on the css is properly following this project CSS standard. I'm not able to try to build this project as well due to the LBRY daemon dependency 😅

skhameneh commented

2018-10-05 08:01:33 +02:00

(Migrated from github.com)

Looks good, I'll test this out shortly, thanks!

skhameneh (Migrated from github.com) approved these changes 2018-10-08 09:05:24 +02:00

No reviewers

skhameneh

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/spee.ch#617

No description provided.