Fix tw element

This commit is contained in:
Jeremy Thomas 2019-04-07 16:28:01 +01:00
parent b654e651c3
commit cc02aab5fb
10 changed files with 185 additions and 640 deletions

View File

@ -12,8 +12,7 @@
{{ include.content | markdownify }}
{% if include.title == 'No JavaScript' %}
{% assign tweet = site.data.love.tweets_by_id.860885116909998080 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
{% include elements/tw.html tweet_id="860885116909998080" modifier='bd-is-grey' %}
{% endif %}
</div>
</div>

View File

@ -1,54 +1,55 @@
{% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %}
{% assign tweet = site.data.love.tweets_by_id[include.tweet_id] %}
{% assign twUrl = "https://twitter.com/" | append: tweet.username | append: "/status/" | append: tweet.id %}
<article class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
<header class="bd-tw-header">
<a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
<figure class="bd-tw-avatar">
<img class="lazyload" src="{{ include.tweet.avatar }}">
<img class="lazyload" src="{{ tweet.avatar }}">
</figure>
<div class="bd-tw-name">
<strong class="bd-tw-fullname">
{{ include.tweet.fullname }}
{{ tweet.fullname }}
</strong>
<span class="bd-tw-username">
@{{ include.tweet.username }}
@{{ tweet.username }}
</span>
</div>
</a>
</header>
<div class="bd-tw-content">
{{ include.tweet.content }}
{{ tweet.content }}
</div>
<p class="bd-tw-date">
<a href="{{ twUrl }}" target="_blank">
{{ include.tweet.date }}
{{ tweet.date }}
</a>
</p>
<ul class="Tweet-actions">
<li class="Tweet-action">
<a class="TweetAction TweetAction--replyEdge web-intent" href="https://twitter.com/intent/tweet?in_reply_to={{ include.tweet.id }}">
<a class="TweetAction TweetAction--replyEdge web-intent" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
<div class="Icon Icon--reply TweetAction-icon Icon--replyEdge"></div>
</a>
</li>
<li class="Tweet-action Tweet-action--retweet">
<a class="TweetAction TweetAction--retweetEdge web-intent" href="https://twitter.com/intent/retweet?tweet_id={{ include.tweet.id }}">
<a class="TweetAction TweetAction--retweetEdge web-intent" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
<div class="Icon Icon--retweet TweetAction-icon Icon--retweetEdge"></div>
{% if include.tweet.retweets != 0 %}
{% if tweet.retweets != 0 %}
<span class="TweetAction-stat">
{{ include.tweet.retweets }}
{{ tweet.retweets }}
</span>
{% endif %}
</a>
</li>
<li class="Tweet-action Tweet-action--heart">
<a class="TweetAction TweetAction--heartEdge web-intent" href="https://twitter.com/intent/like?tweet_id={{ include.tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ include.tweet.id }}&amp;tw_p=tweetembed" target="_blank">
<a class="TweetAction TweetAction--heartEdge web-intent" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
<div class="Icon Icon--heartEdge TweetAction-icon Icon--heartEdge"></div>
{% if include.tweet.hearts != 0 %}
{% if tweet.hearts != 0 %}
<span class="TweetAction-stat">
{{ include.tweet.hearts }}
{{ tweet.hearts }}
</span>
{% endif %}
</a>

View File

@ -1,43 +1,29 @@
<div class="container">
<div class="columns">
<div class="column is-4">
{% assign tweet = site.data.love.tweets_by_id.869284735440363520 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.966731525709619200 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.959005382273355776 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="869284735440363520" modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="966731525709619200" modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="959005382273355776" modifier='bd-is-white' %}
</div>
<div class="column is-4">
{% assign tweet = site.data.love.tweets_by_id.915580081938018304 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.835834634655174658 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.910956939886043136 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="915580081938018304" modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="835834634655174658" modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="910956939886043136" modifier='bd-is-white' %}
</div>
<div class="column is-4">
{% assign tweet = site.data.love.tweets_by_id.903629781744439297 %}
{% include
elements/tw.html
modifier='bd-is-white'
tweet=tweet
tweet_id="903629781744439297"
drawing_id='love-letters'
drawing_width=240
drawing_height=120
%}
{% assign tweet = site.data.love.tweets_by_id.949986519250624513 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% assign tweet = site.data.love.tweets_by_id.922849122008354817 %}
{% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="949986519250624513" modifier='bd-is-white' %}
{% include elements/tw.html tweet_id="922849122008354817" modifier='bd-is-white' %}
</div>
</div>

View File

@ -11,6 +11,13 @@
<h4 class="subtitle is-4">
Simply set your own Sass variables before importing Bulma
</h4>
<div class="bd-index-custom-tweet">
{% include
elements/tw.html
tweet_id="1070320154452656128"
modifier='bd-is-grey'
%}
</div>
</header>
<div class="columns">

View File

@ -19,10 +19,9 @@
<div class="column">
<div class="bd-index-js-tweet">
{% assign tweet = site.data.love.tweets_by_id.860885116909998080 %}
{% include
elements/tw.html
tweet=tweet
tweet_id="860885116909998080"
modifier='bd-is-grey'
drawing_id='opinion-free'
drawing_width=152

View File

@ -15,10 +15,9 @@
</h4>
</header>
{% assign tweet = site.data.love.tweets_by_id.868829487072464897 %}
{% include
elements/tw.html
tweet=tweet
tweet_id="868829487072464897"
modifier='bd-is-grey'
drawing_id='crazy'
drawing_width=108

View File

@ -35,6 +35,11 @@
// Customize
.bd-index-custom-tweet
.bd-tw
margin-left: auto
margin-right: auto
.bd-index-custom-title
color: $grey-light

View File

@ -15,6 +15,7 @@ $tw-border: #e1e8ed
font-size: 16px
max-width: 420px
padding: 20px
text-align: left
&.bd-is-white
background-color: $white
@ -43,7 +44,7 @@ $tw-border: #e1e8ed
width: 36px
.bd-tw-fullname
color: currentColor
color: $text-strong
display: block
font-size: 16px
font-weight: 700

File diff suppressed because it is too large Load Diff

View File

@ -52,8 +52,7 @@ tweets:
<div class="bd-tws-love">
{% for tweet_pair in site.data.love.tweets_by_id reversed %}
{% assign tweet_id = tweet_pair[0] %}
{% assign tweet = site.data.love.tweets_by_id[tweet_id] %}
{% include elements/tw.html tweet=tweet %}
{% include elements/tw.html tweet_id=tweet_id %}
{% endfor %}
</div>
</div>