Lucid.php
289 lines
| 1 | <?php |
| 2 | |
| 3 | namespace ProfilePress\Core\Themes\Shortcode\Melange; |
| 4 | |
| 5 | use ProfilePress\Core\Themes\Shortcode\MelangeThemeInterface; |
| 6 | |
| 7 | class Lucid implements MelangeThemeInterface |
| 8 | { |
| 9 | public function get_name() |
| 10 | { |
| 11 | return 'Lucid Account Tab Widget'; |
| 12 | } |
| 13 | |
| 14 | public function get_structure() |
| 15 | { |
| 16 | return <<<CODE |
| 17 | <div class="lucidContainer"> |
| 18 | <div class="multitab-section"> |
| 19 | <ul class="multitab-widget multitab-widget-content-tabs-id"> |
| 20 | <li class="multitab-tab"><a href="#lucidLogin">Log In</a></li> |
| 21 | <li class="multitab-tab"><a href="#lucidRegistration">Register</a></li> |
| 22 | <li class="multitab-tab"><a href="#lucidReset">Reset</a></li> |
| 23 | </ul> |
| 24 | <div class="multitab-widget-content multitab-widget-content-widget-id" id="lucidLogin"> |
| 25 | <span id="sidebartab1"> |
| 26 | [pp-login-form] |
| 27 | [login-username placeholder="Username"] |
| 28 | [login-password placeholder="Password"] |
| 29 | [login-submit value="Log In"] |
| 30 | [/pp-login-form] |
| 31 | </span> |
| 32 | </div> |
| 33 | <div class="multitab-widget-content multitab-widget-content-widget-id" id="lucidRegistration"> |
| 34 | <span id="sidebartab2"> |
| 35 | [pp-registration-form] |
| 36 | [reg-username placeholder="Username"] |
| 37 | [reg-email placeholder="Email Address"] |
| 38 | [reg-password placeholder="Password"] |
| 39 | [reg-submit value="Register"] |
| 40 | [/pp-registration-form] |
| 41 | </span> |
| 42 | </div> |
| 43 | <div class="multitab-widget-content multitab-widget-content-widget-id" id="lucidReset"> |
| 44 | <span id="sidebartab3"> |
| 45 | [pp-password-reset-form] |
| 46 | [user-login value="Username or Email"] |
| 47 | [reset-submit value="Get New Password"] |
| 48 | [/pp-password-reset-form] |
| 49 | </span> |
| 50 | </div> |
| 51 | </div> |
| 52 | </div> |
| 53 | |
| 54 | <script type="text/javascript"> |
| 55 | jQuery(document).ready(function ($) { |
| 56 | $(".multitab-widget-content-widget-id").hide(); |
| 57 | $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); |
| 58 | $(".multitab-widget-content-widget-id:first").show(); |
| 59 | $("ul.multitab-widget-content-tabs-id li a").on('click', function () { |
| 60 | $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); |
| 61 | $(this).addClass("multitab-widget-current"); |
| 62 | $(".multitab-widget-content-widget-id").hide(); |
| 63 | var activeTab = $(this).attr("href"); |
| 64 | $(activeTab).fadeIn(); |
| 65 | return false; |
| 66 | }); |
| 67 | }); |
| 68 | </script> |
| 69 | CODE; |
| 70 | |
| 71 | } |
| 72 | |
| 73 | public function get_css() |
| 74 | { |
| 75 | return <<<CSS |
| 76 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap); |
| 77 | |
| 78 | /* css class for login form generated errors */ |
| 79 | .profilepress-login-status { |
| 80 | border-radius: 5px; |
| 81 | max-width: 350px; |
| 82 | font-size: 15px; |
| 83 | line-height: 1.471; |
| 84 | padding: 10px; |
| 85 | background-color: #e74c3c; |
| 86 | color: #ffffff; |
| 87 | font-weight: normal; |
| 88 | display: block; |
| 89 | vertical-align: middle; |
| 90 | margin: 5px 0; |
| 91 | } |
| 92 | |
| 93 | .profilepress-login-status a { |
| 94 | color: #fff; |
| 95 | text-decoration: underline; |
| 96 | } |
| 97 | |
| 98 | /* css class for registration form generated errors */ |
| 99 | .profilepress-reg-status { |
| 100 | border-radius: 5px; |
| 101 | max-width: 350px; |
| 102 | font-size: 15px; |
| 103 | line-height: 1.471; |
| 104 | padding: 10px; |
| 105 | background-color: #e74c3c; |
| 106 | color: #ffffff; |
| 107 | font-weight: normal; |
| 108 | display: block; |
| 109 | vertical-align: middle; |
| 110 | margin: 5px 0; |
| 111 | } |
| 112 | |
| 113 | .profilepress-reset-status a { |
| 114 | color: #fff; |
| 115 | text-decoration: underline; |
| 116 | } |
| 117 | |
| 118 | /* css class for password reset form generated errors */ |
| 119 | .profilepress-reset-status { |
| 120 | border-radius: 5px; |
| 121 | max-width: 350px; |
| 122 | font-size: 15px; |
| 123 | line-height: 1.471; |
| 124 | padding: 10px; |
| 125 | background-color: #e74c3c; |
| 126 | color: #ffffff; |
| 127 | font-weight: normal; |
| 128 | display: block; |
| 129 | vertical-align: middle; |
| 130 | margin: 5px 0; |
| 131 | } |
| 132 | |
| 133 | .profilepress-reset-status a { |
| 134 | color: #fff; |
| 135 | text-decoration: underline; |
| 136 | } |
| 137 | |
| 138 | .lucidSuccess { |
| 139 | border-radius: 5px; |
| 140 | max-width: 350px; |
| 141 | font-size: 15px; |
| 142 | line-height: 1.471; |
| 143 | padding: 10px; |
| 144 | background-color: #2ecc71; |
| 145 | color: #ffffff; |
| 146 | font-weight: normal; |
| 147 | display: block; |
| 148 | margin-top: 5px; |
| 149 | margin-bottom: 5px; |
| 150 | } |
| 151 | |
| 152 | .lucidContainer { |
| 153 | max-width: 350px; |
| 154 | margin: 30px 0; |
| 155 | padding: 0; |
| 156 | box-shadow: 0 10px 5px -5px rgba(0, 0, 0, 0.1); |
| 157 | font-family: 'Open Sans', sans-serif; |
| 158 | } |
| 159 | |
| 160 | /* Multi Tab Sidebar */ |
| 161 | |
| 162 | .multitab-section { |
| 163 | display: inline-block; |
| 164 | text-transform: uppercase; |
| 165 | width: 100%; |
| 166 | } |
| 167 | |
| 168 | .multitab-section p { |
| 169 | display: inline-block; |
| 170 | background: #fff; |
| 171 | text-transform: lowercase; |
| 172 | font-size: 14px; |
| 173 | padding: 20px; |
| 174 | margin: 0; |
| 175 | } |
| 176 | |
| 177 | .multitab-widget { |
| 178 | list-style: none; |
| 179 | margin: 0 0 10px; |
| 180 | padding: 0 |
| 181 | } |
| 182 | |
| 183 | .multitab-widget li { |
| 184 | list-style: none; |
| 185 | padding: 0; |
| 186 | margin: 0; |
| 187 | float: left |
| 188 | } |
| 189 | |
| 190 | .multitab-widget li a { |
| 191 | background: #22a1c4; |
| 192 | color: #fff; |
| 193 | display: block; |
| 194 | padding: 15px; |
| 195 | font-size: 13px; |
| 196 | text-decoration: none |
| 197 | } |
| 198 | |
| 199 | .multitab-tab { |
| 200 | width: 33.3%; |
| 201 | text-align: center |
| 202 | } |
| 203 | |
| 204 | .multitab-section h2, |
| 205 | .multitab-section h3, |
| 206 | .multitab-section h4, |
| 207 | .multitab-section h5, |
| 208 | .multitab-section h6 { |
| 209 | display: none; |
| 210 | } |
| 211 | |
| 212 | .multitab-widget li a.multitab-widget-current { |
| 213 | padding-bottom: 20px; |
| 214 | margin-top: -10px; |
| 215 | background: #fff; |
| 216 | color: #444; |
| 217 | text-decoration: none; |
| 218 | border-top: 5px solid #22a1c4; |
| 219 | font-size: 14px; |
| 220 | text-transform: capitalize |
| 221 | } |
| 222 | |
| 223 | .multitab-widget-content { |
| 224 | padding: 0 20px; |
| 225 | border-bottom: 1px solid #efefef; |
| 226 | border-left: 1px solid #efefef; |
| 227 | border-right: 1px solid #efefef; |
| 228 | } |
| 229 | |
| 230 | |
| 231 | div.lucidContainer input[type="email"], |
| 232 | div.lucidContainer input[type="text"], |
| 233 | div.lucidContainer input[type="password"], div.lucidContainer select, div.lucidContainer textarea { |
| 234 | width: 100%; |
| 235 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.125); |
| 236 | box-sizing: border-box; |
| 237 | -webkit-box-sizing: border-box; |
| 238 | -moz-box-sizing: border-box; |
| 239 | background: #fff; |
| 240 | margin: 10px auto; |
| 241 | border: 1px solid #ccc; |
| 242 | padding: 10px; |
| 243 | font-family: 'Open Sans', sans-serif; |
| 244 | font-size: 95%; |
| 245 | color: #555; |
| 246 | } |
| 247 | |
| 248 | |
| 249 | div.lucidContainer input[type="submit"] { |
| 250 | width: 100%; |
| 251 | box-sizing: border-box; |
| 252 | -webkit-box-sizing: border-box; |
| 253 | -moz-box-sizing: border-box; |
| 254 | margin: 10px auto; |
| 255 | background: #3399cc; |
| 256 | border: 0; |
| 257 | padding: 4%; |
| 258 | font-family: 'Open Sans', sans-serif; |
| 259 | font-size: 100%; |
| 260 | color: #fff; |
| 261 | cursor: pointer; |
| 262 | transition: background .3s; |
| 263 | -webkit-transition: background .3s; |
| 264 | } |
| 265 | |
| 266 | div.lucidContainer input[type="submit"]:hover { |
| 267 | background: #2288bb; |
| 268 | } |
| 269 | |
| 270 | |
| 271 | CSS; |
| 272 | |
| 273 | } |
| 274 | |
| 275 | public function registration_success_message() |
| 276 | { |
| 277 | return '<div class="lucidSuccess">Registration Successful.</div>'; |
| 278 | } |
| 279 | |
| 280 | public function password_reset_success_message() |
| 281 | { |
| 282 | return '<div class="lucidSuccess">Check your email for further instructions.</div>'; |
| 283 | } |
| 284 | |
| 285 | public function edit_profile_success_message() |
| 286 | { |
| 287 | return '<div class="lucidSuccess">Profile successfully updated.</div>'; |
| 288 | } |
| 289 | } |