feat(views): restructured various page elements and improved css

Elgg · Apr 3, 2024 · c5c4663 · c5c4663
1 parent b7286a6
commit c5c4663
Show file tree

Hide file tree

Showing 81 changed files with 502 additions and 968 deletions.
diff --git a/docs/appendix/upgrade-notes/5.x-to-6.0.rst b/docs/appendix/upgrade-notes/5.x-to-6.0.rst
@@ -93,7 +93,19 @@ Most notable changes are the following:
 
 * H1 is always the page title (and no longer the logo / site name)
 * Modules (info, sidebar, widgets) use the H2 heading
-* H3 headings on entity / relationship / annotation summary titles have been replaced by a regular text element 
+* H3 headings on entity / relationship / annotation summary titles have been replaced by a regular text element
+
+CSS and HTML structure changes
+------------------------------
+
+The HTML structure of pages have been changed. Entity summaries and full view entity pages have been wrapped in an ``article`` element.
+Sidebar elements now use the ``aside`` html element. Modules (like widgets of info-modules) now use a ``section`` element instead of a ``div``.
+Duplicate css classes on the same element like ``elgg-body`` and ``elgg-layout-body`` have been removed.
+
+Elgg provided some helper classes for creating a grid layout (like ``elgg-grid``, ``elgg-col``, ``elgg-row``).
+These helper classes have been removed. You can do all those things with regular css like ``display: grid``.
+
+Some other styling changes include a new background color for the body, improved styling of breadcrumbs and a more basic owner block chip.
 
 Changes in functions
 --------------------

diff --git a/engine/lib/elgglib.php b/engine/lib/elgglib.php
@@ -269,18 +269,19 @@ function elgg_extract($key, $array, $default = null, bool $strict = true) {
  * @param array           $array       Source array
  * @param string|string[] $existing    Existing name(s)
  * @param string          $extract_key Key to extract new classes from
+ *
  * @return string[]
  *
  * @since 2.3.0
  */
-function elgg_extract_class(array $array, $existing = [], $extract_key = 'class'): array {
+function elgg_extract_class(array $array, array|string $existing = [], string $extract_key = 'class'): array {
 	$existing = empty($existing) ? [] : (array) $existing;
 
 	$merge = (array) elgg_extract($extract_key, $array, []);
 
 	array_splice($existing, count($existing), 0, $merge);
 
-	return array_values(array_unique($existing));
+	return array_values(array_filter(array_unique($existing)));
 }
 
 /**

diff --git a/engine/lib/views.php b/engine/lib/views.php
@@ -1314,10 +1314,10 @@ function elgg_views_boot(): void {
 
 	elgg_require_css('elgg');
 
-	elgg_register_esm('cropperjs', elgg_get_simplecache_url('cropperjs/cropper.min.js'));
-	elgg_register_esm('jquery', elgg_get_simplecache_url('jquery.js'));
+	elgg_register_esm('cropperjs', elgg_get_simplecache_url('cropperjs/cropper.esm.js'));
+	elgg_register_esm('jquery', elgg_get_simplecache_url('elgg/jquery.mjs'));
 	elgg_register_esm('jquery-ui', elgg_get_simplecache_url('jquery-ui.js'));
-	elgg_register_esm('jquery-cropper/jquery-cropper', elgg_get_simplecache_url('jquery-cropper/jquery-cropper.min.js'));
+	elgg_register_esm('jquery-cropper/jquery-cropper', elgg_get_simplecache_url('jquery-cropper/jquery-cropper.esm.js'));
 
 	elgg_import_esm('elgg');
 	elgg_import_esm('elgg/lightbox');

diff --git a/engine/theme.php b/engine/theme.php
@@ -6,7 +6,8 @@
 
 return [
 	// layout and shell
-	'body-background-color' => '#FFFFFF',
+	'body-background-color' => '#f3f3f3',
+	'page-section-max-width' => '90rem',
 	'walled-garden-background-image' => 'graphics/walled_garden.jpg',
 
 	// Typography
@@ -32,7 +33,7 @@
 	'text-color-highlight' => '#0078ac',
 
 	'background-color-soft' => '#fafafa',
-	'background-color-mild' => '#e6e6ea',
+	'background-color-mild' => '#f3f3f3',
 	'background-color-strong' => '#cfcfd2',
 	'background-color-highlight' => '#0078ac',
 
@@ -84,8 +85,6 @@
 	'topbar-indicator' => '#faa51a',
 
 	// breakpoints
-	'tablet' => '50rem',
-	'desktop' => '80rem',
 	'media-phone-up' => 'screen and (min-width: 30rem)',
 	'media-tablet-up' => 'screen and (min-width: 50rem)',
 	'media-desktop-up' => 'screen and (min-width: 80rem)',

diff --git a/mod/custom_index/elgg-plugin.php b/mod/custom_index/elgg-plugin.php
@@ -22,4 +22,9 @@
 		'module_groups_enabled' => 1,
 		'module_users_enabled' => 1,
 	],
+	'view_extensions' => [
+		'elgg.css' => [
+			'custom_index/content.css' => [],
+		],
+	],
 ];
diff --git a/mod/custom_index/views/default/custom_index/content.css b/mod/custom_index/views/default/custom_index/content.css
@@ -0,0 +1,7 @@
+@media $(media-tablet-up) {
+	.custom-index {
+		display: grid;
+		column-gap: 2rem;
+		grid-template-columns: 1fr 1fr;
+	}
+}
diff --git a/mod/custom_index/views/default/custom_index/content.php b/mod/custom_index/views/default/custom_index/content.php
@@ -1,9 +1,6 @@
 <?php
 /**
- * Elgg custom index layout
- *
- * This is just a helper view to make it easier to use Elgg's
- * page-rendering helper functions like elgg_view_page.
+ * Elgg custom index page contents
  */
 
 $plugin = elgg_get_plugin_from_id('custom_index');
@@ -20,17 +17,15 @@
 	], $extras);
 };
 
