Skip to content
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

CIVIMM-249: UI Improvements on compuclient 7.x-4.0 (CiviCRM - 5.75) upgrade #567

Open
wants to merge 11 commits into
base: master
Choose a base branch
from
+97 −29
Open

CIVIMM-249: UI Improvements on compuclient 7.x-4.0 (CiviCRM - 5.75) upgrade #567

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
a4ec6dd
CIVIMM-249: Fix top spacing for the civicrm form blocks on the pages
swastikpareek Dec 23, 2024
62336cd
CIVIMM-249: Fix according header styles - improved the solution from …
swastikpareek Dec 23, 2024
2fc5b2c
CIVIMM-249: Fix the spacing of the help box on the contact-contributi…
swastikpareek Dec 24, 2024
ae8cb28
CIVIMM-249: Fix border inside the custom field set accordion
swastikpareek Dec 24, 2024
efdaaa1
CIVIMM-249: Fix discount form popup accordion header colors
swastikpareek Dec 24, 2024
8cdf1e3
CIVIMM-249: Reduce spacing for the form items inside the ui dialog box
swastikpareek Dec 24, 2024
f5e031f
CIVIMM-249: Align the crm accordion header and content inside ui moda…
swastikpareek Dec 24, 2024
b555891
CIVIMM-249: Fix stylelint warnings
swastikpareek Dec 25, 2024
aa24ded
CIVIMM-249: Improve accordion header styles
swastikpareek Dec 25, 2024
2fbed86
CIVIMM-249: Adjusting top spacing of the normal form layouts inside c…
swastikpareek Dec 25, 2024
547e9e9
CIVIMM-249: Fix top spacing issues for customised screens
swastikpareek Dec 25, 2024
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
7 changes: 1 addition & 6 deletions scss/civicrm/administer/customize-data/_customize-data.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
//stylelint-disable selector-max-compound-selectors, max-nesting-depth, selector-max-id
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@swastikpareek Question do we need to disable these selectors? if now can we remove these stylints?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moving ahead, we will be planning to get rid of this theme and styles anyways, as the CiviCRM is doing a branch new version https://civicrm.org/blog/josh/announcing-civicrm-6 CIVICRM 6 and we will use the new theme framework riverlea to base our new shoreditch-theme (at least that's the plan for now as per my discussion with @jamienovick)

So, I suggest that we only touch the CSS files we need to fix. Also, removing selector-max-compound-selectors, max-nesting-depth, selector-max-id stylelint rules from the global configuration can open the doors for other developers to go crazy and write any CSS selector they want. And we shouldn't allow that, if we want to disable specific rules for specific files, we can disable them as per the files.

Hope that answers your question.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Got it @swastikpareek Thanks

