From 0a8dfde0a2a4e2a48bbd94429ce3cce704e4564a Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 29 Dec 2022 13:59:57 +0100 Subject: [PATCH] :bug: Fix some visual errors --- .../styles/main/partials/context-menu.scss | 1 + .../styles/main/partials/dashboard-grid.scss | 16 ++- .../main/partials/dashboard-sidebar.scss | 1 + .../styles/main/partials/dashboard.scss | 6 + frontend/src/app/main/ui/dashboard/grid.cljs | 112 +++++++++--------- 5 files changed, 75 insertions(+), 61 deletions(-) diff --git a/frontend/resources/styles/main/partials/context-menu.scss b/frontend/resources/styles/main/partials/context-menu.scss index 244c0e4d0..828e0bd82 100644 --- a/frontend/resources/styles/main/partials/context-menu.scss +++ b/frontend/resources/styles/main/partials/context-menu.scss @@ -48,6 +48,7 @@ color: $color-black; display: block; font-size: $fs14; + font-weight: 400; padding: $size-2 $size-4; text-align: left; white-space: nowrap; diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index 5400c271d..501d87b9c 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -29,6 +29,7 @@ text-align: center; a { width: 100%; + font-weight: normal; } @media #{$bp-max-1366} { height: 200px; @@ -103,6 +104,10 @@ width: 90px; height: 90px; } + .info-wrapper { + display: grid; + grid-template-columns: 1fr auto; + } .item-info { display: grid; @@ -132,7 +137,6 @@ span.date { color: $color-gray-30; - font-size: $fs13; overflow: hidden; text-overflow: ellipsis; width: 100%; @@ -203,6 +207,9 @@ .project-th-actions { opacity: 1; } + a { + text-decoration: none; + } } .selected { @@ -213,14 +220,12 @@ .project-th-actions { align-items: center; - bottom: 14px; opacity: 0; display: flex; right: 5px; justify-content: center; - position: absolute; width: 30px; - height: 30px; + height: 100%; span { color: $color-black; @@ -238,7 +243,8 @@ align-items: flex-end; flex-direction: column; width: 100%; - height: 100%; + height: 30px; + margin-top: 20px; > svg { fill: $color-gray-60; diff --git a/frontend/resources/styles/main/partials/dashboard-sidebar.scss b/frontend/resources/styles/main/partials/dashboard-sidebar.scss index 50f053316..070c5b199 100644 --- a/frontend/resources/styles/main/partials/dashboard-sidebar.scss +++ b/frontend/resources/styles/main/partials/dashboard-sidebar.scss @@ -139,6 +139,7 @@ color: $color-gray-60; @include text-ellipsis; width: 130px; + text-align: left; } .icon { diff --git a/frontend/resources/styles/main/partials/dashboard.scss b/frontend/resources/styles/main/partials/dashboard.scss index f574d4baf..2dce56ef5 100644 --- a/frontend/resources/styles/main/partials/dashboard.scss +++ b/frontend/resources/styles/main/partials/dashboard.scss @@ -250,6 +250,9 @@ font-weight: 400; color: $color-gray-60; margin-left: 0.75rem; + @media (max-width: 760px) { + display: none; + } } .project-actions { @@ -299,6 +302,9 @@ line-height: 1rem; font-size: $fs14; font-weight: 400; + @media (max-width: 880px) { + display: none; + } } .dashboard-table { diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 9f811c20e..1bdaf8d02 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -302,33 +302,33 @@ [:& grid-item-thumbnail {:file file}]) (when (and (:is-shared file) (not library-view?)) [:div.item-badge i/library]) - [:div.item-info - (if (:edition @local) - [:& inline-edition {:content (:name file) - :on-end edit}] - [:h3 (:name file)]) - [:& grid-item-metadata {:modified-at (:modified-at file)}]] - [:div.project-th-actions {:class (dom/classnames - :force-display (:menu-open @local))} - [:div.project-th-icon.menu - {:tab-index "0" - :ref menu-ref - :on-click on-menu-click - :on-key-down (fn [event] - (when (kbd/enter? event) - (on-menu-click event)))} - i/actions - (when selected? - [:& file-menu {:files (vals selected-files) - :show? (:menu-open @local) - :left (+ 24 (:x (:menu-pos @local))) - :top (:y (:menu-pos @local)) - :navigate? navigate? - :on-edit on-edit - :on-menu-close on-menu-close - :origin origin - :dashboard-local dashboard-local}])]]]] - )) + [:div.info-wrapper + [:div.item-info + (if (:edition @local) + [:& inline-edition {:content (:name file) + :on-end edit}] + [:h3 (:name file)]) + [:& grid-item-metadata {:modified-at (:modified-at file)}]] + [:div.project-th-actions {:class (dom/classnames + :force-display (:menu-open @local))} + [:div.project-th-icon.menu + {:tab-index "0" + :ref menu-ref + :on-click on-menu-click + :on-key-down (fn [event] + (when (kbd/enter? event) + (on-menu-click event)))} + i/actions + (when selected? + [:& file-menu {:files (vals selected-files) + :show? (:menu-open @local) + :left (+ 24 (:x (:menu-pos @local))) + :top (:y (:menu-pos @local)) + :navigate? navigate? + :on-edit on-edit + :on-menu-close on-menu-close + :origin origin + :dashboard-local dashboard-local}])]]]]])) (mf/defc grid @@ -444,19 +444,19 @@ on-drag-enter (mf/use-fn - (mf/deps selected-project) - (fn [e] - (when (dnd/has-type? e "penpot/files") - (dom/prevent-default e) - (when-not (or (dnd/from-child? e) - (dnd/broken-event? e)) - (when (not= selected-project project-id) - (reset! dragging? true)))) + (mf/deps selected-project) + (fn [e] + (when (dnd/has-type? e "penpot/files") + (dom/prevent-default e) + (when-not (or (dnd/from-child? e) + (dnd/broken-event? e)) + (when (not= selected-project project-id) + (reset! dragging? true)))) - (when (or (dnd/has-type? e "Files") - (dnd/has-type? e "application/x-moz-file")) - (dom/prevent-default e) - (reset! dragging? true)))) + (when (or (dnd/has-type? e "Files") + (dnd/has-type? e "application/x-moz-file")) + (dom/prevent-default e) + (reset! dragging? true)))) on-drag-over (mf/use-fn @@ -468,9 +468,9 @@ on-drag-leave (mf/use-fn - (fn [e] - (when-not (dnd/from-child? e) - (reset! dragging? false)))) + (fn [e] + (when-not (dnd/from-child? e) + (reset! dragging? false)))) on-drop-success (fn [] @@ -480,21 +480,21 @@ on-drop (mf/use-fn - (mf/deps files selected-files) - (fn [e] - (when (or (dnd/has-type? e "Files") - (dnd/has-type? e "application/x-moz-file")) - (dom/prevent-default e) - (reset! dragging? false) - (import-files (.-files (.-dataTransfer e)))) + (mf/deps files selected-files) + (fn [e] + (when (or (dnd/has-type? e "Files") + (dnd/has-type? e "application/x-moz-file")) + (dom/prevent-default e) + (reset! dragging? false) + (import-files (.-files (.-dataTransfer e)))) - (when (dnd/has-type? e "penpot/files") - (reset! dragging? false) - (when (not= selected-project project-id) - (let [data {:ids (into #{} (keys selected-files)) - :project-id project-id} - mdata {:on-success on-drop-success}] - (st/emit! (dd/move-files (with-meta data mdata))))))))] + (when (dnd/has-type? e "penpot/files") + (reset! dragging? false) + (when (not= selected-project project-id) + (let [data {:ids (into #{} (keys selected-files)) + :project-id project-id} + mdata {:on-success on-drop-success}] + (st/emit! (dd/move-files (with-meta data mdata))))))))] [:div.dashboard-grid {:on-drag-enter on-drag-enter :on-drag-over on-drag-over