Merge branch 'v0.5' into 'main'

Version 5.0

Closes #5, #8, and #7

See merge request extensions/riverlea!3

README.md

@@ -9,7 +9,8 @@ The extension is licensed under [AGPL-3.0](LICENSE.txt).
 - 0.1 - proof-of-concept, Brunswick, empty theme structure doing just two things: for older CMS interfaces enforces a 100% font-size default to cascade the browser default font-size, and demonstrates a 1rem variable on top of that for some Civi body text sizes. The computed font-size of Civi paragraph and table text should show as 16px in Inspector (for standard setups).
 - 0.2 - adds a bunch of css variables for testing/dev, adds the entirity of the current Greenwich Bootstrap 3 build to start cutting it back, and adds a components directory with initial component 'accordions' (with animated exapnd/close + CSS variables). Separate components files will likely be merged when the extension is moving to testing, to reduce http requests.
 - 0.3 - Backdrop, Drupal7 + Seven, Drupal9 + Claro/Seven, Joomla 4, Standalone, WordPress. Loads with two theme variations/streams: Minetta and Walbrook. Does not cover: front-end layouts, < 1000px screens, Joomla 3, other Drupal admin themes, light/dark modes. 
-- 0.4 - CSS files restructure into `/core/css` and `/streams/[stream-name]/css/` with stream variables defined in `[stream-name]/css/_variables.css`. Variables files are version-numbered - 0.4 with this version. Version numbers should only increase when the CSS Variables in these files change name, are removed or added.
+- 0.4 - CSS files restructure into `/core/css` and `/streams/[stream-name]/css/` with stream variables defined in `[stream-name]/css/_variables.css`. Variables files are version-numbered - 0.4 with this version. *Version numbers should only increase when the CSS Variables in these files change name, are removed or added*.
+- 0.5 - Over 50 UI and accessibility issues fixed following testing in CiviCamp Hamburg - with many thanks to Guillaume Sorel, Thomas Renner, Rositza Dikova, Luciano Spiegel & Peter Reck and the organisers - as well as Rich Lott and the Core Team. Instances of `#crm-container` removed or replaced with `.crm-container` which changes some cascade order. Preparation for overwriting other core CiviCRM CSS files from v0.6 which will require CiviCRM 5.75. Version compatibility raised to 5.72 from 5.69 because of Search Kit Builder interface changes: if that interface isn't used then compatibility before 5.69 should be fine.
 
 ## Installation (CLI, Zip)
 