-$modules = [];
-
 if ($is_module_enabled('about')) {
 	$about = $plugin->about;
 	if (!empty($about)) {
-		$modules[] = elgg_view_module('featured', '', $about);
+		echo elgg_view_module('info', '', $about);
 	}
 }
 
 if (!elgg_is_logged_in() && $is_module_enabled('register') && elgg_get_config('allow_registration')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('register'), elgg_view_form('register', [
+	echo elgg_view_module('info', elgg_echo('register'), elgg_view_form('register', [
 		'sticky_enabled' => true,
 		'sticky_ignored_fields' => [
 			'password',
@@ -40,59 +35,34 @@
 }
 
 if (!elgg_is_logged_in() && $is_module_enabled('login')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('login'), elgg_view_form('login'));
+	echo elgg_view_module('info', elgg_echo('login'), elgg_view_form('login'));
 }
 
-// activity
 if (elgg_is_active_plugin('activity') && $is_module_enabled('activity')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('collection:river'), elgg_list_river([
+	echo elgg_view_module('info', elgg_echo('collection:river'), elgg_list_river([
 		'distinct' => false,
 		'no_results' => elgg_echo('river:none'),
 		'limit' => 5,
 		'pagination' => false,
 	]));
 }
 
-// files
 if (elgg_is_active_plugin('file') && $is_module_enabled('file')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('collection:object:file'), elgg_list_entities($get_list_params(['subtype' => 'file'])));
+	echo elgg_view_module('info', elgg_echo('collection:object:file'), elgg_list_entities($get_list_params(['subtype' => 'file'])));
 }
 
-// groups
 if (elgg_is_active_plugin('groups') && $is_module_enabled('groups')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('collection:group'), elgg_list_entities($get_list_params(['type' => 'group'])));
+	echo elgg_view_module('info', elgg_echo('collection:group'), elgg_list_entities($get_list_params(['type' => 'group'])));
 }
 
 if ($is_module_enabled('users')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('collection:user'), elgg_list_entities($get_list_params(['type' => 'user'])));
+	echo elgg_view_module('info', elgg_echo('collection:user'), elgg_list_entities($get_list_params(['type' => 'user'])));
 }
 
-// groups
 if (elgg_is_active_plugin('blog') && $is_module_enabled('blog')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('collection:object:blog'), elgg_list_entities($get_list_params(['subtype' => 'blog'])));
+	echo elgg_view_module('info', elgg_echo('collection:object:blog'), elgg_list_entities($get_list_params(['subtype' => 'blog'])));
 }
 
-// files
 if (elgg_is_active_plugin('bookmarks') && $is_module_enabled('bookmarks')) {
-	$modules[] = elgg_view_module('featured', elgg_echo('collection:object:bookmarks'), elgg_list_entities($get_list_params(['subtype' => 'bookmarks'])));
-}
-
-$left = '';
-$right = '';
-
-// spread modules evenly
-foreach ($modules as $index => $module) {
-	if ($index % 2 == 0) {
-		$left .= $module;
-	} else {
-		$right .= $module;
-	}
+	echo elgg_view_module('info', elgg_echo('collection:object:bookmarks'), elgg_list_entities($get_list_params(['subtype' => 'bookmarks'])));
 }
-
-$left .= elgg_view('index/lefthandside');
-$right .= elgg_view('index/righthandside');
-
-$left = elgg_format_element('div', ['class' => ['elgg-col', 'elgg-col-1of2', 'custom-index-col1']], elgg_format_element('div', ['class' => 'elgg-inner'], $left));
-$right = elgg_format_element('div', ['class' => ['elgg-col', 'elgg-col-2of2', 'custom-index-col2']], elgg_format_element('div', ['class' => 'elgg-inner'], $right));
-
-echo elgg_format_element('div', ['class' => ['custom-index', 'elgg-main', 'elgg-grid']], $left . $right);
diff --git a/mod/custom_index/views/default/resources/index.php b/mod/custom_index/views/default/resources/index.php
@@ -12,7 +12,9 @@
 	$title = elgg_echo('welcome');
 }
 
+$content = elgg_format_element('div', ['class' => ['custom-index']], elgg_view('custom_index/content', $vars));
+
 echo elgg_view_page($title, [
-	'content' => elgg_view('custom_index/content', $vars),
+	'content' => $content,
 	'sidebar' => false,
 ]);
diff --git a/mod/dashboard/views/default/resources/dashboard.php b/mod/dashboard/views/default/resources/dashboard.php
@@ -2,17 +2,13 @@
 
 elgg_set_page_owner_guid(elgg_get_logged_in_user_guid());
 
-$content = elgg_view_layout('widgets', [
-	'num_columns' => 3,
-	'show_access' => false,
-	'no_widgets' => function () {
-		echo elgg_view('dashboard/blurb');
-	},
-]);
-
 echo elgg_view_page(elgg_echo('dashboard'), [
-	'title' => false,
 	'sidebar' => false,
-	'content' => $content,
-	'header' => false,
+	'content' => elgg_view_layout('widgets', [
+		'num_columns' => 3,
+		'show_access' => false,
+		'no_widgets' => function () {
+			echo elgg_view('dashboard/blurb');
+		},
+	]),
 ]);
diff --git a/mod/externalpages/views/default/forms/expages/edit.php b/mod/externalpages/views/default/forms/expages/edit.php
@@ -56,7 +56,7 @@
 	'fields' => [
 		[
 			'#type' => 'submit',
-			'value' => elgg_echo('save'),
+			'text' => elgg_echo('save'),
 		],
 		[
 			'#html' => elgg_view('output/url', [

diff --git a/mod/groups/views/default/groups/groups.css b/mod/groups/views/default/groups/groups.css
@@ -17,16 +17,6 @@
 	}
 }
 
-.elgg-sidebar .elgg-listing-summary-subtitle {
-	.groups-membership, .groups-members {
-		display: block;
-	}
-}
-
-.groups-widget-viewall {
-	font-size: 85%;
-}
-
 #groups-tools {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));

diff --git a/mod/groups/views/default/groups/profile/closed_membership.php b/mod/groups/views/default/groups/profile/closed_membership.php
@@ -8,4 +8,4 @@
 	$output .= ' ' . elgg_echo('groups:closedgroup:request');
 }
 
-echo elgg_view_message('notice', $output, ['class' => 'mtl']);
+echo elgg_view_message('notice', $output, ['class' => 'mtl', 'title' => false]);
diff --git a/mod/groups/views/default/groups/profile/membersonly_closed.php b/mod/groups/views/default/groups/profile/membersonly_closed.php
@@ -9,4 +9,4 @@
 	$output .= ' ' . elgg_echo('groups:closedgroup:request');
 }
 
-echo elgg_view_message('notice', $output, ['class' => 'mtl']);
+echo elgg_view_message('notice', $output, ['class' => 'mtl', 'title' => false]);
diff --git a/mod/groups/views/default/groups/profile/membersonly_open.php b/mod/groups/views/default/groups/profile/membersonly_open.php
@@ -9,4 +9,4 @@
 	$output .= ' ' . elgg_echo('groups:opengroup:membersonly:join');
 }
 
-echo elgg_view_message('notice', $output, ['class' => 'mtl']);
+echo elgg_view_message('notice', $output, ['class' => 'mtl', 'title' => false]);
diff --git a/mod/groups/views/default/groups/profile/module.php b/mod/groups/views/default/groups/profile/module.php
@@ -41,12 +41,9 @@
 }
 
 if (!empty($all_link)) {
-	$menu = elgg_format_element('span', [
-		'class' => 'groups-widget-viewall',
-	], $all_link);
+	$menu = elgg_format_element('span', ['class' => 'elgg-quiet'], $all_link);
 }
 
