mo/mitlist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: mo:17bebbfab88d5dca8b18c7c32b459eec11d41914
Branches Tags
mo:ph4
mo:prod
mo:ph5
mo:main
..
compare: mo:eb19230b22f57fe861befb4de7dcc75cdd45a795
Branches Tags
mo:prod
mo:ph5
mo:ph4
mo:main

No commits in common. "17bebbfab88d5dca8b18c7c32b459eec11d41914" and "eb19230b22f57fe861befb4de7dcc75cdd45a795" have entirely different histories.
17bebbfab8 ... eb19230b22

6 changed files with 1093 additions and 1114 deletions
Show Stats Expand all files Collapse all files

3
be/app/database.py
View File

@ -13,8 +13,7 @@ engine = create_async_engine(
settings.DATABASE_URL, settings.DATABASE_URL,
echo=True, # Log SQL queries (useful for debugging) echo=True, # Log SQL queries (useful for debugging)
future=True, # Use SQLAlchemy 2.0 style features future=True, # Use SQLAlchemy 2.0 style features
pool_recycle=3600, # Optional: recycle connections after 1 hour pool_recycle=3600 # Optional: recycle connections after 1 hour
pool_pre_ping=True # Add this line to ensure connections are live
) )
# Create a configured "Session" class # Create a configured "Session" class

96
fe/src/assets/valerie-ui.scss
View File

