Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Refactor modal styles to use classes instead of IDs

Browse Source
This commit is contained in:
Ján Mikláš
2018-12-06 20:56:57 +01:00
parent 8936836e0a
commit 182e5c0139
5 changed files with 38 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
assets/css/src/modal.styl
View File

@@ -9,7 +9,7 @@ body.mailpoet_modal_opened
overflow: hidden
// overlay
#mailpoet_modal_overlay
.mailpoet_modal_overlay
height: 100%
left: 0
overflow-y: auto
@@ -28,24 +28,21 @@ body.mailpoet_modal_opened
box-shadow(0px 0px 20px 2px alpha(#fff, 75%))
// overlay: state
#mailpoet_modal_overlay.mailpoet_overlay_hidden
.mailpoet_modal_overlay.mailpoet_overlay_hidden
background-color: transparent
// overlay: state
#mailpoet_modal_overlay.mailpoet_overlay_loading
.mailpoet_modal_overlay.mailpoet_overlay_loading
background-color: overlay_background_color !important
display: block !important
.mailpoet_modal_opened #mailpoet_modal_overlay
.mailpoet_modal_opened .mailpoet_modal_overlay
display: block
// modal popup
#mailpoet_popup
display: none
position: absolute
.mailpoet_popup
z-index: 25
top: 48px
margin: 0
margin: auto
.mailpoet_popup_wrapper
background-color: modal_content_background_color
@@ -58,14 +55,14 @@ body.mailpoet_modal_opened
.mailpoet_overlay_hidden .mailpoet_popup_wrapper
border: 1px solid #333
#mailpoet_popup_title
.mailpoet_popup_title
background-color: modal_title_background_color
border: 1px solid #333
height: 27px
margin: 0
padding: 0 30px 0 0
#mailpoet_popup_title h2
.mailpoet_popup_title h2
color: modal_title_color
font-size: 12px
font-weight: normal
@@ -78,11 +75,11 @@ body.mailpoet_modal_opened
height: 92%
// modal panel
#mailpoet_modal_overlay.mailpoet_panel_overlay
.mailpoet_modal_overlay.mailpoet_panel_overlay
top: 32px
overflow: hidden
#mailpoet_panel
.mailpoet_panel
display: none
position: fixed
z-index: 100002
@@ -104,13 +101,13 @@ body.mailpoet_modal_opened
top: 0
z-index: 0
#mailpoet_panel_title
.mailpoet_panel_title
margin: 0
padding: 0
position: relative
height: 0
#mailpoet_panel_title h2
.mailpoet_panel_title h2
color: modal_title_color
background-color: modal_title_background_color
border-left: 1px solid #444
@@ -126,7 +123,7 @@ body.mailpoet_modal_opened
padding: 10px 10px 36px 10px
// modal button
#mailpoet_modal_close
.mailpoet_modal_close
background: url(../img/modal_close_button.png) 7px 7px no-repeat
height: 30px
overflow: hidden
@@ -136,15 +133,15 @@ body.mailpoet_modal_opened
z-index: 2
outline: 0 none
#mailpoet_popup #mailpoet_modal_close
.mailpoet_popup .mailpoet_modal_close
right: 0
top: 0
#mailpoet_panel #mailpoet_modal_close
.mailpoet_panel .mailpoet_modal_close
right: 10px
top: 7px
#mailpoet_modal_close:focus
.mailpoet_modal_close:focus
outline: 0 none
// buttons
@@ -161,7 +158,7 @@ body.mailpoet_modal_opened
text-align: right
@media screen and (max-width: 782px)
#mailpoet_modal_overlay.mailpoet_panel_overlay
.mailpoet_modal_overlay.mailpoet_panel_overlay
top: 46px
.mailpoet_panel_body
@@ -191,13 +188,13 @@ body.mailpoet_modal_opened
margin-left: 17px
width: 32px
#mailpoet_modal_loading_1, .mailpoet_modal_loading_1
.mailpoet_modal_loading_1, .mailpoet_modal_loading_1
animation-delay(0.39s)
#mailpoet_modal_loading_2, .mailpoet_modal_loading_2
.mailpoet_modal_loading_2, .mailpoet_modal_loading_2
animation-delay(0.9099999999999999s)
#mailpoet_modal_loading_3, .mailpoet_modal_loading_3
.mailpoet_modal_loading_3, .mailpoet_modal_loading_3
animation-delay(1.1700000000000002s)
@keyframes bounce_mailpoet_modal_loading

2
assets/css/src/settings.styl
View File

@@ -1,6 +1,6 @@
#mailpoet_settings
// common
.mailpoet_panel
.mailpoet_tab_panel
display none
.form-table th

18
assets/js/src/modal.js
View File

@@ -79,21 +79,21 @@ define('modal', ['mailpoet', 'jquery'],
renderer: 'html',
options: {},
templates: {
overlay: '<div id="mailpoet_modal_overlay" style="display:none;"></div>',
popup: '<div id="mailpoet_popup" tabindex="-1">' +
overlay: '<div id="mailpoet_modal_overlay" class="mailpoet_modal_overlay" style="display:none;"></div>',
popup: '<div id="mailpoet_popup" class="mailpoet_popup" tabindex="-1">' +
'<div class="mailpoet_popup_wrapper">' +
'<a href="javascript:;" id="mailpoet_modal_close"></a>' +
'<div id="mailpoet_popup_title"><h2></h2></div>' +
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
'<div id="mailpoet_popup_title" class="mailpoet_popup_title"><h2></h2></div>' +
'<div class="mailpoet_popup_body clearfix"></div>' +
'</div>' +
'</div>',
loading: '<div id="mailpoet_loading" class="mailpoet_loading" style="display:none;">' +
'<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading"></div>' +
'<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading"></div>' +
'<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading"></div>' +
'<div id="mailpoet_modal_loading_1" class="mailpoet_modal_loading mailpoet_modal_loading_1"></div>' +
'<div id="mailpoet_modal_loading_2" class="mailpoet_modal_loading mailpoet_modal_loading_2"></div>' +
'<div id="mailpoet_modal_loading_3" class="mailpoet_modal_loading mailpoet_modal_loading_3"></div>' +
'</div>',
panel: '<div id="mailpoet_panel">' +
'<a href="javascript:;" id="mailpoet_modal_close"></a>' +
panel: '<div id="mailpoet_panel" class="mailpoet_panel">' +
'<a href="javascript:;" id="mailpoet_modal_close" class="mailpoet_modal_close"></a>' +
'<div class="mailpoet_panel_wrapper" tabindex="-1">' +
'<div class="mailpoet_panel_body clearfix"></div>' +
'</div>' +

6
assets/js/src/settings/tabs.js
View File

@@ -60,14 +60,14 @@ define(
jQuery('.nav-tab-wrapper a').removeClass('nav-tab-active');
// hide panels & sections
jQuery('.mailpoet_panel, .mailpoet_section').hide();
jQuery('.mailpoet_tab_panel, .mailpoet_section').hide();
// set active tab
jQuery('a.nav-tab[href="#' + tab + '"]').addClass('nav-tab-active').blur();
// show selected panel
if (jQuery('.mailpoet_panel[data-tab="' + tab + '"]').length > 0) {
jQuery('.mailpoet_panel[data-tab="' + tab + '"]').show();
if (jQuery('.mailpoet_tab_panel[data-tab="' + tab + '"]').length > 0) {
jQuery('.mailpoet_tab_panel[data-tab="' + tab + '"]').show();
}
// show "save settings" button

10
views/settings.html
View File

@@ -23,27 +23,27 @@
</h2>
<!-- sending method -->
<div data-tab="mta" class="mailpoet_panel">
<div data-tab="mta" class="mailpoet_tab_panel">
<% include 'settings/mta.html' %>
</div>
<!-- basics -->
<div data-tab="basics" class="mailpoet_panel">
<div data-tab="basics" class="mailpoet_tab_panel">
<% include 'settings/basics.html' %>
</div>
<!-- sign-up confirmation -->
<div data-tab="signup" class="mailpoet_panel">
<div data-tab="signup" class="mailpoet_tab_panel">
<% include 'settings/signup.html' %>
</div>
<!-- advanced -->
<div data-tab="advanced" class="mailpoet_panel">
<div data-tab="advanced" class="mailpoet_tab_panel">
<% include 'settings/advanced.html' %>
</div>
<!-- premium -->
<div data-tab="premium" class="mailpoet_panel">
<div data-tab="premium" class="mailpoet_tab_panel">
<% include 'settings/premium.html' %>
</div>