mirror of
https://github.com/penpot/penpot.git
synced 2025-03-09 14:21:42 -05:00
fix user zone bug and grid WIP
This commit is contained in:
parent
5128410d82
commit
b5bad3c785
8 changed files with 108 additions and 17 deletions
|
@ -248,12 +248,11 @@
|
|||
(html
|
||||
[:section.dashboard-grid
|
||||
[:h2 "Your projects"]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.add-project {:on-click on-click}
|
||||
[:span "+ New project"]]
|
||||
(for [item (vals (:projects-by-id state))]
|
||||
(rum/with-key (project-item item) (:id item)))]]]))))
|
||||
(rum/with-key (project-item item) (:id item)))]]))))
|
||||
|
||||
(def grid
|
||||
(util/component
|
||||
|
|
|
@ -2,6 +2,8 @@
|
|||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[uxbox.ui.header :as ui.header]
|
||||
[uxbox.ui.icons.dashboard :as icons]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.util :as util]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
@ -13,7 +15,86 @@
|
|||
(html
|
||||
[:main.dashboard-main
|
||||
(ui.header/header)
|
||||
[:p "FOOO"]]))
|
||||
[:section.dashboard-content
|
||||
[:section#dashboard-bar.dashboard-bar.library-bar
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects "20 elements"]
|
||||
[:span "Sort by"]
|
||||
#_(project-sort-selector (atom :name))]
|
||||
[:div.dashboard-search
|
||||
icons/search]]
|
||||
[:section.dashboard-grid.library
|
||||
[:h2 "Library name"]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.project-th
|
||||
[:h3 "Custom element"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon icons/search]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
]
|
||||
]
|
||||
]
|
||||
]))
|
||||
|
||||
(def elements
|
||||
(util/component
|
||||
|
|
|
@ -15,13 +15,13 @@
|
|||
(nav/link "/" i/logo)]
|
||||
[:ul.main-nav
|
||||
[:li
|
||||
[:a {:href "/"} "PROJECTS"]]
|
||||
[:a {:href "/#/"} "PROJECTS"]]
|
||||
[:li.current
|
||||
[:a {:href "/elements"} "ELEMENTS"]]
|
||||
[:a {:href "/#/elements"} "ELEMENTS"]]
|
||||
[:li
|
||||
[:a {:href "/icons"} "ICONS"]]
|
||||
[:a {:href "/#/icons"} "ICONS"]]
|
||||
[:li
|
||||
[:a {:href "/colors"} "COLORS"]]]
|
||||
[:a {:href "/#/colors"} "COLORS"]]]
|
||||
(ui.u/user)]))
|
||||
|
||||
(def ^:static header
|
||||
|
|
|
@ -5,7 +5,6 @@ body {
|
|||
flex-direction: column;
|
||||
font-family: "sourcesanspro", sans-serif;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -3,13 +3,6 @@
|
|||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.workspace-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
@ -17,3 +10,11 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
@ -44,4 +44,8 @@
|
|||
|
||||
}
|
||||
|
||||
&.library-bar {
|
||||
padding: $small $medium $small 230px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -11,9 +11,11 @@
|
|||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
min-height: 60vh;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
margin: $big;
|
||||
max-height: 100%;
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
|
||||
.grid-item {
|
||||
|
@ -126,5 +128,9 @@
|
|||
}
|
||||
|
||||
}
|
||||
// STYLES FOR LIBRARIES
|
||||
&.library {
|
||||
padding: $medium $medium $medium 250px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -72,10 +72,11 @@
|
|||
background-color: $color-white;
|
||||
border-radius: $br-small;
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
min-width: 150px;
|
||||
padding: 0 $small;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
z-index: 12;
|
||||
@include animation(0,.2s,fadeInDown);
|
||||
|
|
Loading…
Add table
Reference in a new issue