kjannette/kongruity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix minor css issue on stickies #4

Merged
kjannette merged 1 commits from minor-css-update into master 2026-08-01 08:50:59 +00:00
Conversation 0 Commits 1 Files Changed 2 +68 -61
2 changed files with 68 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/stickies.tsx
View File

@@ -95,7 +95,7 @@ const Stickies = () => {
<div className="clusters-container"> <div className="clusters-container">
{score != null && ( {score != null && (
<div className="cohesion-score"> <div className="cohesion-score">
Cluster cohesion: {scoreLabel(score)} Cluster cohesion: <strong>{scoreLabel(score)}</strong>
</div> </div>
)} )}
{rankedClusters.map((group, index) => ( {rankedClusters.map((group, index) => (

127
frontend/src/styles/stickies.css
View File

@@ -1,100 +1,107 @@
.stickies-grid { .stickies-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
margin-top: 18px; margin-top: 18px;
padding: 24px; padding: 24px;
} }
.stickies-container { .stickies-container {
margin: 36px 0px 36px 0px; margin: 36px 0px 36px 0px;
} }
.clusters-container { .clusters-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 32px;
padding: 24px 0; padding: 24px 0;
} }
.cluster-group { .cluster-group {
border: 1px solid #6dd6f4; border: 1px solid #6dd6f4;
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
} }
.cluster-draggable { .cluster-draggable {
cursor: grab; cursor: grab;
transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
} }
.cluster-draggable:active { .cluster-draggable:active {
cursor: grabbing; cursor: grabbing;
} }
.cluster-drag-over { .cluster-drag-over {
border-color: #ffb7ce; border-color: #ffb7ce;
box-shadow: 0 0 12px rgba(255, 183, 206, 0.4); box-shadow: 0 0 12px rgba(255, 183, 206, 0.4);
transform: scale(1.01); transform: scale(1.01);
} }
.cluster-header { .cluster-header {
display: flex; position: relative;
align-items: center; display: flex;
gap: 12px; align-items: center;
margin-bottom: 16px; gap: 12px;
margin-bottom: 16px;
min-height: 32px;
} }
.cluster-rank { .cluster-rank {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
background: #6dd6f4; background: #6dd6f4;
color: #1a1a2e; color: #1a1a2e;
font-weight: 700; font-weight: 700;
font-size: 0.95em; font-size: 0.95em;
flex-shrink: 0; flex-shrink: 0;
} }
.cluster-reorder-hint { .cluster-reorder-hint {
font-size: 0.8em; font-size: 0.8em;
color: #9ca3af; color: #9ca3af;
font-style: italic; font-style: italic;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
.cluster-label { .cluster-label {
margin: 0; position: absolute;
font-size: 1.2em; left: 50%;
font-weight: 600; transform: translateX(-50%);
flex: 1; max-width: 50%;
margin: 0;
font-size: 1.2em;
font-weight: 600;
pointer-events: none;
} }
.cluster-drag-handle { .cluster-drag-handle {
font-size: 1.4em; margin-left: auto;
color: #6dd6f4; font-size: 1.4em;
opacity: 0.4; color: #6dd6f4;
user-select: none; opacity: 0.4;
transition: opacity 0.2s ease; user-select: none;
flex-shrink: 0; transition: opacity 0.2s ease;
flex-shrink: 0;
} }
.cluster-draggable:hover .cluster-drag-handle { .cluster-draggable:hover .cluster-drag-handle {
opacity: 0.8; opacity: 0.8;
} }
.cohesion-score { .cohesion-score {
text-align: center; text-align: center;
font-size: 0.95em; font-size: 0.95em;
color: #e0e0e0; color: #e0e0e0;
padding: 8px 16px; padding: 8px 16px;
background: rgba(109, 214, 244, 0.1); background: rgba(109, 214, 244, 0.1);
border-radius: 6px; border-radius: 6px;
width: fit-content; width: fit-content;
margin: 0 auto; margin: 0 auto;
} }