Merge branch 'feature/medias-css-grid' into 'master'

Feature/medias css grid

See merge request idotj/mastodon-embed-timeline!33

CHANGELOG

@@ -1,3 +1,9 @@
+v4.3.7 - 12/03/2024
+- Display medias inside post using CSS grid
+- Add a placeholder bg-color for images
+- Use CSS container query for responsive style changes
+- Fix carousel conflict with preview links
+
 v4.3.5 - 09/03/2024
 - Add a carousel/lightbox for pictures and videos in a post
 - Improve data set for media items
@@ -16,15 +22,15 @@ v4.3.1 - 29/02/2024
 - Use Intl.DateTimeFormat for date formatting
 - Allow to customize date by locale/options parameters
 - Show user account under user name
-- Added a new customized HTML example
+- Add a new customized HTML example
 
 v4.2.1 - 26/02/2024
 - Changed project name: mastodon-embed-feed-timeline -> mastodon-embed-timeline
-- Improved DOM load for module purposes
+- Improve DOM load for module purposes
 - New build script with Rollup.js
-- Added CDN and NPM install steps
+- Add CDN and NPM install steps
-- Added Contributing documentation
+- Add Contributing documentation
-- Added example for JS module case
+- Add example for JS module case
 
 v4.0.4 - 20/02/2024
 - Improve alignment for refresh button

README.md

@@ -65,11 +65,11 @@ This option allows you to start without the need to upload any files on your ser
 Copy the following CSS and JS links to include them in your project:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.5/dist/mastodon-timeline.min.css" integrity="sha256-TkH0gLCNo9xhRd7Ji2Q3KqeVSgeK8B6CeLLqjzlWz6U=" crossorigin="anonymous">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.7/dist/mastodon-timeline.min.css" crossorigin="anonymous">
 ```
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.5/dist/mastodon-timeline.umd.js" integrity="sha256-8eBpA1WfC0uucdJx/KIODQA1VHbnYCT7HZgvm7R4RIg=" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/@idotj/mastodon-embed-timeline@4.3.7/dist/mastodon-timeline.umd.js" crossorigin="anonymous"></script>
 ```
 
 ### Package manager
@@ -174,7 +174,7 @@ const myTimeline = new MastodonTimeline.Init({
 
 ### Customize
 
-In the `examples/` folder there is an HTML file `local-timeline-customized.html` where you can see how to customize your timeline by overwriting the CSS styles and using various JS options when initializing the timeline.
+In the `examples/` folder there is an HTML file `local-timeline-customized.html` where you can see how to customize your timeline by overwriting the CSS styles and using several JS options when initializing the timeline.
 
 If you need to change something in the core files (`src/` folder), I recommend you to read the document [CONTRIBUTING.md](https://gitlab.com/idotj/mastodon-embed-timeline/-/blob/master/CONTRIBUTING.md#testing) to see how to compile and test your changes.
 

examples/local-timeline-customized.html

@@ -96,6 +96,13 @@
         width: calc(100% - 3rem);
         margin-left: auto;
       }
+      .mt-post-media,
+      .mt-post-media-spoiler > img,
+      .mt-post-media-spoiler > audio,
+      .mt-post-media > img,
+      .mt-post-media > video {
+        border-radius: 0;
+      }
     </style>
   </head>
 
@@ -117,9 +124,54 @@
         </p>
         <p>
           Contains several CSS styles that change its appearance without the
-          need to modify the original CSS file (inspect the code at the
+          need to modify the original CSS file:
-          beginning of the HTML file to see the changes).
         </p>
+        <pre>
+          <code>
+  .mt-container {
+    font-family: monospace;
+    background-color: transparent;
+    border: 1px solid white;
+  }
+  .mt-container a,
+  .mt-container a:active,
+  .mt-container a:link {
+    color: darkgreen;
+  }
+  .mt-post-header {
+    margin-bottom: 0;
+  }
+  .mt-post-avatar-image-big img {
+    border-radius: 0;
+  }
+  .mt-post-header-user {
+    margin-right: auto;
+  }
+  .mt-post-header-date {
+    position: absolute;
+    bottom: 1rem;
+    left: 3.5rem;
+  }
+  .mt-post {
+    border-bottom: none;
+    box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.25);
+    margin-bottom: 1rem;
+    padding-bottom: 2rem;
+  }
+  .mt-post-txt,
+  .mt-post-media-wrapper {
+    width: calc(100% - 3rem);
+    margin-left: auto;
+  }
+  .mt-post-media,
+  .mt-post-media-spoiler > img,
+  .mt-post-media-spoiler > audio,
+  .mt-post-media > img,
+  .mt-post-media > video {
+    border-radius: 0;
+  }
+        </code>
+      </pre>
         <p>
           At JS level, it defaults to the light theme and the date is displayed
           in US format using digits only. In order to achieve a minimalist
@@ -142,6 +194,7 @@
       hidePreviewLink: true,
       hideCounterBar: true,
       txtMaxLines: "3",
+      disableCarousel: true,
       btnSeeMore: "",
       btnReload: ""
     });
