zenn/tier-maker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

릴리스: v1.2.1 리디자인 포커스 화면 안정화

Browse Source
This commit is contained in:
zenn
2026-03-30 14:43:34 +09:00
parent b15398761b
commit 28e23d6c26
12 changed files with 85 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/App.vue
View File

@@ -14,6 +14,7 @@ const menuOpen = ref(false)
const isAdmin = computed(() => !!auth.user?.isAdmin)
const isPreviewMode = computed(() => route.query.preview === '1')
const isFocusWorkspace = computed(() => ['admin', 'newEditor', 'editEditor', 'profile', 'login'].includes(String(route.name || '')))
const avatarUrl = computed(() => (auth.user?.avatarSrc ? toApiUrl(auth.user.avatarSrc) : ''))
const accountName = computed(() => {
const nickname = (auth.user?.nickname || '').trim()
@@ -170,7 +171,7 @@ async function logout() {
</script>
<template>
<div class="appShell" :class="{ 'appShell--preview': isPreviewMode }">
<div class="appShell" :class="{ 'appShell--preview': isPreviewMode, 'appShell--focus': isFocusWorkspace && !isPreviewMode }">
<template v-if="isPreviewMode">
<main class="appMain appMain--preview">
<RouterView />
@@ -242,7 +243,7 @@ async function logout() {
<main class="appMain">
<section class="workspace">
<header class="workspaceHead">
<header v-if="!isFocusWorkspace" class="workspaceHead">
<div>
<div class="workspaceHead__title">{{ routeMeta.title }}</div>
<div class="workspaceHead__subtitle">{{ routeMeta.subtitle }}</div>
@@ -254,7 +255,7 @@ async function logout() {
</section>
</main>
<aside class="rightRail">
<aside v-if="!isFocusWorkspace" class="rightRail">
<div class="rightRail__top">
<button class="ghostIcon" type="button" aria-label="상태">⌗</button>
</div>
@@ -296,7 +297,7 @@ async function logout() {
.appShell {
min-height: 100vh;
display: grid;
grid-template-columns: 260px minmax(0, 1fr) 280px;
grid-template-columns: 176px minmax(0, 1fr) 228px;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.04), transparent 28%),
linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
@@ -310,7 +311,7 @@ async function logout() {
.leftRail,
.rightRail {
min-height: 100vh;
padding: 14px 10px;
padding: 12px 10px;
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(14, 14, 14, 0.92);
box-sizing: border-box;
@@ -346,7 +347,7 @@ async function logout() {
}
.brandBlock__title {
font-size: 22px;
font-size: 18px;
font-weight: 900;
letter-spacing: -0.04em;
}
@@ -461,8 +462,8 @@ async function logout() {
.leftNav__item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
gap: 10px;
padding: 10px;
border-radius: 12px;
color: rgba(255, 255, 255, 0.76);
text-decoration: none;
@@ -475,8 +476,8 @@ async function logout() {
}
.leftNav__glyph {
width: 26px;
height: 26px;
width: 24px;
height: 24px;
border-radius: 8px;
display: grid;
place-items: center;
@@ -542,7 +543,7 @@ async function logout() {
.appMain {
min-width: 0;
padding: 18px 18px 28px;
padding: 14px 14px 22px;
box-sizing: border-box;
}
@@ -563,7 +564,7 @@ async function logout() {
}
.workspaceHead__title {
font-size: 34px;
font-size: 28px;
font-weight: 900;
letter-spacing: -0.04em;
}
@@ -571,7 +572,7 @@ async function logout() {
.workspaceHead__subtitle {
margin-top: 6px;
color: rgba(255, 255, 255, 0.58);
font-size: 14px;
font-size: 13px;
}
.workspaceBody {
@@ -583,6 +584,19 @@ async function logout() {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.appShell--focus {
grid-template-columns: 176px minmax(0, 1fr);
}
.appShell--focus .workspaceBody {
min-height: calc(100vh - 92px);
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.rightRail {
display: grid;
align-content: start;
@@ -714,7 +728,7 @@ async function logout() {
@media (max-width: 1280px) {
.appShell {
grid-template-columns: 220px minmax(0, 1fr);
grid-template-columns: 160px minmax(0, 1fr);
}
.rightRail {

37
frontend/src/views/AdminView.vue
View File

@@ -1354,18 +1354,14 @@ async function saveFeaturedOrder() {
<style scoped>
.wrap {
padding: 10px 2px;
}
.title {
margin: 0 0 10px;
font-size: 26px;
letter-spacing: -0.02em;
display: grid;
gap: 16px;
}
.card {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 14px;
border: 0;
background: transparent;
border-radius: 0;
padding: 0;
}
.desc {
opacity: 0.82;
@@ -1392,7 +1388,7 @@ async function saveFeaturedOrder() {
}
.tabs,
.modeTabs {
margin-top: 14px;
margin-top: 0;
display: flex;
gap: 10px;
flex-wrap: wrap;
@@ -1400,26 +1396,27 @@ async function saveFeaturedOrder() {
.tab,
.modeTab {
padding: 10px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.06);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.92);
cursor: pointer;
font-weight: 800;
}
.tab--active,
.modeTab--active {
background: rgba(96, 165, 250, 0.2);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.18);
}
.panel {
margin-top: 14px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(0, 0, 0, 0.12);
border-radius: 16px;
padding: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(48, 48, 48, 0.78);
border-radius: 18px;
padding: 16px;
}
.panel--compact {
max-width: 480px;
max-width: 520px;
}
.featuredOrderPanel {
margin-top: 14px;

6
frontend/src/views/FavoriteTierListsView.vue
View File

@@ -154,7 +154,7 @@ onMounted(loadFavorites)
}
.list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.row {
@@ -244,12 +244,12 @@ onMounted(loadFavorites)
}
@media (max-width: 1100px) {
.list {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {

8
frontend/src/views/GameHubView.vue
View File

@@ -214,7 +214,7 @@ function submitSearch() {
}
.list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.row {
@@ -312,14 +312,14 @@ function submitSearch() {
padding: 7px 10px;
font-weight: 800;
}
@media (max-width: 1100px) {
@media (max-width: 1280px) {
.list {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1100px) {
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {

6
frontend/src/views/HomeView.vue
View File

@@ -112,7 +112,7 @@ function thumbUrl(g) {
}
.grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.error {
@@ -165,12 +165,12 @@ function thumbUrl(g) {
}
@media (max-width: 1200px) {
.grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {

6
frontend/src/views/MyTierListsView.vue
View File

@@ -129,7 +129,7 @@ async function removeList(t) {
}
.list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.row {
@@ -215,12 +215,12 @@ async function removeList(t) {
}
@media (max-width: 1100px) {
.list {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 960px) {
.list {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {

26
frontend/src/views/TierEditorView.vue
View File

@@ -857,8 +857,8 @@ onUnmounted(() => {
<style scoped>
.head {
display: grid;
gap: 14px;
padding: 6px 2px 14px;
gap: 16px;
padding: 2px 2px 16px;
}
.previewOnly {
min-height: 100vh;
@@ -938,8 +938,8 @@ onUnmounted(() => {
}
.heroCard {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(280px, 360px);
gap: 18px;
grid-template-columns: minmax(0, 1.65fr) minmax(260px, 320px);
gap: 16px;
align-items: stretch;
}
.heroCard__main,
@@ -1123,8 +1123,8 @@ onUnmounted(() => {
}
.layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 14px;
grid-template-columns: minmax(0, 1fr) 284px;
gap: 16px;
align-items: start;
}
.error {
@@ -1135,10 +1135,10 @@ onUnmounted(() => {
background: rgba(239, 68, 68, 0.12);
}
.board {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(48, 48, 48, 0.78);
border-radius: 18px;
padding: 18px;
align-self: start;
}
.modalOverlay {
@@ -1419,9 +1419,9 @@ onUnmounted(() => {
object-fit: cover;
}
.sidebar {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(48, 48, 48, 0.78);
border-radius: 18px;
padding: 12px;
}
.sidebar__title {