Skip to content

Commit

Permalink
Improved class naming CSS to fit BEM convetion
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucascumsille
lucascumsille committed Dec 17, 2024
1 parent 7f27862 commit 4dd0a95
Show file tree
Hide file tree
Showing 7 changed files with 321 additions and 318 deletions.
2 changes: 1 addition & 1 deletion www/docs/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,7 @@ function createAccordion(triggerSelector, contentSelector) {

// Initialize accordion when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
createAccordion('.accordion-button', '.accordion-content');
createAccordion('.js-accordion-button', '.js-accordion-content');
});

// Comfirm deletion of alerts
Expand Down
1 change: 1 addition & 0 deletions www/docs/style/sass/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -246,6 +246,7 @@ form {
@import "parts/panels";
@import "parts/promo-banner";
@import "parts/accordion";
@import "parts/labels";

@import "pages/mp";
@import "pages/topics";
Expand Down
79 changes: 79 additions & 0 deletions www/docs/style/sass/pages/_alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,3 +420,82 @@
margin-top: 0;
}
}

.alert-meta {
.alert-meta__results {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 1rem;
align-items: center;
margin-bottom: 1rem;

.alert-meta__item {
border-radius: 0.5rem;
background-color: $primary-color-200;
padding: 1rem;

dt {
font-size: 0.7rem;
text-transform: uppercase;
margin-bottom: 0;
}

dd {
margin-bottom: 0;
font-size: 1.1rem;
}
}
}
}

// Accordion Keyword
.keyword-alert-accordion {
margin-top: 2rem;
}

.keyword-alert-accordion__button {
@extend .accordion__button;
}

.keyword-alert-accordion__content {
@extend .accordion__content;
}

.keyword-alert-accordion__button-content {
display: flex;
flex-direction: column;
align-content: center;
align-items: start;
gap: 0.25rem;

.keyword-alert-accordion__subtitle {
font-size: 0.75rem;
font-weight: bold;
}
}

.keyword-alert-accordion__keyword-list,
.alert-creation-steps {
margin-bottom: 2.5rem;
ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
margin-left: 0;

li {
font-weight: bold;
i {
margin-left: 0.25rem;
}
}
}

h3 {
font-weight: 400;
}
}
100 changes: 5 additions & 95 deletions www/docs/style/sass/parts/_accordion.scss
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,4 @@
.accordion {
margin-top: 2rem;

.label {
background-color: #fff;
color: $primary-color;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;

&--primary-light {
background-color: $primary-color-200;
color: $body-font-color;
}

&--red {
background-color: lighten($color-red, 40%);
color: $body-font-color;
}
}
}

.accordion-button {
.accordion__button {
width: 100%;
display: flex;
justify-content: space-between;
Expand All @@ -46,29 +24,19 @@
transform: rotate(45deg);
}
}

}

.accordion-button--content {
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
gap: 0.75rem;

.content-subtitle {
@extend .label;
}
}

.accordion-content {
.accordion__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: 1rem;

}




.alert-page-subsection__controls {
margin-bottom: 2rem;
form {
Expand All @@ -83,64 +51,6 @@
}
}

.keyword-list {
ul {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.5rem;
margin-left: 0;

li {
font-weight: bold;
i {
margin-left: 0.25rem;
}
}

}
}

.heading-with-bold-word {
font-weight: 400;

span {
font-weight: bold;
}
}

.alert-meta-info {

.alert-meta-info-results {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 1rem;
row-gap: 1rem;
align-items: center;
margin-bottom: 1rem;

.content-header-item {
border-radius: 0.5rem;
background-color: $primary-color-200;
padding: 1rem;

dt {
font-size: 0.7rem;
text-transform: uppercase;
margin-bottom: 0;
}

dd {
margin-bottom: 0;
font-size: 1.1rem;
}
}
}

}