&#{civi-page('admin-custom-group')} {
#options table td:last-of-type {
width: 250px;
Expand Down Expand Up @@ -141,12 +142,6 @@
tr {
padding: 0;

&:first-child {
td {
padding-top: 20px;
}
}

&:last-child {
td {
padding-bottom: 20px;
Expand Down
4 changes: 0 additions & 4 deletions scss/civicrm/administer/settings/_option-groups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,6 @@
}
}

.form-layout {
margin: 0 0 10px;
}

h3 + .description {
padding: 20px;
}
Expand Down
4 changes: 4 additions & 0 deletions scss/civicrm/administer/settings/_resource-urls.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
//stylelint-disable selector-max-compound-selectors, max-nesting-depth

&#{civi-page('admin-setting-url')},
&#{civi-page('admin-setting-mapping')},
&#{civi-page('admin-setting-path')},
Expand All @@ -7,6 +9,8 @@
@include civicrm-table;

table:not(.form-layout-compressed) {
border-top: 0;

tr {
> td {
vertical-align: top;
Expand Down
75 changes: 61 additions & 14 deletions scss/civicrm/common/_accordions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,16 @@
border-radius: 0 !important;
}

.crm-accordion-header {
.crm-accordion-header,
.crm-accordion-bold > summary {
@include accordion-header;

&:not(.crm-master-accordion-header) {
border-bottom: 1px solid $crm-grayblue-dark;
font-size: $font-size-base !important;
font-weight: $crm-font-weight-h3;
}

&.crm-master-accordion-header {
background: $brand-primary !important;
border-radius: $border-radius-base $border-radius-base 0 0 !important;
color: $crm-white !important;
font-size: $font-size-h2;
font-weight: $crm-font-weight-h3 !important;
padding: 16px 20px !important;

&::before {
color: $crm-white;
}
}

.crm-close-accordion {
Expand All @@ -41,6 +32,15 @@
}
}
}
// stylelint-disable-next-line selector-no-qualifying-type
details.crm-accordion-bold > .crm-accordion-body {
border: 0;
}

// stylelint-disable-next-line selector-no-qualifying-type
details[class*='-accordion'] {
margin-top: 0;
}

.crm-accordion-wrapper {
border-radius: 0;
Expand All @@ -67,11 +67,49 @@
}
}

.crm-master-accordion-header + .crm-accordion-body {
// repeats above pattern for new markup

details {
border-radius: 0;
margin-bottom: 0;

[open] {
summary {
&::before {
content: '\f107';
}
}
}

&:not([open]) {
summary {
&::before {
content: '\f105';
}
}
}

// stylelint-disable-next-line selector-no-qualifying-type
&.crm-accordion-light:not([open]) {
summary {
border-radius: $border-radius-base !important;
}
}
}

// Remove padding for accordions in accordions
// stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
details details {
padding: 0;
}

.crm-master-accordion-header + .crm-accordion-body,
.crm-accordion-light > .crm-accordion-body {
border-radius: 0 0 $border-radius-base $border-radius-base !important;
}

.crm-accordion-header:not(.crm-master-accordion-header) + .crm-accordion-body {
.crm-accordion-header:not(.crm-master-accordion-header) + .crm-accordion-body,
.crm-accordion-bold > .crm-accordion-body {
box-shadow: $crm-box-shadow-inset;
padding: 15px !important;

Expand All @@ -92,6 +130,8 @@
}
}

// stylelint-enable

.crm-accordion-body {
@extend %no-border-radius;
background: $crm-white;
Expand Down Expand Up @@ -124,11 +164,18 @@
opacity: 1;
}

// stylelint-disable selector-no-qualifying-type
span,
div {
&.description {
display: block;
line-height: 1.5em;
}
}

table.crm-info-panel {
border: 0;
}

// stylelint-enable
}
12 changes: 12 additions & 0 deletions scss/civicrm/common/_modals.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,13 @@
padding: $crm-table-form-cell-padding;
}
}

td,
th {
&:not(.label) {
padding: 4px;
}
}
}

&.no-border {
Expand Down Expand Up @@ -98,6 +105,11 @@
width: calc(100% + #{$crm-standard-gap * 2});
}

details[class*='crm-accordion'] > summary {
margin: 0 -20px;
}

details[class*='crm-accordion'] > summary +.crm-accordion-body,
.crm-accordion-header:not(.crm-master-accordion-header)+.crm-accordion-body {
box-shadow: none;
padding: 20px 0 !important;
Expand Down
22 changes: 18 additions & 4 deletions scss/civicrm/common/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ table {
}
}

// stylelint-disable selector-max-compound-selectors, selector-max-id, selector-no-qualifying-type

%crm-table {
$border-color: $table-border-color;
border: 0;
Expand Down Expand Up @@ -184,10 +186,22 @@ table {
table {
box-shadow: none !important;

&.form-layout-compressed {
tr td {
line-height: initial;
}
&.form-layout-compressed tr td {
line-height: initial;
}
}
}

.crm-form-block {
display: inline-block;
width: 100%;

> .form-layout,
> .form-layout-compressed {
clear: both;

&:first-child {
margin-top: 20px;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion scss/civicrm/contact/_detail.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
padding-top: 10px !important;

// Remove the space from the angular's container
> div:not(.messages.status) {
> div:not(.messages.status):not(.help) {
padding: 0 !important;
}

Expand Down
Loading