@@ -178,6 +231,7 @@
         hidePreviewLink: true,
         hideCounterBar: true,
         txtMaxLines: "3",
+        disableCarousel: true,
         btnSeeMore: "",
         btnReload: "",
       });

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@idotj/mastodon-embed-timeline",
-  "version": "4.3.5",
+  "version": "4.3.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@idotj/mastodon-embed-timeline",
-      "version": "4.3.5",
+      "version": "4.3.7",
       "license": "GNU",
       "devDependencies": {
         "@rollup/plugin-terser": "^0.4.4",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idotj/mastodon-embed-timeline",
-  "version": "4.3.5",
+  "version": "4.3.7",
   "description": "Displays Mastodon timeline with posts embed in your website. Very easy to setup, no dependencies, no trackers, cross-browser, WCAG compliant and fully responsive.",
   "license": "GNU",
   "author": {

src/mastodon-timeline.css

@@ -1,4 +1,4 @@
-/* Mastodon embed timeline v4.3.5 */
+/* Mastodon embed timeline v4.3.7 */
 /* More info at: */
 /* https://gitlab.com/idotj/mastodon-embed-timeline */
 
@@ -19,6 +19,7 @@
   --mt-color-btn-bg-hover: #563acc;
   --mt-color-btn-txt: #fff;
   --mt-color-backdrop: #00000090;
+  --mt-color-placeholder: #60698425;
 }
 .mt-container[data-theme="dark"],
 .mt-dialog[data-theme="dark"] {
@@ -52,6 +53,7 @@
   background-color: var(--mt-color-bg);
   scrollbar-color: var(--mt-color-contrast-gray) var(--mt-color-bg);
   scrollbar-width: auto;
+  container: mt-container / inline-size;
 }
 .mt-container::-webkit-scrollbar {
   width: 0.25rem;
@@ -86,7 +88,7 @@
   text-decoration: underline;
 }
 .mt-body {
-  padding: 1rem clamp(0.25rem, 4vw, 1rem);
+  padding: 1rem;
   white-space: pre-wrap;
   word-wrap: break-word;
   margin-bottom: 1rem;
@@ -261,14 +263,22 @@
 
 /* Medias */
 .mt-post-media-wrapper {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(2, 1fr);
-  gap: 1rem;
+  gap: 0.5rem;
   margin-bottom: 1rem;
 }
 .mt-post-media {
   position: relative;
   overflow: hidden;
+  width: 100%;
+}
+.mt-post-media-wrapper:has(> :last-child:nth-child(odd))
+  .mt-post-media:not(:only-child):first-child {
+  grid-column: 1 / 3;
+}
+.mt-post-media:only-child {
+  grid-column: 1 / 3;
 }
 .mt-post-media-spoiler > img,
 .mt-post-media-spoiler > audio,
@@ -297,8 +307,10 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  object-fit: cover;
   text-align: center;
   color: var(--mt-color-content-txt);
+  background-color: var(--mt-color-placeholder);
 }
 
 /* Dialog - modal */
@@ -600,3 +612,31 @@ body:has(dialog.mt-dialog[open]) {
   white-space: nowrap !important;
   border: 0 !important;
 }
+
+/* Responsive styles */
+@supports (container-type: inline-size) {
+  @container mt-container (max-width: 20rem) {
+    .mt-body {
+      padding: 0 0.5rem;
+    }
+    .mt-container .mt-post-header-date > a {
+      white-space: normal;
+    }
+    .mt-post-media-wrapper .mt-post-media {
+      grid-column: 1 / 3;
+    }
+  }
+}
+@supports not (container-type: inline-size) {
+  @media screen and (max-width: clamp(20rem, 40rem, 60rem)) {
+    .mt-body {
+      padding: 0 0.5rem;
+    }
+    .mt-container .mt-post-header-date > a {
+      white-space: normal;
+    }
+    .mt-post-media-wrapper .mt-post-media {
+      grid-column: 1 / 3;
+    }
+  }
+}

src/mastodon-timeline.js

@@ -1,7 +1,7 @@
 /**
  * Mastodon embed timeline
  * @author idotj
- * @version 4.3.5
+ * @version 4.3.7
  * @url https://gitlab.com/idotj/mastodon-embed-timeline
  * @license GNU AGPLv3
  */
@@ -1353,8 +1353,9 @@ export class Init {
 
       // Check if image in post was clicked
       if (
-        localName == "img" &&
         !this.mtSettings.disableCarousel &&
+        localName == "img" &&
+        !parentNode.classList.contains("mt-post-preview-image") &&
         parentNode.getAttribute("data-media-type") !== "video" &&
         parentNode.getAttribute("data-media-type") !== "gifv"
       ) {