Merge pull request #45 from jcgueriaud1/masonry

Example of the social view can be displayed
McPringle · Mar 28, 2024 · f4a9e6d · f4a9e6d
2 parents 2259b03 + 59ac40f
commit f4a9e6d
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 13 deletions.
diff --git a/frontend/themes/apus/masonry.css b/frontend/themes/apus/masonry.css
@@ -0,0 +1,13 @@
+.masonry {
+    --masonry-gap: var(--lumo-space-m);
+    --masonry-brick-width: 180px;
+    column-gap: var(--masonry-gap);
+    column-fill: initial;
+    column-width: var(--masonry-brick-width);
+}
+.masonry > * {
+    /* Sometimes elements get stuck between columns. */
+    break-inside: avoid;
+    /* add gap at bottom */
+    margin-bottom: var(--masonry-gap)
+}
diff --git a/frontend/themes/apus/styles.css b/frontend/themes/apus/styles.css
@@ -16,6 +16,8 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
 
+@import url('./masonry.css');
+
 :root {
     background-color: #000000;
 }

diff --git a/frontend/themes/apus/views/message-view.css b/frontend/themes/apus/views/message-view.css
@@ -18,14 +18,12 @@
 
 .message-view {
     background-color: #84ddee;
-    border-radius: 5px;
-    display: inline-block;
-    width: 580px;
-    margin-left: 10px;
-    margin-bottom: 10px;
-    padding: 10px;
+    border-radius: var(--lumo-border-radius-s);
+    padding: var(--lumo-space-m);
 }
+.masonry .message-view {
 
+}
 .message-view img {
     max-height: 200px;
     max-width: 100%;

diff --git a/frontend/themes/apus/views/social-view.css b/frontend/themes/apus/views/social-view.css
@@ -21,9 +21,10 @@
     position: absolute;
     top: 0;
     left: 1300px;
-    width: 620px;
-    height: 1080px;
+    width: 600px;
+    height: 1060px;
     overflow: clip;
+    padding: 10px;
 }
 
 #social-view h2 {

diff --git a/frontend/themes/apus/views/social-wall-view.css b/frontend/themes/apus/views/social-wall-view.css
@@ -17,9 +17,7 @@
  */
 
 #social-wall-view {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 1920px;
-    height: 1080px;
+    height:100vh;
+    width:100vw;
+    display: flex;
 }
diff --git a/src/main/java/swiss/fihlon/apus/ui/view/SocialView.java b/src/main/java/swiss/fihlon/apus/ui/view/SocialView.java
@@ -44,6 +44,7 @@ public SocialView(@NotNull final SocialService socialService,
         setId("social-view");
         add(new H2("#JavaLand on Mastodon"));
         add(messageContainer);
+        messageContainer.addClassName("masonry");
         updateMessages();
         final ScheduledFuture<?> updateScheduler = taskScheduler.scheduleAtFixedRate(this::updateScheduler, UPDATE_FREQUENCY);
         addDetachListener(event -> updateScheduler.cancel(true));