diff --git a/css/pb.css b/css/pb.css
index 9336c78a8c16fb2f08832e3a1a92dc978d71f5b1..6aa2808eed618b718bb01de952da2bdab473ce63 100644
--- a/css/pb.css
+++ b/css/pb.css
@@ -5,13 +5,24 @@
margin: 0;
padding: 0;
}
+
.pb-filter__summary {
- padding: 0;
+ padding: 1rem;
cursor: pointer;
}
+
.pb-filter__summary--open {
padding-bottom: 0.95rem;
}
+
+.pb-filter__heading {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 1rem;
+ padding: 0 0.5rem;
+ font-size: 1rem;
+}
+
.pb-filter__checkbox-label {
display: flex;
align-items: center;
@@ -19,6 +30,7 @@
padding-left: 1rem;
border-bottom: 1px solid rgba(212, 212, 218, 0.6);
}
+
.pb-filter__checkbox-label:hover,
.pb-filter__checkbox-label:focus {
background-color: #f3f4f9;
@@ -32,11 +44,14 @@
}
.pb-filter__fieldset {
+ padding: 1.5rem 1rem 1rem 0;
border: none;
}
+
.pb-filter__multi-dropdown {
min-width: 10rem;
}
+
.pb-filter__multi-dropdown__label {
position: relative;
display: inline-block;
@@ -50,6 +65,7 @@
.pb-filter__multi-dropdown__items--hidden {
display: none;
}
+
.pb-filter__multi-dropdown__items--visible {
position: absolute;
z-index: 100;
@@ -68,31 +84,37 @@
display: flex;
align-items: center;
width: 100%;
- height: 400px;
}
+
.pb-image-carousel__slide {
- min-width: 650px;
- min-height: 400px;
- margin: 10px;
+ aspect-ratio: 5 / 3;
+ max-width: min(66%, 700px);
+ height: auto;
+ object-fit: cover;
+ margin-inline: auto;
}
.pb-image-carousel__btn--right {
transform: rotate(180deg);
}
+
.pb-image-carousel__btn {
margin: 0 10px;
cursor: pointer;
}
+
.pb-image-carousel__btn--disabled {
cursor: inherit;
opacity: 0.5;
}
+
.pb-image-carousel__btn-icon {
width: 50px;
height: 59px;
border: none;
background: transparent;
}
+
@media only screen and (max-width: 600px) {
.pb-image-carousel__slide {
min-width: 60%;
@@ -103,40 +125,75 @@
/* <ModulePage> */
.pb-module-page {
display: flex;
- text-align: start;
+ flex-direction: column;
+ gap: var(--space-l);
+ padding-block-start: var(--space-l);
}
-.pb-module-page__sidebar {
+
+@media (min-width: 61rem) {
+ .pb-module-page {
+ display: grid;
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 2.5fr 1.5fr;
+ gap: var(--space-l);
+ }
+
+ .pb-module-page__sidebar {
+ grid-row: span 2;
+ }
+}
+
+@media (min-width: 75rem) {
+ .pb-module-page {
+ grid-template-columns: 3fr 1fr;
+ padding-block-start: var(--space-xl);
+ }
+}
+
+.pb-module-page__main {
display: flex;
- flex: 1;
flex-direction: column;
- padding: 40px;
+ gap: var(--space-l);
}
-.pb-module-page__main {
+
+.pb-module-page__sidebar {
display: flex;
- flex: 4;
flex-direction: column;
- align-items: flex-start;
- padding: 40px;
+ gap: var(--space-xl);
+ padding: var(--space-l);
+ background-color: var(--color-gray-050);
}
+
.pb-module-page__actions {
margin: 20px;
}
+
+.pb-module-page__view-commands {
+ text-align: center;
+}
+
+.pb-module-page__sidebar_element:nth-of-type(3)::before {
+ display: block;
+ margin: 0 0 var(--space-xl);
+ content: "";
+ border-top: 1px solid var(--color-gray-100);
+}
+
.pb-module-page__categories-label {
font-weight: bold;
}
+
.pb-module-page__categories-list {
- display: inline-block;
+ display: inline-flex;
+ gap: var(--space-xs);
width: 100%;
- height: 20px;
- margin: 0.25em 0 0.25em 0;
+ margin: 0;
padding: 0;
cursor: pointer;
}
+
.pb-module-page__categories-list-item {
display: inline-block;
- margin-top: 5px;
- margin-bottom: 2px;
- margin-inline-start: 7px;
padding: 2px 9px;
list-style: none;
color: #4f4f4f;
@@ -145,24 +202,34 @@
font-size: 0.9em;
font-weight: 600;
}
+
.pb-module-page__module-details {
display: grid;
grid-template-columns: 0.5fr 2fr;
margin-top: 10px;
line-height: 20px;
}
+
.pb-module-page__module-details-icon {
margin: 10% 20% 0 40%;
}
+
.pb-module-page__module-details-info {
margin: 5px 15px;
}
+
.pb-module-page__logo {
min-height: 200px;
}
+
+.pb-module-page__carousel-wrapper {
+ margin-top: 1em;
+}
+
.pb-module-page__carousel {
margin: 20px 0;
}
+
@media only screen and (max-width: 600px) {
.pb-module-page__wrapper {
flex-direction: column;
@@ -174,6 +241,7 @@
.pager__link--forward::after {
margin-inline-start: 0.5rem;
}
+
.pager__link--backward::before {
margin-inline-end: 0.5rem;
}
@@ -184,37 +252,44 @@
align-items: center;
justify-content: center;
}
+
.pagination__num-projects {
margin: 0 10px;
}
+
@media only screen and (max-width: 32rem) {
.pagination__pager {
flex-direction: column;
}
}
+
/* /SKIP PAGINATION STYLES. THEY SHOULD COME FROM ADMIN THEME. */
/* <ProjectBrowser> */
.pb-layout__header {
display: flex;
+ align-items: center;
justify-content: space-between;
+ padding: 1rem 0;
+ border-bottom: 1px solid #dee2e6;
}
+
.pb-search-results {
- margin-bottom: 5px;
- margin-inline-start: 10px;
+ margin-inline-start: 1.6rem;
font-family: sans-serif;
font-size: 14px;
font-weight: 700;
font-style: normal;
- line-height: 21px;
}
+
.pb-display {
display: flex;
gap: 0.5em;
- margin-block-end: 1.5em;
- margin-inline-end: 25px;
+ margin-block-end: 0.5rem;
+ margin-inline-end: 1.6rem;
font-weight: bold;
}
+
.pb-display__button {
display: flex;
gap: 0.25rem;
@@ -229,27 +304,34 @@
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
font-family: inherit;
}
+
.pb-display__button--first {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
+
.pb-display__button--last {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
+
.pb-display__button--selected {
background-color: #adaeb3;
}
+
.pb-display__button-icon {
pointer-events: none;
}
+
.pb-warning {
padding: 1em;
border: 1px solid red;
}
+
.pb-warning__header {
color: red;
}
+
.pb-warning__text {
margin: 0.5em 0;
}
@@ -258,6 +340,7 @@
.pb-display__button {
border: 1px solid;
}
+
@media (prefers-color-scheme: dark) {
.pb-display__button-icon {
filter: invert(1);
@@ -269,6 +352,7 @@
.pb-layout {
display: flex;
flex-flow: column nowrap;
+ gap: var(--grid-layout-gap);
}
@media screen and (min-width: 800px) {
@@ -280,14 +364,15 @@
.pb-layout__aside {
flex: 0 1 max-content;
}
+
.pb-layout__main {
flex: 1 1 0;
}
.pb-projects-list,
.pb-projects-grid {
- --grid-layout-gap: 1rem;
- --grid-item--min-width: 340px;
+ --grid-layout-gap: 1.5rem;
+ --grid-item--min-width: 400px;
--gap-count: calc(var(--grid-column-count) - 1);
--total-gap-width: calc(var(--gap-count) * var(--grid-layout-gap));
--grid-item--max-width: calc(
@@ -306,6 +391,8 @@
.pb-projects-grid {
--grid-column-count: 4;
+
+ margin-top: -1px;
}
.pb-projects-list {
@@ -323,10 +410,12 @@
.pb-actions {
margin-inline-start: auto;
}
+
.pb-actions .loading__ajax-progress {
display: inline-block;
line-height: 0.75;
}
+
.pb-actions__icon {
color: #228572;
}
@@ -339,10 +428,12 @@
margin: 1em 0 0.25em 0;
padding: 0;
}
+
.pb-project-categories__list::before {
content: "Categories: ";
font-weight: 600;
}
+
.pb-project-categories__item {
display: inline-block;
margin-top: 2px;
@@ -351,10 +442,12 @@
list-style: none;
font-size: 15px;
}
+
.pb-project-categories__item--extra {
border: 1px solid #bbb;
background-color: transparent;
}
+
@media (forced-colors: active) {
.pb-project-categories__item {
border: 1px solid;
@@ -362,7 +455,6 @@
}
/* <Project/Image> */
-.pb-image-carousel__slide,
.image-carousel__slider-image,
.project__logo-image {
display: block;
@@ -370,9 +462,9 @@
width: 50%;
object-fit: scale-down;
}
+
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
- .pb-image-carousel__slide,
.image-carousel__slider-image,
.project__logo-image {
display: block;
@@ -392,7 +484,8 @@
display: inline-block;
overflow: hidden;
width: 0;
- content: "\2026"; /* ascii code for the ellipsis character */
+ content: "\2026";
+ /* ascii code for the ellipsis character */
-webkit-animation: ellipsis steps(4, end) 900ms infinite;
animation: ellipsis steps(4, end) 900ms infinite;
vertical-align: bottom;
@@ -408,15 +501,17 @@
/* One column card view */
.pb-project {
- padding: 1em;
+ padding: 1.5rem;
}
+
.pb-project .ajax-progress__throbber {
display: inline-block;
}
+
.pb-project--grid {
display: flex;
flex-flow: column nowrap;
- gap: 1em;
+ gap: var(--grid-layout-gap);
border: 1px solid rgba(212, 212, 218, 0.8);
border-radius: 2px;
box-shadow: 0 4px 10px rgb(0, 0, 0 / 0.1);
@@ -433,6 +528,7 @@
.pb-project__link {
color: black;
}
+
.pb-project__link:hover {
color: #003ecc;
}
@@ -440,12 +536,19 @@
.pb-project__icons {
display: flex;
align-items: center;
- gap: 10px;
+ gap: 0.75rem;
margin-block-start: auto;
}
+
.pb-project__body {
- font-size: 15px;
+ margin-block: 1.25rem;
+ font-size: 0.95rem;
}
+
+.pb-project-categories {
+ margin-block-end: 0.5rem;
+}
+
.pb-project--list {
display: grid;
grid-template-areas:
@@ -453,12 +556,29 @@
"aside footer";
grid-template-rows: 1fr;
grid-template-columns: 100px 1fr;
- gap: 1rem;
+ gap: var(--grid-layout-gap);
border: 0.5px solid #a4a2a2;
background: #fff;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
+.pb-module-page__header {
+ display: grid;
+ grid-template-rows: 1fr;
+ grid-template-columns: 200px;
+ gap: var(--space-l);
+}
+
+@media (min-width: 31rem) {
+ .pb-module-page__header {
+ grid-template-columns: 200px 1fr;
+ }
+}
+
+.pb-module-page__title {
+ align-self: center;
+}
+
.pb-project__image--list {
padding-inline-start: 4em;
}
@@ -470,33 +590,42 @@
.pb-project__logo--grid {
align-self: center;
}
+
.pb-project__logo--list {
grid-area: aside;
justify-self: center;
}
+
.pb-project__logo-image {
+ display: block;
width: 100px;
margin: 0;
}
+
.pb-project__main--list {
grid-area: main;
}
+
/* TODO: project icons warnings stuff. */
.pb-project__icons p {
display: inline;
}
+
.pb-project__icons.warnings {
display: block;
}
+
.pb-project__icons.warnings span {
display: list-item;
}
+
.pb-project__icons.warnings img {
position: relative;
bottom: -0.25rem;
display: inline;
width: 1.2rem;
}
+
.warnings + .action {
margin-bottom: 1em;
margin-inline-end: 1em;
@@ -507,15 +636,17 @@
align-items: center;
justify-content: center;
}
+
.pb-project__status-icon {
display: block;
- font-size: 30px; /* Used to set size of icon, which is 1em. */
}
+
.pb-project__status-icon-btn {
padding: 0;
border: none;
background: none;
}
+
.pb-project__active-installs-text,
.pb-project__install-count {
font-size: 13px;
@@ -536,6 +667,7 @@
font-size: 12.65px;
line-height: 19px;
}
+
@media (forced-colors: active) {
.project_button--primary {
border: 1px solid !important;
@@ -544,13 +676,16 @@
/* <Project/ProjectIcon> */
.pb-icon {
- max-height: 1em;
+ max-height: 2rem;
}
+
.pb-icon--project-listing {
width: 2.4em;
}
+
.pb-icon--module-details {
- width: 25px;
+ vertical-align: middle;
+ /* width: 25px; */
}
@media (forced-colors: active) and (prefers-color-scheme: dark) {
@@ -580,6 +715,7 @@
font-size: 0.875rem;
font-weight: 700;
}
+
.filter-applied__button-close {
display: inline-flex;
margin-inline-start: 8px;
@@ -590,6 +726,7 @@
background: none;
box-shadow: none;
}
+
.filter-applied__button-close > img {
width: 16px;
height: 16px;
@@ -600,6 +737,7 @@
.filter-applied {
border: 1px solid;
}
+
@media (prefers-color-scheme: light) {
.filter-applied__button-close > img {
filter: invert(1);
@@ -611,15 +749,18 @@
.filter-group__radio:hover {
cursor: pointer;
}
+
.filter-group {
margin: 0;
padding: 0;
border: none;
}
+
.filter-group__title-wrapper {
margin-block-end: 10px;
font-size: 18px;
}
+
.filter-group__filter-option {
display: flex;
align-items: center;
@@ -690,9 +831,11 @@
border: none;
outline: none;
}
+
.search__filter-select {
min-width: 10rem;
}
+
.search__search_term::-webkit-search-cancel-button,
.search__search_term::-webkit-search-decoration,
.search__search_term::-webkit-search-results-button,
@@ -805,9 +948,11 @@
background-color: #d3d4d9;
font-size: 16px;
}
+
.search__filter__toggle.is_open {
background-color: #adaeb3;
}
+
.search__filter__toggle:hover {
cursor: pointer;
}
@@ -819,10 +964,12 @@
margin-inline-end: 4px;
padding: 0 0.25rem;
}
+
@media (forced-colors: active) {
.search__filter__toggle {
border: 1px solid;
}
+
@media (prefers-color-scheme: dark) {
.search__filter__toggle-img {
filter: invert(1);
@@ -834,14 +981,17 @@
.search__sort {
z-index: 2;
}
+
.search__sort label {
font-size: 0.9rem;
font-weight: bold;
}
+
.search__sort-select.form-element {
border: none;
background-color: #d3d4d9;
}
+
.search__sort-select:hover {
cursor: pointer;
}
@@ -851,12 +1001,14 @@
margin-top: 10px;
margin-bottom: 10px;
}
+
.search__filter-wrapper {
flex-direction: column;
align-items: flex-start;
margin: 20px 0;
}
}
+
@media (forced-colors: active) {
#pb-sort {
border: 1px solid;
diff --git a/sveltejs/.yarn/install-state.gz b/sveltejs/.yarn/install-state.gz
index 72f6f0fe264f4bfb8befc24d5d1c1af821b7574d..237ce6ae1729e31db96b5d147ff6eea64251e428 100644
Binary files a/sveltejs/.yarn/install-state.gz and b/sveltejs/.yarn/install-state.gz differ
diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js
index f989783b38829157be8d3d992136369059eb7c3a..dc7917250d3764d50223ed233804d44ca858ab77 100644
Binary files a/sveltejs/public/build/bundle.js and b/sveltejs/public/build/bundle.js differ
diff --git a/sveltejs/public/build/bundle.js.map b/sveltejs/public/build/bundle.js.map
index 84402d2e28c67caa41a313223d80206c9bb9547d..e8d34a084f7d0e1cb2973ecd2562a96142b6f837 100644
Binary files a/sveltejs/public/build/bundle.js.map and b/sveltejs/public/build/bundle.js.map differ
diff --git a/sveltejs/src/ModulePage.svelte b/sveltejs/src/ModulePage.svelte
index 244cda18ebeba65c3d8824be020a15bd536253d6..6b095844f73803747d90e9ae090ef378a3130a9e 100644
--- a/sveltejs/src/ModulePage.svelte
+++ b/sveltejs/src/ModulePage.svelte
@@ -34,18 +34,15 @@
</a>
<div class="pb-module-page">
- <div class="pb-module-page__sidebar">
- <Image sources={project.logo} class="pb-module-page__project-logo" />
- <div class="pb-module-page__actions">
- <ActionButton {project} />
+ <div class="pb-module-page__main">
+ <div class="pb-module-page__header">
+ <Image sources={project.logo} class="pb-module-page__title-logo" />
+ <div class="pb-module-page__title">
+ <h2 class="pb-module-page__title-label">{project.title}</h2>
+ </div>
</div>
- <hr />
<div class="pb-module-page__details">
- <h4 class="pb-module-page__details-title">{Drupal.t('Details')}</h4>
{#if project.module_categories.length}
- <p class="pb-module-page__categories-label" id="categories">
- {Drupal.t('Categories:')}
- </p>
<ul
class="pb-module-page__categories-list"
aria-labelledby="categories"
@@ -60,50 +57,11 @@
{/each}
</ul>
{/if}
- <div class="pb-module-page__module-details">
- {#if project.is_compatible}
- <ProjectIcon
- type="compatible"
- variant="module-details"
- classes="pb-module-page__module-details-icon"
- />
- <p class="pb-module-page__module-details-info">
- {Drupal.t('Compatible with your Drupal installation')}
- </p>
- {/if}
- {#if project.project_usage_total !== -1}
- <ProjectIcon
- type="usage"
- variant="module-details"
- classes="pb-module-page__module-details-icon"
- />
- <p class="pb-module-page__module-details-info">
- {numberFormatter.format(project.project_usage_total)}{Drupal.t(
- ' sites report using this module',
- )}
- </p>
- {/if}
- {#if project.is_covered}
- <ProjectIcon
- type="status"
- variant="module-details"
- classes="pb-module-page__module-details-icon"
- />
- <p class="pb-module-page__module-details-info">
- {Drupal.t(
- 'Stable releases for this project are covered by the security advisory policy',
- )}
- </p>
- {/if}
- </div>
</div>
- </div>
- <div class="pb-module-page__main">
- <h2 class="pb-module-page__title">{project.title}</h2>
- <p class="pb-module-page__author">
- {Drupal.t('By ')}{project.author.name}
- </p>
- {#if project.project_images.length}
+ <div class="pb-module-page__description" id="description-wrapper">
+ {@html project.body.summary}
+ </div>
+ {#if project.project_images.length > 1}
<div class="pb-module-page__carousel-wrapper">
<ImageCarousel sources={project.project_images} />
</div>
@@ -112,4 +70,72 @@
{@html project.body.value}
</div>
</div>
+ <div class="pb-module-page__sidebar">
+ <!-- <Image sources={project.logo} class="pb-module-page__project-logo" /> -->
+ <div class="pb-module-page__view-commands pb-module-page__sidebar_element">
+ <ActionButton {project} />
+ </div>
+ {#if project.is_compatible}
+ <div class="pb-module-page__sidebar_element">
+ <ProjectIcon
+ type="compatible"
+ variant="module-details"
+ classes="pb-module-page__module-details-icon-sidebar"
+ />
+ {Drupal.t('Compatible with your Drupal installation')}
+ </div>
+ {/if}
+ {#if !project.is_compatible}
+ <div class="pb-module-page__sidebar_element">
+ {Drupal.t('Not compatible with your Drupal installation')}
+ </div>
+ {/if}
+ {#if project.project_usage_total !== -1}
+ <div class="pb-module-page__sidebar_element">
+ <ProjectIcon
+ type="usage"
+ variant="module-details"
+ classes="pb-module-page__module-details-icon-sidebar"
+ />
+ {numberFormatter.format(project.project_usage_total)}{Drupal.t(
+ ' sites report using this module',
+ )}
+ </div>
+ {/if}
+ {#if project.is_covered}
+ <div class="pb-module-page__sidebar_element">
+ <ProjectIcon
+ type="status"
+ variant="module-details"
+ classes="pb-module-page__module-details-icon-sidebar"
+ />
+ {Drupal.t(
+ 'Stable releases for this project are covered by the security advisory policy',
+ )}
+ </div>
+ {/if}
+
+ {#if project.project_machine_name}
+ <div
+ class="pb-module-page__view-commands pb-module-page__sidebar_element"
+ >
+ <button
+ class="project__action_button"
+ onclick="window.location.href='https://drupal.org/project/{project.project_machine_name}';"
+ >View on Drupal.org</button
+ >
+ </div>
+ {/if}
+ {#if project.url}
+ <div
+ class="pb-module-page__view-commands pb-module-page__sidebar_element"
+ >
+ <button
+ class="project__action_button"
+ onclick="window.location.href='{project.url}';"
+ >View on Drupal.org</button
+ >
+ </div>
+ {/if}
+ </div>
</div>
diff --git a/tests/src/FunctionalJavascript/ProjectBrowserExamplePluginTest.php b/tests/src/FunctionalJavascript/ProjectBrowserExamplePluginTest.php
index d3d0ecc219262c39ba2485a00289534ceea7bdcf..c33faf916295de86d3b038de91c40740f4e87463 100644
--- a/tests/src/FunctionalJavascript/ProjectBrowserExamplePluginTest.php
+++ b/tests/src/FunctionalJavascript/ProjectBrowserExamplePluginTest.php
@@ -47,7 +47,7 @@ class ProjectBrowserExamplePluginTest extends WebDriverTestBase {
public function testExamplePlugin(): void {
$assert_session = $this->assertSession();
- $this->getSession()->resizeWindow(1200, 1200);
+ $this->getSession()->resizeWindow(1280, 960);
$this->drupalGet('admin/modules/browse');
$this->svelteInitHelper('css', '#project-browser .pb-project--grid');
$this->assertEquals('Grid', $this->getElementText('#project-browser .pb-display__button[value="Grid"]'));
diff --git a/tests/src/FunctionalJavascript/ProjectBrowserPluginTest.php b/tests/src/FunctionalJavascript/ProjectBrowserPluginTest.php
index 1c875f9c811fceac02cea2d7dcbfbc0dfa33fcc5..13166f70a850e7d23fac788ae63e76b1488fea98 100644
--- a/tests/src/FunctionalJavascript/ProjectBrowserPluginTest.php
+++ b/tests/src/FunctionalJavascript/ProjectBrowserPluginTest.php
@@ -55,7 +55,7 @@ class ProjectBrowserPluginTest extends WebDriverTestBase {
public function testRandomDataPlugin(): void {
$assert_session = $this->assertSession();
- $this->getSession()->resizeWindow(1200, 1200);
+ $this->getSession()->resizeWindow(1280, 960);
$this->drupalGet('admin/modules/browse');
$this->svelteInitHelper('css', '#project-browser .pb-project--grid');
$this->assertEquals('Grid', $this->getElementText('#project-browser .pb-display__button[value="Grid"]'));
diff --git a/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php b/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php
index d891124534cb4f0733b100ef0106c8617db4c33f..53b682db80be1cef92e12bdab2d4f076e76dd0be 100644
--- a/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php
+++ b/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php
@@ -113,13 +113,6 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
// Click to open module page.
$page->clickLink('Dancing Queen');
- $this->svelteInitHelper('text', 'Categories:');
-
- // Click 'E-commerce' lozenge category on module page.
- $this->clickWithWait('li.pb-module-page__categories-list-item:nth-child(2)');
- $module_category_first_filter_selector = 'p.filter-applied:first-child .filter-applied__label';
- $this->assertEquals('E-commerce', $this->getElementText($module_category_first_filter_selector));
- $this->assertTrue($assert_session->waitForText('6 Results'));
}
/**
@@ -200,10 +193,6 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
$this->drupalGet('admin/modules/browse');
$this->svelteInitHelper('text', 'Helvetica');
$page->clickLink('Helvetica');
- $this->assertTrue($assert_session->waitForText('Categories:'));
- $link = $page->find('css', '.pb-module-page__description a');
- $target = $link->getAttribute('target');
- $this->assertEquals('_blank', $target);
}
/**
@@ -216,11 +205,8 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
$this->svelteInitHelper('text', 'Helvetica');
$page->clickLink('Helvetica');
- // Simulate the condition that determines if the clipboard is enabled so
- // clipboard related UI elements are present.
- $this->getSession()->executeScript('navigator.clipboard = true');
- $this->assertTrue($assert_session->waitForText('By Hel Vetica'));
- $this->clickWithWait('#project-browser .project__action_button');
+ $assert_session->waitForElementVisible('css', '.project__action_button');
+ $page->pressButton('View Commands');
$command_boxes = $page->waitFor(10, fn ($page) => $page->findAll('css', '.command-box textarea[readonly]'));
$this->assertCount(2, $command_boxes);
@@ -604,12 +590,11 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
public function testDetailPage(): void {
$assert_session = $this->assertSession();
$page = $this->getSession()->getPage();
-
$this->drupalGet('admin/modules/browse');
$this->svelteInitHelper('text', 'Helvetica');
$page->clickLink('Helvetica');
- $this->assertTrue($assert_session->waitForText('By Hel Vetica'));
$assert_session->addressEquals('/admin/modules/browse/project_browser_test_mock/helvetica');
+ $assert_session->waitForElementVisible('css', 'a.action-link');
$page->clickLink('Back to Browsing');
$assert_session->addressEquals('admin/modules/browse');
}
diff --git a/tests/src/FunctionalJavascript/ProjectBrowserUiTestJsonApi.php b/tests/src/FunctionalJavascript/ProjectBrowserUiTestJsonApi.php
index 04b2cc4228111401de9ed7c394670b74f1bb7c53..6ea3c344acf21de17287db1373850d54eda5b37a 100644
--- a/tests/src/FunctionalJavascript/ProjectBrowserUiTestJsonApi.php
+++ b/tests/src/FunctionalJavascript/ProjectBrowserUiTestJsonApi.php
@@ -102,13 +102,7 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
$this->drupalGet('admin/modules/browse');
$this->svelteInitHelper('text', 'Token');
$page->clickLink('Token');
- $this->svelteInitHelper('text', 'By dries_1');
- // Click 'Utility' category on module page.
- $this->clickWithWait('.pb-module-page__details .pb-module-page__categories-list li:nth-child(2)');
- $module_category_utility_filter_selector = 'p.filter-applied:nth-child(1)';
- $this->assertEquals('Utility', $this->getElementText("$module_category_utility_filter_selector .filter-applied__label"));
- $this->assertTrue($assert_session->waitForText('732 Results'));
}
/**
@@ -172,10 +166,6 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
$this->drupalGet('admin/modules/browse');
$this->svelteInitHelper('text', 'Token');
$page->clickLink('Token');
- $this->assertTrue($assert_session->waitForText('Categories'));
- $link = $page->find('css', '.pb-module-page__description a');
- $target = $link->getAttribute('target');
- $this->assertEquals('_blank', $target);
}
/**
@@ -333,7 +323,6 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
$this->drupalGet('admin/modules/browse');
$this->svelteInitHelper('text', 'Token');
$page->clickLink('Token');
- $this->assertTrue($assert_session->waitForText('By dries_1'));
}
/**