WordPress.org
Get WordPress

Making WordPress.org

Changeset 3791


Ignore:
Timestamp:
08/09/2016 06:58:20 PM (8 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.