Skip to content

Commit

Permalink
Closes #6632: Image Optimization Tab Update (#6675)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jeawhanlee
jeawhanlee committed May 29, 2024
1 parent 44399ce commit ec79762
Show file tree
Hide file tree
Showing 10 changed files with 297 additions and 30 deletions.
77 changes: 71 additions & 6 deletions assets/css/wpr-admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,18 @@ a:focus, button:focus {
justify-content: center;
}

.wpr-mt-2 {
margin-top: 20px;
}

.wpr-fs-sm {
font-size: 0.9em;
}

.wpr-fs-md {
font-size: 1em;
}

/*-----------------------------------------------*\
Icons in a font-icon with icomoon (https://icomoon.io/app)
Expand Down Expand Up @@ -279,6 +291,14 @@ a:focus, button:focus {
content: url("../img/play-alt.svg");
}

.wpr-imagify-info:before {
content: url("../img/imagify-info.svg");
}

.wpr-imagify-install:before {
content: url("../img/imagify-install.svg");
}

.wpr-title1 {
font-size: 1.625rem;
line-height: 1;
Expand Down Expand Up @@ -2356,7 +2376,7 @@ div.wpr-upgrade-websites {
margin-top: 30px;
}
.wpr-imagify-description {
width: 33.3333333333%;
width: 40%;
padding-right: 60px;
}
@media (max-width: 1239px) {
Expand All @@ -2366,7 +2386,7 @@ div.wpr-upgrade-websites {
}
}
.wpr-imagify-screenshot {
width: 66.6666666667%;
width: 60%;
}
@media (max-width: 1239px) {
.wpr-imagify-screenshot {
Expand Down Expand Up @@ -2396,12 +2416,22 @@ div.wpr-upgrade-websites {
margin-top: 0;
}
.wpr-imagify ul {
margin-top: 0;
margin-left: 40px;
list-style-type: ">";
margin-top: 40px;
}
.wpr-imagify li {
padding-left: 7px;
display: flex;
align-items: flex-start;
margin-bottom: 35px;
}
.wpr-imagify li:before {
width: 24px;
height: 24px;
margin-right: 10px;
flex-shrink: 0;
}
.wpr-imagify li .text {
flex-grow: 1;
display: inline-block;
}
.wpr-imagify a {
text-decoration: none;
Expand All @@ -2423,6 +2453,41 @@ div.wpr-upgrade-websites {
text-transform: uppercase;
}

.wpr-imagify-plugin-tile {
display: flex;
align-items: center;
width: 100%;
padding: 20px;
background-color: #f9fafb;
margin-top: 20px;
border: 1px solid #ebe9e9;
}
.wpr-imagify-plugin-tile-info {
margin-left: 20px;
}
.wpr-imagify-plugin-tile-info .wpr-star-rating {
display: flex;
align-items: center;
}
.wpr-imagify-plugin-tile-info .star-rating .star {
font-size: 16px;
width: 16px;
height: 13px;
}
.wpr-imagify-plugin-tile-info .num-ratings {
font-size: 13px;
margin-left: 10px;
}
.wpr-imagify-plugin-tile-title {
margin-bottom: 5px;
}
.wpr-imagify-plugin-tile .wpr-button {
margin-left: auto;
}
.wpr-imagify-plugin-tile .wpr-button:before {
margin-right: 5px;
}

.wpr-tutorials-section {
display: flex;
flex-flow: row wrap;
Expand Down
2 changes: 1 addition & 1 deletion assets/css/wpr-admin.min.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/img/imagify-info.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 16 additions & 0 deletions assets/img/imagify-install.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/img/imagify-score.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
48 changes: 47 additions & 1 deletion inc/Engine/Admin/Settings/Render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,53 @@ public function render_form_sections() {
* @since 3.2
*/
public function render_imagify_section() {
echo $this->generate( 'page-sections/imagify' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Dynamic content is properly escaped in the view.

require_once ABSPATH . 'wp-admin/includes/plugin-install.php';

$plugin_data = get_transient( 'rocket_imagify_plugin_data' );

if ( ! $plugin_data ) {

$query_args = [
'slug' => 'imagify',
'fields' => [
'icons' => true,
'active_installs' => true,
'rating' => true,
'ratings' => true,
'short_description' => false,
'sections' => false,
'last_updated' => false,
'added' => false,
'tags' => false,
'homepage' => false,
'donate_link' => false,
'screenshots' => false,
'versions' => false,
'banners' => false,
'contributors' => false,
'requires' => false,
'tested' => false,
'requires_php' => false,
'support_url' => false,
'upgrade_notice' => false,
'business_model' => false,
'repository_url' => false,
'commercial_support_url' => false,
'preview_link' => false,
],
];

$plugin_data = plugins_api( 'plugin_information', $query_args );

if ( is_wp_error( $plugin_data ) ) {
$plugin_data = [];
}

set_transient( 'rocket_imagify_plugin_data', $plugin_data, WEEK_IN_SECONDS );
}

echo $this->generate( 'page-sections/imagify', $plugin_data ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Dynamic content is properly escaped in the view.
}

/**
Expand Down
6 changes: 6 additions & 0 deletions src/scss/base/_icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,3 +157,9 @@
.wpr-icon-tutorial-alt:before {
content: url('../img/play-alt.svg');
}
.wpr-imagify-info:before {
content: url('../img/imagify-info.svg');
}
.wpr-imagify-install:before {
content: url('../img/imagify-install.svg');
}
9 changes: 9 additions & 0 deletions src/scss/base/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,12 @@
align-items: center;
justify-content: center;
}
.wpr-mt-2 {
margin-top: 20px;
}
.wpr-fs-sm {
font-size: 0.9em;
}
.wpr-fs-md {
font-size: 1em;
}
66 changes: 60 additions & 6 deletions src/scss/components/_imagify.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
margin-top: 30px;

&-description {
width: calc(100% / 3 * 1);
width: 40%;
padding-right: 60px;

@include respond-to('md') {
Expand All @@ -22,7 +22,7 @@
}

&-screenshot {
width: calc(100% / 3 * 2);
width: 60%;

@include respond-to('md') {
margin-top: 60px;
Expand Down Expand Up @@ -57,13 +57,25 @@
}

ul {
margin-top: 0;
margin-left: 40px;
list-style-type: '>';
margin-top: 40px;
}

li {
padding-left: 7px;
display: flex;
align-items: flex-start;
margin-bottom: 35px;

&:before {
width:24px;
height:24px;
margin-right: 10px;
flex-shrink: 0;
}

.text {
flex-grow: 1;
display: inline-block;
}
}

a {
Expand All @@ -87,4 +99,46 @@
text-shadow: none;
text-transform: uppercase;
}
}

.wpr-imagify-plugin-tile {
display: flex;
align-items: center;
width: 100%;
padding: 20px;
background-color: #f9fafb;
margin-top: 20px;
border: 1px solid #ebe9e9;

&-info {
margin-left: 20px;

.wpr-star-rating {
display: flex;
align-items: center;
}

.star-rating .star {
font-size: 16px;
width: 16px;
height: 13px;
}

.num-ratings {
font-size: 13px;
margin-left: 10px;
}
}

&-title {
margin-bottom:5px;
}

.wpr-button {
margin-left: auto;

&:before {
margin-right: 5px;
}
}
}
Loading

0 comments on commit ec79762

Please sign in to comment.