diff --git a/sveltejs/public/build/bundle.css b/sveltejs/public/build/bundle.css
index a9f6f79207cfe4cd341c9ccdd99b34c8177a1d25..ec2b5eee3f6e2e04b9c1097bff12376ea7174d15 100644
Binary files a/sveltejs/public/build/bundle.css and b/sveltejs/public/build/bundle.css differ
diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js
index 46852fac7ab5af5cb3ebc236cf21551a10e7aae0..675d5fe00c9614d95458e1921b487f29e4c70d4a 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 45120213b5837b4d68212e8ca5f63d2e81c0d2b7..b05ae57525a4c80f252c5f79a2ad846ed79dedea 100644
Binary files a/sveltejs/public/build/bundle.js.map and b/sveltejs/public/build/bundle.js.map differ
diff --git a/sveltejs/src/Filter.svelte b/sveltejs/src/Filter.svelte
index 24bc9b6146a43b37f0b4b56cec58add9f15b3e72..60a4e85c5a017c906c9ac8c694b774dc9446c305 100644
--- a/sveltejs/src/Filter.svelte
+++ b/sveltejs/src/Filter.svelte
@@ -68,20 +68,25 @@
<summary hidden={matches}>
<h2>{Drupal.t('Categories')}</h2>
</summary>
- <h2 hidden={!matches}>{Drupal.t('Categories')}</h2>
- {#await apiModuleCategory then categoryList}
- {#each categoryList as dt}
- <input
- type="checkbox"
- id={dt.id}
- bind:group={$moduleCategoryFilter}
- on:change={onSelectCategory}
- value={dt.id}
- />
- <label class="checkbox-label" for={dt.id}> {dt.name}</label>
- <br />
- {/each}
- {/await}
+ <fieldset>
+ <legend class:visually-hidden={!matches}
+ ><span class="visually-hidden">{Drupal.t('Filter by module ')}</span
+ >{Drupal.t('Categories')}</legend
+ >
+ {#await apiModuleCategory then categoryList}
+ {#each categoryList as dt}
+ <label class="checkbox-label">
+ <input
+ type="checkbox"
+ id={dt.id}
+ bind:group={$moduleCategoryFilter}
+ on:change={onSelectCategory}
+ value={dt.id}
+ />{dt.name}</label
+ >
+ {/each}
+ {/await}
+ </fieldset>
</details>
</form>
</MediaQuery>
@@ -103,10 +108,18 @@
padding: 0 0.5rem;
}
.checkbox-label {
- padding-left: 10px;
- text-indent: 10px;
- margin-top: -24px;
- margin-bottom: -10px;
- font-weight: normal;
+ display: block;
+ }
+ input {
+ margin-right: 10px;
+ }
+ fieldset {
+ border: none;
+ }
+ legend {
+ margin: 1rem 0 0.75rem;
+ font-size: 1.802rem;
+ font-weight: bold;
+ line-height: 1.3;
}
</style>
diff --git a/sveltejs/src/FilterGroup.svelte b/sveltejs/src/FilterGroup.svelte
index b3463d2dae96527cc561114748befdad87a43448..3f24121bdd1c5de4a4e0250c0874c31cb52d38bb 100644
--- a/sveltejs/src/FilterGroup.svelte
+++ b/sveltejs/src/FilterGroup.svelte
@@ -67,16 +67,34 @@
.filter-options {
display: flex;
flex-wrap: wrap;
- flex-direction: row;
+ flex-direction: column;
}
.filter-option {
- flex: 0 0 33%;
+ flex: 0 0 50%;
margin-bottom: 10px;
line-height: 25px;
position: relative;
}
+ @media only screen and (min-width: 72rem) {
+ .filter-option {
+ flex: 0 0 33%;
+ }
+ }
+
+ @media only screen and (min-width: 42rem) {
+ .filter-options {
+ flex-direction: row;
+ }
+ }
+
+ @media only screen and (max-width: 54rem) {
+ .filter-group {
+ flex-direction: column;
+ }
+ }
+
.filter-option input[type='checkbox'] {
position: absolute;
top: 2px;
diff --git a/sveltejs/src/Project/Project.svelte b/sveltejs/src/Project/Project.svelte
index 560f72ebd249d9ea70ed62df83a4661911e49e09..31cf3f61ea6ec7aefe43c6e84981f71ec906380f 100644
--- a/sveltejs/src/Project/Project.svelte
+++ b/sveltejs/src/Project/Project.svelte
@@ -1,14 +1,17 @@
<script>
// eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export
export let project;
+ export let toggleView;
import ActionButton from './ActionButton.svelte';
import Image from './Image.svelte';
import Categories from './Categories.svelte';
import SecurityCoverage from './SecurityCoverage.svelte';
import MaintainedIcon from './MaintainedIcon.svelte';
+
+ const { drupalSettings } = window;
</script>
-<li class="project">
+<li class="project {toggleView.toLowerCase()}">
<div class="top">
<Image fieldProjectImages={project.field_project_images} />
</div>
@@ -23,12 +26,28 @@
>
</h3>
<div class="body">{@html project.body.summary}</div>
- <Categories fieldModuleCategories={project.field_module_categories} />
+ {#if toggleView === 'Grid'}
+ <Categories fieldModuleCategories={project.field_module_categories} />
+ {/if}
</div>
</div>
<div class="icons">
<SecurityCoverage coverage={project.field_security_advisory_coverage} />
<MaintainedIcon maintained={project.field_maintenance_status.name} />
+ {#if toggleView === 'List'}
+ <div class="container">
+ <div class="image">
+ <img
+ src="{drupalSettings.project_browser.origin_url}/{drupalSettings
+ .project_browser.module_path}/images/project-usage-icon.svg"
+ alt="Project Usage"
+ />
+ </div>
+ <div class="text">
+ {project.project_usage_total.toLocaleString()} Active Installs
+ </div>
+ </div>
+ {/if}
<ActionButton {project} />
</div>
</li>
@@ -36,34 +55,45 @@
<style>
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 53.75rem) {
- .top {
+ .grid .top {
overflow: hidden;
display: flex;
align-items: center;
}
+ .list.project {
+ padding: 0 2rem;
+ }
+ .list .top {
+ padding: 10px;
+ width: 10%;
+ }
}
/*One column card view */
@media screen and (max-width: 75rem) {
- .project {
+ .grid.project {
width: 100%;
}
}
/*Two column card view (laptops/desktops, 1200px and up) */
@media only screen and (min-width: 75rem) {
- .project {
+ .grid.project {
width: 49%;
}
+ .list.project {
+ width: 100%;
+ padding: 0 2rem;
+ }
}
@media only screen and (min-width: 87.5rem) {
- .project {
+ .grid.project {
width: 32%;
}
}
- .project {
+ .grid.project {
display: flex;
flex-direction: column;
border: 1px solid black;
@@ -73,18 +103,20 @@
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
margin-right: 0.5vw;
}
- h3 {
+
+ .grid h3 {
margin-top: 0.25em;
text-align: center;
}
+
h3 a {
text-decoration: none;
color: black;
}
- .main {
+
+ .grid .main {
display: flex;
background: white;
- /*min-height: 275px;*/
position: relative;
padding: 1em 1em;
flex-direction: column;
@@ -96,14 +128,46 @@
}
}
- .body {
+ .grid .body {
text-align: center;
- font-size: 15px;
}
- .icons {
+ .grid .icons {
display: flex;
margin-top: auto;
padding: 1em 1em;
}
+ .body {
+ font-size: 15px;
+ }
+
+ .list .image {
+ padding-left: 4em;
+ }
+
+ .list .image img {
+ max-width: 100%;
+ width: 3em;
+ }
+ .list .main {
+ width: 100%;
+ }
+ .list h3 {
+ padding-top: 10px;
+ }
+ .list.project {
+ margin-bottom: 2em;
+ background: #ffffff;
+ border: 0.5px solid #a4a2a2;
+ box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+ }
+ .list .icons {
+ display: flex;
+ padding: 1em 1em 1em 0;
+ }
+ .container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
</style>
diff --git a/sveltejs/src/Project/ProjectListView.svelte b/sveltejs/src/Project/ProjectListView.svelte
deleted file mode 100644
index cabdf54e530292597af296020b432da15434ffca..0000000000000000000000000000000000000000
--- a/sveltejs/src/Project/ProjectListView.svelte
+++ /dev/null
@@ -1,109 +0,0 @@
-<script>
- // eslint-disable-next-line import/no-mutable-exports,import/prefer-default-export
- export let project;
- import ActionButton from './ActionButton.svelte';
- import Image from './Image.svelte';
- import SecurityCoverage from './SecurityCoverage.svelte';
- import MaintainedIcon from './MaintainedIcon.svelte';
-
- const { drupalSettings } = window;
-</script>
-
-<li class="project">
- <div class="left">
- <Image fieldProjectImages={project.field_project_images} />
- </div>
- <div class="main">
- <div class="middle">
- <h3>
- <a href={project.url} target="_blank" rel="noreferrer"
- >{project.title}</a
- >
- </h3>
- <div class="body">{@html project.body.summary}</div>
- </div>
- <div class="icons">
- <SecurityCoverage coverage={project.field_security_advisory_coverage} />
- <MaintainedIcon maintained={project.field_maintenance_status.name} />
- <div class="container">
- <div class="image">
- <img
- src="{drupalSettings.project_browser.origin_url}/{drupalSettings
- .project_browser.module_path}/images/project-usage-icon.svg"
- alt="Project Usage"
- />
- </div>
- <div class="text">
- {project.project_usage_total.toLocaleString()} Active Installs
- </div>
- </div>
- <ActionButton {project} />
- </div>
- </div>
-</li>
-
-<style>
- /* Small devices (portrait tablets and large phones, 600px and up) */
- @media only screen and (min-width: 600px) {
- .project {
- padding: 0 2rem;
- }
- .left {
- padding: 10px;
- width: 10%;
- }
- }
-
- /* Large devices (laptops/desktops, 992px and up) */
- @media only screen and (min-width: 992px) {
- .project {
- width: 100%;
- padding: 0 2rem;
- }
- }
-
- .project {
- margin-bottom: 2em;
- background: #ffffff;
- border: 0.5px solid #a4a2a2;
- box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
- }
- h3 {
- padding-top: 10px;
- }
- h3 a {
- text-decoration: none;
- color: black;
- }
- .main {
- width: 100%;
- }
-
- @media only screen and (max-width: 1450px) {
- .main {
- padding-bottom: 60px;
- }
- }
-
- .body {
- font-size: 15px;
- }
-
- .icons {
- display: flex;
- padding: 1em 1em 1em 0;
- }
-
- .container {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .image img {
- max-width: 100%;
- width: 3em;
- }
- .image {
- padding-left: 4em;
- }
-</style>
diff --git a/sveltejs/src/ProjectBrowser.svelte b/sveltejs/src/ProjectBrowser.svelte
index a0cb9642b40a0d55a940fa6ab7dcdaa5721f6ec9..411df04390a78068793a1a8109b1f763e9ff994d 100644
--- a/sveltejs/src/ProjectBrowser.svelte
+++ b/sveltejs/src/ProjectBrowser.svelte
@@ -7,7 +7,6 @@
Filter,
} from './ProjectGrid.svelte';
import Project from './Project/Project.svelte';
- import ProjectListView from './Project/ProjectListView.svelte';
import {
filters,
rowsCount,
@@ -202,11 +201,7 @@
<Filter on:selectCategory={onSelectCategory} />
</div>
{#each rows2 as row, index (row)}
- {#if toggleView === 'Grid'}
- <Project project={row} />
- {:else}
- <ProjectListView project={row} />
- {/if}
+ <Project {toggleView} project={row} />
{/each}
<div slot="bottom">
<Pagination
diff --git a/sveltejs/src/Search.svelte b/sveltejs/src/Search.svelte
index ae82cdef51bb9931784e2d0ab36df2cbda5450f8..eb55ac811d5aa0013a6c3d713404832ec63f37a9 100644
--- a/sveltejs/src/Search.svelte
+++ b/sveltejs/src/Search.svelte
@@ -327,7 +327,12 @@
filterData={apiDevelopmentStatus}
filterType="developmentStatus"
changeHandler={onAdvancedFilter}
- />
+ let:term
+ >
+ <label slot="label" class="checkbox-label" for={term.id}>
+ {term.name}
+ </label>
+ </FilterGroup>
<FilterGroup
filterTitle={Drupal.t('Maintenance Status')}
filterData={apiMaintenanceStatus}
@@ -464,7 +469,6 @@
font-weight: normal;
padding-left: 25px;
display: flex;
- margin-right: 75px;
}
output {