tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added radial share button

This commit is contained in:
Fabiano Alencar 2018-08-10 17:23:38 -03:00
parent 904a00d740
commit d405ae0108
2 changed files with 113 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/assets/scss/_home-collection.scss
View File

@ -115,4 +115,89 @@
}
}
}
}
.radial {
width: 100px;
height: 100px;
position: absolute;
right: 0;
border-radius: 50%;
transition: all 0.5s;
margin-right: 4.16666666667%;
bottom: 0;
}
.fab {
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;
}
.fab:hover {
background-color: #fff;
}
.fab:focus{
outline:none;
}
#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:hover, #fa-2:hover, #fa-3:hover {
tansition-delay: 0s;
color: #ff8db3;
}
.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);
}

49
src/template-parts/headerCollection.php
View File

@ -1,33 +1,40 @@
<div <?php if ( get_header_image() ) : ?>class="page-header header-filter page-height" style="background-image: url('<?php header_image(); ?>')"<?php else: ?>class="page-header header-filter page-collection" style="background-image: url('<?php echo get_template_directory_uri() ?>/assets/images/capa.png')"<?php endif; ?>>
<div class="container-fluid px-0 t-bg-collection" style="<!-- z-index: 0; -->">
<div class="collection-header position-relative" style="">
<?php if(has_post_thumbnail(tainacan_get_collection_id())) : ?>
<img src="<?php echo get_the_post_thumbnail_url(tainacan_get_collection_id()); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute text-left" style="bottom: -6rem; margin-left: 4.16666666667%;">
<?php else : ?>
<div class="image-placeholder rounded-circle border border-white position-absolute">
<h4 class="text-center" style="bottom: -6rem; margin-left: 4.16666666667%;">
<?php
echo tainacan_get_initials(tainacan_get_the_collection_name());
?>
</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">
<div class="mdi mdi-share-variant" id="collection-header--share-button-plus"></div>
</button>
</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">
<?php if(has_post_thumbnail(tainacan_get_collection_id())) : ?>
<img src="<?php echo get_the_post_thumbnail_url(tainacan_get_collection_id()); ?>" class="t-collection--info-img rounded-circle img-fluid border border-white position-absolute">
<?php else : ?>
<div class="image-placeholder rounded-circle border border-white position-absolute">
<h4 class="text-center">
<?php
echo tainacan_get_initials(tainacan_get_the_collection_name());
?>
</h4>
</div>
<?php endif; ?>
</div>
<div class="col-8 col-md-9 pl-0 t-collection--col-9">
<div class="col-8 col-md-9 pl-0 t-collection--col-9" style="z-index: 2">
<h2 class="t-collection--info-title text-white">
<?php tainacan_the_collection_name(); ?>
</h2>
<p class="text-white t-collection--info-description-text">
<?php
if(!wp_is_mobile()){
$words = 420;
}else {
$words = 80;
}
wp_trim_words( tainacan_the_collection_description(), $words, '...' ) ;
<div class="text-white t-collection--info-description-text dotmore">
<?php
tainacan_the_collection_description();
?>
</p>
<a class="toggle" href="#"></a>
</div>
</div>
</div>
</div>