Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-09 14:21:42 -05:00
Code Issues Activity

WIP library bar

Browse source
This commit is contained in:
Juan de la Cruz 2015-12-15 19:13:50 +01:00 • committed by Andrey Antukh
parent 97fcf33088
commit 3a387d8820
4 changed files with 119 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
frontend/uxbox/ui/elements.cljs
View file

@ -26,69 +26,82 @@
[:h2 "Library name"] [:h2 "Library name"]
[:div.dashboard-grid-content [:div.dashboard-grid-content
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
[:div.grid-item.project-th [:div.grid-item.project-th
[:span.grid-item-image icons/image]
[:h3 "Custom element"] [:h3 "Custom element"]
[:div.project-th-actions [:div.project-th-actions
[:div.project-th-icon icons/pencil] [:div.project-th-icon.edit icons/pencil]
[:div.project-th-icon.delete icons/trash]]] [:div.project-th-icon.delete icons/trash]]]
] ]
] ]

1
resources/public/styles/main.scss
View file

@ -40,5 +40,6 @@
@import 'partials/dashboard-bar'; @import 'partials/dashboard-bar';
@import 'partials/dashboard-grid'; @import 'partials/dashboard-grid';
@import 'partials/activity-bar'; @import 'partials/activity-bar';
@import 'partials/library-bar';
@import 'partials/lightbox'; @import 'partials/lightbox';
@import 'partials/color-palette'; @import 'partials/color-palette';

17
resources/public/styles/partials/dashboard-grid.scss
View file

@ -26,6 +26,7 @@
flex-direction: column; flex-direction: column;
flex-shrink: 0; flex-shrink: 0;
height: 150px; height: 150px;
justify-content: center;
margin: $medium $medium 0 $medium; margin: $medium $medium 0 $medium;
padding: $medium; padding: $medium;
position: relative; position: relative;
@ -119,12 +120,28 @@
} }
&.edit {
&:hover {
transform: scale(1.4);
}
}
} }
} }
} }
.grid-item-image {
svg {
height: 20%;
max-width: 120px;
width: 40%;
}
}
} }
} }

75
resources/public/styles/partials/library-bar.scss Normal file
View file

@ -0,0 +1,75 @@
.activity-bar {
background-color: $color-white;
bottom: 0;
height: 100%;
position: fixed;
right: 0;
width: 250px;
.activity-bar-inside {
align-items: center;
display: flex;
flex-direction: column;
overflow-y: auto;
padding-top: 70px;
}
h4 {
color: $color-gray-dark;
font-size: $fs16;
font-weight: bold;
margin-bottom: $x-small;
}
.date-ribbon {
background-color: lighten($color-gray-light, 12%);
box-sizing: border-box;
color: $color-white;
font-size: $fs12;
font-weight: bold;
padding: 2px;
text-align: center;
width: 100%;
}
.activity-input {
border-bottom: 1px solid $color-gray-lighter;
box-sizing: border-box;
display: flex;
font-size: $fs13;
padding: $small;
width: 100%;
img.activity-author {
border-radius: 50%;
flex-shrink: 0;
height: 30px;
margin-right: $medium;
width: 30px;
}
.activity-content {
display: flex;
flex-direction: column;
.activity-project {
align-items: center;
display: flex;
flex-wrap: wrap;
a {
font-weight: bold;
margin: 0 3px;
}
}
.activity-time {
color: $color-gray-light;
font-size: $fs11;
font-style: italic;
}
}
}
}