social share button radial on home collection
This commit is contained in:
parent
f8d1f45ab9
commit
4e64c5c1cc
|
@ -84,12 +84,11 @@ jQuery(document).ready(function( $ ) {
|
|||
t.on("click", ".toggle", function(e) {
|
||||
t.preventDefault(), t.hasClass("ddd-truncated") ? (n.restore(), t.addClass("full-story")) : (t.removeClass("full-story"), n.truncate(), n.watch())
|
||||
}); */
|
||||
$('.fab').click(function () {
|
||||
$('.radial').toggleClass('open');
|
||||
$('.collection-header--share-button').click(function () {
|
||||
$('.collection-header--share').toggleClass('open');
|
||||
});
|
||||
});
|
||||
jQuery(document).ready(function(e) {
|
||||
! function() {
|
||||
var t = e(".dotmore");
|
||||
t.dotdotdot({
|
||||
keep: ".toggle"
|
||||
|
@ -97,6 +96,8 @@ jQuery(document).ready(function(e) {
|
|||
var n = t.data("dotdotdot");
|
||||
t.on("click", ".toggle", function(e) {
|
||||
e.preventDefault(), t.hasClass("ddd-truncated") ? (n.restore(), t.addClass("full-story")) : (t.removeClass("full-story"), n.truncate(), n.watch())
|
||||
})
|
||||
}()
|
||||
});
|
||||
e(".trigger").click(function() {
|
||||
e(".collection-header--share").toggleClass("active");
|
||||
});
|
||||
});
|
|
@ -97,7 +97,7 @@
|
|||
}
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
&.elimore {
|
||||
&.dotmore {
|
||||
height: 65px;
|
||||
.toggle {
|
||||
&::before{
|
||||
|
@ -117,7 +117,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.radial {
|
||||
/* .collection-header--share {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
|
@ -126,78 +126,151 @@
|
|||
transition: all 0.5s;
|
||||
margin-right: 4.16666666667%;
|
||||
bottom: 0;
|
||||
}
|
||||
.collection-header--share-button {
|
||||
border: none;
|
||||
color: #2c2d2d;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 30px !important;
|
||||
width: 30px !important;
|
||||
margin-right: 4.16666666667%;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
&:focus{
|
||||
outline:none;
|
||||
}
|
||||
}
|
||||
|
||||
#collection-header--share-button-plus {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
|
||||
#fa-1, #fa-2, #fa-3 {
|
||||
position: absolute;
|
||||
color: #2c2d2d;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
right: 0;
|
||||
transition: all 0.5s;
|
||||
height: 30px !important;
|
||||
width: 30px !important;
|
||||
margin-right: 4.16666666667%;
|
||||
right: 0;
|
||||
bottom: -1rem;
|
||||
}
|
||||
#fa-1, #fa-2, #fa-3 {
|
||||
&:hover{
|
||||
tansition-delay: 0s;
|
||||
color: #ff8db3;
|
||||
}
|
||||
}
|
||||
&.open {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
right: 0;
|
||||
.fab {
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
#plus {
|
||||
-webkit-transform: rotateZ(135deg) translate(-1px, 3px);
|
||||
transform: rotateZ(135deg) translate(-1px, 3px);
|
||||
}
|
||||
#fa-1 {
|
||||
transition-delay: 0s;
|
||||
-webkit-transform: translate(-53px, 10px);
|
||||
transform: translate(-53px, 10px);
|
||||
}
|
||||
#fa-2 {
|
||||
transition-delay: 0.1s;
|
||||
-webkit-transform: translate(-38px, -39px);
|
||||
transform: translate(-38px, -39px);
|
||||
}
|
||||
#fa-3 {
|
||||
transition-delay: 0.2s;
|
||||
-webkit-transform: translate(10px, -53px);
|
||||
transform: translate(10px, -53px);
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
.fab {
|
||||
border: none;
|
||||
color: #2c2d2d;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
.absolute-center {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 30px !important;
|
||||
width: 30px !important;
|
||||
margin-right: 4.16666666667%;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
}
|
||||
.fab:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
.fab:focus{
|
||||
outline:none;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.collection-header--share {
|
||||
@extend .absolute-center;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
left: 93%;
|
||||
.btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
opacity: 0;
|
||||
z-index: -10;
|
||||
cursor: pointer;
|
||||
transition: opacity 1s, z-index 0.3s, transform 1s;
|
||||
transform: translateX(0);
|
||||
color: #2c2d2d;
|
||||
.mdi {
|
||||
@extend .absolute-center;
|
||||
font-size: 24px;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
&.trigger {
|
||||
opacity: 1;
|
||||
z-index: 100;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
}
|
||||
|
||||
.rotater {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 50% 50%;
|
||||
a {
|
||||
color: #2c2d2d;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
.btn-icon {
|
||||
opacity: 1;
|
||||
z-index: 50;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#plus {
|
||||
transition: all 0.5s;
|
||||
}
|
||||
$numOfElems: 8;
|
||||
|
||||
#fa-1, #fa-2, #fa-3 {
|
||||
position: absolute;
|
||||
color: #2c2d2d;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
right: 0;
|
||||
transition: all 0.5s;
|
||||
height: 30px !important;
|
||||
width: 30px !important;
|
||||
margin-right: 4.16666666667%;
|
||||
right: 0;
|
||||
bottom: -1rem;
|
||||
}
|
||||
#fa-1:hover, #fa-2:hover, #fa-3:hover {
|
||||
tansition-delay: 0s;
|
||||
color: #ff8db3;
|
||||
}
|
||||
@for $i from 1 through $numOfElems {
|
||||
$deg: 360deg / $numOfElems;
|
||||
.rotater:nth-child(#{$i}) {
|
||||
transform: rotate($deg/-2 + $deg * ($i - 1));
|
||||
}
|
||||
|
||||
.radial.open {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
right: 0;
|
||||
}
|
||||
.radial.open .fab {
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.radial.open #plus {
|
||||
/* -webkit-transform: rotateZ(135deg) translate(-1px, 3px);
|
||||
transform: rotateZ(135deg) translate(-1px, 3px); */
|
||||
}
|
||||
.radial.open #fa-1 {
|
||||
transition-delay: 0s;
|
||||
-webkit-transform: translate(-53px, 10px);
|
||||
transform: translate(-53px, 10px);
|
||||
}
|
||||
.radial.open #fa-2 {
|
||||
transition-delay: 0.1s;
|
||||
-webkit-transform: translate(-38px, -39px);
|
||||
transform: translate(-38px, -39px);
|
||||
}
|
||||
.radial.open #fa-3 {
|
||||
transition-delay: 0.2s;
|
||||
-webkit-transform: translate(10px, -53px);
|
||||
transform: translate(10px, -53px);
|
||||
.collection-header--share.active {
|
||||
.rotater:nth-child(#{$i}) .btn-icon {
|
||||
transform: translateX(-4em) rotate($deg/2 - $deg * ($i - 1));
|
||||
}
|
||||
}
|
||||
}
|
|
@ -86,29 +86,37 @@ function social_meta() {
|
|||
if(is_single() || is_tax() || is_archive()) {
|
||||
|
||||
$logo = get_stylesheet_directory_uri().'/assets/images/social-logo.png';
|
||||
|
||||
$img_info = (has_post_thumbnail($post->ID)) ? wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "thumbnail") : $logo;
|
||||
global $wp;
|
||||
if(is_archive('tainacan-collection')){
|
||||
$title = tainacan_get_the_collection_name();
|
||||
$img_info = (has_post_thumbnail(tainacan_get_collection_id())) ? get_the_post_thumbnail_url(tainacan_get_collection_id()) : $logo;
|
||||
$url_src = home_url( $wp->request );
|
||||
$excerpt = tainacan_get_the_collection_description();
|
||||
} else {
|
||||
$title = get_the_title();
|
||||
$img_info = (has_post_thumbnail($post->ID)) ? wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), "thumbnail") : $logo;
|
||||
$url_src = get_permalink();
|
||||
$content = wp_trim_words( $post->post_content, 28, '[...]');
|
||||
if($excerpt = $content) {
|
||||
$excerpt = strip_tags($content);
|
||||
$excerpt = str_replace("", "'", $excerpt);
|
||||
} else {
|
||||
$excerpt = get_bloginfo('description');
|
||||
}
|
||||
}
|
||||
|
||||
$image = array(
|
||||
'url' => (!empty($img_info[0]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[0] : $logo,
|
||||
'width' => (!empty($img_info[1]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[1] : 200,
|
||||
'height' => (!empty($img_info[2]) && $img_info[1] >= 200 && $img_info[2] >= 200) ? $img_info[2] : 200,
|
||||
);
|
||||
|
||||
$content = wp_trim_words( $post->post_content, 28, '[...]');
|
||||
if($excerpt = $content) {
|
||||
$excerpt = strip_tags($content);
|
||||
$excerpt = str_replace("", "'", $excerpt);
|
||||
} else {
|
||||
$excerpt = get_bloginfo('description');
|
||||
}
|
||||
|
||||
?>
|
||||
<meta property="og:type" content="article"/>
|
||||
<meta property="og:title" content="<?php echo the_title(); ?>"/>
|
||||
<meta property="og:title" content="<?php echo $title; ?>"/>
|
||||
<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
|
||||
<meta property="og:description" content="<?php echo $excerpt; ?>"/>
|
||||
<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
|
||||
<meta property="og:url" content="<?php echo $url_src; ?>"/>
|
||||
<meta property="og:image" content="<?php echo $image['url']; ?>"/>
|
||||
<meta property="og:image:width" content="<?php echo $image['width']; ?>"/>
|
||||
<meta property="og:image:height" content="<?php echo $image['height']; ?>"/>
|
||||
|
|
|
@ -11,21 +11,62 @@
|
|||
?>
|
||||
</h4>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<div class="radial collection-header--share">
|
||||
<button class="mdi mdi-facebook" id="fa-1"></button>
|
||||
<button class="mdi mdi-twitter" id="fa-2"></button>
|
||||
<button class="mdi mdi-google-plus" id="fa-3"></button>
|
||||
<button class="fab collection-header--share-button">
|
||||
<?php endif;
|
||||
global $wp; ?>
|
||||
<!-- <div class="collection-header--share">
|
||||
<?php if ( true == get_theme_mod( 'facebook_share', false ) ) : ?>
|
||||
<button onclick="location.href='http://www.facebook.com/sharer.php?u=<?php echo home_url( $wp->request ); ?>'" target="_blank" class="mdi mdi-facebook" id="fa-1"></button>
|
||||
<?php endif; ?>
|
||||
<?php if ( true == get_theme_mod( 'twitter_share', false ) && get_option( 'twitter_user') ) : ?>
|
||||
<button onclick="location.href='http://twitter.com/share?url=<?php echo home_url( $wp->request ); ?>&text=<?php echo tainacan_get_the_collection_name(); ?>&via=<?php echo get_option( 'twitter_user', '' ) ?>'" target="_blank" class="mdi mdi-twitter" id="fa-2"></button>
|
||||
<?php endif; ?>
|
||||
<?php if ( true == get_theme_mod( 'google_share', false ) ) : ?>
|
||||
<button onclick="location.href='https://plus.google.com/share?url=<?php echo home_url( $wp->request ); ?>'" target="_blank" class="mdi mdi-google-plus" id="fa-3"></button>
|
||||
<?php endif; ?>
|
||||
<button class="collection-header--share-button">
|
||||
<div class="mdi mdi-share-variant" id="collection-header--share-button-plus"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="collection-header--share">
|
||||
<div class="btn trigger">
|
||||
<span class="mdi mdi-share-variant"></span>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<div class="rotater">
|
||||
<?php if ( true == get_theme_mod( 'facebook_share', false ) ) : ?>
|
||||
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>" target="_blank">
|
||||
<div class="btn btn-icon">
|
||||
<i class="mdi mdi-facebook"></i>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="rotater">
|
||||
<?php if ( true == get_theme_mod( 'twitter_share', false ) && get_option( 'twitter_user') ) : ?>
|
||||
<a href="http://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title_attribute(); ?>&via=<?php echo get_option( 'twitter_user', '' ) ?>" target="_blank">
|
||||
<div class="btn btn-icon">
|
||||
<i class="mdi mdi-twitter"></i>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="rotater">
|
||||
<?php if ( true == get_theme_mod( 'google_share', false ) ) : ?>
|
||||
<a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" target="_blank">
|
||||
<div class="btn btn-icon">
|
||||
<i class="mdi mdi-google-plus"></i>
|
||||
</div>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row t-collection--info max-large margin-one-column" style="overflow-x: inherit;">
|
||||
<div class="col-4 col-md-3 px-0 t-collection--col-3">
|
||||
|
||||
</div>
|
||||
<div class="col-8 col-md-9 pl-0 t-collection--col-9" style="z-index: 2">
|
||||
<div class="col-8 col-md-9 pl-0 t-collection--col-9 mt-md-3" style="z-index: 2">
|
||||
<h2 class="t-collection--info-title text-white">
|
||||
<?php tainacan_the_collection_name(); ?>
|
||||
</h2>
|
||||
|
|
Loading…
Reference in New Issue