From da5ac3bda37f3dd43732e735101e71b3527164f6 Mon Sep 17 00:00:00 2001
From: elhombretecla <delacruzgarciajuan@gmail.com>
Date: Sat, 7 May 2016 11:08:43 +0200
Subject: [PATCH] add images library grid styles
---
resources/styles/partials/dashboard-grid.scss | 40 +++++-
src/uxbox/ui/dashboard/images.cljs | 121 ++++++------------
2 files changed, 76 insertions(+), 85 deletions(-)
diff --git a/resources/styles/partials/dashboard-grid.scss b/resources/styles/partials/dashboard-grid.scss
index edaf7b337..8fe3f2a49 100644
--- a/resources/styles/partials/dashboard-grid.scss
+++ b/resources/styles/partials/dashboard-grid.scss
@@ -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;
diff --git a/src/uxbox/ui/dashboard/images.cljs b/src/uxbox/ui/dashboard/images.cljs
index 6e8c39bd0..6296afab7 100644
--- a/src/uxbox/ui/dashboard/images.cljs
+++ b/src/uxbox/ui/dashboard/images.cljs
@@ -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