Enhance UI and functionality across multiple components
- Updated styles in style.css to improve overall design consistency and introduced CSS variables for better theming. - Refined ChatWindow.vue with improved no-conversation styling and adjusted image borders for a cleaner look. - Enhanced HistoryView.vue and InboxView.vue with new panel styles for better user experience and readability. - Revamped LoginForm.vue to provide a more engaging user interface with a landing page layout and cookie-based profile persistence. - Improved MenuBar.vue and SearchView.vue with active state indicators and refined item displays for better navigation. - Added logout functionality in chat store and server routes to manage user sessions effectively. - Introduced a new mockup view route for design previews. These changes collectively enhance the user experience and visual appeal of the application.
This commit is contained in:
Torsten Schulz (local)
@@ -1,16 +1,26 @@
|
||||
<template>
|
||||
<div class="chat-container">
|
||||
<header class="header">
|
||||
<h1>SingleChat</h1>
|
||||
<div class="app-brand">
|
||||
<span class="app-brand-mark">S</span>
|
||||
<div class="app-brand-copy">
|
||||
<span class="app-brand-eyebrow">SingleChat</span>
|
||||
<h1>Chat</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="chatStore.isLoggedIn" class="header-status">
|
||||
<span class="header-status-chip">{{ chatStore.userName }}</span>
|
||||
<span v-if="chatStore.isoCountryCode" class="header-status-chip">{{ chatStore.isoCountryCode }}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<MenuBar />
|
||||
<MenuBar v-if="chatStore.isLoggedIn" />
|
||||
|
||||
<div class="horizontal-box">
|
||||
<UserList />
|
||||
<div class="horizontal-box" :class="{ 'horizontal-box-login': !chatStore.isLoggedIn, 'horizontal-box-app': chatStore.isLoggedIn }">
|
||||
<UserList v-if="chatStore.isLoggedIn" />
|
||||
|
||||
<div class="content">
|
||||
<div v-if="!chatStore.isLoggedIn" class="login-form">
|
||||
<div v-if="!chatStore.isLoggedIn" class="login-screen">
|
||||
<LoginForm />
|
||||
</div>
|
||||
|
||||
@@ -46,11 +56,14 @@
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="chatStore.currentConversation && currentUserInfo" :class="['chat-header', 'chat-header-gender-' + currentUserInfo.gender]">
|
||||
<h2>{{ chatStore.currentConversation }} ({{ currentUserInfo.gender }})</h2>
|
||||
<div class="chat-header-info">
|
||||
<span v-if="currentUserInfo">{{ currentUserInfo.age }}</span>
|
||||
<span v-if="currentUserInfo">{{ currentUserInfo.country }}</span>
|
||||
<div v-else-if="chatStore.currentConversation && currentUserInfo" class="chat-header">
|
||||
<span :class="['chat-header-accent', 'chat-header-accent-' + currentUserInfo.gender]"></span>
|
||||
<div class="chat-header-main">
|
||||
<h2>{{ chatStore.currentConversation }}</h2>
|
||||
<div class="chat-header-info">
|
||||
<span v-if="currentUserInfo">{{ currentUserInfo.country }}</span>
|
||||
<span v-if="currentUserInfo">{{ currentUserInfo.age }} · {{ currentUserInfo.gender }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChatWindow />
|
||||
@@ -67,7 +80,6 @@
|
||||
<script setup>
|
||||
import { onMounted, computed } from 'vue';
|
||||
import { useChatStore } from '../stores/chat';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import MenuBar from '../components/MenuBar.vue';
|
||||
import UserList from '../components/UserList.vue';
|
||||
import LoginForm from '../components/LoginForm.vue';
|
||||
@@ -79,24 +91,12 @@ import HistoryView from '../components/HistoryView.vue';
|
||||
import ImprintContainer from '../components/ImprintContainer.vue';
|
||||
|
||||
const chatStore = useChatStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const currentUserInfo = computed(() => {
|
||||
if (!chatStore.currentConversation) return null;
|
||||
return chatStore.users.find(u => u.userName === chatStore.currentConversation);
|
||||
});
|
||||
|
||||
function formatGender(gender) {
|
||||
const genderMap = {
|
||||
'F': t('gender_female'),
|
||||
'M': t('gender_male'),
|
||||
'P': t('gender_pair'),
|
||||
'TF': t('gender_trans_mf'),
|
||||
'TM': t('gender_trans_fm')
|
||||
};
|
||||
return genderMap[gender] || gender;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
// Versuche Session wiederherzustellen
|
||||
const sessionRestored = await chatStore.restoreSession();
|
||||
@@ -123,6 +123,24 @@ onMounted(async () => {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.login-screen {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: auto;
|
||||
background:
|
||||
radial-gradient(circle at left top, rgba(61, 134, 84, 0.2), transparent 24%),
|
||||
radial-gradient(circle at right bottom, rgba(36, 92, 58, 0.12), transparent 26%),
|
||||
linear-gradient(180deg, rgba(231, 241, 234, 0.95) 0%, rgba(237, 242, 238, 0.96) 48%, rgba(227, 236, 229, 0.98) 100%);
|
||||
}
|
||||
|
||||
.horizontal-box-login {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -133,62 +151,79 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.chat-header {
|
||||
padding: 0.5em 1em;
|
||||
padding: 0.7rem 1rem;
|
||||
flex-shrink: 0;
|
||||
border-bottom: 1px solid #999;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.85rem;
|
||||
background: linear-gradient(180deg, rgba(225, 239, 229, 0.92) 0%, rgba(247, 250, 248, 0.9) 100%);
|
||||
}
|
||||
|
||||
.chat-header-gender-M {
|
||||
background-color: #0066CC;
|
||||
.chat-header-accent {
|
||||
width: 0.6rem;
|
||||
height: 2.4rem;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-header-gender-F {
|
||||
background-color: #FF4081;
|
||||
.chat-header-accent-M {
|
||||
background: linear-gradient(180deg, #5a94d2 0%, #467bb2 100%);
|
||||
}
|
||||
|
||||
.chat-header-gender-P {
|
||||
background-color: #FFC107;
|
||||
.chat-header-accent-F {
|
||||
background: linear-gradient(180deg, #ff7eaa 0%, #d85f8c 100%);
|
||||
}
|
||||
|
||||
.chat-header-gender-TF {
|
||||
background-color: #8E24AA;
|
||||
.chat-header-accent-P {
|
||||
background: linear-gradient(180deg, #e0ab46 0%, #c78a2c 100%);
|
||||
}
|
||||
|
||||
.chat-header-gender-TM {
|
||||
background-color: #90caf9;
|
||||
.chat-header-accent-TF {
|
||||
background: linear-gradient(180deg, #a37ac8 0%, #8b60af 100%);
|
||||
}
|
||||
|
||||
.chat-header-accent-TM {
|
||||
background: linear-gradient(180deg, #79b8d0 0%, #5fa2bf 100%);
|
||||
}
|
||||
|
||||
.chat-header-main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chat-header h2 {
|
||||
margin: 0 0 0.3em 0;
|
||||
font-size: 1.5em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
line-height: 1.2;
|
||||
color: var(--color-text-strong);
|
||||
}
|
||||
|
||||
.chat-header-info {
|
||||
font-size: 0.75em;
|
||||
color: #fff;
|
||||
margin-top: 0.18rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-muted);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.8em;
|
||||
gap: 0.8rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 1em;
|
||||
background-color: #ffebee;
|
||||
color: #c62828;
|
||||
border: 1px solid #ef5350;
|
||||
margin: 1em;
|
||||
border-radius: 4px;
|
||||
padding: 0.9rem 1rem;
|
||||
background-color: #fff1f1;
|
||||
color: #a83f3f;
|
||||
border: 1px solid #efc3c3;
|
||||
margin: 0.9rem;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.command-table-container {
|
||||
margin: 0.8em;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
margin: 0.9rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
background: var(--color-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -196,17 +231,17 @@ onMounted(async () => {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.6em 0.8em;
|
||||
background: #f4f6f8;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding: 0.7rem 0.85rem;
|
||||
background: var(--color-surface-subtle);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.command-table-close {
|
||||
border: 1px solid #bbb;
|
||||
background: #fff;
|
||||
padding: 0.2em 0.6em;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-surface);
|
||||
padding: 0.35rem 0.7rem;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.command-table-scroll {
|
||||
@@ -222,15 +257,14 @@ onMounted(async () => {
|
||||
|
||||
.command-table th,
|
||||
.command-table td {
|
||||
padding: 0.45em 0.6em;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 0.5rem 0.65rem;
|
||||
border-bottom: 1px solid #edf1ee;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.command-table th {
|
||||
background: #fafafa;
|
||||
background: #f9fbfa;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user