@@ -36,22 +37,50 @@ 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.
+
+### Core directory
+
+Contains CSS files in:
+- In the **core/css** directory are theme files marked with an underscore:
+  - 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/_fixes.css - CSS that’s necessary *for now* but one day could go.
+  - core/css/_core.css - links to the UI components in the components directory:
+- in the **components** directory are reusable anywhere UI elements, such as `_accordions` or `_tables.css`; 
+- Also in the **core/css** directory are over-rides for core CiviCRM CSS files. such as `admin.css` or `dashboard.css`;
+
+## Roadmap
+
+- Restructure files to overwrite CiviCRM core & angular module CSS Frontend following (https://github.com/civicrm/civicrm-core/pull/30397). This should reduce overall CSS loads/file size and the use of `!Important` declarations. Will require CiviCRM 5.75.
+- Front-end testing & fixes.
+- Document streams.
+- Migrate Finsbury Park (and others) to a stream.
+
+v0.7 - Front-end
+
+
 ## 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 will be deleted when you upgrade an extension so keep a copy of your changes. Streams are also going to keep changing during alpha stage, so branched streams will go out of sync with the core variables - so don't use other than for testing/exploration, 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)'.
+2. In riverlea.php add a theme array to the function `riverlea_civicrm_themes(&$themes)`.
 3. Edit /streams/[streamname]/css/_variables.css with your custom css variables. You can link to other CSS files in this file.
 
-E.g. to add a stream called "System 7", you would name the directory 'system7', and add the following:
+E.g. to add a stream called "Vimur", you would name the directory 'vimur', and add the following:
 
 ```
  function riverlea_civicrm_themes(&$themes) {
   $themes['minetta'] = array(
     'ext' => 'riverlea',
-    'title' => 'Riverlea: System 7',
-    'prefix' => 'streams/system7/',
+    'title' => 'Riverlea: Vimur',
+    'prefix' => 'streams/vimur/',
   );
   $themes['minetta'] = array(
     'ext' => 'riverlea',

core/css/_base.css

@@ -7,12 +7,10 @@
 .crm-container *::after {
     box-sizing: border-box;
 }
-#crm-container .hiddenElement,
 .crm-container .hiddenElement,
 .crm-container .collapse {
-	display: none;
+	display: none !important /* needs to hide items further down the cascade */;
 } 
-#crm-container .clear,
 .crm-container .clear {
 	clear: both;
 }
@@ -37,10 +35,6 @@
 .crm-container tr:focus {
 	background-color: transparent;
 }
-#crm-container .clear,
-.crm-container .clear {
-	clear: both;
-}
 /* Remove list styles (bullets/numbers) */
 .crm-container ol,
 .crm-container ul,
@@ -52,11 +46,6 @@
     max-inline-size: 100%;
     max-block-size: 100%;
 }
-#crm-container .hiddenElement,
-.crm-container .hiddenElement,
-.crm-container .collapse {
-    display: none;
-}
 .crm-container table {
     border-collapse: collapse;
 }
@@ -68,9 +57,12 @@
     padding: 0;
 }
 .crm-container .ui-widget,
-.crm-container .ui-widget:where(input,select,textarea,button) {
-    font-family: inherit;
-    font-size: inherit;
+.crm-container .ui-widget input, 
+.crm-container .ui-widget select, 
+.crm-container .ui-widget textarea, 
+.crm-container .ui-widget button {
+    font-family: inherit !important;
+    font-size: inherit !important;
 }
 .crm-container .ui-button-icon-only .ui-icon {
     position: initial;
@@ -112,7 +104,7 @@
 
 /* Set Default Type */
 
-.crm-container, #crm-container {
+.crm-container {
     font-family: var(--crm-font);
     font-size: var(--crm-font-size);
     color: var(--crm-c-text);
@@ -124,6 +116,7 @@
 .crm-container p,
 .crm-container ul {
     font-size: var(--crm-font-size);
+    line-height: var(--crm-type-line-height);
     color: var(--crm-c-text);
 }
 
@@ -167,7 +160,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, 
@@ -177,19 +169,54 @@
 .crm-contact-deceased, 
 .crm-container .status-warning,
 .crm-container .crm-error,
-.crm-container td.tasklist a:link {
-    color: var(--crm-c-alert) !important;
-}
-#crm-container td.tasklist a:visited {
+.crm-container td.tasklist a:link,
+#bootstrap-theme .has-error .help-block, 
+#bootstrap-theme .has-error .control-label, 
+#bootstrap-theme .has-error .radio, 
+#bootstrap-theme .has-error .checkbox, 
+#bootstrap-theme .has-error .radio-inline, 
+#bootstrap-theme .has-error .checkbox-inline, 
+#bootstrap-theme .has-error.radio label, 
+#bootstrap-theme .has-error.checkbox label, 
+#bootstrap-theme .has-error.radio-inline label, 
+#bootstrap-theme .has-error.checkbox-inline label {
+    color: var(--crm-c-alert);
+}
+.crm-container .font-red {
+    color: var(--crm-c-red-dark);
+}
+.crm-container td.tasklist a:visited,
+#bootstrap-theme .has-success .help-block, 
+#bootstrap-theme .has-success .control-label, 
+#bootstrap-theme .has-success .radio, 
+#bootstrap-theme .has-success .checkbox, 
+#bootstrap-theme .has-success .radio-inline, 
+#bootstrap-theme .has-success .checkbox-inline, 
+#bootstrap-theme .has-success.radio label, 
+#bootstrap-theme .has-success.checkbox label, 
+#bootstrap-theme .has-success.radio-inline label, 
+#bootstrap-theme .has-success.checkbox-inline label {
     color: var(--crm-c-success);
 }
+#bootstrap-theme .has-warning .help-block, 
+#bootstrap-theme .has-warning .control-label, 
+#bootstrap-theme .has-warning .radio, 
+#bootstrap-theme .has-warning .checkbox, 
+#bootstrap-theme .has-warning .radio-inline, 
+#bootstrap-theme .has-warning .checkbox-inline, 
+#bootstrap-theme .has-warning.radio label, 
+#bootstrap-theme .has-warning.checkbox label, 
+#bootstrap-theme .has-warning.radio-inline label, 
+#bootstrap-theme .has-warning.checkbox-inline label {
+	color: var(--crm-c-warning);
+}
 .crm-container .disabled, 
 .crm-container .crm-disabled, 
 .crm-container .disabled *, 
 .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 */
@@ -260,40 +287,43 @@
 	background-color: var(--crm-c-success);
     color: var(--crm-c-success-text);
 }
-#crm-container a.bg-success:hover, 
-#crm-container a.bg-success:focus {
+.crm-container a.bg-success:hover, 
+.crm-container a.bg-success:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-success);
 }
-#crm-container .bg-info {
+.crm-container .bg-info {
 	background-color: var(--crm-c-info);
     color: var(--crm-c-info-text);
 }
-#crm-container a.bg-info:hover, 
-#crm-container a.bg-info:focus {
+.crm-container a.bg-info:hover, 
+.crm-container a.bg-info:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-info-text);
 }
-#crm-container .bg-warning {
+.crm-container .bg-warning {
 	background-color: var(--crm-c-warning);
-    color: var(--crm-c-warning-text);
+    color: var(--crm-c-warning-text) !important /* FormBuilder vs .disabled */;
 }
-#crm-container a.bg-warning:hover, 
-#crm-container a.bg-warning:focus {
+.crm-container a.bg-warning:hover, 
+.crm-container a.bg-warning:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-warning);
 }
-#crm-container .bg-danger {
+.crm-container .bg-danger {
 	background-color: var(--crm-c-alert);
     color: var(--crm-c-alert-text);
 }
-#crm-container a.bg-danger:hover, 
-#crm-container a.bg-danger:focus {
+.crm-container a.bg-danger:hover, 
+.crm-container a.bg-danger:focus {
     background: linear-gradient(to top,rgba(0, 0, 0, 0.125),rgba(0, 0, 0, 0.125)) var(--crm-c-alert);
 }
+.crm-container code, 
+.crm-container kbd, 
+.crm-container samp,
 .crm-container pre {
 	display: block;
 	padding: var(--crm-padding-small);
 	margin: 0 0 var(--crm-padding-small);
-	font-size: var(--crm-font-size);
-	line-height: 1.4;
+	font-size: var(--crm-font-size) !important /* vs inline css on api3 */;
+	line-height: 1.4  !important /* vs inline css on api3 */;
 	color: var(--crm-c-text);
 	word-break: break-all;
 	word-wrap: break-word;
@@ -336,7 +366,7 @@
    POSITION
 *******************/
 
-#crm-container {
+#crm-container { /* applied to #crm not .crm to apply only once */
 	max-width: 100%;
 	padding: var(--crm-page-padding);
 }
@@ -348,6 +378,21 @@
     flex: 1;
     min-width: 0;
 }
+.crm-container .crm-flex-1 {
+    flex: 1;
+}
+.crm-container .crm-flex-2 {
+    flex: 2;
+}
+.crm-container .crm-flex-3 {
+    flex: 3;
+}
+.crm-container .crm-flex-4 {
+    flex: 4;
+}
+.crm-container .crm-flex-5 {
+    flex: 5;
+}
 .crm-container .css_right,
 .crm-container .float-right {
     float: right;