3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-06 11:18:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add new carrousel layout

Browse source
This commit is contained in:
elhombretecla 2025-03-11 12:31:34 +01:00 • committed by Marina López
parent 88772a9ced
commit 0ae57a017e
2 changed files with 38 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/app/main/ui/dashboard/templates.cljs
View file

@ -28,7 +28,7 @@
(i/icon-xref :arrow (stl/css :arrow-icon))) (i/icon-xref :arrow (stl/css :arrow-icon)))
(def ^:private download-icon (def ^:private download-icon
(i/icon-xref :download (stl/css :download-icon))) (i/icon-xref :add (stl/css :download-icon)))
(def builtin-templates (def builtin-templates
(l/derived :builtin-templates st/state)) (l/derived :builtin-templates st/state))
@ -241,6 +241,9 @@
:collapsed collapsed)} :collapsed collapsed)}
[:> title* {:on-click on-toggle-collapse [:> title* {:on-click on-toggle-collapse
:is-collapsed collapsed}] :is-collapsed collapsed}]
[:p {:class (stl/css :content-description)}
"Here you have some Libraries and templates you can add to your project"]
[:div {:class (stl/css :content) [:div {:class (stl/css :content)
:on-scroll on-scroll :on-scroll on-scroll

48
frontend/src/app/main/ui/dashboard/templates.scss
View file

@ -7,29 +7,43 @@
@use "common/refactor/common-refactor.scss" as *; @use "common/refactor/common-refactor.scss" as *;
.dashboard-templates-section { .dashboard-templates-section {
position: absolute; background-color: var(--color-background-tertiary);
bottom: 0;
border-bottom-left-radius: $br-8;
border-bottom-right-radius: $br-8;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-end;
bottom: 0;
width: 100%;
height: $s-228; height: $s-228;
justify-content: flex-end;
margin-left: $s-6;
margin-right: $s-6;
margin-bottom: $s-6;
position: absolute;
transition: bottom 300ms; transition: bottom 300ms;
width: calc(100% - $s-12);
pointer-events: none; pointer-events: none;
&.collapsed { &.collapsed {
bottom: calc(-1 * $s-228); bottom: calc(-1 * $s-228);
background-color: transparent;
transition: bottom 300ms; transition: bottom 300ms;
.title-btn {
border-bottom-right-radius: $br-8;
border-bottom-left-radius: $br-8;
}
.content,
.content-description {
visibility: hidden;
}
} }
} }
.title { .title {
pointer-events: all; pointer-events: all;
width: fit-content; width: 100%;
top: calc(-1 * $s-56); top: calc(-1 * $s-56);
text-align: right; text-align: right;
height: $s-56; height: $s-56;
position: absolute; position: absolute;
right: calc(-1 * $s-24);
} }
.title-btn { .title-btn {
@ -38,12 +52,12 @@
height: $s-56; height: $s-56;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
border-top-left-radius: $br-10; border-top-left-radius: $br-8;
border-top-right-radius: $br-10; border-top-right-radius: $br-8;
margin-right: $s-32;
position: relative; position: relative;
z-index: $z-index-1; z-index: $z-index-1;
background-color: var(--color-background-quaternary); background-color: var(--color-background-tertiary);
width: 100%;
} }
.title-text { .title-text {
@ -51,7 +65,7 @@
vertical-align: middle; vertical-align: middle;
line-height: 1.2; line-height: 1.2;
font-size: $fs-16; font-size: $fs-16;
margin-left: $s-16; margin-left: $s-12;
margin-right: $s-8; margin-right: $s-8;
color: var(--color-foreground-primary); color: var(--color-foreground-primary);
font-weight: $fw400; font-weight: $fw400;
@ -108,19 +122,25 @@
margin-right: $s-44; margin-right: $s-44;
} }
.content-description {
font-size: $fs-14;
color: var(--color-foreground-primary);
margin-bottom: -12px;
margin-left: $s-16;
visibility: visible;
}
.content { .content {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax($s-276, $s-276)); grid-template-columns: repeat(auto-fill, minmax($s-276, $s-276));
grid-auto-flow: column; grid-auto-flow: column;
pointer-events: all; pointer-events: all;
height: $s-228; height: $s-228;
margin-left: $s-6;
border-top-left-radius: $s-8;
background-color: var(--color-background-quaternary);
overflow: scroll hidden; overflow: scroll hidden;
scroll-behavior: smooth; scroll-behavior: smooth;
scroll-snap-type: x mandatory; scroll-snap-type: x mandatory;
scroll-snap-stop: always; scroll-snap-stop: always;
visibility: visible;
} }
.card-container { .card-container {