WordPress.org
Get WordPress

Making WordPress.org

Changeset 3791


Ignore:
Timestamp:
08/09/2016 06:58:20 PM (10 years ago)
Author:
obenland
Message:

Plugin Directory: Show UI to favorite plugins.

Fills in transition animation and enables UI.

Fixes #1811.

Location:
sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style-rtl.css

    r3764 r3791  
    22162216}
    22172217
    2218 .single .type-plugin .plugin-header .plugin-favorite-heart {
    2219   /* FIX ME */
    2220   color: gray;
    2221   line-heght: 3em;
    2222   font-size: 3em;
    2223 }
    2224 
    2225 .single .type-plugin .plugin-header .plugin-favorite-heart.favorited, .single .type-plugin .plugin-header .plugin-favorite-heart:hover, .single .type-plugin .plugin-header .plugin-favorite-heart:focus {
    2226   color: red;
    2227 }
    2228 
    2229 .single .type-plugin .plugin-header .plugin-favorite-heart:hover, .single .type-plugin .plugin-header .plugin-favorite-heart:focus {
     2218@-webkit-keyframes favme-anime {
     2219  0% {
     2220    opacity: 1;
     2221    font-size: 1rem;
     2222    -webkit-text-stroke-color: transparent;
     2223  }
     2224  25% {
     2225    opacity: 0.6;
     2226    color: #fff;
     2227    font-size: 0.8rem;
     2228    -webkit-text-stroke-width: 1px;
     2229    -webkit-text-stroke-color: #dc3232;
     2230  }
     2231  75% {
     2232    opacity: 0.6;
     2233    color: #fff;
     2234    font-size: 1.42875rem;
     2235    -webkit-text-stroke-width: 1px;
     2236    -webkit-text-stroke-color: #dc3232;
     2237  }
     2238  100% {
     2239    opacity: 1;
     2240    font-size: 1.25rem;
     2241    -webkit-text-stroke-color: transparent;
     2242  }
     2243}
     2244
     2245@keyframes favme-anime {
     2246  0% {
     2247    opacity: 1;
     2248    font-size: 1rem;
     2249    -webkit-text-stroke-color: transparent;
     2250  }
     2251  25% {
     2252    opacity: 0.6;
     2253    color: #fff;
     2254    font-size: 0.8rem;
     2255    -webkit-text-stroke-width: 1px;
     2256    -webkit-text-stroke-color: #dc3232;
     2257  }
     2258  75% {
     2259    opacity: 0.6;
     2260    color: #fff;
     2261    font-size: 1.42875rem;
     2262    -webkit-text-stroke-width: 1px;
     2263    -webkit-text-stroke-color: #dc3232;
     2264  }
     2265  100% {
     2266    opacity: 1;
     2267    font-size: 1.25rem;
     2268    -webkit-text-stroke-color: transparent;
     2269  }
     2270}
     2271
     2272@-webkit-keyframes favme-hover {
     2273  from {
     2274    font-size: 22.86px;
     2275    font-size: 1.42875rem;
     2276  }
     2277  80% {
     2278    font-size: 20px;
     2279    font-size: 1.25rem;
     2280  }
     2281}
     2282
     2283@keyframes favme-hover {
     2284  from {
     2285    font-size: 22.86px;
     2286    font-size: 1.42875rem;
     2287  }
     2288  80% {
     2289    font-size: 20px;
     2290    font-size: 1.25rem;
     2291  }
     2292}
     2293
     2294.single .type-plugin .plugin-header .plugin-favorite {
     2295  display: inline-block;
     2296  height: 36px;
     2297  text-align: center;
     2298  width: 36px;
     2299}
     2300
     2301.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart {
     2302  -webkit-box-align: center;
     2303  -webkit-align-items: center;
     2304  -moz-box-align: center;
     2305  -ms-flex-align: center;
     2306  align-items: center;
     2307  color: #cbcdce;
     2308  display: -webkit-box;
     2309  display: -webkit-flex;
     2310  display: -moz-box;
     2311  display: -ms-flexbox;
     2312  display: flex;
     2313  font-size: 20px;
     2314  font-size: 1.25rem;
     2315  height: 100%;
     2316  -webkit-box-pack: center;
     2317  -webkit-justify-content: center;
     2318  -moz-box-pack: center;
     2319  -ms-flex-pack: center;
     2320  justify-content: center;
     2321  line-height: 1;
     2322  -webkit-transition: all .2s ease;
     2323  transition: all .2s ease;
     2324}
     2325
     2326.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart.favorited {
     2327  color: #dc3232;
     2328}
     2329
     2330.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:hover {
     2331  -webkit-animation: favme-hover .3s infinite alternate;
     2332  animation: favme-hover .3s infinite alternate;
     2333}
     2334
     2335.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:hover, .single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:focus {
    22302336  text-decoration: none;
    22312337}
    22322338
    2233 .single .type-plugin .plugin-header .plugin-favorite-heart:after {
     2339.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:after {
    22342340  content: "\f487";
    22352341  font-family: dashicons;
    22362342  vertical-align: top;
     2343}
     2344
     2345.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart.is-animating {
     2346  -webkit-animation: favme-anime .3s;
     2347  animation: favme-anime .3s;
    22372348}
    22382349

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/css/style.css

    r3764 r3791  
    22162216}
    22172217
    2218 .single .type-plugin .plugin-header .plugin-favorite-heart {
    2219   /* FIX ME */
    2220   color: gray;
    2221   line-heght: 3em;
    2222   font-size: 3em;
    2223 }
    2224 
    2225 .single .type-plugin .plugin-header .plugin-favorite-heart.favorited, .single .type-plugin .plugin-header .plugin-favorite-heart:hover, .single .type-plugin .plugin-header .plugin-favorite-heart:focus {
    2226   color: red;
    2227 }
    2228 
    2229 .single .type-plugin .plugin-header .plugin-favorite-heart:hover, .single .type-plugin .plugin-header .plugin-favorite-heart:focus {
     2218@-webkit-keyframes favme-anime {
     2219  0% {
     2220    opacity: 1;
     2221    font-size: 1rem;
     2222    -webkit-text-stroke-color: transparent;
     2223  }
     2224  25% {
     2225    opacity: 0.6;
     2226    color: #fff;
     2227    font-size: 0.8rem;
     2228    -webkit-text-stroke-width: 1px;
     2229    -webkit-text-stroke-color: #dc3232;
     2230  }
     2231  75% {
     2232    opacity: 0.6;
     2233    color: #fff;
     2234    font-size: 1.42875rem;
     2235    -webkit-text-stroke-width: 1px;
     2236    -webkit-text-stroke-color: #dc3232;
     2237  }
     2238  100% {
     2239    opacity: 1;
     2240    font-size: 1.25rem;
     2241    -webkit-text-stroke-color: transparent;
     2242  }
     2243}
     2244
     2245@keyframes favme-anime {
     2246  0% {
     2247    opacity: 1;
     2248    font-size: 1rem;
     2249    -webkit-text-stroke-color: transparent;
     2250  }
     2251  25% {
     2252    opacity: 0.6;
     2253    color: #fff;
     2254    font-size: 0.8rem;
     2255    -webkit-text-stroke-width: 1px;
     2256    -webkit-text-stroke-color: #dc3232;
     2257  }
     2258  75% {
     2259    opacity: 0.6;
     2260    color: #fff;
     2261    font-size: 1.42875rem;
     2262    -webkit-text-stroke-width: 1px;
     2263    -webkit-text-stroke-color: #dc3232;
     2264  }
     2265  100% {
     2266    opacity: 1;
     2267    font-size: 1.25rem;
     2268    -webkit-text-stroke-color: transparent;
     2269  }
     2270}
     2271
     2272@-webkit-keyframes favme-hover {
     2273  from {
     2274    font-size: 22.86px;
     2275    font-size: 1.42875rem;
     2276  }
     2277  80% {
     2278    font-size: 20px;
     2279    font-size: 1.25rem;
     2280  }
     2281}
     2282
     2283@keyframes favme-hover {
     2284  from {
     2285    font-size: 22.86px;
     2286    font-size: 1.42875rem;
     2287  }
     2288  80% {
     2289    font-size: 20px;
     2290    font-size: 1.25rem;
     2291  }
     2292}
     2293
     2294.single .type-plugin .plugin-header .plugin-favorite {
     2295  display: inline-block;
     2296  height: 36px;
     2297  text-align: center;
     2298  width: 36px;
     2299}
     2300
     2301.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart {
     2302  -webkit-box-align: center;
     2303  -webkit-align-items: center;
     2304  -moz-box-align: center;
     2305  -ms-flex-align: center;
     2306  align-items: center;
     2307  color: #cbcdce;
     2308  display: -webkit-box;
     2309  display: -webkit-flex;
     2310  display: -moz-box;
     2311  display: -ms-flexbox;
     2312  display: flex;
     2313  font-size: 20px;
     2314  font-size: 1.25rem;
     2315  height: 100%;
     2316  -webkit-box-pack: center;
     2317  -webkit-justify-content: center;
     2318  -moz-box-pack: center;
     2319  -ms-flex-pack: center;
     2320  justify-content: center;
     2321  line-height: 1;
     2322  -webkit-transition: all .2s ease;
     2323  transition: all .2s ease;
     2324}
     2325
     2326.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart.favorited {
     2327  color: #dc3232;
     2328}
     2329
     2330.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:hover {
     2331  -webkit-animation: favme-hover .3s infinite alternate;
     2332  animation: favme-hover .3s infinite alternate;
     2333}
     2334
     2335.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:hover, .single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:focus {
    22302336  text-decoration: none;
    22312337}
    22322338
    2233 .single .type-plugin .plugin-header .plugin-favorite-heart:after {
     2339.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart:after {
    22342340  content: "\f487";
    22352341  font-family: dashicons;
    22362342  vertical-align: top;
     2343}
     2344
     2345.single .type-plugin .plugin-header .plugin-favorite .plugin-favorite-heart.is-animating {
     2346  -webkit-animation: favme-anime .3s;
     2347  animation: favme-anime .3s;
    22372348}
    22382349

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/sass/site/primary/_plugin-single.scss

    r3676 r3791  
    5353                }
    5454
    55                 .plugin-favorite-heart {
    56                         /* FIX ME */
    57                         color: gray;
    58                         line-heght: 3em;
    59                         font-size: 3em;
    60 
    61                         &.favorited,
    62                         &:hover,
    63                         &:focus {
    64                                 color: red;
    65                         }
    66 
    67                         &:hover,
    68                         &:focus {
    69                                 text-decoration: none;
    70                         }
    71 
    72                         &:after {
    73                                 content: "\f487";
    74                                 font-family: dashicons;
    75                                 vertical-align: top;
    76                         }
    77                        
     55                @keyframes favme-anime {
     56                        0% {
     57                                opacity: 1;
     58                                font-size: ms(0);
     59                                -webkit-text-stroke-color: transparent;
     60                        }
     61                        25% {
     62                                opacity: 0.6;
     63                                color: #fff;
     64                                font-size: ms(-2);
     65                                -webkit-text-stroke-width: 1px;
     66                                -webkit-text-stroke-color: #dc3232;
     67                        }
     68                        75% {
     69                                opacity: 0.6;
     70                                color: #fff;
     71                                font-size: ms(3);
     72                                -webkit-text-stroke-width: 1px;
     73                                -webkit-text-stroke-color: #dc3232;
     74                        }
     75                        100% {
     76                                opacity: 1;
     77                                font-size: ms(2);
     78                                -webkit-text-stroke-color: transparent;
     79                        }
     80                }
     81
     82                @keyframes favme-hover {
     83                        from {
     84                                @include font-size( ms-unitless( ms(3) ) );
     85                        }
     86                        80% {
     87                                @include font-size( ms-unitless( ms(2) ) );
     88                        }
     89                }
     90
     91                .plugin-favorite{
     92                        display: inline-block;
     93                        height: 36px;
     94                        text-align: center;
     95                        width: 36px;
     96
     97                        .plugin-favorite-heart {
     98                                align-items: center;
     99                                color: #cbcdce;
     100                                display: flex;
     101                                @include font-size( ms-unitless( ms(2) ) );
     102                                height: 100%;
     103                                justify-content: center;
     104                                line-height: 1;
     105                                transition: all .2s ease;
     106
     107                                &.favorited {
     108                                        color: #dc3232;
     109                                }
     110
     111                                &:hover {
     112                                        animation: favme-hover .3s infinite alternate;
     113                                }
     114
     115                                &:hover,
     116                                &:focus {
     117                                        text-decoration: none;
     118                                }
     119
     120                                &:after {
     121                                        content: "\f487";
     122                                        font-family: dashicons;
     123                                        vertical-align: top;
     124                                }
     125
     126                                &.is-animating {
     127                                        animation: favme-anime .3s;
     128                                }
     129                        }
     130
    78131                }
    79132

  • sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/template-parts/plugin-single.php

    r3570 r3791  
    3535
    3636                <div class="plugin-actions">
    37 
    3837                        <?php
    39                         if ( false && is_user_logged_in() ) { // Hide Favorites until it's styled properly.
     38                        if ( is_user_logged_in() ) :
    4039                                $url = Template::get_favourite_link( $post );
    41                                 echo '<a href="' . esc_url( $url ) . '" class="plugin-favorite-heart' . (Tools::favorited_plugin( $post ) ? ' favorited' : '' ) . '" onclick="jQuery(this).toggleClass(\'favorited\')"></a>';
    42                         }
    43                         ?>
     40                                ?>
     41                                <div class="plugin-favorite">
     42                                        <a href="<?php echo esc_url( $url ); ?>" class="plugin-favorite-heart<?php echo Tools::favorited_plugin( $post ) ? ' favorited' : ''; ?>"></a>
     43                                        <script>
     44                                                jQuery( '.plugin-favorite-heart' )
     45                                                        .on( 'click touchstart animationend', function() {
     46                                                                jQuery( this ).toggleClass( 'is-animating' );
     47                                                        } )
     48                                                        .on( 'click', function() {
     49                                                                jQuery( this ).toggleClass( 'favorited' );
     50                                                        } );
     51                                        </script>
     52                                </div>
     53                        <?php endif; ?>
    4454
    4555                        <a class="plugin-download button download-button button-large" href="<?php echo esc_url( Template::download_link() ); ?>" itemprop="downloadUrl"><?php _e( 'Download', 'wporg-plugins' ); ?></a>
Note: See TracChangeset for help on using the changeset viewer.