style: separate header back-bar and tabs in InboxHubView on main
This commit is contained in:
@@ -107,13 +107,12 @@ onActivated(() => {
|
||||
|
||||
<template>
|
||||
<div class="inbox-hub" :class="{ 'inbox-hub--tabs': inboxEnabled }">
|
||||
<header v-if="!inboxEnabled" class="page-header">
|
||||
<header class="page-header">
|
||||
<button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
|
||||
<h1>{{ t(hubTitleKey) }}</h1>
|
||||
</header>
|
||||
|
||||
<div v-if="inboxEnabled" class="hub-top-bar">
|
||||
<button type="button" class="hub-back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
|
||||
<nav class="hub-tabs" role="tablist">
|
||||
<button
|
||||
type="button"
|
||||
@@ -217,26 +216,11 @@ onActivated(() => {
|
||||
}
|
||||
|
||||
.hub-top-bar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 6px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.hub-back-btn {
|
||||
flex-shrink: 0;
|
||||
align-self: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
background: #141414;
|
||||
color: var(--gold);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
.hub-tabs {
|
||||
flex: 1;
|
||||
|
||||
Reference in New Issue
Block a user