From c39c1371ed5cd3d1c0ab64c854275bc10ae7ce00 Mon Sep 17 00:00:00 2001 From: Hai Zheng Date: Mon, 23 Sep 2024 13:58:29 -0400 Subject: [PATCH] Dash GUI change --- assets/css/litespeed.css | 139 +++++ tpl/dash/dashboard.tpl.php | 1165 +++++++++++++++++++----------------- 2 files changed, 768 insertions(+), 536 deletions(-) diff --git a/assets/css/litespeed.css b/assets/css/litespeed.css index 112b5d3b1..ac4edf18f 100644 --- a/assets/css/litespeed.css +++ b/assets/css/litespeed.css @@ -2756,11 +2756,35 @@ g.litespeed-pie_info .litespeed-pie-done { margin-left: 0.25rem; } +.litespeed-dashboard-title--w-btn { + display: flex; + align-items: center; +} + +.litespeed-dashboard-title--w-btn .button { + font-weight: normal; +} + +.litespeed-postbox-footer .button-small { + vertical-align: middle; +} + +.litespeed-postbox .button.button-small .dashicons, .litespeed-dashboard-title--w-btn .button.button-small .dashicons { + font-size: 1rem; + top: 0.05em; + vertical-align: middle; + margin-left: -5px; +} + .litespeed-dashboard-header { display: flex; align-items: center; } +.litespeed-postbox p.litespeed-dashboard-stats-total + p.litespeed-dashboard-stats-total { + margin-top: 1.2em; +} + .litespeed-dashboard-header:first-child { margin-top: 1.5rem; } @@ -3166,6 +3190,121 @@ a.litespeed-redetect { } } +/* ======================================= + VIEW - dashboard QC services +======================================= */ + +.litespeed-dashboard-qc { + position: relative; +} + +.litespeed-dashboard-unlock { + text-align: center; + background-color: #fff; + box-shadow: 0 .125rem .4rem -.0625rem rgba(0, 0, 0, .03), 0px 3px 0px 0px rgba(0, 0, 0, .07); + border-radius: .5rem; + padding: 2rem; + position: absolute; + z-index: 5; + left: 50%; + transform: translate(-50%, 25%); + top: 0; + max-width: 96%; + width: 540px; +} + +.litespeed-dashboard-unlock-title { + font-size: 28px; +} + +.litespeed-dashboard-unlock-desc { + font-size: 17px; + color: #000; +} + +.litespeed-dashboard-unlock-desc span { + font-size: 14px; + color: #666; +} + +p.litespeed-dashboard-unlock-footer{ + margin-top: 3em; + margin-bottom: 0; +} + +.litespeed-qc-text-gradient { + background: -webkit-linear-gradient(130deg, #ff2a91, #2295d8 60%, #161f29); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-weight: 800; +} + +.litespeed-dashboard-unlock a.button.button-primary { + font-size: 1.2em; + padding: 0.35em 1em 0.35em 0.85em; + min-width: 210px; + text-align: center; + margin-top: 10px; +} + +.litespeed-dashboard-unlock a.button.button-primary .dashicons { + vertical-align: baseline; + top: 0.25em; + margin-right: 0.5em; +} + +.litespeed-dashboard-unlock+.litespeed-dashboard-qc-enable { + opacity: 0.75; + filter: blur(2px); +} + +.litespeed-dashboard-unlock+.litespeed-dashboard-qc-enable:before { + content: ''; + position: absolute; + left: -10px; + top: -5px; + width: calc(100% + 20px); + height: calc(100% + 10px); + background: #161e29; + z-index: 2; + opacity: 0.55; + filter: blur(2px); +} + +@media screen and (min-width: 1400px) { + .litespeed-dashboard-unlock { + width:800px; + } +} + +@media screen and (max-width: 640px) { + .litespeed-dashboard-unlock { + max-width: 80%; + padding: 1rem 1.5rem 2rem 1.5rem; + transform: translate(-50%, 10%); + } + + .litespeed-dashboard-unlock-title { + font-size: 22px; + line-height: 1.2; + } + +} + +@media screen and (max-width: 340px) { + .litespeed-dashboard-unlock a.button.button-primary { + padding: 0.35em 1em 0.35em 1em; + } + + .litespeed-dashboard-unlock a.button.button-primary .dashicons { + display: none; + } + + p.litespeed-dashboard-unlock-footer{ + margin-top: 2em; + } +} + /********************************* todo *******************************/ /* image optimize page */ diff --git a/tpl/dash/dashboard.tpl.php b/tpl/dash/dashboard.tpl.php index 1a6d0d15e..a5118bd23 100644 --- a/tpl/dash/dashboard.tpl.php +++ b/tpl/dash/dashboard.tpl.php @@ -34,394 +34,518 @@
+ activated()) : ?> + +
+
+

