Skip to content
This repository has been archived by the owner on Oct 16, 2024. It is now read-only.

UI updates #95

Merged
merged 6 commits into from
Mar 14, 2023
Merged

UI updates #95

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f335ca7
UI updates
dreamwhisper Mar 7, 2023
2b82933
Lint
dreamwhisper Mar 7, 2023
160cf3b
Merge branch 'main' into update/css
dreamwhisper Mar 9, 2023
1e46755
Merge branch 'main' into update/css
dreamwhisper Mar 10, 2023
1569531
Adjust responsive layout
dreamwhisper Mar 10, 2023
30ff0ed
Update button CSS
dreamwhisper Mar 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 46 additions & 39 deletions wp-modules/app/css/src/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ html body.toplevel_page_pattern-manager {
background: #f1f1f1;
}


/* stylelint-disable */
// Temp hacks for Gutenberg style issues
.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper > *,
Expand All @@ -47,11 +46,6 @@ html body.toplevel_page_pattern-manager {
background: #f1f1f1;
font-size: 16px;

// height: 100%;
// min-height: 100%;
display: flex;
flex-direction: column;

* {
box-sizing: border-box !important;
}
Expand Down Expand Up @@ -107,30 +101,35 @@ html body.toplevel_page_pattern-manager {

.patternmanager-theme-patterns {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 3rem;
border: solid 3rem #f0f0f0;
border: solid 3rem #f1f1f1;
border-radius: 2px;
flex: 1;
display: flex;
flex-direction: column;
background: #fff;

@media (min-width: 1024px) {
padding: 3rem;
@media (max-width: 1024px) {
border-width: 2rem;
padding: 2rem;
}

.patterns-container-inner {
display: flex;
flex-direction: row;
font-size: 14px;

.inner-sidebar {
display: flex;
flex-direction: column;
width: 300px;
margin-right: 4rem;
.pattern-columns {
display: grid;
grid-template-columns: 300px 1fr;
grid-gap: 3rem;

@media (max-width: 1200px) {
grid-template-columns: 220px 1fr;
}

@media (max-width: 960px) {
grid-template-columns: 1fr;
}
}

.pattern-inner-sidebar {
display: block;

.pattern-search {
margin-bottom: 2.5rem;
Expand All @@ -141,13 +140,28 @@ html body.toplevel_page_pattern-manager {
font-weight: 600;
}

.pattern-categories {

@media (max-width: 960px) {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

}

.category {
display: block;
height: 48px;
margin-bottom: 2px;
text-align: left;
width: 100%;

@media (max-width: 960px) {
display: inline-flex;
width: unset;
}

&:not(.category-selected):hover,
&:not(.category-selected):focus-visible {
background: #f5f5f5;
Expand All @@ -168,19 +182,13 @@ html body.toplevel_page_pattern-manager {
}

.inner-grid {
margin: 0 0.5rem;
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(300px, 1fr));
grid-gap: 2rem;
column-gap: 2rem;

@media (max-width: 1729px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1200px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-item {
Expand Down Expand Up @@ -295,25 +303,24 @@ html body.toplevel_page_pattern-manager {
position: absolute;
bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
padding: 0;
padding: 20px;
opacity: 0;

a.item-action-button {
border-right: 1px solid #404040;
}

.item-action-button {
z-index: 50;
background: transparent;
border: none;
cursor: pointer;
color: #c6c6c6;
height: 46px;
justify-content: center;
padding: 15px 20px;
transition: 0.1s ease;
display: flex;
flex-direction: row;
align-items: center;

&:hover {
color: #fff;
Expand Down Expand Up @@ -351,9 +358,9 @@ html body.toplevel_page_pattern-manager {
.item-actions-inside {
background: #1e1e1e;
border-radius: 6px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
display: grid;
grid-auto-columns: minmax(0, 1fr);
grid-auto-flow: column;
}

&:hover,
Expand Down
4 changes: 2 additions & 2 deletions wp-modules/app/js/src/components/Patterns/PatternCategories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function PatternCategories( {
setCurrentCategory,
}: Props ) {
return (
<>
<div className="pattern-categories">
{ categories.map( ( category ) => {
const classes = [
'category',
Expand All @@ -41,6 +41,6 @@ export default function PatternCategories( {
</Button>
);
} ) }
</>
</div>
);
}
5 changes: 0 additions & 5 deletions wp-modules/app/js/src/components/Patterns/PatternGridActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,7 @@ export default function PatternGridActions( { patternData }: Props ) {
</span>
</Button>

<div className="item-action-button-separator"></div>

<Button
type="button"
className="item-action-button"
aria-label={ sprintf(
/* translators: %1$s: the pattern title */
Expand All @@ -61,8 +58,6 @@ export default function PatternGridActions( { patternData }: Props ) {
</span>
</Button>

<div className="item-action-button-separator"></div>

<Button
type="button"
className="item-action-button"
Expand Down
6 changes: 3 additions & 3 deletions wp-modules/app/js/src/components/Patterns/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,9 @@ export default function Patterns() {
) }
</div>
) : (
<>
<div className="pattern-columns">
<div
className="inner-sidebar"
className="pattern-inner-sidebar"
role="region"
aria-label="Sort patterns by category"
>
Expand Down Expand Up @@ -98,7 +98,7 @@ export default function Patterns() {
>
<PatternGrid themePatterns={ filteredPatterns } />
</div>
</>
</div>
) }
</div>
</div>
Expand Down