Skip to content

[4.0] Atum and Cassiopea Change alerts styling - space saving + #30294

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wilsonge merged 11 commits into from
Aug 11, 2020
Merged

[4.0] Atum and Cassiopea Change alerts styling - space saving + #30294

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
209c241
[4.0] Atum Change alerts styling - space saving
infograf768 Aug 5, 2020
9376971
correcting stats alert layout
infograf768 Aug 6, 2020
33b6f1d
Correcting alerts in front-end
infograf768 Aug 6, 2020
a321919
correcting scss order
infograf768 Aug 7, 2020
758d885
width space
infograf768 Aug 7, 2020
20be08c
more scss order
infograf768 Aug 7, 2020
0d6cc9a
grrr
infograf768 Aug 7, 2020
99fbb6e
Same changes for installation alerts. Correct padding for Close button
infograf768 Aug 8, 2020
aac0228
correct scss
infograf768 Aug 8, 2020
1c25697
morre scss ordering
infograf768 Aug 8, 2020
6d287fb
grrr
infograf768 Aug 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions administrator/templates/atum/scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,8 +165,8 @@ $card-border-color: transparent;

// Alerts
$state-success-text: var(--alert-success);
$state-success-bg: lighten($green-dark, 70%);
$state-success-border: lighten($green-dark, 30%);
$state-success-bg: lighten($green-dark, 80%);
$state-success-border: $green-dark;

$state-info-text: var(--white);
$state-info-bg: var(--atum-bg-dark);
Expand Down
3 changes: 2 additions & 1 deletion administrator/templates/atum/scss/blocks/_alerts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ fieldset .alert {
}

.alert-heading {
font-size: $font-size-lg;
font-size: $h4-font-size;
}

@keyframes fadeIn {
Expand All @@ -52,3 +52,4 @@ fieldset .alert {
transform: translateY(0);
}
}

86 changes: 86 additions & 0 deletions administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
@import "../../variables";
@import "../../../../../../node_modules/joomla-ui-custom-elements/dist/css/joomla-alert";

// The following is a restyle for the system alerts

#system-message-container joomla-alert {
position: relative;
display: flex;
width: 100%;
min-width: 16rem;
padding: 0;
margin-bottom: 1rem;
color: var(--atum-text-dark);
background-color: var(--white);
border: 1px solid var(--alert-accent-color, transparent);
border-radius: .25rem;
transition: opacity .15s linear;

.alert-heading {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: .8rem;
color: rgba(255, 255, 255, .95);
background: var(--alert-accent-color, transparent);
}

.alert-link {
color: var(--success, inherit);
}

&[type="success"] {
--alert-accent-color: var(--success);
}

&[type="info"] {
--alert-accent-color: var(--info);
}

&[type="warning"] {
--alert-accent-color: var(--warning);
}

&[type="danger"] {
--alert-accent-color: var(--danger);
}

.joomla-alert--close,
.joomla-alert-button--close {
position: absolute;
top: 0;
right: 0;
padding: .2rem .8rem;
font-size: 2rem;
color: var(--alert-accent-color);
background: none;
border: 0;
opacity: 1;

&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
opacity: .75;
}

[dir=rtl] & {
right: auto;
left: 0;
padding: .2rem .6rem;
}
}

