mirrors/notebook
3
0
Fork 0
mirror of https://github.com/indentlabs/notebook.git synced 2025-10-26 11:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

switch class name to avoid materializecss clash

Browse Source
This commit is contained in:
Andrew Brown 2025-06-27 12:14:48 -07:00
parent f72a1c894c
commit 848dd02b2e
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/views/content/form/gallery/_panel.html.erb
View File

@ -65,7 +65,7 @@
image_id = image_item[:id]
%>
<div class="col s12 m6 l6 gallery-sortable-item" data-image-id="<%= image_id %>" data-image-type="<%= image_type %>">
<div class="image-card <%= is_pinned ? 'pinned' : '' %>">
<div class="image-card <%= is_pinned ? 'image-pinned' : '' %>">
<% if image_type == 'image_upload' %>
<div class="image-preview">
<%= link_to image_data.src(:original), target: '_blank' do %>
@ -105,7 +105,7 @@
<% end %>
<% if is_pinned %>
<div class="pinned-badge-overlay">
<div class="image-pinned-badge-overlay">
<i class="material-icons amber-text">push_pin</i> Pinned
</div>
<% end %>
@ -154,7 +154,7 @@
<% end %>
<% if is_pinned %>
<div class="pinned-badge-overlay">
<div class="image-pinned-badge-overlay">
<i class="material-icons amber-text">push_pin</i> Pinned
</div>
<% end %>
@ -433,7 +433,7 @@
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.pinned-badge-overlay {
.image-pinned-badge-overlay {
position: absolute;
bottom: 90px;
left: 10px;
@ -447,7 +447,7 @@
z-index: 2;
}
.pinned-badge-overlay i {
.image-pinned-badge-overlay i {
font-size: 14px;
margin-right: 4px;
}
@ -641,13 +641,13 @@
// Add pinned badge if not exists
if (!imageCard.querySelector('.pinned-badge-overlay')) {
var pinnedBadge = document.createElement('div');
pinnedBadge.className = 'pinned-badge-overlay';
pinnedBadge.className = 'image-pinned-badge-overlay';
pinnedBadge.innerHTML = '<i class="material-icons amber-text">push_pin</i> Pinned';
imageCard.appendChild(pinnedBadge);
}
// Also remove pinned badge from all other images
var allPinnedBadges = document.querySelectorAll('.pinned-badge-overlay');
var allPinnedBadges = document.querySelectorAll('.image-pinned-badge-overlay');
var allPinButtons = document.querySelectorAll('.js-toggle-pin');
allPinnedBadges.forEach(function(badge) {
@ -667,7 +667,7 @@
buttonElement.classList.add('grey-text');
// Remove pinned badge
var pinnedBadge = imageCard.querySelector('.pinned-badge-overlay');
var pinnedBadge = imageCard.querySelector('.image-pinned-badge-overlay');
if (pinnedBadge) {
pinnedBadge.remove();
}

16
app/views/content/gallery.html.erb
View File

@ -301,22 +301,22 @@
.then(response => response.json())
.then(data => {
if (data.pinned) {
buttonElement.classList.add('pinned');
buttonElement.classList.add('image-pinned');
// Find the parent card and add pinned badge if not exists
var card = buttonElement.closest('.gallery-card');
if (!card.querySelector('.pinned-badge')) {
if (!card.querySelector('.image-pinned-badge')) {
var badge = document.createElement('div');
badge.className = 'pinned-badge';
badge.className = 'image-pinned-badge';
badge.innerHTML = '<i class="material-icons">push_pin</i>';
card.appendChild(badge);
}
} else {
buttonElement.classList.remove('pinned');
buttonElement.classList.remove('image-pinned');
// Remove pinned badge
var card = buttonElement.closest('.gallery-card');
var badge = card.querySelector('.pinned-badge');
var badge = card.querySelector('.image-pinned-badge');
if (badge) {
badge.remove();
}
@ -622,11 +622,11 @@
color: #757575;
}
.pin-button.pinned {
.pin-button.image-pinned {
color: #ff9800;
}
.pinned-badge {
.image-pinned-badge {
position: absolute;
top: 10px;
right: 10px;
@ -641,7 +641,7 @@
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.pinned-badge i {
.image-pinned-badge i {
font-size: 18px;
}