despiegk/webtest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: despiegk:ef3a0e82b8f670bb2782ccca235626fa73e772f9
Branches Tags
despiegk:main
..
compare: despiegk:085ce51b0a8ec93075b3f762f98809e72791f330
Branches Tags
despiegk:main

No commits in common. "ef3a0e82b8f670bb2782ccca235626fa73e772f9" and "085ce51b0a8ec93075b3f762f98809e72791f330" have entirely different histories.
ef3a0e82b8 ... 085ce51b0a

6 changed files with 10 additions and 1655 deletions
Show Stats Expand all files Collapse all files

17
Cargo.toml
View File

@ -13,22 +13,9 @@ categories = ["gui", "wasm", "web-programming"]
[dependencies] [dependencies]
yew = { version="0.21", features=["csr"] } yew = { version="0.21", features=["csr"] }
yew-router = "0.18" yew-router = "0.18"
web-sys = { version = "0.3", features = [ web-sys = { version = "0.3", features = ["Document", "HtmlElement", "Window"] }
"Document",
"HtmlElement",
"Window",
"DragEvent",
"Element",
"HtmlInputElement",
"HtmlTextAreaElement",
"HtmlSelectElement",
"MouseEvent",
"Event"
] }
wasm-bindgen = "0.2"
gloo-utils = "0.1" gloo-utils = "0.1"
gloo-storage = "0.2" gloo-storage = "0.2"
gloo-net = "0.4" gloo-net = "0.4"
wasm-bindgen-futures = "0.4" wasm-bindgen-futures = "0.4"
serde = { version = "1.0", features = ["derive"] } serde = { version = "1.0", features = ["derive"] }
chrono = { version = "0.4", features = ["serde", "wasmbind"] }

84
index.scss
View File