div {
font-size: 1rem;
.alert-message {
padding: .3rem 2rem .3rem .3rem;
margin: .5rem;

[dir=rtl] & {
padding: .3rem .3rem .3rem 2rem;
}
}
}
}
2 changes: 2 additions & 0 deletions build/build-modules-js/compilecss.es6.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,12 +46,14 @@ module.exports.compile = (options, path) => {
`${RootPath}/templates/cassiopeia/scss/template-rtl.scss`,
`${RootPath}/templates/cassiopeia/scss/system/searchtools/searchtools.scss`,
`${RootPath}/templates/cassiopeia/scss/vendor/choicesjs/choices.scss`,
`${RootPath}/templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss`,
`${RootPath}/administrator/templates/atum/scss/template.scss`,
`${RootPath}/administrator/templates/atum/scss/template-rtl.scss`,
`${RootPath}/administrator/templates/atum/scss/system/searchtools/searchtools.scss`,
`${RootPath}/administrator/templates/atum/scss/vendor/awesomplete/awesomplete.scss`,
`${RootPath}/administrator/templates/atum/scss/vendor/choicesjs/choices.scss`,
`${RootPath}/administrator/templates/atum/scss/vendor/minicolors/minicolors.scss`,
`${RootPath}/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss`,
`${RootPath}/administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-tab.scss`,
`${RootPath}/administrator/templates/atum/scss/vendor/fontawesome-free/fontawesome.scss`,
`${RootPath}/installation/template/scss/template.scss`,
Expand Down
4 changes: 2 additions & 2 deletions build/media_source/system/js/core.es6/message.es6
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@

// Skip titles with untranslated strings
if (typeof title !== 'undefined') {
titleWrapper = document.createElement('span');
titleWrapper = document.createElement('div');
titleWrapper.className = 'alert-heading';
titleWrapper.innerHTML = Joomla.Text._(type) ? Joomla.Text._(type) : type;
messagesBox.appendChild(titleWrapper);
Expand All @@ -84,7 +84,7 @@
// Add messages to the message box
typeMessages.forEach((typeMessage) => {
messageWrapper = document.createElement('div');
messageWrapper.innerHTML = typeMessage;
messageWrapper.innerHTML = `<div class="alert-message">${typeMessage}</div>`;
messagesBox.appendChild(messageWrapper);
});

Expand Down
41 changes: 6 additions & 35 deletions installation/template/scss/template.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ $fa-font-path: "../../../media/vendor/fontawesome-free/webfonts";
@import "../../../administrator/templates/atum/scss/blocks/global";
@import "../../../administrator/templates/atum/scss/blocks/header";
@import "../../../administrator/templates/atum/scss/vendor/bootstrap/custom-forms";
@import "../../../administrator/templates/atum/scss/vendor/joomla-custom-elements/joomla-alert";

// Safari fix
@import "../../../administrator/templates/atum/scss/vendor/bootstrap/reboot";
Expand All @@ -39,7 +40,6 @@ body {
}
}


.j-container {
width: 100%;
max-width: 40rem;
Expand Down Expand Up @@ -95,7 +95,6 @@ body {
}
}


.languageForm {
padding: 0 0 30px;

Expand All @@ -104,41 +103,13 @@ body {
}
}

.system-message .alert {
margin: 25px 50px;
}

.alert {
position: relative;
display: flex;
margin: 0 0 20px;
background: #fafafa;
border: 1px solid rgba(0, 0, 0, .1);
box-shadow: 0 0 10px rgba(0, 0, 0, .05);

p {
margin-bottom: 0;
}
}

.alert-icon {
display: flex;
align-items: center;
justify-content: center;
width: 25%;
margin-bottom: 0;
font-size: 3rem;
opacity: .6;

.fas {
width: 100%;
text-align: center;
}
// Alerts
#system-message-container joomla-alert {
margin-top: 25px;
}

.alert-text {
width: 75%;
padding: 10px 20px;
.alert-heading {
font-size: $h4-font-size;
}

.hidden,
Expand Down
2 changes: 1 addition & 1 deletion layouts/joomla/system/message.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
<div class="alert-heading"><?php echo Text::_($type); ?></div>
<div>
<?php foreach ($msgs as $msg) : ?>
<p><?php echo $msg; ?></p>
<div class="alert-message"><?php echo $msg; ?></div>
<?php endforeach; ?>
</div>
<?php endif; ?>
Expand Down
28 changes: 15 additions & 13 deletions plugins/system/stats/layouts/message.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,18 +26,20 @@
<joomla-alert type="info" dismiss="true" class="js-pstats-alert hidden" role="alertdialog">
<div class="alert-heading"><?php echo Text::_('PLG_SYSTEM_STATS_LABEL_MESSAGE_TITLE'); ?></div>
<div>
<p>
<?php echo Text::_('PLG_SYSTEM_STATS_MSG_JOOMLA_WANTS_TO_SEND_DATA'); ?>
<a href="#" class="js-pstats-btn-details alert-link"><?php echo Text::_('PLG_SYSTEM_STATS_MSG_WHAT_DATA_WILL_BE_SENT'); ?></a>
</p>
<?php
echo $plugin->render('stats', compact('statsData'));
?>
<p><?php echo Text::_('PLG_SYSTEM_STATS_MSG_ALLOW_SENDING_DATA'); ?></p>
<p class="actions">
<button type="button" class="btn btn-primary js-pstats-btn-allow-always"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_ALWAYS'); ?></button>
<button type="button" class="btn btn-primary js-pstats-btn-allow-once"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_NOW'); ?></button>
<button type="button" class="btn btn-primary js-pstats-btn-allow-never"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_NEVER_SEND'); ?></button>
</p>
<div class="alert-message">
<p>
<?php echo Text::_('PLG_SYSTEM_STATS_MSG_JOOMLA_WANTS_TO_SEND_DATA'); ?>
<a href="#" class="js-pstats-btn-details alert-link"><?php echo Text::_('PLG_SYSTEM_STATS_MSG_WHAT_DATA_WILL_BE_SENT'); ?></a>
</p>
<?php
echo $plugin->render('stats', compact('statsData'));
?>
<p><?php echo Text::_('PLG_SYSTEM_STATS_MSG_ALLOW_SENDING_DATA'); ?></p>
<p class="actions">
<button type="button" class="btn btn-primary js-pstats-btn-allow-always"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_ALWAYS'); ?></button>
<button type="button" class="btn btn-primary js-pstats-btn-allow-once"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_SEND_NOW'); ?></button>
<button type="button" class="btn btn-primary js-pstats-btn-allow-never"><?php echo Text::_('PLG_SYSTEM_STATS_BTN_NEVER_SEND'); ?></button>
</p>
</div>
</div>
</joomla-alert>
4 changes: 4 additions & 0 deletions templates/cassiopeia/scss/blocks/_alerts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@

}

.alert-heading {
font-size: $h4-font-size;
}

@keyframes fadeIn {

from {
Expand Down
3 changes: 0 additions & 3 deletions templates/cassiopeia/scss/template.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,6 @@
// B/C for Icomoon
@import "../../../build/media_source/system/scss/icomoon";

// Alert
@import "../../../build/media_source/system/scss/jalert";

// jQuery Minicolors
@import "../../../build/media_source/system/scss/jquery-minicolors";

Expand Down
86 changes: 86 additions & 0 deletions templates/cassiopeia/scss/vendor/joomla-custom-elements/joomla-alert.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
@import "../../variables";
@import "../../../../../node_modules/joomla-ui-custom-elements/dist/css/joomla-alert";

// The following is a restyle for the system alerts

#system-message-container joomla-alert {
position: relative;
display: flex;
width: 100%;
min-width: 16rem;
padding: 0;
margin-bottom: 1rem;
color: var(--atum-text-dark);
background-color: var(--white);
border: 1px solid var(--alert-accent-color, transparent);
border-radius: .25rem;
transition: opacity .15s linear;

.alert-heading {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: .8rem;
color: rgba(255, 255, 255, .95);
background: var(--alert-accent-color, transparent);
}

.alert-link {
color: var(--success, inherit);
}

&[type="success"] {
--alert-accent-color: var(--success);
}

&[type="info"] {
--alert-accent-color: var(--info);
}

&[type="warning"] {
--alert-accent-color: var(--warning);
}

&[type="danger"] {
--alert-accent-color: var(--danger);
}

.joomla-alert--close,
.joomla-alert-button--close {
position: absolute;
top: 0;
right: 0;
padding: .2rem .8rem;
font-size: 2rem;
color: var(--alert-accent-color);
background: none;
border: 0;
opacity: 1;

&:hover,
&:focus {
text-decoration: none;
cursor: pointer;
opacity: .75;
}

[dir=rtl] & {
right: auto;
left: 0;
padding: .2rem .6rem;
}
}

div {
font-size: 1rem;
.alert-message {
padding: .3rem 2rem .3rem .3rem;
margin: .5rem;

[dir=rtl] & {
padding: .3rem .3rem .3rem 2rem;
}
}
}
}