릴리스: v1.2.18 공통 56px 셸 헤더 정리
This commit is contained in:
@@ -210,16 +210,13 @@ async function logout() {
|
||||
</template>
|
||||
<template v-else>
|
||||
<aside class="leftRail">
|
||||
<div class="leftRail__top">
|
||||
<div class="leftRail__top railHeader">
|
||||
<button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="메뉴">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('menu')" /></svg>
|
||||
</button>
|
||||
<div class="brandBlock" @click="$router.push('/')">
|
||||
<div class="brandBlock__title">Tier Maker</div>
|
||||
<div class="brandBlock__sub">by zenn</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="leftRail__body">
|
||||
<div v-if="auth.user" class="appUserCard">
|
||||
<button v-if="auth.user" class="appUserCard__button" type="button" @click.stop="toggleMenu">
|
||||
<img v-if="avatarUrl" :src="avatarUrl" class="appUserCard__avatar" alt="avatar" />
|
||||
@@ -270,14 +267,15 @@ async function logout() {
|
||||
<RouterLink v-if="isAdmin" to="/admin" class="adminButton">관리자 메뉴</RouterLink>
|
||||
<RouterLink v-else-if="!auth.user" to="/login" class="adminButton">로그인</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="appMain">
|
||||
<section class="workspace" :class="{ 'workspace--localRail': usesLocalRightRail }">
|
||||
<header class="workspaceHead">
|
||||
<div>
|
||||
<div class="workspaceHead__title">{{ routeMeta.title }}</div>
|
||||
<div class="workspaceHead__subtitle">{{ routeMeta.subtitle }}</div>
|
||||
<header class="workspaceHead railHeader">
|
||||
<div class="workspaceHead__brand" @click="$router.push('/')">
|
||||
<span class="workspaceHead__brandTitle">Tier Maker</span>
|
||||
<span class="workspaceHead__brandSub">by zenn</span>
|
||||
</div>
|
||||
<div class="workspaceHead__actions">
|
||||
<button class="ghostIcon ghostIcon--workspace" type="button" :aria-pressed="rightRailOpen" @click="toggleRightRail">
|
||||
@@ -293,6 +291,8 @@ async function logout() {
|
||||
</main>
|
||||
|
||||
<aside class="rightRail" :class="{ 'rightRail--closed': !rightRailOpen }" :aria-hidden="!rightRailOpen">
|
||||
<div class="rightRail__top railHeader"></div>
|
||||
<div class="rightRail__body">
|
||||
<template v-if="!usesLocalRightRail">
|
||||
<section class="rightRailAction">
|
||||
<button class="rightRailAction__button" type="button" @click="routeMeta.action">
|
||||
@@ -301,6 +301,7 @@ async function logout() {
|
||||
</section>
|
||||
</template>
|
||||
<div id="local-right-rail-root" class="localRightRailRoot"></div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -335,11 +336,12 @@ async function logout() {
|
||||
.leftRail,
|
||||
.rightRail {
|
||||
min-height: 100vh;
|
||||
padding: 14px 12px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(14, 14, 14, 0.92);
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.rightRail {
|
||||
@@ -366,12 +368,27 @@ async function logout() {
|
||||
border-left-color: transparent;
|
||||
}
|
||||
|
||||
.leftRail__top,
|
||||
.rightRail__top {
|
||||
.railHeader {
|
||||
height: 56px;
|
||||
min-height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.leftRail__top,
|
||||
.rightRail__top {
|
||||
gap: 12px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.leftRail__body,
|
||||
.rightRail__body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 14px 12px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ghostIcon {
|
||||
@@ -428,23 +445,6 @@ async function logout() {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.brandBlock {
|
||||
display: grid;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.brandBlock__title {
|
||||
font-size: 21px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.brandBlock__sub {
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.56);
|
||||
}
|
||||
|
||||
.appUserCard {
|
||||
position: relative;
|
||||
margin-bottom: 14px;
|
||||
@@ -629,14 +629,8 @@ async function logout() {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.leftRail {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.appMain {
|
||||
min-width: 0;
|
||||
padding: 14px 18px 22px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -646,20 +640,40 @@ async function logout() {
|
||||
|
||||
.workspace {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
gap: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.workspace--localRail {
|
||||
gap: 12px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.workspaceHead {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.workspaceHead__brand {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.workspaceHead__brandTitle {
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
.workspaceHead__brandSub {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
}
|
||||
|
||||
.workspaceHead__actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
@@ -667,40 +681,28 @@ async function logout() {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.workspaceHead__title {
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.workspaceHead__subtitle {
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.workspaceBody {
|
||||
min-height: calc(100vh - 110px);
|
||||
padding: 20px;
|
||||
min-height: calc(100vh - 56px);
|
||||
padding: 18px;
|
||||
border-radius: 26px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: linear-gradient(180deg, #2d2d2d 0%, #2a2a2a 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
margin: 18px;
|
||||
}
|
||||
|
||||
.workspaceBody--localRail {
|
||||
min-height: calc(100vh - 92px);
|
||||
min-height: calc(100vh - 56px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
margin: 18px;
|
||||
}
|
||||
|
||||
.rightRail {
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 18px;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.rightRailAction {
|
||||
@@ -719,7 +721,7 @@ async function logout() {
|
||||
}
|
||||
|
||||
.localRightRailRoot {
|
||||
min-height: calc(100vh - 40px);
|
||||
min-height: calc(100vh - 84px);
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: 14px;
|
||||
@@ -815,15 +817,13 @@ async function logout() {
|
||||
.workspaceBody {
|
||||
padding: 14px;
|
||||
border-radius: 20px;
|
||||
margin: 14px;
|
||||
}
|
||||
|
||||
.workspaceBody--localRail {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.workspaceHead__title {
|
||||
font-size: 26px;
|
||||
margin: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1040,14 +1040,8 @@ onUnmounted(() => {
|
||||
margin-top: 0;
|
||||
}
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 320px;
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
transition: grid-template-columns 220ms ease;
|
||||
}
|
||||
.layout--railClosed {
|
||||
grid-template-columns: minmax(0, 1fr) 0;
|
||||
display: block;
|
||||
min-width: 0;
|
||||
}
|
||||
.error {
|
||||
margin: 10px 0 14px;
|
||||
@@ -1531,7 +1525,7 @@ onUnmounted(() => {
|
||||
}
|
||||
.poolItem {
|
||||
display: grid;
|
||||
grid-template-columns: var(--thumb-size, 80px) 1fr;
|
||||
grid-template-columns: var(--thumb-size, 80px) minmax(0, 1fr);
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
@@ -1540,8 +1534,12 @@ onUnmounted(() => {
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.poolItem__label {
|
||||
min-width: 0;
|
||||
font-weight: 800;
|
||||
opacity: 0.9;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
@@ -1560,9 +1558,6 @@ onUnmounted(() => {
|
||||
.heroCard {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.editorCanvas {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user