torsten/yourpart3
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance FamilyView styles for improved layout and responsiveness: Adjust flex properties, grid configurations, and dimensions for better visual consistency. Implement new styles for lover candidate cards and family view to prevent overlap and ensure proper spacing across components.

Browse Source
This commit is contained in:
Torsten Schulz (local)
2026-03-23 09:53:31 +01:00
parent f7e0d97174
commit d7c59df225
1 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/views/falukant/FamilyView.vue
View File

@@ -832,6 +832,14 @@ export default {
</script>
<style scoped lang="scss">
/* Wie HouseView: AppContent setzt last-child auf flex:1 + min-height:0 — sonst können
Spalten/Karten schrumpfen und sich überlagern. */
.family-view {
flex: 0 0 auto;
min-height: min-content;
width: 100%;
}
.family-layout {
display: flex;
gap: 20px;
@@ -957,12 +965,13 @@ export default {
.lovers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: 16px;
}
.lover-card {
padding: 16px 18px;
min-width: 0;
}
.lover-card__header {
@@ -1027,16 +1036,18 @@ export default {
.lover-candidates__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 12px;
/* Pro Karte braucht es Platz für Infospalte + Select + Button (DE-Texte); 240px war zu schmal. */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
gap: 16px;
margin-top: 12px;
}
.lover-candidate-card {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
align-items: stretch;
gap: 14px;
min-width: 0;
padding: 14px 16px;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
@@ -1047,6 +1058,13 @@ export default {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 auto;
min-width: 0;
}
.lover-candidate-card__main strong {
overflow-wrap: anywhere;
word-break: break-word;
}
.lover-candidate-card__main span {
@@ -1058,7 +1076,24 @@ export default {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 180px;
flex: 0 0 auto;
width: 100%;
max-width: 100%;
min-width: 0;
}
@media (min-width: 520px) {
.lover-candidate-card {
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.lover-candidate-card__actions {
width: auto;
min-width: 200px;
max-width: min(100%, 260px);
}
}
.lover-candidate-card__label {