-// content
 $content = elgg_extract('content', $vars);
 if (!isset($content) && $can_default) {
 	elgg_push_context('widgets');

diff --git a/mod/groups/views/default/groups/profile/summary.php b/mod/groups/views/default/groups/profile/summary.php
@@ -8,22 +8,21 @@
  */
 
 $group = elgg_extract('entity', $vars);
-if (!($group instanceof \ElggGroup)) {
+if (!$group instanceof \ElggGroup) {
 	echo elgg_echo('groups:notfound');
 	return;
 }
 
 // we don't force icons to be square so don't set width/height
 $icon = elgg_format_element('div', [
 	'class' => 'groups-profile-icon',
-], elgg_view_entity_icon($group, 'large', [
-	'href' => '',
-	'width' => '',
-	'height' => '',
-]));
+], elgg_view_entity_icon($group, 'large', ['href' => false]));
 
-$body = elgg_format_element('div', [
-	'class' => 'groups-profile-fields',
-], elgg_view('groups/profile/fields', $vars));
+$body = '';
+
+$fields = elgg_view('groups/profile/fields', $vars);
+if (!empty($fields)) {
+	$body = elgg_format_element('div', ['class' => 'groups-profile-fields'], $fields);
+}
 
 echo elgg_view_image_block($icon, $body, ['class' => 'groups-profile']);