@ -1,8 +1,3 @@
// Import component styles
@import 'styles/modal.scss';
@import 'styles/comments.scss';
@import 'styles/forms.scss';
// CSS Custom Properties for theming // CSS Custom Properties for theming
:root { :root {
--bs-body-bg: #ffffff; --bs-body-bg: #ffffff;
@ -19,12 +14,6 @@
--bs-footer-bg: #e9ecef; --bs-footer-bg: #e9ecef;
--bs-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --bs-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
--bs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175); --bs-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
--bs-primary: #0d6efd;
--bs-primary-rgb: 13, 110, 253;
--bs-secondary: #6c757d;
--bs-danger: #dc3545;
--bs-danger-rgb: 220, 53, 69;
--bs-success: #198754;
} }
// Dark theme variables // Dark theme variables
@ -552,75 +541,4 @@ body {
} }
} }
} }
} }
// Save popup styles
.save-popup {
position: fixed;
top: 2rem;
right: 2rem;
z-index: 1100;
animation: slideInRight 0.3s ease-out;
.save-popup-content {
background-color: var(--bs-success);
color: white;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
box-shadow: var(--bs-shadow-lg);
display: flex;
align-items: center;
font-weight: 500;
i {
font-size: 1.25rem;
}
}
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
// Drag and drop styles
.kanban-card {
transition: all 0.2s ease;
&:hover {
transform: translateY(-2px);
box-shadow: var(--bs-shadow-lg);
}
&.dragging {
opacity: 0.5;
transform: rotate(5deg);
}
}
.kanban-column {
transition: all 0.2s ease;
&.drag-over {
background-color: rgba(var(--bs-primary-rgb), 0.1);
border-color: var(--bs-primary);
transform: scale(1.02);
}
}
.column-cards {
min-height: 200px;
transition: all 0.2s ease;
&.drag-over {
background-color: rgba(var(--bs-primary-rgb), 0.05);
border-radius: 0.5rem;
}
}

889
src/kanban.rs
View File

File diff suppressed because it is too large Load Diff

250
styles/comments.scss
View File

@ -1,250 +0,0 @@
// Comments Card styles
.comments-card {
background-color: var(--bs-card-bg);
border: 1px solid var(--bs-card-border);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
}
.comments-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--bs-card-border);
h4 {
margin: 0;
color: var(--bs-body-color);
font-weight: 600;
font-size: 1.1rem;
}
.comment-count {
color: var(--bs-navbar-color);
font-size: 0.9rem;
font-weight: normal;
}
}
.comments-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: 1rem;
}
.comment-item {
padding: 0.75rem;
border-radius: 0.375rem;
background-color: var(--bs-feature-bg);
margin-bottom: 0.75rem;
border: 1px solid var(--bs-card-border);
&:last-child {
margin-bottom: 0;
}
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.comment-author {
display: flex;
align-items: center;
gap: 0.5rem;
}
.author-avatar {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.7rem;
font-weight: 600;
}
.author-name {
font-weight: 500;
color: var(--bs-body-color);
font-size: 0.875rem;
}
.comment-meta {
display: flex;
align-items: center;
gap: 0.5rem;
}
.comment-date {
color: var(--bs-navbar-color);
font-size: 0.75rem;
}
.btn-delete-comment {
background: none;
border: none;
color: var(--bs-navbar-color);
cursor: pointer;
padding: 0.25rem;
border-radius: 0.25rem;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--bs-danger-rgb), 0.1);
color: var(--bs-danger);
}
i {
font-size: 0.75rem;
}
}
.comment-content {
color: var(--bs-body-color);
font-size: 0.875rem;
line-height: 1.4;
margin: 0;
}
.add-comment {
border-top: 1px solid var(--bs-card-border);
padding-top: 1rem;
textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--bs-card-border);
border-radius: 0.375rem;
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
font-size: 0.875rem;
resize: vertical;
min-height: 80px;
margin-bottom: 0.5rem;
&:focus {
outline: none;
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
&::placeholder {
color: var(--bs-navbar-color);
}
}
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
font-size: 0.875rem;
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
}
// Dense comments display for cards
.card-comments-dense {
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--bs-card-border);
}
.comments-preview {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--bs-navbar-color);
font-size: 0.75rem;
cursor: pointer;
transition: color 0.2s ease;
&:hover {
color: var(--bs-primary);
}
i {
font-size: 0.875rem;
}
}
.recent-comments {
margin-top: 0.25rem;
.recent-comment {
background-color: var(--bs-feature-bg);
border-radius: 0.25rem;
padding: 0.25rem 0.5rem;
margin-bottom: 0.25rem;
font-size: 0.7rem;
line-height: 1.3;
&:last-child {
margin-bottom: 0;
}
.comment-author-small {
font-weight: 500;
color: var(--bs-body-color);
}
.comment-text-small {
color: var(--bs-navbar-color);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
}
// Comments Modal specific styles
.comments-modal {
.modal-content {
max-width: 600px;
}
.comments-list {
max-height: 400px;
}
.comment-item {
margin-bottom: 1rem;
padding: 1rem;
}
.comment-content {
font-size: 0.9rem;
line-height: 1.5;
}
}
// Responsive adjustments
@media (max-width: 576px) {
.comment-header {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.comment-meta {
align-self: flex-end;
}
.add-comment textarea {
min-height: 60px;
}
}

210
styles/forms.scss
View File

@ -1,210 +0,0 @@
// Form styles
.form-group {
margin-bottom: 1.25rem;
label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--bs-body-color);
}
.form-control {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--bs-card-border);
border-radius: 0.375rem;
background-color: var(--bs-body-bg);
color: var(--bs-body-color);
font-size: 0.875rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
&:focus {
outline: none;
border-color: var(--bs-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
}
textarea.form-control {
resize: vertical;
min-height: 100px;
}
select.form-control {
cursor: pointer;
}
input[type="date"].form-control,
.date-picker {
cursor: pointer;
position: relative;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3e%3cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1.25rem 1.25rem;
padding-right: 2.5rem;
&::-webkit-calendar-picker-indicator {
opacity: 0;
position: absolute;
right: 0;
width: 2.5rem;
height: 100%;
cursor: pointer;
}
&:hover {
border-color: var(--bs-primary);
}
}
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
@media (max-width: 576px) {
grid-template-columns: 1fr;
}
}
.stat-display {
display: flex;
align-items: center;
padding: 0.75rem;
background-color: var(--bs-feature-bg);
border-radius: 0.375rem;
color: var(--bs-navbar-color);
font-weight: 500;
}
.checklist-display {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background-color: var(--bs-feature-bg);
border-radius: 0.375rem;
.progress-bar-large {
flex: 1;
height: 8px;
background-color: var(--bs-card-border);
border-radius: 4px;
overflow: hidden;
.progress-fill {
height: 100%;
background-color: #198754;
transition: width 0.3s ease;
}
}
.progress-text-large {
font-size: 0.875rem;
color: var(--bs-navbar-color);
font-weight: 500;
white-space: nowrap;
}
}
// Button styles
.btn {
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
cursor: pointer;
border: 1px solid transparent;
font-size: 0.875rem;
&.btn-primary {
background-color: var(--bs-primary);
color: white;
&:hover {
background-color: var(--bs-primary);
filter: brightness(0.9);
transform: translateY(-1px);
}
}
&.btn-secondary {
background-color: var(--bs-secondary);
color: white;
&:hover {
background-color: var(--bs-secondary);
filter: brightness(0.9);
transform: translateY(-1px);
}
}
&.btn-sm {
padding: 0.375rem 0.75rem;
font-size: 0.8rem;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
}
}
// Date selector specific styles
.date-selector {
.form-control {
position: relative;
&::-webkit-calendar-picker-indicator {
background: transparent;
bottom: 0;
color: transparent;
cursor: pointer;
height: auto;
left: 0;
position: absolute;
right: 0;
top: 0;
width: auto;
}
&::-webkit-inner-spin-button {
display: none;
}
&::-webkit-clear-button {
display: none;
}
}
}
// Focus styles for accessibility
.btn:focus,
.form-control:focus {
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
// Responsive form adjustments
@media (max-width: 576px) {
.form-group {
margin-bottom: 1rem;
}
.form-control {
padding: 0.625rem;
font-size: 0.875rem;
}
.btn {
padding: 0.625rem 1rem;
font-size: 0.875rem;
}
}

215
styles/modal.scss
View File

@ -1,215 +0,0 @@
// Modal styles
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
backdrop-filter: blur(4px);
}
.modal-content {
background-color: var(--bs-card-bg);
border-radius: 0.75rem;
box-shadow: var(--bs-shadow-lg);
max-width: 800px; // Increased width
width: 95%;
max-height: 90vh;
overflow-y: auto;
border: 1px solid var(--bs-card-border);
&.comments-modal {
max-width: 600px;
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid var(--bs-card-border);
h2 {
margin: 0;
color: var(--bs-body-color);
font-weight: 600;
}
.btn-close {
background: none;
border: none;
font-size: 1.25rem;
color: var(--bs-navbar-color);
cursor: pointer;
padding: 0.5rem;
border-radius: 0.25rem;
transition: all 0.2s ease;
&:hover {
background-color: rgba(var(--bs-danger-rgb), 0.1);
color: var(--bs-danger);
}
}
}
.modal-body {
padding: 1.5rem;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1.5rem;
border-top: 1px solid var(--bs-card-border);
}
// Dense comments styles for kanban cards
.card-comments-dense {
margin-top: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--bs-card-border);
}
.comments-preview {
.comment-preview {
display: flex;
gap: 0.25rem;
margin-bottom: 0.25rem;
font-size: 0.75rem;
line-height: 1.2;
.comment-author {
font-weight: 600;
color: var(--bs-body-color);
flex-shrink: 0;
}
.comment-text {
color: var(--bs-secondary-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.more-comments {
font-size: 0.75rem;
color: var(--bs-primary);
cursor: pointer;
text-decoration: underline;
margin-top: 0.25rem;
&:hover {
color: var(--bs-primary-dark);
}
}
}
// Comments modal specific styles
.comments-modal {
.card-info {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--bs-card-border);
h4 {
margin-bottom: 0.5rem;
color: var(--bs-body-color);
}
}
.comments-section {
h5 {
margin-bottom: 1rem;
color: var(--bs-body-color);
.comment-count {
color: var(--bs-secondary-color);
font-weight: normal;
}
}
}
.comments-list-modal {
.comment-item-modal {
padding: 1rem;
border: 1px solid var(--bs-card-border);
border-radius: 6px;
margin-bottom: 1rem;
background-color: var(--bs-card-bg);
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
.comment-author {
display: flex;
align-items: center;
gap: 0.5rem;
.author-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--bs-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
}
.author-name {
font-weight: 600;
color: var(--bs-body-color);
}
}
.comment-date {
font-size: 0.875rem;
color: var(--bs-secondary-color);
}
}
.comment-content {
color: var(--bs-body-color);
line-height: 1.5;
}
}
}
.no-comments {
text-align: center;
padding: 2rem;
p {
margin: 0;
font-style: italic;
}
}
}
// Responsive modal adjustments
@media (max-width: 768px) {
.modal-content {
width: 98%;
margin: 0.5rem;
max-width: none;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem;
}
}