릴리스: v1.2.6 목록 화면 카드 레이아웃 정리
This commit is contained in:
@@ -41,32 +41,43 @@ function thumbUrl(g) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="topBar">
|
||||
<div class="topBar__copy">
|
||||
<h1 class="topBar__title">Main Title</h1>
|
||||
<p class="topBar__desc">게임 선택과 커스텀 티어표 진입을 하나의 대시보드처럼 정리했습니다.</p>
|
||||
<section class="dashboardHero">
|
||||
<div class="dashboardHero__copy">
|
||||
<div class="dashboardHero__eyebrow">Workspace</div>
|
||||
<h1 class="dashboardHero__title">Game Library</h1>
|
||||
<p class="dashboardHero__desc">자주 쓰는 게임 템플릿을 빠르게 고르고, 필요하면 바로 커스텀 티어표를 시작할 수 있어요.</p>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<button class="toolbar__ghost" @click="goFreeform">Toggle Filter</button>
|
||||
<button class="toolbar__select" @click="goFreeform">Select Filter</button>
|
||||
<div class="dashboardToolbar">
|
||||
<div class="dashboardToolbar__stat">
|
||||
<span class="dashboardToolbar__label">Visible Games</span>
|
||||
<strong class="dashboardToolbar__value">{{ games.length }}</strong>
|
||||
</div>
|
||||
<button class="dashboardToolbar__ghost" @click="goFreeform">Quick Start</button>
|
||||
<button class="dashboardToolbar__ghost" @click="goFreeform">Browse All</button>
|
||||
<button class="customTierBtn" @click="goFreeform">{{ auth.user ? '+ 커스텀 티어표 만들기' : '+ 로그인 후 커스텀 티어표 만들기' }}</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div v-if="error" class="error">{{ error }}</div>
|
||||
<section class="grid">
|
||||
<button v-for="g in games" :key="g.id" class="card" @click="goGame(g.id)">
|
||||
<div class="thumbWrap">
|
||||
<img v-if="thumbUrl(g)" class="thumb" :src="thumbUrl(g)" :alt="g.name" />
|
||||
<div v-else class="thumbFallback">{{ g.name[0] }}</div>
|
||||
<section class="libraryGrid">
|
||||
<button v-for="g in games" :key="g.id" class="libraryCard" @click="goGame(g.id)">
|
||||
<div class="libraryCard__thumbWrap">
|
||||
<img v-if="thumbUrl(g)" class="libraryCard__thumb" :src="thumbUrl(g)" :alt="g.name" />
|
||||
<div v-else class="libraryCard__thumbFallback">대표 썸네일</div>
|
||||
</div>
|
||||
<div class="libraryCard__body">
|
||||
<div class="libraryCard__title">{{ g.name }}</div>
|
||||
<div class="libraryCard__meta">
|
||||
<span class="libraryCard__metaDot"></span>
|
||||
<span>{{ g.id }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card__title">{{ g.name }}</div>
|
||||
</button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.topBar {
|
||||
.dashboardHero {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
justify-content: space-between;
|
||||
@@ -75,32 +86,57 @@ function thumbUrl(g) {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.topBar__copy {
|
||||
.dashboardHero__copy {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.topBar__title {
|
||||
.dashboardHero__eyebrow {
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255, 255, 255, 0.42);
|
||||
}
|
||||
.dashboardHero__title {
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
font-size: 34px;
|
||||
letter-spacing: -0.04em;
|
||||
color: rgba(255, 255, 255, 0.96);
|
||||
}
|
||||
.topBar__desc {
|
||||
.dashboardHero__desc {
|
||||
margin: 0;
|
||||
color: rgba(255, 255, 255, 0.58);
|
||||
line-height: 1.5;
|
||||
max-width: 720px;
|
||||
}
|
||||
.toolbar {
|
||||
.dashboardToolbar {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.toolbar__ghost,
|
||||
.toolbar__select,
|
||||
.dashboardToolbar__stat {
|
||||
display: grid;
|
||||
gap: 2px;
|
||||
min-width: 112px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.dashboardToolbar__label {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.48);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.dashboardToolbar__value {
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
}
|
||||
.dashboardToolbar__ghost,
|
||||
.customTierBtn {
|
||||
padding: 10px 14px;
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: rgba(255, 255, 255, 0.84);
|
||||
@@ -108,9 +144,11 @@ function thumbUrl(g) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.customTierBtn {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
background: rgba(77, 127, 233, 0.88);
|
||||
border-color: rgba(77, 127, 233, 0.96);
|
||||
color: #fff;
|
||||
}
|
||||
.grid {
|
||||
.libraryGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
@@ -123,69 +161,87 @@ function thumbUrl(g) {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
}
|
||||
.card {
|
||||
.libraryCard {
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
border-radius: 14px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
background: rgba(62, 62, 62, 0.82);
|
||||
color: rgba(255, 255, 255, 0.92);
|
||||
cursor: pointer;
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
.card:hover {
|
||||
background: rgba(72, 72, 72, 0.92);
|
||||
.libraryCard:hover {
|
||||
background: rgba(70, 70, 70, 0.96);
|
||||
}
|
||||
.thumbWrap {
|
||||
.libraryCard__thumbWrap {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 10px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: #555;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.thumb {
|
||||
.libraryCard__thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.thumbFallback {
|
||||
.libraryCard__thumbFallback {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.card__title {
|
||||
.libraryCard__body {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.libraryCard__title {
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
font-size: 15px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.libraryCard__meta {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
}
|
||||
.libraryCard__metaDot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.grid {
|
||||
.libraryGrid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
.grid {
|
||||
.libraryGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@media (max-width: 720px) {
|
||||
.topBar {
|
||||
.dashboardHero {
|
||||
align-items: stretch;
|
||||
}
|
||||
.toolbar {
|
||||
.dashboardToolbar {
|
||||
width: 100%;
|
||||
}
|
||||
.toolbar__ghost,
|
||||
.toolbar__select,
|
||||
.dashboardToolbar__ghost,
|
||||
.dashboardToolbar__stat,
|
||||
.customTierBtn {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
.grid {
|
||||
.libraryGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user