diff --git a/mod/groups/views/default/groups/sidebar/members.php b/mod/groups/views/default/groups/sidebar/members.php
@@ -9,26 +9,21 @@
  */
 
 $entity = elgg_extract('entity', $vars);
-if (!($entity instanceof \ElggGroup)) {
+if (!$entity instanceof \ElggGroup) {
 	return;
 }
 
-$limit = elgg_extract('limit', $vars, 14);
-
-$all_link = elgg_view('output/url', [
-	'href' => elgg_generate_url('collection:user:user:group_members', [
-		'guid' => $entity->guid,
-	]),
-	'text' => elgg_echo('groups:members:more'),
-	'is_trusted' => true,
-]);
+$count = $entity->getMembers(['count' => true]);
+if (empty($count)) {
+	return;
+}
 
 $body = elgg_list_entities([
 	'relationship' => 'member',
 	'relationship_guid' => $entity->guid,
 	'inverse_relationship' => true,
 	'type' => 'user',
-	'limit' => $limit,
+	'limit' => elgg_extract('limit', $vars, 14),
 	'order_by' => [
 		new OrderByClause('r.time_created', 'DESC'),
 	],
@@ -37,8 +32,14 @@
 	'gallery_class' => 'elgg-gallery-users',
 ]);
 
-$body .= "<div class='center mts'>$all_link</div>";
+$all_link = elgg_view('output/url', [
+	'href' => elgg_generate_url('collection:user:user:group_members', [
+		'guid' => $entity->guid,
+	]),
+	'text' => elgg_echo('groups:members:more'),
+	'is_trusted' => true,
+]);
 
-$count = $entity->getMembers(['count' => true]);
+$body .= elgg_format_element('div', ['class' => ['center', 'mts']], $all_link);
 
 echo elgg_view_module('aside', elgg_echo('groups:members') . " ({$count})", $body);
diff --git a/mod/groups/views/default/groups/sidebar/owner.php b/mod/groups/views/default/groups/sidebar/owner.php
@@ -6,17 +6,13 @@
  */
 
 $entity = elgg_extract('entity', $vars);
-if (!($entity instanceof \ElggGroup)) {
+if (!$entity instanceof \ElggGroup) {
 	return;
 }
 
 $owner = $entity->getOwnerEntity();
-if (!($owner instanceof \ElggUser)) {
+if (!$owner instanceof \ElggUser) {
 	return;
 }
 
-$body = elgg_view_entity($owner, [
-	'full_view' => false,
-]);
-
-echo elgg_view_module('aside', elgg_echo('groups:owner'), $body);
+echo elgg_view_module('aside', elgg_echo('groups:owner'), elgg_view_entity_list([$owner], ['full_view' => false]));