+ + +

+ + __('Public Cache', 'litespeed-cache'), + Base::O_CACHE_PRIV => __('Private Cache', 'litespeed-cache'), + Base::O_OBJECT => __('Object Cache', 'litespeed-cache'), + Base::O_CACHE_BROWSER => __('Browser Cache', 'litespeed-cache'), + ); + foreach ($cache_list as $id => $title) : + ?> +

+ conf($id)) : ?> + ON + + OFF + + +

+ +
+
-
-

- - - - - -

-
- -
- -
- __('Image Optimization', 'litespeed-cache'), - 'page_optm' => __('Page Optimization', 'litespeed-cache'), - 'cdn' => __('CDN Bandwidth', 'litespeed-cache'), - 'lqip' => __('Low Quality Image Placeholder', 'litespeed-cache'), - ); - - foreach ($cat_list as $svc => $title) : - $finished_percentage = 0; - $total_used = $used = $quota = $pag_used = $pag_total = '-'; - $pag_width = 0; - $percentage_bg = 'success'; - $pag_txt_color = ''; - $usage = false; - - if (!empty($cloud_summary['usage.' . $svc])) { - $usage = $cloud_summary['usage.' . $svc]; - $finished_percentage = floor($usage['used'] * 100 / $usage['quota']); - $used = (int)$usage['used']; - $quota = (int)$usage['quota']; - $pag_used = !empty($usage['pag_used']) ? (int)$usage['pag_used'] : 0; - $pag_bal = !empty($usage['pag_bal']) ? (int)$usage['pag_bal'] : 0; - $pag_total = $pag_used + $pag_bal; - if (!empty($usage['total_used'])) { - $total_used = (int)$usage['total_used']; - } - - if ($pag_total) { - // $finished_percentage = floor( ($pag_used+$usage[ 'used' ]) * 100 / ($usage[ 'quota' ]+$pag_total) ); - $pag_width = round($pag_used / $pag_total * 100) . '%'; - } - - if ($finished_percentage > 85) { - $percentage_bg = 'warning'; - if ($finished_percentage > 95) { - $percentage_bg = 'danger'; - if ($pag_bal) { // is using PAG quota - $percentage_bg = 'warning'; - $pag_txt_color = 'litespeed-success'; - } - } - } - - if ($svc == 'cdn') { - // $used = Utility::real_size( $used * 1000000 * 100, true ); - // $quota = Utility::real_size( $quota * 1000000 * 100, true ); - // $pag_used = Utility::real_size( $pag_used * 1000000 * 100, true ); - // $pag_bal = Utility::real_size( $pag_bal * 1000000 * 100, true ); - } - } - - ?> -
-
-

- -
-
- -
-
-
-

-

- - - of - -

-
-
-
+
+
+

+ + +

+ +

+ list_crawlers()); ?> +

+

+ : +

+ + +

+ : + +

+ - 0) { ?> -

- : - -

- - - - -

- $sub_usage) : ?> - : - -

-
- - + +

+ : + +

+ - -

- : / ∞ - -

-
- - - = 0 && isset($usage['daily_quota']) && $usage['daily_quota'] >= 0) { ?> -

- : / -

-
- -
-
- + +

+ : + +

+ - -
- Click here to enable QC service + +

+ Last crawled: %d item(s)', 'litespeed-cache'), $crawler_summary['last_crawled']); ?> +

+
- - - -
-
-

-
- - - - <?php echo $cloud_summary['partner']['name']; ?> - - <?php echo $cloud_summary['partner']['name']; ?> - - - - - - - - +
-
+ + +
+ activated()) : ?> +
+
+

Accelerate, Optimize, Protect

+

Speed up your WordPress site even further with QUIC.cloud Online Services and CDN.

+

Free monthly quota available.

+

Enable QUIC.cloud services

+

+ Learn More about QUIC.cloud
+ QUIC.cloud services are not required +

-
- -

- - - - - - activated()) : ?> - - - - - - - - activated()) : ?> - - +

+ +
+

+ + + + + +

+
+ +
-

- -
-
-
- -
-
-

- - - - - - -

- -
-
- - -
-

- -

