Einheitliches CSS
This commit is contained in:
+420
-25
@@ -1,10 +1,14 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
a,
|
||||
@@ -23,16 +27,19 @@ a,
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
body {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -79,23 +86,411 @@ a,
|
||||
/* Main Content Area */
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
/* Fix it to the top */
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 0px;
|
||||
/* Prevent content from overlapping the nav */
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
/* Full width */
|
||||
box-sizing: border-box;
|
||||
height: calc(100vh - 60px);
|
||||
margin-top: 60px;
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
background-color: var(--color-background);
|
||||
/* Use palette from base.css */
|
||||
min-height: calc(100vh - 60px);
|
||||
/* Fill the remaining height */
|
||||
}
|
||||
|
||||
/* Global fullwidth container class for all components */
|
||||
.fullwidth-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Global fullwidth page class for view components */
|
||||
.fullwidth-page {
|
||||
width: 100%;
|
||||
min-height: calc(100vh - 120px);
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Common Card Layouts */
|
||||
.card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
transform: translateY(-2px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Common Grid Layouts */
|
||||
.grid-container {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.grid-2-columns {
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.grid-3-columns {
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
}
|
||||
|
||||
.grid-4-columns {
|
||||
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
}
|
||||
|
||||
/* Common Header Styles */
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 2px solid #007bff;
|
||||
}
|
||||
|
||||
.page-header h2,
|
||||
.page-header h3 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin: 30px 0 15px 0;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #dee2e6;
|
||||
}
|
||||
|
||||
.section-header h3,
|
||||
.section-header h4 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Common Button Styles */
|
||||
.btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #0056b3;
|
||||
box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
border-color: #dee2e6;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #adb5bd;
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border-color: #dc3545;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
border-color: #28a745;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
/* Common Form Elements */
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Common List Styles */
|
||||
.list-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #dee2e6;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: #f8f9fa;
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.list-item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.list-item-title {
|
||||
margin: 0 0 6px 0;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.list-item-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.list-item-separator {
|
||||
color: #ccc;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.list-item-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Common Badge Styles */
|
||||
.badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: #ffc107;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-info {
|
||||
background: #17a2b8;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-gradient {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Common Resource Display */
|
||||
.resource-display {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.resource-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.resource-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.resource-label {
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.resource-amount {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.resource-remaining {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
/* Common Progress/Status Indicators */
|
||||
.progress-badge {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background: #6c757d;
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background: #ffc107;
|
||||
}
|
||||
|
||||
/* Common Empty States */
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
font-size: 1.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Common Loading States */
|
||||
.loading-message {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #007bff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
@@ -23,7 +23,56 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<style scoped>
|
||||
.character-details {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.character-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.character-header h2 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.5rem;
|
||||
border-bottom: 2px solid #007bff;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.submenu {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.submenu button {
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 6px;
|
||||
background: #f8f9fa;
|
||||
color: #495057;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.submenu button:hover {
|
||||
background: #e9ecef;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.submenu button.active {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
@@ -1,37 +1,41 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Your Characters</h2>
|
||||
<div class="fullwidth-container">
|
||||
<div class="page-header">
|
||||
<h2>Your Characters</h2>
|
||||
</div>
|
||||
|
||||
<!-- Create New Character Button -->
|
||||
<div class="create-character-section">
|
||||
<button @click="createNewCharacter" class="create-btn">Create New Character</button>
|
||||
<button @click="createNewCharacter" class="btn btn-success btn-large">Create New Character</button>
|
||||
</div>
|
||||
|
||||
<!-- Active Character Creation Sessions -->
|
||||
<div v-if="creationSessions.length > 0" class="creation-sessions-section">
|
||||
<h3>Continue Character Creation</h3>
|
||||
<div class="sessions-grid">
|
||||
<div v-if="creationSessions.length > 0" class="sessions-section">
|
||||
<div class="section-header">
|
||||
<h3>Continue Character Creation</h3>
|
||||
</div>
|
||||
<div class="grid-container grid-2-columns">
|
||||
<div
|
||||
v-for="session in creationSessions"
|
||||
:key="session.session_id"
|
||||
class="session-card"
|
||||
class="card session-card"
|
||||
@click="continueSession(session.session_id)"
|
||||
>
|
||||
<div class="session-header">
|
||||
<h4>{{ session.name || 'Unnamed Character' }}</h4>
|
||||
<span class="session-progress">Step {{ session.current_step }}/{{ session.total_steps }}</span>
|
||||
<h4 class="list-item-title">{{ session.name || 'Unnamed Character' }}</h4>
|
||||
<span class="badge badge-primary progress-badge">Step {{ session.current_step }}/{{ session.total_steps }}</span>
|
||||
</div>
|
||||
<div class="session-details">
|
||||
<p><strong>Race:</strong> {{ session.rasse || 'Not selected' }}</p>
|
||||
<p><strong>Class:</strong> {{ session.typ || 'Not selected' }}</p>
|
||||
<p><strong>Current step:</strong> {{ session.progress_text }}</p>
|
||||
<p class="list-item-details"><strong>Race:</strong> {{ session.rasse || 'Not selected' }}
|
||||
<span class="list-item-separator">|</span><strong>Class:</strong> {{ session.typ || 'Not selected' }}
|
||||
<span class="list-item-separator">|</span><strong>Current step:</strong> {{ session.progress_text }}</p>
|
||||
</div>
|
||||
<div class="session-meta">
|
||||
<span class="last-updated">Last updated: {{ formatDate(session.updated_at) }}</span>
|
||||
<span class="expires">Expires: {{ formatDate(session.expires_at) }}</span>
|
||||
<span class="session-date">Last updated: {{ formatDate(session.updated_at) }}</span>
|
||||
<span class="session-date">Expires: {{ formatDate(session.expires_at) }}</span>
|
||||
</div>
|
||||
<div class="session-actions">
|
||||
<button @click.stop="deleteSession(session.session_id)" class="delete-session-btn">
|
||||
<div class="list-item-actions">
|
||||
<button @click.stop="deleteSession(session.session_id)" class="btn btn-danger btn-small">
|
||||
Delete Draft
|
||||
</button>
|
||||
</div>
|
||||
@@ -39,18 +43,33 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li v-for="character in characters" :key="character.character_id" style="white-space: nowrap; /* Prevent line breaks inside list items */;">
|
||||
<!-- Link to Character Details -->
|
||||
<router-link :to="`/character/${character.id}`">View Details</router-link>
|
||||
{{ character.name }} ({{ character.rasse }}, {{ character.typ }}, {{ character.grad }}, {{ character.owner }}, {{ character.public }} )
|
||||
<button @click="goToAusruestung(character.character_id)">Manage Equipment</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div v-if="characters.length === 0" class="empty-state">
|
||||
<h3>No Characters Yet</h3>
|
||||
<p>Create your first character to get started!</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="list-container">
|
||||
<div v-for="character in characters" :key="character.character_id" class="list-item">
|
||||
<div class="list-item-content">
|
||||
<h4 class="list-item-title">{{ character.name }}</h4>
|
||||
<div class="list-item-details">
|
||||
{{ character.rasse }} <span class="list-item-separator">|</span>
|
||||
{{ character.typ }} <span class="list-item-separator">|</span>
|
||||
{{ character.grad }} <span class="list-item-separator">|</span>
|
||||
{{ character.owner }} <span class="list-item-separator">|</span>
|
||||
<span class="badge" :class="character.public ? 'badge-success' : 'badge-secondary'">
|
||||
{{ character.public ? 'Public' : 'Private' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-item-actions">
|
||||
<router-link :to="`/character/${character.id}`" class="btn btn-primary">View Details</router-link>
|
||||
<button @click="goToAusruestung(character.character_id)" class="btn btn-secondary">Manage Equipment</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
</template><script>
|
||||
import API from '../utils/api'
|
||||
|
||||
export default {
|
||||
@@ -139,61 +158,32 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Spezifische Styles nur für CharacterList */
|
||||
.create-character-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
border: 2px dashed #ccc;
|
||||
margin-bottom: 30px;
|
||||
padding: 20px;
|
||||
border: 2px dashed #28a745;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
background-color: #f9f9f9;
|
||||
background-color: #f8fff9;
|
||||
}
|
||||
|
||||
.create-btn {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
.btn-large {
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.create-btn:hover {
|
||||
background-color: #45a049;
|
||||
.btn-small {
|
||||
padding: 5px 10px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.creation-sessions-section {
|
||||
.sessions-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.creation-sessions-section h3 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.sessions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.session-card {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.session-card:hover {
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.session-header {
|
||||
@@ -203,31 +193,10 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.session-header h4 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.session-progress {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 2px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.session-details {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.session-details p {
|
||||
margin: 5px 0;
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.session-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -237,42 +206,27 @@ export default {
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.last-updated,
|
||||
.expires {
|
||||
.session-date {
|
||||
font-size: 0.8rem;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.session-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.delete-session-btn {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.delete-session-btn:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.sessions-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.session-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.list-item-actions {
|
||||
align-self: stretch;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="cd-view" v-if="character">
|
||||
<div class="fullwidth-container cd-view" v-if="character">
|
||||
<!-- Character Overview -->
|
||||
<div class="character-overview">
|
||||
<div class="character-image">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="cd-view">
|
||||
<div class="fullwidth-container cd-view">
|
||||
<h2>{{ character.name }}'s Ausrüstung</h2>
|
||||
<div class="cd-list">
|
||||
<table class="cd-table">
|
||||
|
||||
@@ -1,34 +1,41 @@
|
||||
<template>
|
||||
<div class="experiance-view">
|
||||
<h3>{{ $t('experience.title') }}</h3>
|
||||
<div class="fullwidth-container experiance-view">
|
||||
<div class="page-header">
|
||||
<h3>{{ $t('experience.title') }}</h3>
|
||||
</div>
|
||||
|
||||
<!-- Erfahrungspunkte -->
|
||||
<div class="experience-section">
|
||||
<h4>{{ $t('experience.experience_points') }}</h4>
|
||||
<div class="stat-box">
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">{{ $t('experience.available_ep') }}:</span>
|
||||
<span class="stat-value">{{ character.erfahrungsschatz?.ep || 0 }} EP</span>
|
||||
<div class="section-header">
|
||||
<h4>{{ $t('experience.experience_points') }}</h4>
|
||||
</div>
|
||||
<div class="resource-display">
|
||||
<div class="resource-card">
|
||||
<span class="resource-icon">⚡</span>
|
||||
<div class="resource-info">
|
||||
<div class="resource-label">{{ $t('experience.available_ep') }}</div>
|
||||
<div class="resource-amount">{{ character.erfahrungsschatz?.ep || 0 }} EP</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<div class="input-group">
|
||||
<div class="form-row control-row">
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model.number="experienceAmount"
|
||||
type="number"
|
||||
class="amount-input"
|
||||
class="form-control amount-input"
|
||||
placeholder="Anzahl EP"
|
||||
min="1"
|
||||
/>
|
||||
<div class="button-group">
|
||||
<button @click="addExperience" class="btn-add" :disabled="!experienceAmount || experienceAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>+ Hinzufügen</span>
|
||||
</button>
|
||||
<button @click="removeExperience" class="btn-remove" :disabled="!experienceAmount || experienceAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>- Entfernen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button @click="addExperience" class="btn btn-success" :disabled="!experienceAmount || experienceAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>+ Hinzufügen</span>
|
||||
</button>
|
||||
<button @click="removeExperience" class="btn btn-danger" :disabled="!experienceAmount || experienceAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>- Entfernen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -36,47 +43,46 @@
|
||||
|
||||
<!-- Vermögen -->
|
||||
<div class="wealth-section">
|
||||
<h4>{{ $t('experience.wealth') }}</h4>
|
||||
<div class="stat-box">
|
||||
<div class="wealth-item">
|
||||
<span class="wealth-label">{{ $t('experience.gold_coins') }}:</span>
|
||||
<span class="wealth-value">{{ character.vermoegen?.goldstücke || 0 }} GS</span>
|
||||
<div class="section-header">
|
||||
<h4>{{ $t('experience.wealth') }}</h4>
|
||||
</div>
|
||||
<div class="resource-display">
|
||||
<div class="resource-card">
|
||||
<span class="resource-icon">💰</span>
|
||||
<div class="resource-info">
|
||||
<div class="resource-label">{{ $t('experience.gold_coins') }}</div>
|
||||
<div class="resource-amount">{{ character.vermoegen?.goldstücke || 0 }} GS</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control-row">
|
||||
<div class="input-group">
|
||||
<div class="form-row control-row">
|
||||
<div class="form-group">
|
||||
<input
|
||||
v-model.number="goldAmount"
|
||||
type="number"
|
||||
class="amount-input"
|
||||
class="form-control amount-input"
|
||||
placeholder="Anzahl GS"
|
||||
min="1"
|
||||
/>
|
||||
<div class="button-group">
|
||||
<button @click="addGold" class="btn-add" :disabled="!goldAmount || goldAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>+ Hinzufügen</span>
|
||||
</button>
|
||||
<button @click="removeGold" class="btn-remove" :disabled="!goldAmount || goldAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>- Entfernen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button @click="addGold" class="btn btn-success" :disabled="!goldAmount || goldAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>+ Hinzufügen</span>
|
||||
</button>
|
||||
<button @click="removeGold" class="btn btn-danger" :disabled="!goldAmount || goldAmount <= 0 || isLoading">
|
||||
<span v-if="isLoading">⏳</span>
|
||||
<span v-else>- Entfernen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Silberstücke und Kupferstücke temporär ausgeblendet -->
|
||||
<!--
|
||||
<div class="wealth-item">
|
||||
<span class="wealth-label">{{ $t('experience.silver_coins') }}:</span>
|
||||
<span class="wealth-value">{{ character.vermoegen?.silberstücke || 0 }} SS</span>
|
||||
</div>
|
||||
<div class="wealth-item">
|
||||
<span class="wealth-label">{{ $t('experience.copper_coins') }}:</span>
|
||||
<span class="wealth-value">{{ character.vermoegen?.kupferstücke || 0 }} KS</span>
|
||||
</div>
|
||||
-->
|
||||
<div class="wealth-item total">
|
||||
<span class="wealth-label">{{ $t('experience.total_in_gs') }}:</span>
|
||||
<span class="wealth-value">{{ totalWealthInGS }} GS</span>
|
||||
|
||||
<!-- Total wealth display -->
|
||||
<div class="resource-card wealth-total">
|
||||
<span class="resource-icon">💎</span>
|
||||
<div class="resource-info">
|
||||
<div class="resource-label">{{ $t('experience.total_in_gs') }}</div>
|
||||
<div class="resource-amount total-amount">{{ totalWealthInGS }} GS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,106 +96,22 @@
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ExperianceView spezifische Styles */
|
||||
.experiance-view {
|
||||
padding: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.experiance-view h3 {
|
||||
color: #333;
|
||||
border-bottom: 2px solid #007bff;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.experiance-view h4 {
|
||||
color: #555;
|
||||
margin-bottom: 15px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.stat-box {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.stat-item, .wealth-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.stat-item:last-child, .wealth-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.wealth-item.total {
|
||||
border-top: 2px solid #007bff;
|
||||
margin-top: 10px;
|
||||
padding-top: 15px;
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.stat-label, .wealth-label {
|
||||
font-weight: 500;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.stat-value, .wealth-value {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
padding: 5px 10px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.wealth-item.total .wealth-value {
|
||||
background: #007bff;
|
||||
color: white;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
.value-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
.experience-section,
|
||||
.wealth-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.control-row {
|
||||
margin-top: 15px;
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.amount-input {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.amount-input:focus {
|
||||
border-color: #007bff;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
@@ -197,46 +119,22 @@
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-add, .btn-remove {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-add:hover:not(:disabled) {
|
||||
background: #218838;
|
||||
}
|
||||
|
||||
.btn-remove {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-remove:hover:not(:disabled) {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
.btn-add:disabled, .btn-remove:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.unit {
|
||||
.amount-input {
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.experience-section, .wealth-section {
|
||||
margin-bottom: 30px;
|
||||
.wealth-total {
|
||||
margin-top: 15px;
|
||||
border: 2px solid #007bff;
|
||||
background: #f0f8ff;
|
||||
}
|
||||
|
||||
.total-amount {
|
||||
color: #007bff;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="cd-view">
|
||||
<div class="fullwidth-container cd-view">
|
||||
<div class="cd-list">
|
||||
<div class="tables-container">
|
||||
<div class="table-wrapper-left">
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="cd-view">
|
||||
<div class="fullwidth-container cd-view">
|
||||
<!-- Header mit Lernmodus-Kontrollen -->
|
||||
<div class="header-section">
|
||||
<div class="page-header header-section">
|
||||
<h2>{{ character.name }}'s Zauber</h2>
|
||||
|
||||
<div class="learning-mode-controls">
|
||||
<!-- Lernmodus Toggle Button -->
|
||||
<button
|
||||
@click="showLearnNewDialog"
|
||||
class="btn-learning-mode"
|
||||
class="btn btn-primary btn-learning-mode"
|
||||
title="Neuen Zauber lernen"
|
||||
>
|
||||
<span class="icon">🎓</span>
|
||||
@@ -51,22 +51,17 @@
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.cd-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* SpellView spezifische Styles */
|
||||
.cd-table-header {
|
||||
background-color: #1da766;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Header mit Lernmodus-Kontrollen */
|
||||
.header-section {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.learning-mode-controls {
|
||||
@@ -75,26 +70,21 @@
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Lernmodus Toggle Button */
|
||||
.btn-learning-mode {
|
||||
padding: 8px 16px;
|
||||
border: 2px solid #1da766;
|
||||
background: white;
|
||||
color: #1da766;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
border: 2px solid #1da766;
|
||||
}
|
||||
|
||||
.btn-learning-mode:hover {
|
||||
background: #1da766;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user