button {
i {
margin-right: 0.15rem;
Expand Down
17 changes: 17 additions & 0 deletions www/docs/style/sass/parts/_labels.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
.label {
background-color: #fff;
color: $primary-color;
padding: 0.25rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;

&--primary-light {
background-color: $primary-color-200;
color: $body-font-color;
}

&--red {
background-color: lighten($color-red, 40%);
color: $body-font-color;
}
}
28 changes: 14 additions & 14 deletions www/includes/easyparliament/templates/html/alert/_alert_form.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@
<div class="alert-step" id="step2" role="region" aria-labelledby="step2-header">
<h2 id="step2-header"><?= gettext('Adding some extras') ?></h2>
<div class="keyword-list alert-page-subsection">
<h3 class="heading-with-bold-word"><?= gettext('Current keywords in this alert:') ?></h3>
<h3><?= gettext('Current keywords in this alert:') ?></h3>
<ul>
<?php foreach ($keywords as $word) {
if (!in_array($word, $skip_keyword_terms)) { ?>
Expand Down Expand Up @@ -165,16 +165,16 @@
</div>
</fieldset>

<dl class="alert-meta-info">
<dl class="alert-meta">
<?php if ($search_result_count > 0) { ?>
<div class="content-header-item">
<div class="alert-meta__item">
<dt><?= gettext('This week') ?></dt>
<dd><?= sprintf(gettext('%d mentions'), $search_result_count) ?></dd>
</div>
<?php } ?>

<?php if (isset($lastmention)) { ?>
<div class="content-header-item">
<div class="alert-meta__item">
<dt><?= gettext('Date of last mention') ?></dt>
<dd>30 May 2024</dd>
</div>
Expand Down Expand Up @@ -214,9 +214,9 @@

<div class="keyword-list alert-page-subsection">
<?php if ($match_all) { ?>
<h3 class="heading-with-bold-word"><?= gettext('You will get an alert if all of these words are in a speech') ?>:</h3>
<h3><?= gettext('You will get an alert if all of these words are in a speech') ?>:</h3>
<?php } else { ?>
<h3 class="heading-with-bold-word"><?= gettext('You will get an alert if any of these words are in a speech') ?>:</h3>
<h3><?= gettext('You will get an alert if any of these words are in a speech') ?>:</h3>
<?php } ?>
<ul>
<?php foreach ($keywords as $word) { ?>
Expand All @@ -227,7 +227,7 @@

<?php if ($exclusions) { ?>
<div class="keyword-list excluded-keywords alert-page-subsection">
<h3 class="heading-with-bold-word"><?= gettext('Unless the speech also includes these words') ?>:</h3>
<h3><?= gettext('Unless the speech also includes these words') ?>:</h3>
<ul>
<?php foreach (explode(" ", $exclusions) as $word) { ?>
<li class="label label--red"><?= _htmlspecialchars($word) ?>
Expand All @@ -238,20 +238,20 @@

<div class="keyword-list alert-page-subsection">
<?php if (count($sections) > 0) { ?>
<h3 class="heading-with-bold-word"><?= gettext('And only if the speech is in') ?>:</h3>
<h3><?= gettext('And only if the speech is in') ?>:</h3>
<ul>
<?php foreach ($sections as $word) { ?>
<li class="label label--primary-light"><?= _htmlspecialchars($word) ?>
<?php } ?>
</ul>
<?php } else { ?>
<h3 class="heading-with-bold-word"><?= gettext('in the UK, Scottish or Welsh Parliaments or Northern Ireland Assembly') ?></h3>
<h3><?= gettext('in the UK, Scottish or Welsh Parliaments or Northern Ireland Assembly') ?></h3>
<?php } ?>
</div>

<?php if (count($members) > 0) { ?>
<div class="keyword-list alert-page-subsection">
<h3 class="heading-with-bold-word"><?= gettext('And only when spoken by') ?></h3>
<h3><?= gettext('And only when spoken by') ?></h3>
<ul>
<?php foreach ($members as $member) { ?>
<li class="label label--primary-light"><?= $member['given_name'] ?> <?= $member['family_name'] ?>
Expand All @@ -262,19 +262,19 @@

<?php if ($search_result_count > 0 || isset($lastmention)) { ?>
<hr>
<dl class="alert-meta-info">
<dl class="alert-meta">
<h3>See mentions for this alert</h3>

<div class="alert-meta-info-results">
<div class="alert-meta__results">
<?php if ($search_result_count > 0) { ?>
<div class="content-header-item">
<div class="alert-meta__item">
<dt><?= gettext('This week') ?></dt>
<dd><?= sprintf(gettext('%d mentions'), $search_result_count) ?></dd>
</div>
<?php } ?>

<?php // if (isset($lastmention)) { ?>
<div class="content-header-item">
<div class="alert-meta__item">
<dt><?= gettext('Date of last mention') ?></dt>
<dd>30 May 2024</dd>
</div>
Expand Down
Loading

0 comments on commit 4dd0a95

Please sign in to comment.