@ -37,13 +37,11 @@
/* Textures */ /* Textures */
--paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a59a8a' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M36 60v-6h6v6h-6zm18-12v-6h6v6h-6zM6 0v6H0V0h6zM6 12v6H0v-6h6zM18 0v6h-6V0h6zM18 12v6h-6v-6h6zM30 0v6h-6V0h6zM30 12v6h-6v-6h6zM42 0v6h-6V0h6zM42 12v6h-6v-6h6zM54 0v6h-6V0h6zM54 12v6h-6v-6h6zM6 24v6H0v-6h6zM6 36v6H0v-6h6zM6 48v6H0v-6h6zM18 24v6h-6v-6h6zM18 36v6h-6v-6h6zM18 48v6h-6v-6h6zM30 24v6h-6v-6h6zM30 36v6h-6v-6h6zM30 48v6h-6v-6h6zM42 24v6h-6v-6h6zM42 36v6h-6v-6h6zM42 48v6h-6v-6h6zM54 24v6h-6v-6h6zM54 36v6h-6v-6h6zM54 48v6h-6v-6h6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a59a8a' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M36 60v-6h6v6h-6zm18-12v-6h6v6h-6zM6 0v6H0V0h6zM6 12v6H0v-6h6zM18 0v6h-6V0h6zM18 12v6h-6v-6h6zM30 0v6h-6V0h6zM30 12v6h-6v-6h6zM42 0v6h-6V0h6zM42 12v6h-6v-6h6zM54 0v6h-6V0h6zM54 12v6h-6v-6h6zM6 24v6H0v-6h6zM6 36v6H0v-6h6zM6 48v6H0v-6h6zM18 24v6h-6v-6h6zM18 36v6h-6v-6h6zM18 48v6h-6v-6h6zM30 24v6h-6v-6h6zM30 36v6h-6v-6h6zM30 48v6h-6v-6h6zM42 24v6h-6v-6h6zM42 36v6h-6v-6h6zM42 48v6h-6v-6h6zM54 24v6h-6v-6h6zM54 36v6h-6v-6h6zM54 48v6h-6v-6h6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
--progress-texture: repeating-linear-gradient( --progress-texture: repeating-linear-gradient(45deg,
45deg,
rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05),
rgba(0, 0, 0, 0.05) 5px, rgba(0, 0, 0, 0.05) 5px,
transparent 5px, transparent 5px,
transparent 10px transparent 10px);
);
} }
/* Accessibility Helpers */ /* Accessibility Helpers */
@ -61,6 +59,7 @@
/* Reduced Motion Preference */ /* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
*, *,
*::before, *::before,
*::after { *::after {
@ -80,7 +79,7 @@
} }
body { body {
font-family: 'Patrick Hand', cursive; font-family: "Patrick Hand", cursive;
background-color: var(--light); background-color: var(--light);
background-image: var(--paper-texture); background-image: var(--paper-texture);
// padding: 2rem 1rem;s // padding: 2rem 1rem;s
@ -98,25 +97,22 @@ body {
} }
/* Focus Visible Styles */ /* Focus Visible Styles */
:is(a, button, input, select, textarea, [tabindex]):not([tabindex='-1']):focus-visible { :is(a, button, input, select, textarea, [tabindex]):not([tabindex="-1"]):focus-visible {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset); outline-offset: var(--focus-outline-offset);
box-shadow: box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
0 0 0 var(--focus-outline-width) var(--focus-outline-color),
var(--shadow-md); var(--shadow-md);
z-index: 10; z-index: 10;
/* Bring focused element forward */ /* Bring focused element forward */
} }
.btn:focus-visible { .btn:focus-visible {
box-shadow: box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
0 0 0 var(--focus-outline-width) var(--focus-outline-color),
var(--shadow-lg); var(--shadow-lg);
} }
.form-input:focus-visible { .form-input:focus-visible {
box-shadow: box-shadow: var(--shadow-inset),
var(--shadow-inset),
0 0 0 var(--focus-outline-width) var(--focus-outline-color), 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
var(--shadow-sm); var(--shadow-sm);
} }
@ -137,8 +133,7 @@ body {
.radio-label input:focus-visible~.checkmark { .radio-label input:focus-visible~.checkmark {
outline: var(--focus-outline); outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset); outline-offset: var(--focus-outline-offset);
box-shadow: box-shadow: var(--shadow-sm),
var(--shadow-sm),
0 0 0 var(--focus-outline-width) var(--focus-outline-color); 0 0 0 var(--focus-outline-width) var(--focus-outline-color);
} }
@ -148,8 +143,7 @@ body {
} }
.avatar:focus-visible { .avatar:focus-visible {
box-shadow: box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
0 0 0 var(--focus-outline-width) var(--focus-outline-color),
var(--shadow-sm); var(--shadow-sm);
} }
@ -175,7 +169,7 @@ h3 {
h1::after, h1::after,
h2::after, h2::after,
h3::after { h3::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -236,8 +230,7 @@ button > .icon:last-child {
padding: 0.8rem 1.6rem; padding: 0.8rem 1.6rem;
cursor: pointer; cursor: pointer;
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transition: transition: transform var(--transition-speed) var(--transition-ease-out),
transform var(--transition-speed) var(--transition-ease-out),
box-shadow var(--transition-speed) var(--transition-ease-out), box-shadow var(--transition-speed) var(--transition-ease-out),
background-color var(--transition-speed) var(--transition-ease-out); background-color var(--transition-speed) var(--transition-ease-out);
position: relative; position: relative;
@ -300,6 +293,7 @@ button > .icon:last-child {
} }
@keyframes jiggle-subtle { @keyframes jiggle-subtle {
0%, 0%,
100% { 100% {
transform: translate(2px, 2px) scale(0.98) rotate(0deg); transform: translate(2px, 2px) scale(0.98) rotate(0deg);
@ -330,7 +324,7 @@ button > .icon:last-child {
/* Removed .card:hover transform/shadow increase */ /* Removed .card:hover transform/shadow increase */
.card::before { .card::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: var(--paper-texture); background-image: var(--paper-texture);
@ -422,8 +416,7 @@ textarea.form-input {
font-family: inherit; font-family: inherit;
font-size: 1rem; font-size: 1rem;
box-shadow: var(--shadow-inset), var(--shadow-sm); box-shadow: var(--shadow-inset), var(--shadow-sm);
transition: transition: transform var(--transition-speed) var(--transition-ease-out),
transform var(--transition-speed) var(--transition-ease-out),
box-shadow var(--transition-speed) var(--transition-ease-out), box-shadow var(--transition-speed) var(--transition-ease-out),
border-color var(--transition-speed) var(--transition-ease-out); border-color var(--transition-speed) var(--transition-ease-out);
box-sizing: border-box; box-sizing: border-box;
@ -515,7 +508,7 @@ select.form-input {
.checkbox-label input:checked~.checkmark:after, .checkbox-label input:checked~.checkmark:after,
.radio-label input:checked~.checkmark:after { .radio-label input:checked~.checkmark:after {
content: ''; content: "";
position: absolute; position: absolute;
display: block; display: block;
transform-origin: center center; transform-origin: center center;
@ -602,7 +595,7 @@ select.form-input {
} }
.list-item::before { .list-item::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: var(--paper-texture); background-image: var(--paper-texture);
@ -771,7 +764,7 @@ select.form-input {
} }
.badge-accent.badge-sticky::after { .badge-accent.badge-sticky::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
right: -1px; right: -1px;
@ -823,7 +816,7 @@ select.form-input {
/* Tabs */ /* Tabs */
.tabs { .tabs {
// margin-bottom: 2rem; margin-bottom: 2rem;
} }
.tab-list { .tab-list {
@ -850,19 +843,14 @@ select.form-input {
font-weight: bold; font-weight: bold;
position: relative; position: relative;
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: transition: transform var(--transition-speed) var(--transition-ease-out), box-shadow var(--transition-speed) var(--transition-ease-out), background-color var(--transition-speed) var(--transition-ease-out), color var(--transition-speed) var(--transition-ease-out), border-color var(--transition-speed) var(--transition-ease-out);
transform var(--transition-speed) var(--transition-ease-out),
box-shadow var(--transition-speed) var(--transition-ease-out),
background-color var(--transition-speed) var(--transition-ease-out),
color var(--transition-speed) var(--transition-ease-out),
border-color var(--transition-speed) var(--transition-ease-out);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
flex-grow: 0; flex-grow: 0;
} }
.tab-item[aria-selected='true'] { .tab-item[aria-selected="true"] {
background-color: var(--primary) !important; background-color: var(--primary);
color: var(--dark); color: var(--dark);
border-color: var(--black); border-color: var(--black);
/* Ensure all borders are black */ /* Ensure all borders are black */
@ -874,8 +862,8 @@ select.form-input {
/* transform: translateY(-3px); REMOVED */ /* transform: translateY(-3px); REMOVED */
} }
.tab-item:not([aria-selected='true']):hover { .tab-item:not([aria-selected="true"]):hover {
background-color: var(--secondary) !important; background-color: var(--secondary);
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
@ -899,7 +887,7 @@ select.form-input {
} }
.tab-content::before { .tab-content::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: var(--paper-texture); background-image: var(--paper-texture);
@ -924,17 +912,13 @@ select.form-input {
z-index: 1000; z-index: 1000;
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transition: transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear var(--transition-speed);
opacity var(--transition-speed) var(--transition-ease-out),
visibility 0s linear var(--transition-speed);
} }
.modal-backdrop.open { .modal-backdrop.open {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear 0s;
opacity var(--transition-speed) var(--transition-ease-out),
visibility 0s linear 0s;
} }
.modal-container { .modal-container {
@ -954,7 +938,7 @@ select.form-input {
} }
.modal-container::before { .modal-container::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: var(--paper-texture); background-image: var(--paper-texture);
@ -1016,9 +1000,7 @@ select.form-input {
padding: 0; padding: 0;
line-height: 1; line-height: 1;
color: var(--dark); color: var(--dark);
transition: transition: color var(--transition-speed) var(--transition-ease-out), transform var(--transition-speed-fast) ease-out;
color var(--transition-speed) var(--transition-ease-out),
transform var(--transition-speed-fast) ease-out;
} }
.close-button .icon { .close-button .icon {
@ -1064,7 +1046,7 @@ select.form-input {
} }
.alert::before { .alert::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: var(--paper-texture); background-image: var(--paper-texture);
@ -1144,6 +1126,7 @@ select.form-input {
/* Darker blue border */ /* Darker blue border */
/* Progress Bar */ /* Progress Bar */
.progress-container { .progress-container {
width: 100%; width: 100%;
@ -1221,7 +1204,7 @@ select.form-input {
.switch:before { .switch:before {
position: absolute; position: absolute;
content: ''; content: "";
height: 24px; height: 24px;
/* Adjusted size */ /* Adjusted size */
width: 24px; width: 24px;
@ -1233,8 +1216,7 @@ select.form-input {
background-color: var(--dark); background-color: var(--dark);
border: 2px solid var(--light); border: 2px solid var(--light);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: transition: transform 0.4s var(--transition-ease-out),
transform 0.4s var(--transition-ease-out),
background-color 0.4s var(--transition-ease-out), background-color 0.4s var(--transition-ease-out),
border-color 0.4s var(--transition-ease-out); border-color 0.4s var(--transition-ease-out);
transform: translateY(-50%); transform: translateY(-50%);
@ -1266,7 +1248,7 @@ select.form-input {
} }
.table-container::before { .table-container::before {
content: ''; content: "";
position: absolute; position: absolute;
inset: 0; inset: 0;
background-image: var(--paper-texture); background-image: var(--paper-texture);
@ -1469,8 +1451,7 @@ select.form-input {
left: 50%; left: 50%;
transform: translateX(-50%) scale(0.95); transform: translateX(-50%) scale(0.95);
transform-origin: bottom center; transform-origin: bottom center;
transition: transition: opacity var(--transition-speed) var(--transition-ease-out),
opacity var(--transition-speed) var(--transition-ease-out),
visibility 0s linear var(--transition-speed), visibility 0s linear var(--transition-speed),
transform var(--transition-speed) var(--transition-ease-out); transform var(--transition-speed) var(--transition-ease-out);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
@ -1487,7 +1468,7 @@ select.form-input {
when shown, removing it from the parent's clipping context. when shown, removing it from the parent's clipping context.
This CSS provides structure but cannot overcome parent overflow clipping. */ This CSS provides structure but cannot overcome parent overflow clipping. */
.tooltip-text::after { .tooltip-text::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 100%; top: 100%;
left: 50%; left: 50%;
@ -1544,6 +1525,7 @@ select.form-input {
} }
@keyframes pulse-dot { @keyframes pulse-dot {
0%, 0%,
80%, 80%,
100% { 100% {
@ -1583,6 +1565,7 @@ select.form-input {
/* Match button text color */ /* Match button text color */
/* Responsive */ /* Responsive */
@media (max-width: 768px) { @media (max-width: 768px) {
body { body {
@ -1648,7 +1631,7 @@ select.form-input {
border-right: var(--border); border-right: var(--border);
} }
.tab-item[aria-selected='true'] { .tab-item[aria-selected="true"] {
border-bottom-color: var(--primary); border-bottom-color: var(--primary);
margin-bottom: 0; margin-bottom: 0;
/* No longer needs negative margin */ /* No longer needs negative margin */
@ -1700,6 +1683,7 @@ select.form-input {
/* Example smaller distance */ /* Example smaller distance */
.table { .table {
min-width: unset; min-width: unset;
} }

2
fe/src/pages/GroupDetailPage.vue
View File

@ -300,7 +300,7 @@ onMounted(() => {
.neo-card { .neo-card {
border-radius: 18px; border-radius: 18px;
box-shadow: 6px 6px 0 #111; box-shadow: 6px 6px 0 #111;
background: var(--light); background: #fff;
border: 3px solid #111; border: 3px solid #111;
overflow: hidden; overflow: hidden;
} }

5
fe/src/pages/GroupsPage.vue
View File

@ -333,8 +333,7 @@ onMounted(async () => {
min-width: 260px; min-width: 260px;
width: 100%; width: 100%;
margin: 0 auto; margin: 0 auto;
border: none; background: #fff;
background: var(--light);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -365,7 +364,7 @@ onMounted(async () => {
.neo-create-group-card { .neo-create-group-card {
border: 3px dashed #111; border: 3px dashed #111;
background: var(--light); background: #fafafa;
padding: 2.5rem 0; padding: 2.5rem 0;
text-align: center; text-align: center;
font-weight: 900; font-weight: 900;

8
fe/src/pages/ListDetailPage.vue
View File

@ -809,7 +809,7 @@ const editItem = (item: Item) => {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
border: 3px solid #111; border: 3px solid #111;
border-radius: 50px; border-radius: 50px;
background: var(--light); background: #fff;
box-shadow: 3px 3px 0 #111; box-shadow: 3px 3px 0 #111;
} }
@ -827,7 +827,7 @@ const editItem = (item: Item) => {
box-shadow: 6px 6px 0 #111; box-shadow: 6px 6px 0 #111;
width: 100%; width: 100%;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
background: var(--light); background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
@ -840,7 +840,7 @@ const editItem = (item: Item) => {
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
break-inside: avoid; break-inside: avoid;
width: 100%; width: 100%;
background: var(--light); background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -849,7 +849,7 @@ const editItem = (item: Item) => {
padding: 1.2rem; padding: 1.2rem;
margin-bottom: 0; margin-bottom: 0;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
background: var(--light); background: #fff;
transition: background-color 0.1s ease-in-out; transition: background-color 0.1s ease-in-out;
} }

9
fe/src/pages/ListsPage.vue
View File

@ -321,7 +321,7 @@ watch(currentGroupId, () => {
box-shadow: 6px 6px 0 #111; box-shadow: 6px 6px 0 #111;
width: 100%; width: 100%;
margin: 0 0 2rem 0; margin: 0 0 2rem 0;
background: var(--light); background: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* padding: 2rem 2rem 1.5rem 2rem; /* padding: 2rem 2rem 1.5rem 2rem;
@ -330,7 +330,6 @@ watch(currentGroupId, () => {
cursor: pointer; cursor: pointer;
/* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */ /* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */
border: 3px solid #111; border: 3px solid #111;
padding-inline: 1rem;
} }
.neo-list-card:hover { .neo-list-card:hover {
@ -393,7 +392,7 @@ watch(currentGroupId, () => {
.neo-create-list-card { .neo-create-list-card {
border: 3px dashed #111; border: 3px dashed #111;
background: var(--light); background: #fafafa;
padding: 2.5rem 0; padding: 2.5rem 0;
text-align: center; text-align: center;
font-weight: 900; font-weight: 900;
@ -449,14 +448,12 @@ watch(currentGroupId, () => {
} }
.neo-new-item-input { .neo-new-item-input {
outline: none;
border: none;
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
background-color: var(--light) !important ;
} }
.neo-new-item-input input[type="text"] { .neo-new-item-input input[type="text"] {
background: transparent;
border: none; border: none;
outline: none; outline: none;
all: unset; all: unset;