suggestion.php
233 lines
| 1 | <?php |
| 2 | /** |
| 3 | * Matomo - free/libre analytics platform |
| 4 | * |
| 5 | * @link https://matomo.org |
| 6 | * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later |
| 7 | * @package matomo |
| 8 | */ |
| 9 | |
| 10 | use WpMatomo\Admin\PluginSuggestions\Suggestion; |
| 11 | |
| 12 | if ( ! defined( 'ABSPATH' ) ) { |
| 13 | exit; // if accessed directly |
| 14 | } |
| 15 | |
| 16 | /** @var Suggestion $matomo_suggestion_to_show */ |
| 17 | ?> |
| 18 | |
| 19 | <style> |
| 20 | .matomo-plugin-suggestion { |
| 21 | display: flex; |
| 22 | flex-direction: column; |
| 23 | justify-content: space-between; |
| 24 | align-items: stretch; |
| 25 | border-radius: 4px; |
| 26 | border: solid 2px #e2e2e2; |
| 27 | border-left: solid 4px #218532; |
| 28 | background-color: white; |
| 29 | padding: 0; |
| 30 | position: relative; |
| 31 | } |
| 32 | |
| 33 | .matomo-plugin-suggestion > * { |
| 34 | padding-left: 1em; |
| 35 | padding-right: 1em; |
| 36 | } |
| 37 | |
| 38 | .matomo-plugin-suggestion-content { |
| 39 | display: flex; |
| 40 | flex-direction: row; |
| 41 | justify-content: space-between; |
| 42 | align-items: stretch; |
| 43 | } |
| 44 | |
| 45 | .matomo-plugin-suggestion-body { |
| 46 | flex: 1; |
| 47 | } |
| 48 | |
| 49 | .matomo-plugin-suggestion-text-container, |
| 50 | .matomo-plugin-suggestion-text, |
| 51 | .matomo-plugin-suggestion-cta { |
| 52 | padding-top: 1em; |
| 53 | padding-bottom: 1em; |
| 54 | } |
| 55 | |
| 56 | .matomo-plugin-suggestion-footer { |
| 57 | text-align: right; |
| 58 | line-height: 2em; |
| 59 | border-top: 1px solid #F0F0F0; |
| 60 | background-color: #FAFAFA; |
| 61 | color: #A0A0A0; |
| 62 | } |
| 63 | |
| 64 | .matomo-plugin-suggestion-footer > span { |
| 65 | font-size: 12px; |
| 66 | } |
| 67 | |
| 68 | .matomo-plugin-suggestion-body { |
| 69 | display: flex; |
| 70 | flex-direction: row; |
| 71 | justify-content: space-between; |
| 72 | align-items: stretch; |
| 73 | } |
| 74 | |
| 75 | .matomo-plugin-suggestion-text-container { |
| 76 | flex: 6; |
| 77 | } |
| 78 | |
| 79 | .matomo-plugin-suggestion-img { |
| 80 | flex: 3; |
| 81 | } |
| 82 | |
| 83 | .matomo-plugin-suggestion-cta { |
| 84 | flex: 1; |
| 85 | } |
| 86 | |
| 87 | .matomo-plugin-suggestion-header { |
| 88 | display: flex; |
| 89 | flex-direction: row; |
| 90 | justify-content: flex-start; |
| 91 | align-items: center; |
| 92 | } |
| 93 | |
| 94 | .matomo-fire-icon { |
| 95 | margin-right: 10px; |
| 96 | } |
| 97 | |
| 98 | .matomo-trigger-desc-short { |
| 99 | padding: 1px 10px 1px 10px; |
| 100 | text-transform: uppercase; |
| 101 | color: #218532; |
| 102 | background-color: rgba(33, 133, 50, 0.15); |
| 103 | font-weight: bold; |
| 104 | letter-spacing: 1.5px; |
| 105 | border-radius: 2px; |
| 106 | border: solid 1px rgba(33, 133, 50, 0.2); |
| 107 | margin-right: 10px; |
| 108 | } |
| 109 | |
| 110 | .matomo-trigger-desc-long { |
| 111 | flex: 1; |
| 112 | color: #555; |
| 113 | } |
| 114 | |
| 115 | .matomo-dismiss-suggestion { |
| 116 | text-decoration: none; |
| 117 | } |
| 118 | |
| 119 | .matomo-plugin-suggestion-cta { |
| 120 | display: flex; |
| 121 | flex-direction: row; |
| 122 | justify-content: flex-end; |
| 123 | align-items: flex-start; |
| 124 | } |
| 125 | |
| 126 | .matomo-plugin-suggestion-cta a { |
| 127 | text-decoration: none; |
| 128 | } |
| 129 | |
| 130 | .matomo-plugin-suggestion-cta .button-primary { |
| 131 | background-color: #218532; |
| 132 | border-color: #218532; |
| 133 | } |
| 134 | |
| 135 | .matomo-plugin-suggestion-cta .button-primary:hover, |
| 136 | .matomo-plugin-suggestion-cta .button-primary:focus { |
| 137 | background-color: #175d23; |
| 138 | border-color: #175d23; |
| 139 | } |
| 140 | |
| 141 | .matomo-plugin-suggestion-cta { |
| 142 | display: flex; |
| 143 | justify-content: center; |
| 144 | align-items: center; |
| 145 | } |
| 146 | |
| 147 | .matomo-plugin-suggestion-text > div:first-child { |
| 148 | font-weight: bold; |
| 149 | font-size: 15px; |
| 150 | margin-bottom: 4px; |
| 151 | } |
| 152 | |
| 153 | .matomo-plugin-suggestion-text > div:last-child { |
| 154 | color: #555; |
| 155 | } |
| 156 | |
| 157 | .matomo-plugin-suggestion-img { |
| 158 | background-repeat: no-repeat; |
| 159 | background-size: contain; |
| 160 | margin-top: 1em; |
| 161 | margin-bottom: 1em; |
| 162 | background-position: center; |
| 163 | } |
| 164 | |
| 165 | @media (max-width: 640px) { |
| 166 | .matomo-plugin-suggestion-img { |
| 167 | display: none; |
| 168 | } |
| 169 | } |
| 170 | </style> |
| 171 | <div class="matomo-plugin-suggestion"> |
| 172 | <div class="matomo-plugin-suggestion-content"> |
| 173 | <div class="matomo-plugin-suggestion-text-container"> |
| 174 | <div class="matomo-plugin-suggestion-header"> |
| 175 | <span class="matomo-fire-icon"> |
| 176 | <svg width="14px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 92.27 122.88" style="enable-background:new 0 0 92.27 122.88" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#EC6F59;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FAD15C;}</style><g><path class="st0" d="M18.61,54.89C15.7,28.8,30.94,10.45,59.52,0C42.02,22.71,74.44,47.31,76.23,70.89 c4.19-7.15,6.57-16.69,7.04-29.45c21.43,33.62,3.66,88.57-43.5,80.67c-4.33-0.72-8.5-2.09-12.3-4.13C10.27,108.8,0,88.79,0,69.68 C0,57.5,5.21,46.63,11.95,37.99C12.85,46.45,14.77,52.76,18.61,54.89L18.61,54.89z"/><path class="st1" d="M33.87,92.58c-4.86-12.55-4.19-32.82,9.42-39.93c0.1,23.3,23.05,26.27,18.8,51.14 c3.92-4.44,5.9-11.54,6.25-17.15c6.22,14.24,1.34,25.63-7.53,31.43c-26.97,17.64-50.19-18.12-34.75-37.72 C26.53,84.73,31.89,91.49,33.87,92.58L33.87,92.58z"/></g></svg> |
| 177 | </span> |
| 178 | |
| 179 | <div class="matomo-trigger-desc-short"> |
| 180 | <?php echo esc_html( $matomo_suggestion_to_show->get_trigger_desc_short() ); ?> |
| 181 | </div> |
| 182 | |
| 183 | <div class="matomo-trigger-desc-long"> |
| 184 | <?php echo esc_html( $matomo_suggestion_to_show->get_trigger_desc_long() ); ?> |
| 185 | </div> |
| 186 | |
| 187 | <a href="#" class="matomo-dismiss-suggestion notice-dismiss" data-suggestion="<?php echo esc_attr( $matomo_suggestion_to_show->get_short_id() ); ?>"> |
| 188 | </a> |
| 189 | </div> |
| 190 | |
| 191 | <div class="matomo-plugin-suggestion-body"> |
| 192 | <div class="matomo-plugin-suggestion-text"> |
| 193 | <div> |
| 194 | <?php echo esc_html( $matomo_suggestion_to_show->get_plugin_desc_long() ); ?> |
| 195 | </div> |
| 196 | |
| 197 | <div> |
| 198 | <?php echo esc_html( $matomo_suggestion_to_show->get_plugin_name() ); ?> |
| 199 | — |
| 200 | <?php echo esc_html( $matomo_suggestion_to_show->get_plugin_desc_short() ); ?> |
| 201 | </div> |
| 202 | </div> |
| 203 | </div> |
| 204 | </div> |
| 205 | <div |
| 206 | class="matomo-plugin-suggestion-img" |
| 207 | <?php |
| 208 | $matomo_suggestion_image = $matomo_suggestion_to_show->get_image_url(); |
| 209 | if ( ! empty( $matomo_suggestion_image ) ) { |
| 210 | ?> |
| 211 | style="background-image: url(<?php echo esc_attr( $matomo_suggestion_image ); ?>)" |
| 212 | <?php } ?> |
| 213 | > |
| 214 | |
| 215 | </div> |
| 216 | <div class="matomo-plugin-suggestion-cta"> |
| 217 | <div> |
| 218 | <a rel="noreferrer noopener" target="_blank" href="<?php echo esc_attr( $matomo_suggestion_to_show->get_unlock_url() ); ?>"> |
| 219 | <button class="button-primary"> |
| 220 | <?php esc_html_e( 'Unlock', 'matomo' ); ?> |
| 221 | </button> |
| 222 | </a> |
| 223 | </div> |
| 224 | </div> |
| 225 | </div> |
| 226 | |
| 227 | <div class="matomo-plugin-suggestion-footer"> |
| 228 | <span> |
| 229 | <?php esc_html_e( 'Powered by Matomo Analytics', 'matomo' ); ?> |
| 230 | </span> |
| 231 | </div> |
| 232 | </div> |
| 233 |