New mastodon post feature
This commit is contained in:
parent
1180c0817f
commit
eada9049fa
13 changed files with 746 additions and 23 deletions
53
static/app.js
Normal file
53
static/app.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
(function () {
|
||||
function updateOrderLabels(list) {
|
||||
var items = list.querySelectorAll('.compose-asset');
|
||||
items.forEach(function (item, index) {
|
||||
var badge = item.querySelector('.order-badge');
|
||||
if (badge) {
|
||||
badge.textContent = 'Photo ' + (index + 1);
|
||||
}
|
||||
var upButton = item.querySelector('[data-move="up"]');
|
||||
var downButton = item.querySelector('[data-move="down"]');
|
||||
if (upButton) {
|
||||
upButton.disabled = index === 0;
|
||||
}
|
||||
if (downButton) {
|
||||
downButton.disabled = index === items.length - 1;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var list = document.querySelector('.compose-form .asset-list');
|
||||
if (!list) {
|
||||
return;
|
||||
}
|
||||
|
||||
list.addEventListener('click', function (event) {
|
||||
var button = event.target.closest('[data-move]');
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
var direction = button.getAttribute('data-move');
|
||||
var item = button.closest('.compose-asset');
|
||||
if (!item || !list.contains(item)) {
|
||||
return;
|
||||
}
|
||||
if (direction === 'up') {
|
||||
var prev = item.previousElementSibling;
|
||||
if (prev) {
|
||||
prev.before(item);
|
||||
}
|
||||
} else if (direction === 'down') {
|
||||
var next = item.nextElementSibling;
|
||||
if (next) {
|
||||
next.after(item);
|
||||
}
|
||||
}
|
||||
updateOrderLabels(list);
|
||||
});
|
||||
|
||||
updateOrderLabels(list);
|
||||
});
|
||||
})();
|
||||
|
|
@ -22,11 +22,29 @@ body {
|
|||
border-bottom: 1px solid #2d2d2d;
|
||||
}
|
||||
|
||||
.header-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.site-header a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
color: #9cc1ff;
|
||||
}
|
||||
|
||||
.flash-messages {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
|
@ -46,6 +64,28 @@ body {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.warning {
|
||||
background: #443510;
|
||||
border: 1px solid #7a5c1c;
|
||||
padding: 0.8rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.1rem;
|
||||
border-radius: 999px;
|
||||
background: #2b74ff;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button-link:hover {
|
||||
background: #1f5fe0;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
|
|
@ -117,3 +157,166 @@ body {
|
|||
.notes-form button:hover {
|
||||
background: #1f5fe0;
|
||||
}
|
||||
|
||||
.selection-form .select-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.selection-form .actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.selection-form .actions.top-actions {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.selection-form .actions button {
|
||||
background: #2b74ff;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 0.6rem 1.4rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-card {
|
||||
border: 1px solid #2d2d2d;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
background: #1b1b1b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.select-card input[type=\"checkbox\"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.select-card img {
|
||||
width: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #2d2d2d;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.alt-text-sample {
|
||||
font-size: 0.8rem;
|
||||
color: #bcbcbc;
|
||||
margin-top: 0.3rem;
|
||||
max-height: 4.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.compose-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.asset-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.compose-asset {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 1rem;
|
||||
border: 1px solid #2d2d2d;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
background: #151515;
|
||||
}
|
||||
|
||||
.compose-asset img {
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #2d2d2d;
|
||||
}
|
||||
|
||||
.compose-asset textarea {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #3b3b3b;
|
||||
padding: 0.6rem;
|
||||
background: #121212;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.order-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.order-badge {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #3b3b3b;
|
||||
}
|
||||
|
||||
.move-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.move-buttons button {
|
||||
border: 1px solid #3b3b3b;
|
||||
background: #1f1f1f;
|
||||
color: #fff;
|
||||
padding: 0.3rem 0.6rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.move-buttons button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.compose-form textarea {
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #3b3b3b;
|
||||
padding: 0.6rem;
|
||||
background: #121212;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.compose-actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.compose-actions button {
|
||||
background: #2b74ff;
|
||||
border: none;
|
||||
color: #fff;
|
||||
padding: 0.6rem 1.4rem;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.compose-actions button[name=\"action\"][value=\"post\"] {
|
||||
background: #2ecc71;
|
||||
}
|
||||
|
||||
.compose-actions button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue