Beschreiben Sie dieses Thema/diese Komponente in ein oder zwei Sätzen * *
Hallo Diese Theme-Komponente aktiviert Sticky-Avatare für Mobilgeräte.
Fügen Sie Screenshots hinzu (falls zutreffend) * *
Fügen Sie weitere Details hinzu und erklären Sie die Einstellungen (falls zutreffend) * *
Ich habe die Kernfunktion für Sticky-Avatare wiederverwendet, um sie auf Mobilgeräten nutzbar zu machen.
Der gesamte Abschnitt (Avatar des Themas + Metadaten des Themas) ist oben angeheftet. Wenn die Höhe des Beitrags außerhalb des Bildschirms lang ist oder wenn beim Scrollen nach oben bei langen Beiträgen. Ich habe den Sticky-Avatar für kurze Beiträge beim Scrollen nach oben entfernt, sodass er nur bei langen Beiträgen auf Mobilgeräten aktiviert wird.
Ich habe diese Funktion mit einer CSS-Überschreibung für persönliche Nachrichten deaktiviert.
Da ich im Sticky-Abschnitt eine Hintergrundfarbe var(--secondary) festgelegt habe, habe ich die Hervorhebung des Thema-Beitrags von .topic-post nach .topic-post .contents verschoben, sodass nur der Abschnitt unter dem Avatar und den Metadaten hervorgehoben wird.
Bei diesem Beitrag wird nur der Inhaltsabschnitt hervorgehoben.
Wie könnte ich einen Schlagschatten unter den Sticky-Avatarrahmen anwenden?
(So etwas wie: box-shadow: 0 -10px 30px 8px #CCCCCC;)
Es wäre schön, wenn es eine Funktion in der Theme-Komponente gäbe, mit der ein dezenter Schlagschatten hinzugefügt werden könnte, bei dem der Administrator einfach einen #HEX-Wert und eine Unschärfe oder etwas Ähnliches eingeben könnte. Aber wahrscheinlich ist das für Sie den Aufwand nicht wert.
Was wäre vorerst der richtige CSS-Override, um einen Schlagschatten anzuzielen/zu aktivieren?
Als ich versuchte, topic-meta-data anzuzielen, wurde der Schatten um dieses gesamte Element gelegt, nicht nur um den unteren Teil, und der Schatten umfasste auch nicht den topic-avatar.
Außerdem erhalte ich mit dieser Theme-Komponente eine Fehlermeldung (siehe unten). Wird diese Komponente nicht mehr gewartet?
[Adminhinweis] Das Theme „Sticky Avatars for Mobile“ enthält Code, der aktualisiert werden muss. (id: discourse.widgets-decommissioned) (mehr erfahren)