Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-02 01:51:33 -05:00
Code Issues Activity

add images library grid styles

Browse source
This commit is contained in:
elhombretecla 2016-05-07 11:08:43 +02:00
parent dad430de6c
commit da5ac3bda3
2 changed files with 76 additions and 85 deletions
resources/styles/partials
dashboard-grid.scss
src/uxbox/ui/dashboard
images.cljs

40
resources/styles/partials/dashboard-grid.scss
View file

@ -59,15 +59,11 @@
.dashboard-grid-content {
align-items: center;
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: center;
min-height: 60vh;
overflow: scroll;
width: 100%;
.dashboard-grid-row {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
@ -119,6 +115,7 @@
}
// PROJECTS, ELEMENTS & ICONS GRID
&.project-th {
background-color: $color-white;
border-bottom: 2px solid lighten($color-gray-light, 12%);
@ -195,6 +192,40 @@
}
// IMAGES SECTION
&.images-th {
background-color: $color-white;
border-bottom: 2px solid lighten($color-gray-light, 12%);
justify-content: flex-start;
padding: 0;
&:hover {
border-color: $main-ui-color;
span {
color: $main-ui-color;
}
}
span {
padding: $small;
text-align: left;
width: 100%;
@include text-ellipsis;
}
.grid-item-th {
background-position: center;
background-size: cover;
border-top-left-radius: $br-medium;
border-top-right-radius: $br-medium;
height: 70%;
width: 100%;
}
}
.grid-item-image {
svg {
height: 20%;
@ -221,6 +252,7 @@
}
}
// STYLES FOR LIBRARIES
&.library {
padding: $medium $medium $medium 250px;

121
src/uxbox/ui/dashboard/images.cljs
View file

@ -41,87 +41,46 @@
[own]
(html
[:div.dashboard-grid-content
[:div.grid-item.add-project
{on-click #(udl/open! :new-element)}
[:span "+ New element"]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]]))
[:div.dashboard-grid-row
[:div.grid-item.add-project
{on-click #(udl/open! :new-element)}
[:span "+ New image"]]
[:div.grid-item.images-th
[:div.grid-item-th
{:style
{:background-image "url('https://images.unsplash.com/photo-1455098934982-64c622c5e066?crop=entropy&fit=crop&fm=jpg&h=1025&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400')"}}]
[:span "image_name.jpg"]]
[:div.grid-item.images-th
[:div.grid-item-th
{:style
{:background-image "url('https://images.unsplash.com/photo-1422393462206-207b0fbd8d6b?crop=entropy&fit=crop&fm=jpg&h=1025&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925')"}}]
[:span "image_name_long_name.jpg"]]
[:div.grid-item.images-th
[:div.grid-item-th
{:style
{:background-image "url('https://images.unsplash.com/photo-1441986380878-c4248f5b8b5b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=486f09671860a11e70bdd0a45e7c5014')"}}]
[:span "image_name.jpg"]]
[:div.grid-item.images-th
[:div.grid-item-th
{:style
{:background-image "url('https://images.unsplash.com/photo-1423768164017-3f27c066407f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=712b919f3a2f6fc34f29040e8082b6d9')"}}]
[:span "image_name_big_long_name.jpg"]]
[:div.grid-item.images-th
[:div.grid-item-th
{:style
{:background-image "url('https://images.unsplash.com/photo-1456428199391-a3b1cb5e93ab?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=765abd6dc931b7184e9795d8494966ed')"}}]
[:span "image_name.jpg"]]
[:div.grid-item.images-th
[:div.grid-item-th
{:style
{:background-image "url('https://images.unsplash.com/photo-1447678523326-1360892abab8?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=91663afcd23da14f76cc8229c1780d47')"}}]
[:span "image_name.jpg"]]]]))
(def ^:const ^:private grid
(mx/component