Feature/medias css grid
This commit is contained in:
i.j
parent
0afb7c58bc
commit
2750b230d1
16
CHANGELOG
16
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
|
||||
- Added Contributing documentation
|
||||
- Added example for JS module case
|
||||
- Add CDN and NPM install steps
|
||||
- Add Contributing documentation
|
||||
- Add example for JS module case
|
||||
|
||||
v4.0.4 - 20/02/2024
|
||||
- Improve alignment for refresh button
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
4
dist/mastodon-timeline.esm.js
vendored
4
dist/mastodon-timeline.esm.js
vendored
File diff suppressed because one or more lines are too long
2
dist/mastodon-timeline.min.css
vendored
2
dist/mastodon-timeline.min.css
vendored
File diff suppressed because one or more lines are too long
4
dist/mastodon-timeline.umd.js
vendored
4
dist/mastodon-timeline.umd.js
vendored
File diff suppressed because one or more lines are too long
@ -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,16 +124,61 @@
|
||||
</p>
|
||||
<p>
|
||||
Contains several CSS styles that change its appearance without the
|
||||
need to modify the original CSS file (inspect the code at the
|
||||
beginning of the HTML file to see the changes).
|
||||
need to modify the original CSS file:
|
||||
</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
|
||||
style, the following options have been changed at its initialization:
|
||||
</p>
|
||||
<pre>
|
||||
<code>
|
||||
<code>
|
||||
<script>
|
||||
const myTimeline = new MastodonTimeline.Init({
|
||||
instanceUrl: "https://mastodon.online",
|
||||
@ -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: "",
|
||||
});
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -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;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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"
|
||||
) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user