Skip to content
Snippets Groups Projects
Commit ff0f21b6 authored by Ben Mullins's avatar Ben Mullins
Browse files

reroll

parents ef4c11f6 572b5579
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 136 additions and 151 deletions
sveltejs/public/build/bundle.css
+211 B (+2%)
View file @ ff0f21b6
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
sveltejs/public/build/bundle.js
-1.25 KiB (-2%)
View file @ ff0f21b6
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
sveltejs/public/build/bundle.js.map
-895 B (0%)
View file @ ff0f21b6
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
sveltejs/src/Filter.svelte
+ 32
− 19
View file @ ff0f21b6
......@@ -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>
sveltejs/src/FilterGroup.svelte
+ 20
− 2
View file @ ff0f21b6
......@@ -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;
......
sveltejs/src/Project/Project.svelte
+ 77
− 13
View file @ ff0f21b6
<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>
sveltejs/src/Project/ProjectListView.svelte deleted 100644 → 0
+ 0
− 109
View file @ ef4c11f6
<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>
sveltejs/src/ProjectBrowser.svelte
+ 1
− 6
View file @ ff0f21b6
......@@ -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
......
sveltejs/src/Search.svelte
+ 6
− 2
View file @ ff0f21b6
......@@ -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 {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment