Git Product home page Git Product logo

Comments (5)

gaogao-9 avatar gaogao-9 commented on August 27, 2024

同じツイートに対して、RTした時とふぁぼ(すし)した時のdiffを貼っておきます。
通知に関する情報は #spoonbill-outer 内に記述されるため、そこだけを抜粋します。

 <div id="spoonbill-outer">
-  <div class="WebToast is-actionable" data-redirect-to="notifications" id="spoonbill_1446628545954" style="display: block; opacity: 0;">
+  <div class="WebToast is-actionable" data-redirect-to="notifications" id="spoonbill_1446628914433" style="display: block; opacity: 0;">
     <div class="WebToast-box u-cf">
       <div class="WebToast-close">
         <button class="WebToast-closeButton" type="button">
           <span class="Icon Icon--close"></span>
           <span class="u-hiddenVisually">閉じる</span>
         </button>
       </div>
       <div class="WebToast-header u-cf">
         <div class="WebToast-imageBox u-floatLeft">
-          <span class="Icon Icon--retweeted Icon--small u-floatRight"></span>
+          <span class="Icon Icon--heartBadge  Icon--small u-floatRight"></span>
         </div>
-        <div class="WebToast-contentBox">リツイート済み </div>
+        <div class="WebToast-contentBox">「いいね」しました </div>
       </div>
       <div class="u-cf">
         <div class="WebToast-imageBox u-floatLeft">
           <a class="js-user-profile-link js-action-profile-avatar" tabindex="-1" href="/9_oagoag" data-user-id="3571300093">
             <img class="WebToast-avatar" width="32" height="32" src="https://pbs.twimg.com/profile_images/652916783712632832/Z09OLCLb_normal.png" alt="">
           </a>
         </div>
         <div class="WebToast-contentBox">
           <a class="WebToast-accountLink js-user-profile-link js-action-profile-name" href="/9_oagoag" data-user-id="3571300093">
             <b class="WebToast-fullname">がおっぴー(テスト中に付き文字数を長く)</b>
-          </a>さんがリツイート。
+          </a>さんがいいねしました
           <div class="WebToast-tweetExcerpt u-dir u-textBreak" dir="ltr">
             <p class="TweetTextSize  js-tweet-text tweet-text" lang="ja" data-aria-label-part="0">プルリク飛ばしてるのか寿司飛ばしてるのか途中で分からなくなった</p>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

from like2sushi.

mzyy94 avatar mzyy94 commented on August 27, 2024

検証どうもです!CSSで階層をどう扱うかで実現できたりできなかったりする微妙なラインですな。。
いろいろ試行錯誤してみます

from like2sushi.

mzyy94 avatar mzyy94 commented on August 27, 2024

理想的な実現方法としては、
.WebToast-contentBox を visibility: hidden; にしてしまって、

.Icon--heartBadge::after {
    content: "「すし」しました";
    display: inline-block;
    position: inherit;
}

ですかねぇ(未検証)

aタグの後はちょっと手がつけられなさそうなのでhelp wantedです。

from like2sushi.

tsubasan156 avatar tsubasan156 commented on August 27, 2024

こんにちは。面白い機能だと思いFirefoxの派生版CyberfoxにStylishというアドオンを追加して
CSSコピーして無事アイコンとプロフィール画面のいいね数がすしに変わったのはいいのですが
すしを選択してもアニメーションとマウスオーバーしたときすしと表示されません。これはもう諦めるしか無いのでしょうか?

from like2sushi.

mzyy94 avatar mzyy94 commented on August 27, 2024

@tsubasan156 興味を示していただきありがとうございます。 アニメーション関連はベンダープレフィックス付きCSS3を利用しているため、FIrefoxではうまく動かない場合もあります。
このリポジトリのフォーク先に幾つかChrome以外のブラウザへポートしたものがあるため、そちらを参考にしてみてはいかがでしょうか。

from like2sushi.

Related Issues (3)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.