Skip to content
Snippets Groups Projects

Resolve #3322594 "Drupalconportland2024"

Open Resolve #3322594 "Drupalconportland2024"
issue/project_browser-3322594:3322594-DrupalConPortland2024 into 2.0.x
Open Bernardo Martinez requested to merge issue/project_browser-3322594:3322594-DrupalConPortland2024 into 2.0.x
Compare
and
8 files
+ 194
− 137
Compare changes
  • Side-by-side
  • Inline
Files
8
css/pb.css
+ 93
− 38
@@ -6,12 +6,19 @@
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;
@@ -32,6 +39,7 @@
}
.pb-filter__fieldset {
padding: 1.5rem 1rem 1rem 0;
border: none;
}
.pb-filter__multi-dropdown {
@@ -68,14 +76,14 @@
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);
}
@@ -103,40 +111,64 @@
/* <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;
@@ -160,6 +192,9 @@
.pb-module-page__logo {
min-height: 200px;
}
.pb-module-page__carousel-wrapper {
margin-top: 1em;
}
.pb-module-page__carousel {
margin: 20px 0;
}
@@ -197,22 +232,23 @@
/* <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 {
@@ -269,6 +305,7 @@
.pb-layout {
display: flex;
flex-flow: column nowrap;
gap: var(--grid-layout-gap);
}
@media screen and (min-width: 800px) {
@@ -286,8 +323,8 @@
.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 +343,8 @@
.pb-projects-grid {
--grid-column-count: 4;
margin-top: -1px;
}
.pb-projects-list {
@@ -362,7 +401,6 @@
}
/* <Project/Image> */
.pb-image-carousel__slide,
.image-carousel__slider-image,
.project__logo-image {
display: block;
@@ -372,7 +410,6 @@
}
/* 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;
@@ -408,7 +445,7 @@
/* One column card view */
.pb-project {
padding: 1em;
padding: 1.5rem;
}
.pb-project .ajax-progress__throbber {
display: inline-block;
@@ -416,7 +453,7 @@
.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);
@@ -440,11 +477,15 @@
.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;
@@ -453,12 +494,25 @@
"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;
}
@@ -475,6 +529,7 @@
justify-self: center;
}
.pb-project__logo-image {
display: block;
width: 100px;
margin: 0;
}
@@ -509,7 +564,6 @@
}
.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;
@@ -544,13 +598,14 @@
/* <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) {