psc/vcard4reseller
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Branding-Seite Breite begrenzen (Layout-Fix)

Browse Source 
Grid max-width 940px + schmalere Farb-/Slogan-Felder, damit die Karte auf
breiten Monitoren nicht über die ganze Fläche zieht.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas Peterson 2026-06-09 18:18:12 +02:00
parent 8daef8e98f
commit 990e1dbe86
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/views/BrandingView.vue
View File

@ -131,7 +131,7 @@ onMounted(load)
</div> </div>
<h3 style="margin-top:1.6rem">Slogan</h3> <h3 style="margin-top:1.6rem">Slogan</h3>
<input class="input" v-model="data.tagline" maxlength="120" placeholder="z. B. Ihre Druckerei vor Ort" /> <input class="input slogan-input" v-model="data.tagline" maxlength="120" placeholder="z. B. Ihre Druckerei vor Ort" />
<p v-if="error" class="error" style="margin-top:1rem">{{ error }}</p> <p v-if="error" class="error" style="margin-top:1rem">{{ error }}</p>
<p v-if="saved" class="ok" style="margin-top:1rem">Gespeichert.</p> <p v-if="saved" class="ok" style="margin-top:1rem">Gespeichert.</p>
@ -155,7 +155,7 @@ onMounted(load)
<style scoped> <style scoped>
.page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.4rem; } .page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.4rem; }
.page-head .muted { margin: .2rem 0 0; } .page-head .muted { margin: .2rem 0 0; }
.grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.2rem; align-items: start; } .grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.2rem; align-items: start; max-width: 940px; }
.card h3 { font-size: .95rem; margin-bottom: .7rem; } .card h3 { font-size: .95rem; margin-bottom: .7rem; }
.sm { font-size: .8rem; } .sm { font-size: .8rem; }
.error { color: var(--danger); font-size: .88rem; } .error { color: var(--danger); font-size: .88rem; }
@ -167,7 +167,8 @@ onMounted(load)
.logo-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; } .logo-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.logo-actions .muted { margin: .2rem 0 0; } .logo-actions .muted { margin: .2rem 0 0; }
.colors { display: flex; flex-direction: column; gap: .7rem; } .colors { display: flex; flex-direction: column; gap: .7rem; max-width: 440px; }
.slogan-input { max-width: 440px; }
.color { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 600; } .color { display: flex; align-items: center; justify-content: space-between; font-size: .9rem; font-weight: 600; }
.swatch { display: inline-flex; align-items: center; gap: .6rem; } .swatch { display: inline-flex; align-items: center; gap: .6rem; }
.swatch input[type=color] { width: 38px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; padding: 0; } .swatch input[type=color] { width: 38px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; padding: 0; }