Refactor for account mode output
This commit is contained in:
parent
6c9372c80f
commit
88aee64dad
2 changed files with 195 additions and 3 deletions
|
|
@ -4,13 +4,13 @@
|
|||
<meta charset="utf-8" />
|
||||
<title>masto-embed</title>
|
||||
</head>
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="post-container.css">
|
||||
<body>
|
||||
<div class="container">
|
||||
<div id="masto-embed"
|
||||
account_name="team"
|
||||
account_name="meissa"
|
||||
host_url="https://social.meissa-gmbh.de"
|
||||
replies_to="107937234506182462"
|
||||
|
||||
filter_favorited=true>
|
||||
Here the timeline will appear.
|
||||
</div>
|
||||
|
|
|
|||
192
public/post-container.css
Normal file
192
public/post-container.css
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
.section.post-container {
|
||||
|
||||
--large: 1em;
|
||||
--medium: 0.5em;
|
||||
--small: 0.25em;
|
||||
margin-bottom: var(--large);
|
||||
|
||||
display: grid;
|
||||
grid: ". post ." / 33% 33% 33%;
|
||||
|
||||
.mastodon-post {
|
||||
grid-area: post;
|
||||
justify-self: center;
|
||||
display: grid;
|
||||
grid:
|
||||
"header"
|
||||
"content"
|
||||
"image"
|
||||
"link-preview"
|
||||
"footer" /
|
||||
420px;
|
||||
border: 1px solid #ccc;
|
||||
padding: var(--small);
|
||||
|
||||
.mastodon-post-header {
|
||||
grid-area: header;
|
||||
justify-self: stretch;
|
||||
display: grid;
|
||||
grid: "avatar names . date" / 60px;
|
||||
margin: var(--medium);
|
||||
|
||||
.mastodon-post-avatar {
|
||||
grid-area: avatar;
|
||||
width: auto;
|
||||
height: 116%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.mastodon-post-names {
|
||||
grid-area: names;
|
||||
display: grid;
|
||||
grid:
|
||||
"dp-name"
|
||||
"ac-name" /
|
||||
auto;
|
||||
justify-self: start;
|
||||
margin-left: var(--medium);
|
||||
|
||||
.display-name {
|
||||
grid-area: dp-name;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
grid-area: ac-name;
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
.mastodon-post-date {
|
||||
grid-area: date;
|
||||
justify-self: end;
|
||||
align-self: center;
|
||||
margin-right: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.mastodon-post-content {
|
||||
grid-area: content;
|
||||
display: grid;
|
||||
grid:
|
||||
"text"
|
||||
"image" / auto;
|
||||
padding: var(--medium);
|
||||
|
||||
.mastodon-post-text {
|
||||
grid-area: text;
|
||||
}
|
||||
|
||||
.mastodon-post-image {
|
||||
grid-area: image;
|
||||
width: 100%; /* Adjust as needed */
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
height: auto;
|
||||
border-radius: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.mastodon-post-link-preview {
|
||||
grid-area: link-preview;
|
||||
justify-self: center;
|
||||
display: grid;
|
||||
grid:
|
||||
"image"
|
||||
"info" / 100%;
|
||||
text-decoration: none;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 0.25em;
|
||||
margin: var(--medium);
|
||||
|
||||
.mastodon-post-link-image{
|
||||
grid-area: image;
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: 0.25em;
|
||||
margin-bottom: var(--small);
|
||||
}
|
||||
|
||||
.mastodon-post-link-info {
|
||||
grid-area: info;
|
||||
grid:
|
||||
"." "link-title" "."
|
||||
"." "link-description" "."
|
||||
"." "link-url" "." / auto auto auto;
|
||||
padding: var(--small);
|
||||
|
||||
.mastodon-post-link-title {
|
||||
grid-area: link-title;
|
||||
color: #383838;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mastodon-post-link-description {
|
||||
color: #383838;
|
||||
grid-area: link-description;
|
||||
}
|
||||
|
||||
.mastodon-post-link-url {
|
||||
grid-area: link-url;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mastodon-post-footer {
|
||||
margin-right: var(--medium);
|
||||
margin-left: var(--medium);
|
||||
grid-area: footer;
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
grid:
|
||||
"replies retoots likes"
|
||||
/ auto auto auto;
|
||||
padding-top: var(--small);
|
||||
|
||||
.footer-button {
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: var(--small);
|
||||
}
|
||||
}
|
||||
|
||||
.replies {
|
||||
justify-self: center;
|
||||
grid-area: replies;
|
||||
}
|
||||
|
||||
.retoots {
|
||||
justify-self: center;
|
||||
grid-area: retoots;
|
||||
}
|
||||
|
||||
.likes {
|
||||
justify-self: center;
|
||||
grid-area: likes;
|
||||
}
|
||||
|
||||
.like-count {
|
||||
justify-self: center;
|
||||
grid-area: like-count;
|
||||
}
|
||||
|
||||
.retoot-count {
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
grid-area: retoot-count;
|
||||
}
|
||||
|
||||
.reply-count {
|
||||
justify-self: center;
|
||||
grid-area: reply-count;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue
