Modify social share button and functionality (#2316)
* Modify social share button and functionality * Some nightmode changes tossed in * Style adjustments and test snapshot fix
This commit is contained in:
Ben Halpern
GitHub
parent
a1787d0702
commit
5f3fd96960
15 changed files with 141 additions and 50 deletions
|
|
@ -700,14 +700,14 @@ article {
|
|||
width: 880px;
|
||||
padding: calc(0px + 0.7vh) 0px;
|
||||
}
|
||||
@media screen and (min-width: 1530px) {
|
||||
@media screen and (min-width: 1365px) {
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
width: 156px;
|
||||
width: calc(55px + 1.1vw);
|
||||
top: 0%;
|
||||
padding: 5.5% 0px;
|
||||
padding: calc(10px + 5.5%) 0px;
|
||||
bottom: 5%;
|
||||
left: calc(50% - 756px);
|
||||
left: calc(50% - 672px);
|
||||
border-radius: 20px;
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
|
|
@ -721,7 +721,7 @@ article {
|
|||
a {
|
||||
margin-bottom: 10px !important;
|
||||
display: block !important;
|
||||
width: 140px !important;
|
||||
width: 100% !important;
|
||||
padding: 6px 0px !important;
|
||||
margin-left: 0px !important;
|
||||
margin-right: 0px !important;
|
||||
|
|
@ -743,7 +743,7 @@ article {
|
|||
}
|
||||
a {
|
||||
margin-top: 5px !important;
|
||||
font-size: 0.79em !important;
|
||||
font-size: 0.67em !important;
|
||||
padding: 10px 0px 9px !important;
|
||||
&.article-actions-comments-count {
|
||||
padding: 12px 0px !important;
|
||||
|
|
@ -758,6 +758,24 @@ article {
|
|||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1439px) {
|
||||
width: calc(90px + 1.1vw);
|
||||
left: calc(50% - 711px);
|
||||
a {
|
||||
font-size: 0.70em !important;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1530px) {
|
||||
width: 156px;
|
||||
left: calc(50% - 756px);
|
||||
button,
|
||||
a {
|
||||
width: 140px !important;
|
||||
}
|
||||
a {
|
||||
font-size: 0.79em !important;
|
||||
}
|
||||
}
|
||||
button {
|
||||
background: transparent;
|
||||
background: var(--theme-container-background, transparent);
|
||||
|
|
@ -776,6 +794,18 @@ article {
|
|||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
@media screen and (min-width: 1365px) {
|
||||
height: 19px;
|
||||
width: 19px;
|
||||
}
|
||||
@media screen and (min-width: 1439px) {
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
}
|
||||
@media screen and (min-width: 1530px) {
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
.reaction-number {
|
||||
display: inline-block;
|
||||
|
|
@ -791,6 +821,20 @@ article {
|
|||
vertical-align: 7px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
@media screen and (min-width: 1365px) {
|
||||
font-size: 13px;
|
||||
vertical-align: 4px;
|
||||
width: 28px;
|
||||
}
|
||||
@media screen and (min-width: 1439px) {
|
||||
font-size: 15px;
|
||||
vertical-align: 5px;
|
||||
width: 37px;
|
||||
}
|
||||
@media screen and (min-width: 1530px) {
|
||||
font-size: 18px;
|
||||
vertical-align: 7px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
border: 2px solid #88aacc;
|
||||
|
|
@ -902,6 +946,9 @@ article {
|
|||
font-stretch: condensed;
|
||||
padding: 4px 0.88vw;
|
||||
border-radius: 3px;
|
||||
.article-actions-comments-count-number {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (min-width: 620px) {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -909,13 +956,14 @@ article {
|
|||
font-size: 0.92em;
|
||||
vertical-align: 6px;
|
||||
}
|
||||
img {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
@media screen and (min-width: 1439px) {
|
||||
.article-actions-comments-count-number {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.article-actions-tweet-button {
|
||||
padding: 7px 0 6px;
|
||||
padding: 2px 0 2px !important;
|
||||
border-radius: 3px;
|
||||
border: 2px solid darken($light-gray, 20%);
|
||||
margin-right: 0.15vw;
|
||||
|
|
@ -931,12 +979,28 @@ article {
|
|||
}
|
||||
@media screen and (min-width: 500px) {
|
||||
display: inline-block;
|
||||
padding: 2px 0 2px;
|
||||
vertical-align: calc(6px - 0.07vw);
|
||||
}
|
||||
@media screen and (min-width: 1250px) {
|
||||
padding: 3px 0 3px;
|
||||
vertical-align: 5px;
|
||||
@media screen and (min-width: 1365px) {
|
||||
padding: 6px 0 6px !important;
|
||||
img {
|
||||
height: 17px;
|
||||
width: 17px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1439px) {
|
||||
padding: 7px 0 7px !important;
|
||||
img {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1530px) {
|
||||
padding: 9px 0 9px !important;
|
||||
img {
|
||||
height: 23px;
|
||||
width: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,9 +12,6 @@
|
|||
@media screen and (min-width: 950px) {
|
||||
margin-top: 26px;
|
||||
}
|
||||
@media screen and (min-width: 2650px) {
|
||||
max-width: 1300px;
|
||||
}
|
||||
&.sub-home {
|
||||
margin-top: 10px;
|
||||
.side-bar {
|
||||
|
|
@ -840,6 +837,9 @@
|
|||
@media screen and (min-width: 950px) {
|
||||
display: block;
|
||||
}
|
||||
@media screen and (min-width: 1500px) {
|
||||
margin-left: 13px;
|
||||
}
|
||||
.fixed-sidebar {
|
||||
position: fixed;
|
||||
width: 276px;
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
margin-bottom: 5px;
|
||||
&:hover{
|
||||
background: lighten($green, 20%);
|
||||
background: var(--theme-container-background-hover, lighten($green, 20%))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -613,6 +614,8 @@
|
|||
background: transparent;
|
||||
padding:3px 0px;
|
||||
margin-bottom: -5px 0;
|
||||
color: $black;
|
||||
color: var(--theme-color, $black);
|
||||
&:hover {
|
||||
.chatchanneltab--inactive {
|
||||
border: 1px solid $outline-color;
|
||||
|
|
@ -771,6 +774,12 @@
|
|||
max-width: 100%;
|
||||
&:hover {
|
||||
background: $light-gray;
|
||||
background: var(--theme-container-background-hover, $light-gray);
|
||||
.chatmessagebody__username--link {
|
||||
background: transparent;
|
||||
background: var(--theme-container-background-hover, transparent);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -831,6 +840,14 @@
|
|||
|
||||
.chatmessagebody__username--link {
|
||||
color: inherit;
|
||||
background: white;
|
||||
border-radius: 3px;
|
||||
padding: 0px 2px;
|
||||
display: inline-block;
|
||||
&:hover {
|
||||
background: transparent;
|
||||
background: var(--theme-container-background-hover, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.chatmessagebody__divider {
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
max-width: 620px;
|
||||
a {
|
||||
color: #0366d6 !important;
|
||||
color: var(--theme-anchor-color, #0366d6) !important;
|
||||
}
|
||||
.readme-overview {
|
||||
padding: 0.8em 0.5em;
|
||||
|
|
@ -25,6 +26,8 @@
|
|||
left: 0px;
|
||||
margin-right: 0.3em;
|
||||
vertical-align: -0.18em;
|
||||
filter: invert(0);
|
||||
filter: var(--theme-social-icon-invert, invert(0));
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
}
|
||||
a {
|
||||
color:$black;
|
||||
color: var(--theme-color, $black);
|
||||
}
|
||||
.issue-title {
|
||||
font-weight: normal;
|
||||
|
|
@ -32,6 +33,8 @@
|
|||
display: inline-block !important;
|
||||
margin-left: 0 !important;
|
||||
left: 0 !important;
|
||||
filter: invert(0);
|
||||
filter: var(--theme-social-icon-invert, invert(0));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -40,6 +43,7 @@
|
|||
.github-thread {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
background-color: #fff;
|
||||
background-color: var(--theme-container-background, #fff);
|
||||
border: 1px solid #d1d5da;
|
||||
box-shadow: $shadow;
|
||||
border-radius: 3px;
|
||||
|
|
@ -86,6 +90,7 @@
|
|||
.timeline-comment-header {
|
||||
display: flex;
|
||||
background: #f6f8fa;
|
||||
background: var(--theme-container-background, #f6f8fa);
|
||||
border-bottom: 1px solid #d1d5da;
|
||||
padding: 0px 15px;
|
||||
|
||||
|
|
@ -187,6 +192,7 @@
|
|||
color: #444d56;
|
||||
vertical-align: middle;
|
||||
background-color: #fafbfc;
|
||||
background-color: var(--theme-container-background, #fafbfc);
|
||||
border: solid 1px #c6cbd1;
|
||||
border-bottom-color: #959da5;
|
||||
border-radius: 3px;
|
||||
|
|
@ -199,6 +205,7 @@
|
|||
margin-bottom: 15px;
|
||||
a.github-user-link {
|
||||
color: #24292e;
|
||||
color: var(--theme-secondary-color, #24292e);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -345,6 +352,7 @@
|
|||
text-align: center;
|
||||
padding: 0.35em 0 1.35em;
|
||||
box-shadow: -0px -0px 60px 42px #fff;
|
||||
box-shadow: -0px -0px 60px 42px var(--theme-container-background, #fff);
|
||||
position:relative;
|
||||
z-index:100
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ class BufferUpdatesController < ApplicationController
|
|||
@article = Article.find(params[:buffer_update][:article_id])
|
||||
create_main_tweet
|
||||
create_satellite_tweets
|
||||
create_facebook_post
|
||||
@article.update(last_buffered: Time.current)
|
||||
redirect_back(fallback_location: "/mod")
|
||||
end
|
||||
|
|
@ -39,6 +40,17 @@ class BufferUpdatesController < ApplicationController
|
|||
end
|
||||
end
|
||||
|
||||
def create_facebook_post
|
||||
BufferUpdate.create(
|
||||
article_id: @article.id,
|
||||
composer_user_id: current_user.id,
|
||||
body_text: params[:buffer_update][:body_text],
|
||||
social_service_name: "facebook",
|
||||
buffer_profile_id_code: ApplicationConfig["BUFFER_FACEBOOK_ID"],
|
||||
status: "pending",
|
||||
)
|
||||
end
|
||||
|
||||
def modified_body_text
|
||||
@user = @article.user
|
||||
if @user.twitter_username.present?
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ class Internal::ArticlesController < Internal::ApplicationController
|
|||
order("hotness_score DESC").
|
||||
page(params[:page]).
|
||||
limited_columns_internal_select.
|
||||
per(50)
|
||||
per(30)
|
||||
|
||||
@featured_articles = Article.
|
||||
where(published: true).
|
||||
|
|
|
|||
|
|
@ -51,11 +51,6 @@ exports[`<Message /> should render and test snapshot 1`] = `
|
|||
"__html": "WE BUILT THIS CITY",
|
||||
}
|
||||
}
|
||||
style={
|
||||
Object {
|
||||
"color": "black",
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -685,7 +685,6 @@ export default class Chat extends Component {
|
|||
userID={message.user_id}
|
||||
profileImageUrl={message.profile_image_url}
|
||||
message={message.message}
|
||||
messageColor={message.messageColor}
|
||||
timestamp={showTimestamp ? message.timestamp : null}
|
||||
color={message.color}
|
||||
type={message.type}
|
||||
|
|
|
|||
|
|
@ -9,30 +9,27 @@ const Message = ({
|
|||
message,
|
||||
color,
|
||||
type,
|
||||
messageColor,
|
||||
timestamp,
|
||||
profileImageUrl,
|
||||
onContentTrigger,
|
||||
}) => {
|
||||
const spanStyle = { color };
|
||||
const messageStyle = { color: messageColor };
|
||||
|
||||
if (type === 'error') {
|
||||
return <ErrorMessage message={message} />;
|
||||
}
|
||||
|
||||
const messageArea = (
|
||||
<span
|
||||
className="chatmessagebody__message"
|
||||
style={messageStyle}
|
||||
dangerouslySetInnerHTML={{__html: message}}
|
||||
></span>
|
||||
);
|
||||
<span
|
||||
className="chatmessagebody__message"
|
||||
dangerouslySetInnerHTML={{ __html: message }}
|
||||
/>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="chatmessage">
|
||||
<div className="chatmessage__profilepic">
|
||||
<a
|
||||
<a
|
||||
href={`/${user}`}
|
||||
target="_blank"
|
||||
data-content={`users/${userID}`}
|
||||
|
|
@ -66,9 +63,7 @@ const Message = ({
|
|||
) : (
|
||||
<span />
|
||||
)}
|
||||
<div className="chatmessage__bodytext">
|
||||
{messageArea}
|
||||
</div>
|
||||
<div className="chatmessage__bodytext">{messageArea}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -79,7 +74,6 @@ Message.propTypes = {
|
|||
userID: PropTypes.number.isRequired,
|
||||
color: PropTypes.string.isRequired,
|
||||
message: PropTypes.string.isRequired,
|
||||
messageColor: PropTypes.string,
|
||||
type: PropTypes.string,
|
||||
timestamp: PropTypes.string,
|
||||
profileImageUrl: PropTypes.string,
|
||||
|
|
@ -90,7 +84,6 @@ Message.defaultProps = {
|
|||
type: 'normalMessage',
|
||||
timestamp: null,
|
||||
profileImageUrl: '',
|
||||
messageColor: 'black',
|
||||
};
|
||||
|
||||
export default Message;
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
<img src="<%= asset_path("twitter.svg") %>" />
|
||||
</a>
|
||||
<a class="article-actions-comments-count" href="#comments" id="jump-to-comments">
|
||||
DISCUSSION
|
||||
DISCUSS
|
||||
<% if @article.comments_count.nonzero? %>
|
||||
(<%= @article.comments_count %>)
|
||||
<span class="article-actions-comments-count-number">(<%= @article.comments_count %>)</span>
|
||||
<% else %>
|
||||
<% end %>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
<% end %>
|
||||
</div>
|
||||
<% if @variant_number.to_i == 1 %>
|
||||
<% cache("html-variant-sidebar#{rand(20)}", expires_in: 8.hours) do %>
|
||||
<% cache("html-variant-sidebar#{rand(50)}", expires_in: 8.hours) do %>
|
||||
<% @html_variant = HtmlVariant.find_for_test(@article.cached_tag_list_array) %>
|
||||
<% if @html_variant %>
|
||||
<div class="html-variant-wrapper" id="html-variant-article-show-sidebar" data-variant-id="<%= @html_variant.id %>">
|
||||
|
|
|
|||
|
|
@ -86,7 +86,7 @@
|
|||
<h2>Suggest a Tweet</h2>
|
||||
<%= f.hidden_field :article_id, value: article.id %>
|
||||
<%= f.text_area :body_text, maxlength: 220 %>
|
||||
<%= f.submit %>
|
||||
<%= f.submit "Share Tweet Suggestion" %>
|
||||
<% end %>
|
||||
</div>
|
||||
<p style="width: 90%;margin:50px auto;text-align:left">
|
||||
|
|
@ -126,7 +126,6 @@
|
|||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
<script>
|
||||
var forms = document.getElementsByTagName("form");
|
||||
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@
|
|||
<h2>Suggest a Tweet</h2>
|
||||
<%= f.hidden_field :article_id, value: @moderatable.id %>
|
||||
<%= f.text_area :body_text, maxlength: 220 %>
|
||||
<%= f.submit %>
|
||||
<%= f.submit "Share Tweet Suggestion" %>
|
||||
<% end %>
|
||||
<p style="width: 90%;margin:50px auto;text-align:left">
|
||||
<br /><br />Text will be used in the body of a tweet linking to this post.
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ RSpec.describe "BufferUpdates", type: :request do
|
|||
post "/buffer_updates",
|
||||
params:
|
||||
{ buffer_update: { body_text: "This is the text!!!!", tag_id: "javascript", article_id: article.id } }
|
||||
expect(BufferUpdate.all.size).to eq(1)
|
||||
expect(BufferUpdate.all.size).to eq(2)
|
||||
expect(BufferUpdate.last.body_text).to start_with("This is the text!!!!")
|
||||
expect(BufferUpdate.last.status).to eq("pending")
|
||||
end
|
||||
|
|
@ -25,25 +25,26 @@ RSpec.describe "BufferUpdates", type: :request do
|
|||
post "/buffer_updates",
|
||||
params:
|
||||
{ buffer_update: { body_text: "This is the text!!!!", tag_id: "javascript", article_id: article.id } }
|
||||
expect(BufferUpdate.last.body_text).to include(article.path)
|
||||
expect(BufferUpdate.first.body_text).to include(article.path)
|
||||
end
|
||||
|
||||
it "creates buffer hashtag" do
|
||||
post "/buffer_updates",
|
||||
params:
|
||||
{ buffer_update: { body_text: "This is the text!!!!", tag_id: "javascript", article_id: article.id } }
|
||||
expect(BufferUpdate.last.body_text).to include("#DEVCommunity")
|
||||
expect(BufferUpdate.first.body_text).to include("#DEVCommunity")
|
||||
end
|
||||
|
||||
it "creates satellite buffer" do
|
||||
it "creates satellite and Facebook buffer" do
|
||||
article.update_column(:cached_tag_list, "ruby, rails, meta")
|
||||
create(:tag, name: "rails")
|
||||
tag = create(:tag, buffer_profile_id_code: "placeholder", name: "ruby")
|
||||
post "/buffer_updates",
|
||||
params:
|
||||
{ buffer_update: { body_text: "This is the text!!!!", tag_id: "javascript", article_id: article.id } }
|
||||
expect(BufferUpdate.all.size).to eq(2)
|
||||
expect(BufferUpdate.last.tag_id).to eq(tag.id)
|
||||
expect(BufferUpdate.all.size).to eq(3)
|
||||
expect(BufferUpdate.second.tag_id).to eq(tag.id)
|
||||
expect(BufferUpdate.last.social_service_name).to eq("facebook")
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue