diff --git a/src/sb/app/field/ui.cljc b/src/sb/app/field/ui.cljc index f4c5105b..357914d6 100644 --- a/src/sb/app/field/ui.cljc +++ b/src/sb/app/field/ui.cljc @@ -185,14 +185,14 @@ ) (ui/defview show-video [url] - [:a.bg-black.w-full.aspect-video.flex.items-center.justify-center.group.relative + [:a.bg-black.w-full.aspect-video.flex.items-center.justify-center.relative {:href url :target "_blank" :style {:background-image (asset.ui/css-url (:video/thumbnail (parse-video-url url))) :background-size "cover" :background-position "center"}} - [icons/external-link "absolute text-white top-2 right-2 icon-sm drop-shadow"] - [icons/play-circle "icon-xl text-white drop-shadow-2xl transition-all group-hover:scale-110 "]]) + [:div.rounded.p-1.absolute.top-1.right-1.text-white {:class "hover:bg-black/20"} [icons/external-link " icon-lg drop-shadow"]] + [icons/play-circle "icon-xl w-20 h-20 text-white drop-shadow-2xl transition-all hover:scale-110 "]]) (ui/defview video-field {:key (fn [?field] #?(:cljs (goog/getUid ?field)))} @@ -202,18 +202,17 @@ ;; preview shows persisted value? [:div.flex.items-center [:div.flex-auto (form.ui/show-label ?field (:label props))] - (when can-edit? - [:div.place-self-end [:a {:on-click #(swap! !editing? not)} - [(if @!editing? icons/dash icons/chevron-down) "icon-gray"]]])] - - (when (and can-edit? @!editing?) + #_(when can-edit? + [:div.place-self-end [:a {:on-click #(swap! !editing? not)} + [(if @!editing? icons/chevron-up icons/chevron-down) "icon-gray"]]])] + (when-let [url (:video/url @?field)] + [show-video url]) + (when can-edit? (text-field ?field (merge props - {:label nil + {:label false :placeholder "YouTube or Vimeo url" :wrap (partial hash-map :video/url) - :unwrap :video/url}))) - (when-let [url (:video/url @?field)] - [show-video url])])) + :unwrap :video/url})))])) (ui/defview select-field [?field {:as props :keys [label options]}] [:div.field-wrapper diff --git a/src/sb/app/form/ui.cljc b/src/sb/app/form/ui.cljc index b74e4206..c052113e 100644 --- a/src/sb/app/form/ui.cljc +++ b/src/sb/app/form/ui.cljc @@ -31,7 +31,7 @@ (defn show-label [?field & [label]] (when-let [label (u/some-or label (:label ?field))] - [:label.field-label {:for (field-id ?field)} label])) + [:label.field-label {:for (field-id ?field)} label])) (defn ?field-props [?field get-value diff --git a/src/sb/app/project/ui.cljc b/src/sb/app/project/ui.cljc index 7570a4f1..15a68009 100644 --- a/src/sb/app/project/ui.cljc +++ b/src/sb/app/project/ui.cljc @@ -122,7 +122,6 @@ entries (->> project :entity/field-entries)] [:<> dev-panel - (str roles) [:div.flex-v.gap-6.pb-6 ;; title row [:div.flex @@ -156,14 +155,13 @@ :when (or can-edit? (field.data/entry-value field entry))] (field.ui/show-entry {:parent project - :can-edit? can-edit? - :field field - :entry entry})) + :can-edit? can-edit? + :field field + :entry entry})) [:section.flex-v.gap-2.items-start [manage-community-actions project (:project/community-actions project)]] (when video - [:section [:h3 (tr :tr/video)] - [field.ui/show-video video]])]]])) + [field.ui/show-video video])]]])) (ui/defview new {:route "/new/p/:board-id" diff --git a/src/sparkboard.css b/src/sparkboard.css index 8e47fac1..d98bb5ba 100644 --- a/src/sparkboard.css +++ b/src/sparkboard.css @@ -154,22 +154,6 @@ @apply cursor-grab active:cursor-grabbing } - .icon-sm { - @apply w-[15px] h-[15px] - } - - .icon-md { - @apply w-[18.75px] h-[18.75px] - } - - .icon-lg { - @apply w-[22.5px] h-[22.5px] - } - - .icon-xl { - @apply w-[30px] h-[30px] - } - .icon-gray { @apply text-gray-500 hover:text-black focus-ring } @@ -256,6 +240,23 @@ @layer components { + .icon-sm { + @apply w-[15px] h-[15px] + } + + .icon-md { + @apply w-[18.75px] h-[18.75px] + } + + .icon-lg { + @apply w-[22.5px] h-[22.5px] + } + + .icon-xl { + @apply w-[30px] h-[30px] + } + + .menu-darken { @apply hover:bg-black/5 data-[state=open]:bg-black/5 }