Lazy load images, truncate headline

This commit is contained in:
@s.roertgen 2024-08-21 11:49:56 +02:00
parent 8a28d39eaf
commit 3889b5f91a
2 changed files with 22 additions and 6 deletions

View file

@ -2632,6 +2632,10 @@ details.collapse summary::-webkit-details-marker {
position: relative; position: relative;
} }
.sticky {
position: sticky;
}
.right-0 { .right-0 {
right: 0px; right: 0px;
} }
@ -2656,10 +2660,22 @@ details.collapse summary::-webkit-details-marker {
bottom: -1rem; bottom: -1rem;
} }
.top-0 {
top: 0px;
}
.left-0 {
left: 0px;
}
.z-\[1\] { .z-\[1\] {
z-index: 1; z-index: 1;
} }
.z-50 {
z-index: 50;
}
.float-right { .float-right {
float: right; float: right;
} }

View file

@ -113,20 +113,20 @@
{:class "animate-flyIn card bg-base-100 w-96 shadow-xl min-h-[620px]"} {:class "animate-flyIn card bg-base-100 w-96 shadow-xl min-h-[620px]"}
[:div {:class "relative"} [:div {:class "relative"}
[:div {:class "absolute w-12 h-12 right-12 -bottom-4 rounded-full bg-white"} [:div {:class "absolute w-12 h-12 right-12 -bottom-4 rounded-full bg-white"}
(cond (cond
(= 30004 (:kind event)) [layer-icon] (= 30004 (:kind event)) [layer-icon]
(= 30142 (:kind event)) [file-icon])] (= 30142 (:kind event)) [file-icon])]
[:figure [:figure
[:img [:img
{:class "h-48 object-cover" {:class "h-48 object-cover"
:loading "lazy"
:src :src
(nostr/get-image-from-metadata-event event) (nostr/get-image-from-metadata-event event)
:alt ""}]]] :alt ""}]]]
[:div [:div
{:class "card-body"} {:class "card-body"}
[:a {:href (nostr/get-d-id-from-event event) [:a {:href (nostr/get-d-id-from-event event)
:class "card-title hover:underline"} :class "card-title hover:underline truncate"}
(nostr/get-name-from-metadata-event event)] (nostr/get-name-from-metadata-event event)]
(doall (doall
(for [about (nostr/get-about-names-from-metadata-event event)] (for [about (nostr/get-about-names-from-metadata-event event)]
@ -152,7 +152,7 @@
(defn events-panel [] (defn events-panel []
(let [events @(re-frame/subscribe [::subs/feed-events]) (let [events @(re-frame/subscribe [::subs/feed-events])
selected-events @(re-frame/subscribe [::subs/selected-events])] selected-events @(re-frame/subscribe [::subs/selected-events])]
[:div {:class "border-2 rounded"} [:div {:class ""}
[:p (str "Num of events: " (count events))] [:p (str "Num of events: " (count events))]
(if (> (count events) 0) (if (> (count events) 0)
[:div {:class "flex flex-wrap justify-center gap-2"} [:div {:class "flex flex-wrap justify-center gap-2"}
@ -415,7 +415,7 @@
(defn new-header [] (defn new-header []
(let [selected-events @(re-frame/subscribe [::subs/selected-events])] (let [selected-events @(re-frame/subscribe [::subs/selected-events])]
[:div [:div
{:class "navbar bg-base-100"} {:class "navbar sticky z-50 top-0 left-0 bg-base-100"}
[:div [:div
{:class "flex-1"} {:class "flex-1"}
[:a {:class "btn btn-ghost text-xl" [:a {:class "btn btn-ghost text-xl"
@ -537,9 +537,9 @@
;; main ;; main
(defn main-panel [] (defn main-panel []
(let [active-panel (re-frame/subscribe [::subs/active-panel])] (let [active-panel (re-frame/subscribe [::subs/active-panel])]
[:div [:div {:class "relative"}
[new-header] [new-header]
[:div [:div {:class ""}
(routes/panels @active-panel) (routes/panels @active-panel)
[add-to-lists-modal] [add-to-lists-modal]
[create-list-modal] [create-list-modal]