-
- s -
+
+ __('Image Optimization', 'litespeed-cache'), + 'page_optm' => __('Page Optimization', 'litespeed-cache'), + 'cdn' => __('CDN Bandwidth', 'litespeed-cache'), + 'lqip' => __('Low Quality Image Placeholder', 'litespeed-cache'), + ); + + foreach ($cat_list as $svc => $title) : + $finished_percentage = 0; + $total_used = $used = $quota = $pag_used = $pag_total = '-'; + $pag_width = 0; + $percentage_bg = 'success'; + $pag_txt_color = ''; + $usage = false; + + if (!empty($cloud_summary['usage.' . $svc])) { + $usage = $cloud_summary['usage.' . $svc]; + $finished_percentage = floor($usage['used'] * 100 / $usage['quota']); + $used = (int)$usage['used']; + $quota = (int)$usage['quota']; + $pag_used = !empty($usage['pag_used']) ? (int)$usage['pag_used'] : 0; + $pag_bal = !empty($usage['pag_bal']) ? (int)$usage['pag_bal'] : 0; + $pag_total = $pag_used + $pag_bal; + if (!empty($usage['total_used'])) { + $total_used = (int)$usage['total_used']; + } + + if ($pag_total) { + // $finished_percentage = floor( ($pag_used+$usage[ 'used' ]) * 100 / ($usage[ 'quota' ]+$pag_total) ); + $pag_width = round($pag_used / $pag_total * 100) . '%'; + } + + if ($finished_percentage > 85) { + $percentage_bg = 'warning'; + if ($finished_percentage > 95) { + $percentage_bg = 'danger'; + if ($pag_bal) { // is using PAG quota + $percentage_bg = 'warning'; + $pag_txt_color = 'litespeed-success'; + } + } + } + if ($svc == 'cdn') { + // $used = Utility::real_size( $used * 1000000 * 100, true ); + // $quota = Utility::real_size( $quota * 1000000 * 100, true ); + // $pag_used = Utility::real_size( $pag_used * 1000000 * 100, true ); + // $pag_bal = Utility::real_size( $pag_bal * 1000000 * 100, true ); + } + } + + ?> +
+
+

+ +
+
+
-
-

- -

-
- s +
+
+

+

+ + + of + +

-
-

- +

+ + 0) { ?> +

+ : + +

+ + + + +

+ $sub_usage) : ?> + : +

-
- % -
-
+
+ + +

+ : / ∞ + +

+
+ + + = 0 && isset($usage['daily_quota']) && $usage['daily_quota'] >= 0) { ?> +

+ : / +

+
+
-
+ -
- - - + + -
+
+ -
-
-

- - - - - - - - - - conf($id)) : ?> - ON - - OFF - + +
+
+

+
+ + + + <?php echo $cloud_summary['partner']['name']; ?> + + <?php echo $cloud_summary['partner']['name']; ?> + + + + + + + + -

+
+
+
+ +
-
+

+ + + + + + activated()) : ?> + + + + + + + + + activated()) : ?> + + -

-
+

+ +
+
+
+ +
+
+

+ + + + + + +

+ +
+
+ + +
+

+ +

+
+ s +
- -
-

- -

-
- get_cls_of_pagescore($health_scores['score_before'])); ?>
-
-
-

- -

-
- get_cls_of_pagescore($health_scores['score_after'])); ?> +
+

+ +

+
+ s +
-
-
-

- -

-
- % +
+

+ +

+
+ % +
-
- + +
+
+
+ + + + + + + ' data-litespeed-cfm="" class="litespeed-right"> +
-
- -
- -
- -
+
+
+

+ + + + + + + + + + conf($id)) : ?> + ON + + OFF + + +

+ +
+ +
+
+ + +
+

+ +

+
+ get_cls_of_pagescore($health_scores['score_before'])); ?> +
+
+
+

+ +

+
+ get_cls_of_pagescore($health_scores['score_after'])); ?> +
+
+
+

+ +

+
+ % +
+
+ -
-
-

- - -

-
-
-
-
- -
-
-

- : -

-

- : -

+
+ +
+ +
+ +
-
-
- -

- : - - - () - -

- +
+
+

+ + +

+
+
+
+
+ +
+ +
+

+ : +

+

+ : +

- -

- : - - - () - -

- +
+
+ +

+ : + + + () + +

+ -

- : -

-

- : -

+ +

+ : + + + () + + +

+ + +

+ : +

+

+ : +

+ + Lang::title(Base::O_IMG_OPTM_AUTO), + Base::O_IMG_OPTM_CRON => Lang::title(Base::O_IMG_OPTM_CRON), + ); + foreach ($cache_list as $id => $title) : + ?> +

+ conf($id)) : ?> + ON + + OFF + + +

