From 90c7e7a422e26a790276d511097dc64330fec09b Mon Sep 17 00:00:00 2001 From: Nicol Date: Tue, 11 Jun 2024 12:16:29 +0100 Subject: [PATCH] Extensions table fixes in #5 and #11, create overwrite file for admin.css, some more docs in readme --- ext/riverlea/README.md | 22 +++- ext/riverlea/core/css/_base.css | 8 +- ext/riverlea/core/css/_cms.css | 1 + ext/riverlea/core/css/_fixes.css | 17 +-- ext/riverlea/core/css/archive/_admin.css | 71 ------------ ext/riverlea/core/css/components/_tables.css | 2 +- ext/riverlea/core/css/contactSummary.css | 3 - ext/riverlea/core/css/sections/_admin.css | 103 ++++++++++++++++++ ext/riverlea/streams/empty/admin.css | 1 + .../streams/minetta/css/_variables.css | 8 +- ext/riverlea/streams/minetta/css/admin.css | 1 + .../streams/walbrook/css/_variables.css | 2 +- ext/riverlea/streams/walbrook/css/admin.css | 2 +- 13 files changed, 144 insertions(+), 97 deletions(-) delete mode 100644 ext/riverlea/core/css/archive/_admin.css delete mode 100644 ext/riverlea/core/css/contactSummary.css create mode 100644 ext/riverlea/core/css/sections/_admin.css create mode 100644 ext/riverlea/streams/empty/admin.css create mode 100644 ext/riverlea/streams/minetta/css/admin.css diff --git a/ext/riverlea/README.md b/ext/riverlea/README.md index a3d3cc204ebc..5753515783cf 100755 --- a/ext/riverlea/README.md +++ b/ext/riverlea/README.md @@ -37,9 +37,29 @@ cv en riverlea After installing the extension, go to Nav menu > Administer > Customize Data and Screens > Display Preferences, and select which theme variation/stream you want (they start with the name 'Riverlea'). +## File Structure + +### Stream directories +Each ‘stream’ directory must contain afurther directory `css` which must contain `civicrm.css` and `_variables.css` as well as custom files such as fonts or images. + +They can also include replacement files for the Civi Core CSS files excluded in `riverlea.theme.php`. These CSS files only load when called by a template file, e.g. the Contact Dashboard template calls contactSummary.css, which then points to a file in `core/css/sections` + +### Core directory + +Contains CSS files in: +- the **components** directory for reusable anywhere UI elements, such as `_accordions` or `_tables.css`; +- the **sections** directory for section-specific files called by templates, e.g. APIExplorer or the home dashboard; +- and the following in the **root** folder: + - core/css/_base.css – resets, basic type, colours, links, positioning + - core/css/_bootstrap.css – a Bootstrap subset + - core/css/_bootstrap3.css – Bootstrap3, currently being migrated to other parts of the theme + - core/css/_cms.css – resets and fixes specific to different CMSs + - core/css/_core.css - links to the UI components in the components directory. + - core/css/_fixes.css - CSS that’s necessary *for now* but one day could go. + ## Creating new 'streams' -NB: this is an early alpha level release and the variables files are likely to change, so branched streams may go out of sync with the core variables. Compare the version number +NB: Streams are going to keep changing during alpha stage, so branched streams will go out of sync with the core variables - don't use other than for testing/exploration at present, and always compare the version number of the _variables.css file. 1. Duplicate the directory 'empty' in /streams/ and rename it the name of the stream. 2. In riverlea.php add a theme array to the function 'riverlea_civicrm_themes(&$themes)'. diff --git a/ext/riverlea/core/css/_base.css b/ext/riverlea/core/css/_base.css index 78f4ef6790cb..2b0a49dd2117 100755 --- a/ext/riverlea/core/css/_base.css +++ b/ext/riverlea/core/css/_base.css @@ -156,7 +156,6 @@ .crm-container .del, .crm-container .crm-is_deleted, .crm-container table.caseSelector td.status-urgent, -.crm-container .font-red, .crm-container p.error, .crm-container .status-removed, .crm-container .status-overdue, @@ -167,7 +166,10 @@ .crm-container .status-warning, .crm-container .crm-error, .crm-container td.tasklist a:link { - color: var(--crm-c-alert) !important; + color: var(--crm-c-alert); +} +.crm-container .font-red { + color: var(--crm-c-red-dark); } .crm-container td.tasklist a:visited { color: var(--crm-c-success); @@ -178,7 +180,7 @@ .crm-container .cancelled, .crm-container .cancelled td, .crm-container li.disabled a.ui-tabs-anchor { - color: var(--crm-c-inactive) !important; + color: var(--crm-c-inactive); } /* BS3 type styles */ diff --git a/ext/riverlea/core/css/_cms.css b/ext/riverlea/core/css/_cms.css index 5ff64bda6c44..684afdddb8ce 100755 --- a/ext/riverlea/core/css/_cms.css +++ b/ext/riverlea/core/css/_cms.css @@ -130,6 +130,7 @@ body.wp-admin #wpcontent { } body.wp-admin li { margin: 0; /* resets WP li bottom margin */ + list-style: none; } body.wp-admin { --crm-page-padding: 1rem 2rem; diff --git a/ext/riverlea/core/css/_fixes.css b/ext/riverlea/core/css/_fixes.css index 8f0d5d97abdf..05e8e2831b0d 100755 --- a/ext/riverlea/core/css/_fixes.css +++ b/ext/riverlea/core/css/_fixes.css @@ -313,6 +313,9 @@ body[class*="page-civicrm-report-"] #report-tab-order-by-elements #optionFieldLi .crm-container .ui-tabs ul.crm-extensions-tabs-list a em { display: none; } +#crm-status-list { + box-shadow: var(--crm-block-shadow); +} /****************** PAGES @@ -601,20 +604,6 @@ div.crm-summary-contactname-block + .crm-actions-ribbon { justify-content: flex-end; padding: 0 0 var(--crm-l) 0; } -/* extensions */ -.crm-container #extensions-main, -.crm-container #extensions-addnew { - padding: 0; -} -.crm-container #extensions table.dataTable summary { - padding: 0; - background-color: unset; - color: var(--crm-c-text); - font-weight: unset; -} -.crm-container #extensions table.dataTable summary a { - color: var(--crm-c-link); -} /* New mailing */ .crm-container .crmMailing-preview { diff --git a/ext/riverlea/core/css/archive/_admin.css b/ext/riverlea/core/css/archive/_admin.css deleted file mode 100644 index 9b4f6a7d8afb..000000000000 --- a/ext/riverlea/core/css/archive/_admin.css +++ /dev/null @@ -1,71 +0,0 @@ -/* civicrm-core/css/admin.css - branched on 7 Jun 24 */ - -/* Styles specific to admin pages/forms */ - -/* Config Task List */ -#crm-container td.tasklist a { - font-weight: var(--crm-bold-weight); - font-family: var(--crm-font-bold); -} -#crm-container table.selector td.tasklist { - border-right: 1px solid #dddddd; - width: 20%; -} -#crm-container td.tasklist a:link { - color: var(--crm-c-red); -} -#crm-container td.tasklist a:visited { - color: var(--crm-c-green); -} - -/* Class for successful upgrade */ -.crm-container .upgrade-success { - background-color: var(--crm-alert-background-help); - color: var(--crm-alert-text-help); -} - -/* Extension management */ -/* .crm-container .extension-upgradable { - background-color: #ffffcc !important; -} -.crm-container .extension-installed { - background-color: #ddffdd !important; -} */ -.crm-container .extension-missing { - color: var(--crm-c-warning); -} -#crm-container .crm-extensions-upgrade { - background: var(--crm-alert-background-warning); - border: 1px solid var(--crm-alert-border-warning); - padding: var(--crm-padding-small); - border-radius: var(--crm-roundness); -} -.crm-container .crm-extensions-version { - white-space: nowrap; -} -.crm-container .crm-extensions-stage { - margin-left: var(--crm-s); -} -.crm-container .crm-extensions-stage.fa-flask { - color: var(--crm-c-warning); -} -.crm-container .crm-extensions-stage.fa-check-circle { - color: var(--crm-c-success); -} - - -@media screen and (min-width: 480px) { - #crm-container .admin-section-items { - column-count: 2; - column-gap: 1em; - } - #crm-container .admin-section-items dl { - -webkit-column-break-inside: avoid; - page-break-inside: avoid; - break-inside: avoid; - margin: 0 1em; - } - #crm-container .admin-section-items dt { - font-weight: bold; - } -} diff --git a/ext/riverlea/core/css/components/_tables.css b/ext/riverlea/core/css/components/_tables.css index 25f56b79a2a0..493a22e3cd91 100644 --- a/ext/riverlea/core/css/components/_tables.css +++ b/ext/riverlea/core/css/components/_tables.css @@ -75,7 +75,7 @@ table.dataTable.order-column.stripe tbody tr.extension-installed.odd > .sorting_ } table.dataTable.display tbody tr.extension-installed.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.extension-installed.even > .sorting_1 { - background: linear-gradient(to top,rgba(0, 0, 0, 0.05),rgba(0, 0, 0, 0.05)) var(c-green-light); + background: linear-gradient(to top,rgba(0, 0, 0, 0.05),rgba(0, 0, 0, 0.05)) var(--crm-c-green-light); } .crm-container td, .crm-container table.dataTable thead td { diff --git a/ext/riverlea/core/css/contactSummary.css b/ext/riverlea/core/css/contactSummary.css deleted file mode 100644 index 562e5e5eb328..000000000000 --- a/ext/riverlea/core/css/contactSummary.css +++ /dev/null @@ -1,3 +0,0 @@ -.crm-container { - border: 2px solid red; -} \ No newline at end of file diff --git a/ext/riverlea/core/css/sections/_admin.css b/ext/riverlea/core/css/sections/_admin.css new file mode 100644 index 000000000000..0ded501e1bb4 --- /dev/null +++ b/ext/riverlea/core/css/sections/_admin.css @@ -0,0 +1,103 @@ +/* civicrm-core/css/admin.css - branched on 7 Jun 24 + Styles specific to certain admin pages/forms */ + +/* Config Task List */ +.crm-container td.tasklist a { + font-weight: var(--crm-bold-weight); + font-family: var(--crm-font-bold); +} +.crm-container table.selector td.tasklist { + border-right: var(--crm-table-row-border); + width: 20%; +} +.crm-container td.tasklist a:link { + color: var(--crm-c-red); +} +.crm-container td.tasklist a:visited { + color: var(--crm-c-green); +} + +/* Class for successful upgrade */ +.crm-container .upgrade-success { + background-color: var(--crm-alert-background-help); + color: var(--crm-alert-text-help); +} + +/* Extension management */ +.crm-container #mainTabContainer:has(.crm-extensions-tabs-list) { + box-shadow: var(--crm-block-shadow); + margin-top: var(--crm-padding-reg); +} +.crm-container #extensions-main, +.crm-container #extensions-addnew.ui-tabs-panel { + padding: 0; + border: var(--crm-tabs-border); + border-top: 0; +} +.crm-container #extensions-main table.dataTable, +.crm-container #extensions-addnew table.dataTable { + box-shadow: none; + border: 0 solid transparent; +} +.crm-container #extensions-main table.dataTable th, +.crm-container #extensions-addnew table.dataTable th { + background-color: var(--crm-tab-bg-active); + min-width: max-content; + white-space: nowrap; /* prevents wrapping of sort icons with oversized descriptions */ +} +.crm-container #extensions-main table.dataTable summary, +.crm-container #extensions-addnew table.dataTable summary { + padding: 0; + background-color: unset; + color: var(--crm-c-text); + font-weight: unset; +} +.crm-container #extensions table.dataTable summary a, +.crm-container #extensions-addnew table.dataTable summary a { + color: var(--crm-c-link); +} +.crm-container #extensions table.dataTable a.crm-hover-button, +.crm-container #extensions-addnew table.dataTable a.crm-hover-button { + padding: 0 var(--crm-m1); +} +.crm-container .disabled .crm-hover-button:hover, +.crm-container .disabled .crm-hover-button:focus { + color: var(--crm-c-secondary-text); +} +.crm-container .extension-missing { + color: var(--crm-c-warning); +} +.crm-container .crm-extensions-upgrade { + background: var(--crm-alert-background-warning); + border: 1px solid var(--crm-alert-border-warning); + padding: var(--crm-padding-small); + border-radius: var(--crm-roundness); +} +.crm-container .crm-extensions-version { + white-space: nowrap; +} +.crm-container .crm-extensions-stage { + margin-left: var(--crm-s); +} +.crm-container .crm-extensions-stage.fa-flask { + color: var(--crm-c-warning); +} +.crm-container .crm-extensions-stage.fa-check-circle { + color: var(--crm-c-success); +} + +@media screen and (min-width: 480px) { + #crm-container .admin-section-items { + column-count: 2; + column-gap: 1em; + } + #crm-container .admin-section-items dl { + -webkit-column-break-inside: avoid; + page-break-inside: avoid; + break-inside: avoid; + margin: 0 1em; + } + #crm-container .admin-section-items dt { + font-weight: bold; + } +} diff --git a/ext/riverlea/streams/empty/admin.css b/ext/riverlea/streams/empty/admin.css new file mode 100644 index 000000000000..8ae56fbe9d48 --- /dev/null +++ b/ext/riverlea/streams/empty/admin.css @@ -0,0 +1 @@ +@import url(../../../core/css/sections/_admin.css) \ No newline at end of file diff --git a/ext/riverlea/streams/minetta/css/_variables.css b/ext/riverlea/streams/minetta/css/_variables.css index a4e392112118..9a5d11a35c28 100644 --- a/ext/riverlea/streams/minetta/css/_variables.css +++ b/ext/riverlea/streams/minetta/css/_variables.css @@ -1,5 +1,9 @@ -/* River Lea v0.4. - Branch: Minetta (after Minetta Creek, which runs under Greenwich, New York) */ +/* + Name: Minetta; + Riverlea version: 0.5; + Front, back or both: back; + Description: Generic CiviCRM UI, somewhat familiar to users of CiviCRM since 2014. Named after Minetta Creek, which runs under Greenwich, New York; +*/ :root { diff --git a/ext/riverlea/streams/minetta/css/admin.css b/ext/riverlea/streams/minetta/css/admin.css new file mode 100644 index 000000000000..8ae56fbe9d48 --- /dev/null +++ b/ext/riverlea/streams/minetta/css/admin.css @@ -0,0 +1 @@ +@import url(../../../core/css/sections/_admin.css) \ No newline at end of file diff --git a/ext/riverlea/streams/walbrook/css/_variables.css b/ext/riverlea/streams/walbrook/css/_variables.css index cd1106320a9a..eca8f2236015 100755 --- a/ext/riverlea/streams/walbrook/css/_variables.css +++ b/ext/riverlea/streams/walbrook/css/_variables.css @@ -205,7 +205,7 @@ color-scheme: light dark; --crm-alert-background-help: var(--crm-c-green-light); --crm-alert-border-help: var(--crm-c-green); --crm-alert-text-help: var(--crm-c-text); ---crm-alert-background-warning: var(--crm-amber-light); +--crm-alert-background-warning: var(--crm-c-amber-light); --crm-alert-border-warning: var(--crm-c-amber); --crm-alert-text-warning: var(--crm-c-text); --crm-alert-background-info: var(--crm-c-primary); diff --git a/ext/riverlea/streams/walbrook/css/admin.css b/ext/riverlea/streams/walbrook/css/admin.css index 6bf90b3573a6..8ae56fbe9d48 100644 --- a/ext/riverlea/streams/walbrook/css/admin.css +++ b/ext/riverlea/streams/walbrook/css/admin.css @@ -1 +1 @@ -@import url(../../../core/css/archive/_admin.css) \ No newline at end of file +@import url(../../../core/css/sections/_admin.css) \ No newline at end of file