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

Merge pull request #2709 from penpot/eva-bugfixing-css

Browse source 
🐛 Fix some visual errors
This commit is contained in:
Alejandro 2022-12-29 14:25:30 +01:00 • committed by GitHub
commit 8111db1110
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/resources/styles/main/partials/context-menu.scss
View file

@ -48,6 +48,7 @@
color: $color-black; color: $color-black;
display: block; display: block;
font-size: $fs14; font-size: $fs14;
font-weight: 400;
padding: $size-2 $size-4; padding: $size-2 $size-4;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;

16
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -29,6 +29,7 @@
text-align: center; text-align: center;
a { a {
width: 100%; width: 100%;
font-weight: normal;
} }
@media #{$bp-max-1366} { @media #{$bp-max-1366} {
height: 200px; height: 200px;
@ -103,6 +104,10 @@
width: 90px; width: 90px;
height: 90px; height: 90px;
} }
.info-wrapper {
display: grid;
grid-template-columns: 1fr auto;
}
.item-info { .item-info {
display: grid; display: grid;
@ -132,7 +137,6 @@
span.date { span.date {
color: $color-gray-30; color: $color-gray-30;
font-size: $fs13;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
@ -203,6 +207,9 @@
.project-th-actions { .project-th-actions {
opacity: 1; opacity: 1;
} }
a {
text-decoration: none;
}
} }
.selected { .selected {
@ -213,14 +220,12 @@
.project-th-actions { .project-th-actions {
align-items: center; align-items: center;
bottom: 14px;
opacity: 0; opacity: 0;
display: flex; display: flex;
right: 5px; right: 5px;
justify-content: center; justify-content: center;
position: absolute;
width: 30px; width: 30px;
height: 30px; height: 100%;
span { span {
color: $color-black; color: $color-black;
@ -238,7 +243,8 @@
align-items: flex-end; align-items: flex-end;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
height: 100%; height: 30px;
margin-top: 20px;
> svg { > svg {
fill: $color-gray-60; fill: $color-gray-60;

1
frontend/resources/styles/main/partials/dashboard-sidebar.scss
View file

@ -139,6 +139,7 @@
color: $color-gray-60; color: $color-gray-60;
@include text-ellipsis; @include text-ellipsis;
width: 130px; width: 130px;
text-align: left;
} }
.icon { .icon {

6
frontend/resources/styles/main/partials/dashboard.scss
View file

@ -250,6 +250,9 @@
font-weight: 400; font-weight: 400;
color: $color-gray-60; color: $color-gray-60;
margin-left: 0.75rem; margin-left: 0.75rem;
@media (max-width: 760px) {
display: none;
}
} }
.project-actions { .project-actions {
@ -299,6 +302,9 @@
line-height: 1rem; line-height: 1rem;
font-size: $fs14; font-size: $fs14;
font-weight: 400; font-weight: 400;
@media (max-width: 880px) {
display: none;
}
} }
.dashboard-table { .dashboard-table {

112
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -302,33 +302,33 @@
[:& grid-item-thumbnail {:file file}]) [:& grid-item-thumbnail {:file file}])
(when (and (:is-shared file) (not library-view?)) (when (and (:is-shared file) (not library-view?))
[:div.item-badge i/library]) [:div.item-badge i/library])
[:div.item-info [:div.info-wrapper
(if (:edition @local) [:div.item-info
[:& inline-edition {:content (:name file) (if (:edition @local)
:on-end edit}] [:& inline-edition {:content (:name file)
[:h3 (:name file)]) :on-end edit}]
[:& grid-item-metadata {:modified-at (:modified-at file)}]] [:h3 (:name file)])
[:div.project-th-actions {:class (dom/classnames [:& grid-item-metadata {:modified-at (:modified-at file)}]]
:force-display (:menu-open @local))} [:div.project-th-actions {:class (dom/classnames
[:div.project-th-icon.menu :force-display (:menu-open @local))}
{:tab-index "0" [:div.project-th-icon.menu
:ref menu-ref {:tab-index "0"
:on-click on-menu-click :ref menu-ref
:on-key-down (fn [event] :on-click on-menu-click
(when (kbd/enter? event) :on-key-down (fn [event]
(on-menu-click event)))} (when (kbd/enter? event)
i/actions (on-menu-click event)))}
(when selected? i/actions
[:& file-menu {:files (vals selected-files) (when selected?
:show? (:menu-open @local) [:& file-menu {:files (vals selected-files)
:left (+ 24 (:x (:menu-pos @local))) :show? (:menu-open @local)
:top (:y (:menu-pos @local)) :left (+ 24 (:x (:menu-pos @local)))
:navigate? navigate? :top (:y (:menu-pos @local))
:on-edit on-edit :navigate? navigate?
:on-menu-close on-menu-close :on-edit on-edit
:origin origin :on-menu-close on-menu-close
:dashboard-local dashboard-local}])]]]] :origin origin
)) :dashboard-local dashboard-local}])]]]]]))
(mf/defc grid (mf/defc grid
@ -444,19 +444,19 @@
on-drag-enter on-drag-enter
(mf/use-fn (mf/use-fn
(mf/deps selected-project) (mf/deps selected-project)
(fn [e] (fn [e]
(when (dnd/has-type? e "penpot/files") (when (dnd/has-type? e "penpot/files")
(dom/prevent-default e) (dom/prevent-default e)
(when-not (or (dnd/from-child? e) (when-not (or (dnd/from-child? e)
(dnd/broken-event? e)) (dnd/broken-event? e))
(when (not= selected-project project-id) (when (not= selected-project project-id)
(reset! dragging? true)))) (reset! dragging? true))))
(when (or (dnd/has-type? e "Files") (when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file")) (dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e) (dom/prevent-default e)
(reset! dragging? true)))) (reset! dragging? true))))
on-drag-over on-drag-over
(mf/use-fn (mf/use-fn
@ -468,9 +468,9 @@
on-drag-leave on-drag-leave
(mf/use-fn (mf/use-fn
(fn [e] (fn [e]
(when-not (dnd/from-child? e) (when-not (dnd/from-child? e)
(reset! dragging? false)))) (reset! dragging? false))))
on-drop-success on-drop-success
(fn [] (fn []
@ -480,21 +480,21 @@
on-drop on-drop
(mf/use-fn (mf/use-fn
(mf/deps files selected-files) (mf/deps files selected-files)
(fn [e] (fn [e]
(when (or (dnd/has-type? e "Files") (when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file")) (dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e) (dom/prevent-default e)
(reset! dragging? false) (reset! dragging? false)
(import-files (.-files (.-dataTransfer e)))) (import-files (.-files (.-dataTransfer e))))
(when (dnd/has-type? e "penpot/files") (when (dnd/has-type? e "penpot/files")
(reset! dragging? false) (reset! dragging? false)
(when (not= selected-project project-id) (when (not= selected-project project-id)
(let [data {:ids (into #{} (keys selected-files)) (let [data {:ids (into #{} (keys selected-files))
:project-id project-id} :project-id project-id}
mdata {:on-success on-drop-success}] mdata {:on-success on-drop-success}]
(st/emit! (dd/move-files (with-meta data mdata))))))))] (st/emit! (dd/move-files (with-meta data mdata))))))))]
[:div.dashboard-grid {:on-drag-enter on-drag-enter [:div.dashboard-grid {:on-drag-enter on-drag-enter
:on-drag-over on-drag-over :on-drag-over on-drag-over