+ +
+
+ +
+
+ +
+
+

+ + +

Lang::title(Base::O_IMG_OPTM_AUTO), - Base::O_IMG_OPTM_CRON => Lang::title(Base::O_IMG_OPTM_CRON), + Base::O_CACHE => __('Public Cache', 'litespeed-cache'), + Base::O_CACHE_PRIV => __('Private Cache', 'litespeed-cache'), + Base::O_OBJECT => __('Object Cache', 'litespeed-cache'), + Base::O_CACHE_BROWSER => __('Browser Cache', 'litespeed-cache'), ); foreach ($cache_list as $id => $title) : ?> @@ -431,238 +555,207 @@ OFF - +

-
-
+
+
+

+ + +

-
-
-

- - -

- - __('Public Cache', 'litespeed-cache'), - Base::O_CACHE_PRIV => __('Private Cache', 'litespeed-cache'), - Base::O_OBJECT => __('Object Cache', 'litespeed-cache'), - Base::O_CACHE_BROWSER => __('Browser Cache', 'litespeed-cache'), - ); - foreach ($cache_list as $id => $title) : - ?> -

- conf($id)) : ?> - ON - - OFF + +

+ ' . Utility::readable_time($css_summary['last_request_ccss']) . ''; ?> +

+

+ ' . esc_html($css_summary['last_spent_ccss']) . 's'; ?> +

- -

- -
-
-
-
-

- - -

- - -

- ' . Utility::readable_time($css_summary['last_request_ccss']) . ''; ?> -

-

- ' . esc_html($css_summary['last_spent_ccss']) . 's'; ?> -

- - -

- : - - - -

+

+ : + + + +

-
+
- -
- + +
+ +
+
- -
-
-
-

- - -

- - -

- ' . Utility::readable_time($ucss_summary['last_request']) . ''; ?> -

-

- ' . esc_html($ucss_summary['last_spent']) . 's'; ?> -

- +
+
+

+ + +

-

- : - - - -

+ +

+ ' . Utility::readable_time($ucss_summary['last_request']) . ''; ?> +

+

+ ' . esc_html($ucss_summary['last_spent']) . 's'; ?> +

+ -
+

+ : + + + +

+ +
- -
- + +
+ +
+
- -
-
-
-

- - -

- - -

- ' . Utility::readable_time($placeholder_summary['last_request']) . ''; ?> -

-

- ' . esc_html($placeholder_summary['last_spent']) . 's'; ?> -

- +
+
+

+ + +

-

- : - - - -

+ +

+ ' . Utility::readable_time($placeholder_summary['last_request']) . ''; ?> +

+

+ ' . esc_html($placeholder_summary['last_spent']) . 's'; ?> +

+ -
+

+ : + + + +

+ +
- -
- + +
+ +
+
- -
-
-
-

- (VPI) - -

- - -

- ' . Utility::readable_time($vpi_summary['last_request']) . ''; ?> -

-

- ' . esc_html($vpi_summary['last_spent']) . 's'; ?> -

- +
+
+

+ (VPI) + +

-

- : - - - -

+ +

+ ' . Utility::readable_time($vpi_summary['last_request']) . ''; ?> +

+

+ ' . esc_html($vpi_summary['last_spent']) . 's'; ?> +

+ -
+

+ : + + + +

+ +
- -
- + +
+ +
+
- -
-
-
-

- - -

+
+
+

+ + +

-

- list_crawlers()); ?> -

-

- : -

+

+ list_crawlers()); ?> +

+

+ : +

- -

- : - -

- + +

+ : + +

+ - -

- : - -

- + +

+ : + +

+ - -

- : - -

- + +

+ : + +

+ - -

- Last crawled: %d item(s)', 'litespeed-cache'), $crawler_summary['last_crawled']); ?> -

- + +

+ Last crawled: %d item(s)', 'litespeed-cache'), $crawler_summary['last_crawled']); ?> +

+ -
-
+
+
-
-
-

- QUIC.cloud - -

-

- -

-

- -

-

- more!', 'litespeed-cache'), ' href="https://www.quic.cloud/quic-cloud-services-and-features/litespeed-cache-service/" target="_blank"'); ?> -

-
- QUIC.cloud +
+
+

+ QUIC.cloud + +

+

+ +

+

+ +

+

+ more!', 'litespeed-cache'), ' href="https://www.quic.cloud/quic-cloud-services-and-features/litespeed-cache-service/" target="_blank"'); ?> +

+
+ QUIC.cloud +
+
-
-
-
+
-
+
-
\ No newline at end of file +
\ No newline at end of file