Merge pull request #2238 from fabrixxm/develop

Revert "Merge pull request #2223 from rabuzarus/2912_photo_widget"
pull/2245/head
fabrixxm 2016-01-04 11:48:41 +01:00
commit d7410f9e47
15 changed files with 106 additions and 290 deletions

View File

@ -79,12 +79,6 @@ function get_features() {
array('savedsearch', t('Saved Searches'), t('Save search terms for re-use'),false),
),
// Profile sidebar widgets
'profile-widgets' => array(
t('Profile Sidebar Widgets'),
array('photos_widget', t('Show last Photos'), t('Show your last Photos in the Profile Page Sidebar'),false),
),
// Network tabs
'net_tabs' => array(
t('Network Tabs'),

View File

@ -4,148 +4,6 @@
* @brief Functions related to photo handling.
*/
/**
* @brief Get the permissions for the photos page
*
* @param int $owner_uid Owner of the photos page
* @param bool $community_page If it's an forum account
*
* @return array
*......'can_post'
*......'visitor'
*......'contact'
* 'remote_contact'
* .....'contact_id'
* 'groups'
*/
function photos_permissions($owner_uid, $community_page = 0) {
$arr = array();
if((local_user()) && (local_user() == $owner_uid))
$arr['can_post'] = true;
else {
if($community_page && remote_user()) {
if(is_array($_SESSION['remote'])) {
foreach($_SESSION['remote'] as $v) {
if($v['uid'] == $owner_uid) {
$arr['contact_id'] = $v['cid'];
break;
}
}
}
if($arr['contact_id']) {
$r = q("SELECT `uid` FROM `contact` WHERE `blocked` = 0 AND `pending` = 0 AND `id` = %d AND `uid` = %d LIMIT 1",
intval($arr['contact_id']),
intval($owner_uid)
);
if(count($r)) {
$arr['can_post'] = true;
$arr['contact'] = $r[0];
$arr['remote_contact'] = true;
$arr['visitor'] = $cid;
}
}
}
}
// perhaps they're visiting - but not a community page, so they wouldn't have write access
if(remote_user() && (! $arr['visitor'])) {
$arr['contact_id'] = 0;
if(is_array($_SESSION['remote'])) {
foreach($_SESSION['remote'] as $v) {
if($v['uid'] == $owner_uid) {
$arr['contact_id'] = $v['cid'];
break;
}
}
}
if($arr['contact_id']) {
$arr['groups'] = init_groups_visitor($arr['contact_id']);
$r = q("SELECT * FROM `contact` WHERE `blocked` = 0 AND `pending` = 0 AND `id` = %d AND `uid` = %d LIMIT 1",
intval($arr['contact_id']),
intval($owner_uid)
);
if(count($r)) {
$arr['contact'] = $r[0];
$arr['remote_contact'] = true;
}
}
}
if(! $arr['remote_contact']) {
if(local_user()) {
$arr['contact_id'] = $_SESSION['cid'];
$arr['contact'] = $a->contact;
}
}
return $arr;
}
/**
* @brief Construnct a widget with last uploaded photos
*
* It displays the last 9 photos
*
* @param array $profile_data
*......'profile_uid'...=> The user.id of the profile (owner of the photos)
*......'nickname'......=> Nick of the owner of the profile
*......'page-flags'....=> Account type of the profile
*
* @return string
*......formatted html
*
* @template widget_photos.tpl
*/
function widget_photos($profile_data) {
$community_page = (($profile_data['page-flags'] == PAGE_COMMUNITY) ? true : false);
$nickname = $profile_data['nickname'];
$owner_id = $profile_data['profile_uid'];
$phototypes = Photo::supportedTypes();
$photos_perms = photos_permissions($owner_id, $community_page);
$sql_extra = permissions_sql($owner_id, $photos_perms['remote_contact'], $photos_perms['groups']);
$r = q("SELECT `resource-id`, `id`, `filename`, `type`, max(`scale`) AS `scale` FROM `photo`
WHERE `uid` = %d AND `album` != '%s' AND `album` != '%s' AND `album` != '%s'
$sql_extra GROUP BY `resource-id` ORDER BY `created` DESC LIMIT 9",
intval($owner_id),
dbesc('Contact Photos'),
dbesc( t('Contact Photos')),
dbesc( t('Profile Photos'))
);
$photos = array();
if(count($r)) {
foreach($r as $rr) {
$ext = $phototypes[$rr['type']];
$photos[] = array(
'id' => $rr['id'],
'src' => z_root() . '/photos/' . $nickname . '/image/' . $rr['resource-id'],
'photo' => z_root() . '/photo/' . $rr['resource-id'] . '-' . ((($rr['scale']) == 6) ? 4 : $rr['scale']) . '.' . $ext,
'alt_text' => $rr['filename'],
);
}
$tpl = get_markup_template('widget_photos.tpl');
$o .= replace_macros($tpl, array(
'$title' => t('Photos'),
'$photos' => $photos,
'$photo_albums_page' => z_root() . '/photos/' . $nickname,
'$photo_albums_page_title' => t('Vist the Photo Albums'),
));
return $o;
}
}
function getGps($exifCoord, $hemi) {
$degrees = count($exifCoord) > 0 ? gps2Num($exifCoord[0]) : 0;
$minutes = count($exifCoord) > 1 ? gps2Num($exifCoord[1]) : 0;

View File

@ -1013,25 +1013,82 @@ function photos_content(&$a) {
// Setup permissions structures
//
$photos_perms['can_post'] = false;
$photos_perms['visitor'] = 0;
$photos_perms['contact'] = null;
$photos_perms['remote_contact'] = false;
$photos_perms['contact_id'] = 0;
$can_post = false;
$visitor = 0;
$contact = null;
$remote_contact = false;
$contact_id = 0;
$owner_uid = $a->data['user']['uid'];
$community_page = (($a->data['user']['page-flags'] == PAGE_COMMUNITY) ? true : false);
// get the access rights for photos
$photos_perms = photos_permissions($owner_uid, $community_page);
if((local_user()) && (local_user() == $owner_uid))
$can_post = true;
else {
if($community_page && remote_user()) {
if(is_array($_SESSION['remote'])) {
foreach($_SESSION['remote'] as $v) {
if($v['uid'] == $owner_uid) {
$contact_id = $v['cid'];
break;
}
}
}
if($contact_id) {
if($a->data['user']['hidewall'] && (local_user() != $owner_uid) && (! $photos_perms['remote_contact'])) {
$r = q("SELECT `uid` FROM `contact` WHERE `blocked` = 0 AND `pending` = 0 AND `id` = %d AND `uid` = %d LIMIT 1",
intval($contact_id),
intval($owner_uid)
);
if(count($r)) {
$can_post = true;
$contact = $r[0];
$remote_contact = true;
$visitor = $cid;
}
}
}
}
// perhaps they're visiting - but not a community page, so they wouldn't have write access
if(remote_user() && (! $visitor)) {
$contact_id = 0;
if(is_array($_SESSION['remote'])) {
foreach($_SESSION['remote'] as $v) {
if($v['uid'] == $owner_uid) {
$contact_id = $v['cid'];
break;
}
}
}
if($contact_id) {
$groups = init_groups_visitor($contact_id);
$r = q("SELECT * FROM `contact` WHERE `blocked` = 0 AND `pending` = 0 AND `id` = %d AND `uid` = %d LIMIT 1",
intval($contact_id),
intval($owner_uid)
);
if(count($r)) {
$contact = $r[0];
$remote_contact = true;
}
}
}
if(! $remote_contact) {
if(local_user()) {
$contact_id = $_SESSION['cid'];
$contact = $a->contact;
}
}
if($a->data['user']['hidewall'] && (local_user() != $owner_uid) && (! $remote_contact)) {
notice( t('Access to this item is restricted.') . EOL);
return;
}
$sql_extra = permissions_sql($owner_uid, $photos_perms['remote_contact'], $photos_perms['groups']);
$sql_extra = permissions_sql($owner_uid,$remote_contact,$groups);
$o = "";
@ -1044,7 +1101,7 @@ function photos_content(&$a) {
*/
if($datatype === 'upload') {
if(! ($photos_perms['can_post'])) {
if(! ($can_post)) {
notice( t('Permission denied.'));
return;
}
@ -1114,11 +1171,11 @@ function photos_content(&$a) {
if($a->theme['template_engine'] === 'internal') {
$albumselect_e = template_escape($albumselect);
$aclselect_e = (($photos_perms['visitor']) ? '' : template_escape(populate_acl($a->user)));
$aclselect_e = (($visitor) ? '' : template_escape(populate_acl($a->user)));
}
else {
$albumselect_e = $albumselect;
$aclselect_e = (($photos_perms['visitor']) ? '' : populate_acl($a->user));
$aclselect_e = (($visitor) ? '' : populate_acl($a->user));
}
$o .= replace_macros($tpl,array(
@ -1186,7 +1243,7 @@ function photos_content(&$a) {
//edit album name
if($cmd === 'edit') {
if(($album !== t('Profile Photos')) && ($album !== 'Contact Photos') && ($album !== t('Contact Photos'))) {
if($photos_perms['can_post']) {
if($can_post) {
$edit_tpl = get_markup_template('album_edit.tpl');
if($a->theme['template_engine'] === 'internal') {
@ -1209,7 +1266,7 @@ function photos_content(&$a) {
}
else {
if(($album !== t('Profile Photos')) && ($album !== 'Contact Photos') && ($album !== t('Contact Photos'))) {
if($photos_perms['can_post']) {
if($can_post) {
$edit = array(t('Edit Album'), $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/album/' . bin2hex($album) . '/edit');
}
}
@ -1259,7 +1316,7 @@ function photos_content(&$a) {
$o .= replace_macros($tpl, array(
'$photos' => $photos,
'$album' => $album,
'$can_post' => $photos_perms['can_post'],
'$can_post' => $can_post,
'$upload' => array(t('Upload New Photos'), $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/upload/' . bin2hex($album)),
'$order' => $order,
'$edit' => $edit
@ -1326,7 +1383,7 @@ function photos_content(&$a) {
break;
}
}
$edit_suffix = ((($cmd === 'edit') && ($photos_perms['can_post'])) ? '/edit' : '');
$edit_suffix = ((($cmd === 'edit') && ($can_post)) ? '/edit' : '');
$prevlink = $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/image/' . $prvnxt[$prv]['resource-id'] . $edit_suffix . (($_GET['order'] === 'posted') ? '?f=&order=posted' : '');
$nextlink = $a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/image/' . $prvnxt[$nxt]['resource-id'] . $edit_suffix . (($_GET['order'] === 'posted') ? '?f=&order=posted' : '');
}
@ -1349,7 +1406,7 @@ function photos_content(&$a) {
$tools = Null;
$lock = Null;
if($photos_perms['can_post'] && ($ph[0]['uid'] == $owner_uid)) {
if($can_post && ($ph[0]['uid'] == $owner_uid)) {
$tools = array(
'edit' => array($a->get_baseurl() . '/photos/' . $a->data['user']['nickname'] . '/image/' . $datum . (($cmd === 'edit') ? '' : '/edit'), (($cmd === 'edit') ? t('View photo') : t('Edit photo'))),
'profile'=>array($a->get_baseurl() . '/profile_photo/use/'.$ph[0]['resource-id'], t('Use as profile photo')),
@ -1472,7 +1529,7 @@ function photos_content(&$a) {
$edit = Null;
if(($cmd === 'edit') && ($photos_perms['can_post'])) {
if(($cmd === 'edit') && ($can_post)) {
$edit_tpl = get_markup_template('photo_edit.tpl');
// Private/public post links for the non-JS ACL form
@ -1544,7 +1601,7 @@ function photos_content(&$a) {
$likebuttons = '';
if($photos_perms['can_post'] || can_write_wall($a,$owner_uid)) {
if($can_post || can_write_wall($a,$owner_uid)) {
$likebuttons = replace_macros($like_tpl,array(
'$id' => $link_item['id'],
'$likethis' => t("I like this \x28toggle\x29"),
@ -1557,7 +1614,7 @@ function photos_content(&$a) {
$comments = '';
if(! count($r)) {
if($photos_perms['can_post'] || can_write_wall($a,$owner_uid)) {
if($can_post || can_write_wall($a,$owner_uid)) {
if($link_item['last-child']) {
$comments .= replace_macros($cmnt_tpl,array(
'$return_path' => '',
@ -1566,9 +1623,9 @@ function photos_content(&$a) {
'$id' => $link_item['id'],
'$parent' => $link_item['id'],
'$profile_uid' => $owner_uid,
'$mylink' => $photos_perms['contact']['url'],
'$mylink' => $contact['url'],
'$mytitle' => t('This is you'),
'$myphoto' => $photos_perms['contact']['thumb'],
'$myphoto' => $contact['thumb'],
'$comment' => t('Comment'),
'$submit' => t('Submit'),
'$preview' => t('Preview'),
@ -1605,7 +1662,7 @@ function photos_content(&$a) {
if($photos_perms['can_post'] || can_write_wall($a,$owner_uid)) {
if($can_post || can_write_wall($a,$owner_uid)) {
if($link_item['last-child']) {
$comments .= replace_macros($cmnt_tpl,array(
'$return_path' => '',
@ -1614,9 +1671,9 @@ function photos_content(&$a) {
'$id' => $link_item['id'],
'$parent' => $link_item['id'],
'$profile_uid' => $owner_uid,
'$mylink' => $photos_perms['contact']['url'],
'$mylink' => $contact['url'],
'$mytitle' => t('This is you'),
'$myphoto' => $photos_perms['contact']['thumb'],
'$myphoto' => $contact['thumb'],
'$comment' => t('Comment'),
'$submit' => t('Submit'),
'$preview' => t('Preview'),
@ -1658,7 +1715,7 @@ function photos_content(&$a) {
$dropping = (($item['contact-id'] == $photos_perms['contact_id']) || ($item['uid'] == local_user()));
$dropping = (($item['contact-id'] == $contact_id) || ($item['uid'] == local_user()));
$drop = array(
'dropping' => $dropping,
'pagedrop' => false,
@ -1692,7 +1749,7 @@ function photos_content(&$a) {
'$comment' => $comment
));
if($photos_perms['can_post'] || can_write_wall($a,$owner_uid)) {
if($can_post || can_write_wall($a,$owner_uid)) {
if($item['last-child']) {
$comments .= replace_macros($cmnt_tpl,array(
@ -1702,9 +1759,9 @@ function photos_content(&$a) {
'$id' => $item['item_id'],
'$parent' => $item['parent'],
'$profile_uid' => $owner_uid,
'$mylink' => $photos_perms['contact']['url'],
'$mylink' => $contact['url'],
'$mytitle' => t('This is you'),
'$myphoto' => $photos_perms['contact']['thumb'],
'$myphoto' => $contact['thumb'],
'$comment' => t('Comment'),
'$submit' => t('Submit'),
'$preview' => t('Preview'),
@ -1785,7 +1842,7 @@ function photos_content(&$a) {
$a->set_pager_itemspage(20);
}
$r = q("SELECT `resource-id`, `id`, `filename`, `type`, `album`, max(`scale`) AS `scale` FROM `photo`
$r = q("SELECT `resource-id`, `id`, `filename`, type, `album`, max(`scale`) AS `scale` FROM `photo`
WHERE `uid` = %d AND `album` != '%s' AND `album` != '%s'
$sql_extra GROUP BY `resource-id` ORDER BY `created` DESC LIMIT %d , %d",
intval($a->data['user']['uid']),
@ -1840,7 +1897,7 @@ function photos_content(&$a) {
$tpl = get_markup_template('photos_recent.tpl');
$o .= replace_macros($tpl, array(
'$title' => t('Recent Photos'),
'$can_post' => $photos_perms['can_post'],
'$can_post' => $can_post,
'$upload' => array(t('Upload New Photos'), $a->get_baseurl().'/photos/'.$a->data['user']['nickname'].'/upload'),
'$photos' => $photos,
));

View File

@ -1,7 +1,6 @@
<?php
require_once('include/contact_widgets.php');
require_once('include/photos.php');
require_once('include/redir.php');
@ -13,7 +12,7 @@ function profile_init(&$a) {
if($a->argc > 1)
$which = $a->argv[1];
else {
$r = q("SELECT `nickname` FROM `user` WHERE `blocked` = 0 AND `account_expired` = 0 AND `account_removed` = 0 AND `verified` = 1 ORDER BY RAND() LIMIT 1");
$r = q("select nickname from user where blocked = 0 and account_expired = 0 and account_removed = 0 and verified = 1 order by rand() limit 1");
if(count($r)) {
goaway($a->get_baseurl() . '/profile/' . $r[0]['nickname']);
}
@ -182,9 +181,6 @@ function profile_content(&$a, $update = 0) {
$commpage = (($a->profile['page-flags'] == PAGE_COMMUNITY) ? true : false);
$commvisitor = (($commpage && $remote_contact == true) ? true : false);
if(feature_enabled($a->profile['profile_uid'],'photos_widget'))
$a->page['aside'] .= widget_photos($a->profile);
$a->page['aside'] .= posted_date_widget($a->get_baseurl(true) . '/profile/' . $a->profile['nickname'],$a->profile['profile_uid'],true);
$a->page['aside'] .= categories_widget($a->get_baseurl(true) . '/profile/' . $a->profile['nickname'],(x($category) ? xmlify($category) : ''));
@ -225,9 +221,9 @@ function profile_content(&$a, $update = 0) {
FROM `item` INNER JOIN `contact` ON `contact`.`id` = `item`.`contact-id`
AND `contact`.`blocked` = 0 AND `contact`.`pending` = 0
WHERE `item`.`uid` = %d AND `item`.`visible` = 1 AND
(`item`.`deleted` = 0 OR `item`.`verb` = '" . ACTIVITY_LIKE ."'
OR `item`.`verb` = '" . ACTIVITY_DISLIKE . "' OR `item`.`verb` = '" . ACTIVITY_ATTEND . "'
OR `item`.`verb` = '" . ACTIVITY_ATTENDNO . "' OR `item`.`verb` = '" . ACTIVITY_ATTENDMAYBE . "')
(`item`.`deleted` = 0 OR item.verb = '" . ACTIVITY_LIKE ."'
OR item.verb = '" . ACTIVITY_DISLIKE . "' OR item.verb = '" . ACTIVITY_ATTEND . "'
OR item.verb = '" . ACTIVITY_ATTENDNO . "' OR item.verb = '" . ACTIVITY_ATTENDMAYBE . "')
AND `item`.`moderated` = 0 and `item`.`unseen` = 1
AND `item`.`wall` = 1
$sql_extra

View File

@ -321,18 +321,3 @@ ul.credits li {
.p-addr {
clear: both;
}
.widget-photo {
float: left;
}
.widget-photo-link {
margin: 0 2px 2px 0;
}
img.widget-photo-img {
width: 48px;
height: 48px;
object-fit: cover;
padding-right: 2px;
}

View File

@ -1,18 +0,0 @@
<div id="sidebar_photos_widget" class="widget">
<h3><a href="{{$photo_albums}}" title="{{$photo_albums_page_title}}">{{$title}}</a></h3>
<div id="widget_photos_wrapper">
{{foreach $photos as $photo}}
<div class="widget_photo_container">
<div class="widget-photo" id="widget-photo-{{$photo.id}}" >
<a href="{{$photo.src}}" class="widget-photo-link" id="widget-photo-link-{{$photo.id}}" >
<img class="widget-photo-img" src="{{$photo.photo}}" alt="{{$photo.alt_text}}" title="{{$photo.alt_text}}" />
</a>
</div>
</div>
{{/foreach}}
</div>
<div class="clear"></div>
</div>

View File

@ -144,7 +144,7 @@ nav #banner #logo-text a:hover { text-decoration: none; }
height: 15px;
margin-top: 67px;
margin-right: 2px;
/* padding: 6px 10px; */
//padding: 6px 10px;
padding: 6px 3px;
float: left;
bottom: 140px;
@ -244,7 +244,7 @@ section {
display:block;
float:left;
padding: 0.4em;
/*margin-right: 1em; */
//margin-right: 1em;
margin-right: 3px ;
}
.tab.active {
@ -2164,9 +2164,6 @@ aside input[type='text'] {
}
.widget h3 a {
color: #000000;
}
/*.photos {
height: auto;

View File

@ -2541,14 +2541,6 @@ a.mail-list-link {
margin: 10px 0 10px;
}
.widget-photo {
float: left;
}
.widget-photo-link {
margin: 0 2px 2px 0;
}
#sidebar-group-list ul {
list-style-type: none;
}
@ -2634,15 +2626,12 @@ aside input[type='text'] {
-webkit-border-radius:5px;
border-radius:5px;
}
.widget h3 a {
color: #505050;
}
.widget.settings-widget {
padding: 0;
}
/*.photos {
height: auto;
overflow: auto;

View File

@ -2356,21 +2356,6 @@ a.mail-list-link {
margin: 10px 0 10px;
}
.widget-photo {
float: left;
}
.widget-photo-link {
margin: 0 2px 2px 0;
}
img.widget-photo-img {
width: 48px;
height: 48px;
object-fit: cover;
padding-right: 2px;
}
#sidebar-group-list ul {
list-style-type: none;
}
@ -2461,11 +2446,9 @@ aside input[type='text'] {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.widget h3 a {
color: #505050;
}
/*.photos {
height: auto;

View File

@ -463,7 +463,7 @@ a:hover {
text-decoration: underline;
}
blockquote {
background: #ffffff;
background: #FFFFFF;
padding: 1em;
margin-left: 1em;
border-left: 1em solid #e6e6e6;
@ -1007,9 +1007,6 @@ aside .posted-date-selector-months {
padding: 0;
margin: 2px;
}
.widget h3 a {
color: #2d2d2d;
}
.widget .action {
opacity: 0.1;
-webkit-transition: all 0.2s ease-in-out;

View File

@ -463,7 +463,7 @@ a:hover {
text-decoration: underline;
}
blockquote {
background: #ffffff;
background: #FFFFFF;
padding: 1em;
margin-left: 1em;
border-left: 1em solid #e6e6e6;
@ -1007,9 +1007,6 @@ aside .posted-date-selector-months {
padding: 0;
margin: 2px;
}
.widget h3 a {
color: #2d2d2d;
}
.widget .action {
opacity: 0.1;
-webkit-transition: all 0.2s ease-in-out;

View File

@ -420,7 +420,7 @@
body {
font-family: Liberation Sans, helvetica, arial, clean, sans-serif;
font-size: 11px;
background-color: #f6ecf9;
background-color: #F6ECF9;
color: #2d2d2d;
margin: 50px 0 0 0;
display: table;
@ -463,7 +463,7 @@ a:hover {
text-decoration: underline;
}
blockquote {
background: #ffffff;
background: #FFFFFF;
padding: 1em;
margin-left: 1em;
border-left: 1em solid #e6e6e6;
@ -1007,9 +1007,6 @@ aside .posted-date-selector-months {
padding: 0;
margin: 2px;
}
.widget h3 a {
color: #2d2d2d;
}
.widget .action {
opacity: 0.1;
-webkit-transition: all 0.2s ease-in-out;
@ -1756,7 +1753,7 @@ span[id^="showmore-wrap"] {
height: 20px;
width: 500px;
font-weight: bold;
border: 1px solid #f6ecf9;
border: 1px solid #F6ECF9;
}
#jot #jot-title:-webkit-input-placeholder {
font-weight: normal;
@ -1783,7 +1780,7 @@ span[id^="showmore-wrap"] {
margin: 0;
height: 20px;
width: 200px;
border: 1px solid #f6ecf9;
border: 1px solid #F6ECF9;
}
#jot #jot-category:hover {
border: 1px solid #999999;

View File

@ -454,7 +454,6 @@ aside {
margin-bottom: 2em;
h3 { padding: 0; margin: 2px;}
h3 a { color: @BodyColor; }
.action { .opaque(0.1); }
input.action { .opaque(0.5); }
&:hover .title .action { .opaque(1); }

View File

@ -1019,15 +1019,6 @@ ul .sidebar-group-li .icon {
text-shadow: -1px 0px 0px #bdbdbd;
}
.widget h3 a {
color: #626262;
}
.widget h3 a:hover, .widget h3 a:focus {
color: #6da6c4;
text-decoration: none;
}
#connect-desc {
margin-left: 10px;
}

View File

@ -1190,12 +1190,6 @@ aside h4, right_aside h4 {
padding: 0px;
margin: 2px;
}
.widget h3 a {
color: #737373;
}
.widget h3 a:hover {
color: black;
}
.widget .action {
opacity: 0.1;
-webkit-transition: all 0.2s ease-in-out;