tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Add gallery view to search pages (#773)

Browse Source
This commit is contained in:
Prospector
2022-12-03 10:29:49 -08:00
committed by GitHub
parent f1a33db800
commit 964fa69fb4
18 changed files with 766 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
assets/images/utils/globe.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="2" y1="12" x2="22" y2="12"></line>
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 390 B

7
assets/images/utils/grid.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="7" height="7"></rect>
<rect x="14" y="3" width="7" height="7"></rect>
<rect x="14" y="14" width="7" height="7"></rect>
<rect x="3" y="14" width="7" height="7"></rect>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 389 B

6
assets/images/utils/image.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="9" cy="9" r="2"></circle>
<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 356 B

126
assets/styles/components.scss
View File

@@ -433,27 +433,31 @@ tr.button-transparent {
}
}
.iconified-button {
@extend .button-base;
.button-color-base {
box-sizing: border-box;
--text-color: var(--color-button-text);
--background-color: var(--color-button-bg);
box-sizing: border-box;
color: var(--text-color);
background-color: var(--background-color);
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
border-radius: var(--size-rounded-sm);
}
.iconified-button {
@extend .button-base;
@extend .button-color-base;
display: flex;
padding: var(--spacing-card-sm) var(--spacing-card-bg);
margin: 0;
font-size: var(--font-size-nm);
align-items: center;
cursor: pointer;
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
width: fit-content;
height: fit-content;
color: var(--text-color);
background-color: var(--background-color);
text-decoration: none;
border-radius: var(--size-rounded-sm);
svg {
width: 1.1rem;
@@ -479,6 +483,30 @@ tr.button-transparent {
}
}
.square-button {
@extend .button-base;
--text-color: var(--color-button-text);
--background-color: var(--color-button-bg);
display: flex;
align-items: center;
height: 2.25rem;
width: 2.25rem;
border-radius: var(--size-rounded-sm);
color: var(--text-color);
background-color: var(--background-color);
box-shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
svg {
width: 1.25rem;
height: 1.25rem;
margin: auto;
}
flex-shrink: 0;
}
.header-button {
@extend .iconified-button;
@@ -691,27 +719,6 @@ tr.button-transparent {
}
}
.download-button {
@extend .button-base;
display: flex;
align-items: center;
height: 2.25rem;
width: 2.25rem;
border-radius: var(--size-rounded-sm);
color: var(--color-brand-inverted);
background-color: var(--color-brand);
margin-right: var(--spacing-card-sm);
svg {
width: 1.25rem;
height: 1.25rem;
margin: auto;
}
flex-shrink: 0;
}
.textarea-wrapper {
display: flex;
flex-direction: column;
@@ -1002,6 +1009,10 @@ h1 {
padding: var(--spacing-card-lg);
}
.padding-bg {
padding: var(--spacing-card-bg);
}
.padding-md {
padding: var(--spacing-card-md);
}
@@ -1014,6 +1025,10 @@ h1 {
padding-block: var(--spacing-card-lg);
}
.padding-block-bg {
padding-block: var(--spacing-card-bg);
}
.padding-block-md {
padding-block: var(--spacing-card-md);
}
@@ -1026,6 +1041,10 @@ h1 {
padding-inline: var(--spacing-card-lg);
}
.padding-inline-bg {
padding-inline: var(--spacing-card-bg);
}
.padding-inline-md {
padding-inline: var(--spacing-card-md);
}
@@ -1278,3 +1297,52 @@ button {
font-weight: bold;
}
}
.project-list {
width: 100%;
gap: var(--spacing-card-md);
overflow: hidden;
&:not(:first-child) {
margin-top: var(--spacing-card-md);
}
&:not(:empty) {
margin-bottom: var(--spacing-card-md);
}
}
.project-list.display-mode--list {
display: flex;
flex-direction: column;
}
.project-list.display-mode--gallery {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
@media screen and (max-width: 750px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}
.project-list.display-mode--grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@media screen and (max-width: 80rem) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 1024px) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media screen and (max-width: 860px) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media screen and (max-width: 550px) {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
}