Skip to content

vridge-docs
vridge-docs
Commit e42f06be authored by Gyeongho Park's avatar Gyeongho Park
Browse files
Options

[Improve] 스타일 개선

parent fa736edf
Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 78 deletions
docs-front/assets/scss/common.scss
View file @ e42f06be
......@@ -104,6 +104,13 @@ input:-webkit-autofill:active {
font-style: normal;
}
@font-face {
font-family: 'Pretendard-Bold';
src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
font-weight: 400;
font-style: normal;
}
.v-application {
font-family: "Pretendard-Regular", sans-serif !important;
......@@ -507,7 +514,8 @@ div:hover {
}
.font-weight-bold{
font-family: "Pretendard-SemiBold", sans-serif !important;
font-family: "Pretendard-Bold", sans-serif !important;
font-weight: bold;
}
@media screen and (max-width: 1080px) {
......@@ -787,4 +795,9 @@ div:hover {
.opacity-8 {
opacity: 0.8;
}
.opacity-7 {
opacity: 0.7;
}.opacity-6 {
opacity: 0.6;
}
\ No newline at end of file
docs-front/assets/scss/guide.scss
View file @ e42f06be
......@@ -13,9 +13,14 @@
-webkit-font-smoothing: antialiased;
font-weight: 400;
}
h1, h2, h3{
font-family: "Pretendard-Bold", sans-serif !important;
}
h4, h5, h6{
font-family: "Pretendard-SemiBold", sans-serif !important;
}
.guide-wrap-container{
height: 100%;
padding-right: 240px;
}
.guide-wrap {
height: 100%;
......@@ -48,9 +53,7 @@
padding: 24px 12px 120px 12px;
width:100% !important;
h1, h2, h3, h4, h5, h6{
font-family: "Pretendard-SemiBold", sans-serif !important;
}
h2{
border-bottom: 1px solid rgba(128,128,128,0.2);
......@@ -133,9 +136,7 @@
min-width:230px;
min-height: 200px;
height:calc(100vh - 15vh);
position:fixed !important;
right:0;
top:90px;
top:0px;
z-index: 1;
.guide-navigator-item{
cursor: pointer;
......@@ -171,7 +172,7 @@
z-index: 9;
.mdi-arrow-up::before {
font-size: 32px;
font-size: 21px;
text-align: center;
width: 48px;
height: 48px;
......@@ -259,6 +260,12 @@
}
}
.v-list--dense {
.v-list-item{
min-height: 34px !important;
}
}
.v-navigation-drawer__border {
......@@ -279,6 +286,7 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-top: 1px solid #99999930 !important;
.logout-btn-wrap {
position: relative;
align-items: center;
......
docs-front/i18n/messages/en.js
View file @ e42f06be
......@@ -7,5 +7,52 @@ export default {
"Github 리소스 보기": "View on Github",
"이전 페이지": "Prev page",
"다음 페이지": "Next page",
"브릿지 AI": "브릿지 AI",
"브릿지 AI": "VRIDGE AI",
"organization" : "organization",
"dashboard" : "dashboard",
"project" : "project",
"overview" : "overview",
"getting_started" : "getting started",
"sign_in_and_sign_up" : "sign in and sign up",
"dataset" : "dataset",
"label_class" : "label class",
"labeling_tools" : "labeling tools",
"labeling_tools_image" : "labeling tools image",
"interface" : "interface",
"labeling_tools_csv" : "labeling tools csv",
"ai_modeling" : "ai modeling",
"image_type" : "image type",
"pre_settings" : "pre settings",
"csv_type" : "csv type",
"ai_deploying" : "ai deploying",
"deploying_webpoint" : "deploying webpoint",
"web_points" : "web points",
"inference_server" : "inference server",
"model_test" : "model test",
"edge_points" : "edge points",
"create_edge_point" : "create edge point",
"member_management" : "member management",
"quest_and_answer" : "quest and answer",
"resources" : "resources",
"image_dataset" : "image dataset",
"csv_classification" : "csv classification",
"monitoring" : "monitoring",
"deploying_edgepoint" : "deploying edgepoint",
"rest_api" : "rest api",
"delete_edge_point" : "delete edge point",
"segs" : "segs",
"gggg" : "gggg",
"key_management" : "key management",
"usage_statistics" : "usage statistics",
"settings" : "settings",
"csv_dataset" : "csv dataset",
"image_object_detection" : "image object detection",
"training_result" : "training result",
"deploying_usage_statistics" : "deploying usage statistics",
"my_settings" : "my settings",
"payments" : "payments",
"image_segmentation" : "image segmentation",
"notification" : "notification",
"users_theme" : "users theme",
"project_management" : "project management",
}
\ No newline at end of file
docs-front/i18n/messages/ko.js
View file @ e42f06be
......@@ -8,4 +8,51 @@ export default {
"이전 페이지": "이전 페이지",
"다음 페이지": "다음 페이지",
"브릿지 AI": "브릿지 AI",
"organization" : "조직",
"dashboard" : "대시보드",
"project" : "프로젝트",
"overview" : "개요",
"getting_started" : "시작하기",
"sign_in_and_sign_up" : "로그인 및 가입",
"dataset" : "데이터셋",
"label_class" : "레이블 클래스",
"labeling_tools" : "레이블링 도구",
"labeling_tools_image" : "레이블링 도구 이미지",
"interface" : "인터페이스",
"labeling_tools_csv" : "레이블링 도구 CSV",
"ai_modeling" : "AI 모델링",
"image_type" : "이미지 유형",
"pre_settings" : "사전 설정",
"csv_type" : "CSV 유형",
"ai_deploying" : "AI 배포",
"deploying_webpoint" : "웹포인트 배포",
"web_points" : "웹 포인트",
"inference_server" : "추론 서버",
"model_test" : "모델 테스트",
"edge_points" : "엣지 포인트",
"create_edge_point" : "엣지 포인트 생성",
"member_management" : "회원 관리",
"quest_and_answer" : "질문과 답변",
"resources" : "자원",
"image_dataset" : "이미지 데이터셋",
"csv_classification" : "CSV 분류",
"monitoring" : "모니터링",
"deploying_edgepoint" : "엣지포인트 배포",
"rest_api" : "REST API",
"delete_edge_point" : "엣지 포인트 삭제",
"segs" : "구분",
"gggg" : "gggg(미번역)",
"key_management" : "키 관리",
"usage_statistics" : "사용 통계",
"settings" : "설정",
"csv_dataset" : "CSV 데이터셋",
"image_object_detection" : "이미지 객체 감지",
"training_result" : "훈련 결과",
"deploying_usage_statistics" : "사용 통계 배포",
"my_settings" : "내 설정",
"payments" : "결제",
"image_segmentation" : "이미지 분할",
"notification" : "알림",
"users_theme" : "사용자 테마",
"project_management" : "프로젝트 관리",
}
\ No newline at end of file
docs-front/layouts/default.vue
View file @ e42f06be
......@@ -2,27 +2,30 @@
<v-app class="guide-app">
<client-only>
<v-card class="guide-navigator" color="transparent" v-if="isShowNav()">
<v-icon dense class="mr-1">mdi-text</v-icon>
{{$t('내용')}}
<v-card-text>
<v-row no-gutters
v-for="(item, i) in $store.state.guideNavigator"
:key="item.html"
@click="goGuideNav(item.position)"
class="guide-navigator-item"
>
<span
class="guide-navigator-item-selector"
:class="{'active': currentNavIndex===i}"
<v-navigation-drawer v-if="isShowNav()" clipped right app style="margin-top:20px;">
<v-card class="guide-navigator" color="transparent">
<v-icon dense class="mr-1">mdi-text</v-icon>
{{$t('내용')}}
<v-card-text>
<v-row no-gutters
v-for="(item, i) in $store.state.guideNavigator"
:key="item.html"
@click="goGuideNav(item.position)"
class="guide-navigator-item"
>
</span>
<span class="guide-navigator-item-text" :class="{active : currentNavIndex === i}">{{item.html}}</span>
</v-row>
</v-card-text>
</v-card>
<span
class="guide-navigator-item-selector"
:class="{'active': currentNavIndex===i}"
>
</span>
<span class="guide-navigator-item-text" :class="{active : currentNavIndex === i}">{{item.html}}</span>
</v-row>
</v-card-text>
</v-card>
</v-navigation-drawer>
<transition name="slide-fade">
<div class="topBtn" @click="goGuideNav(0)" v-if="!$store.state.editMode" >
......@@ -42,17 +45,12 @@
clipped
>
<client-only>
<v-skeleton-loader
elevation="0"
type="card-heading ,list-item, list-item-three-line, list-item, list-item, list-item,list-item,list-item"
style="width:100%;"
v-if="loadingPageList"
></v-skeleton-loader>
<v-list class="px-2">
<v-list class="px-2" dense>
<v-list-item
:ripple="false"
@click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), treeKey++]"
@click="[$router.push('/'), guideIndex.forEach((x)=>x.active = false), selectedIndex = null, treeKey++]"
:class="{active: $route.path === '/'}"
dense
>
......@@ -66,14 +64,21 @@
</v-list-item>
</v-list>
<v-divider/>
<v-list-item-content class="mt-2 pb-0 grey--text mx-6 text-caption">
서비스 가이드
</v-list-item-content>
<v-skeleton-loader
elevation="0"
type="list-item, list-item, list-item, list-item,list-item,list-item"
style="width:100%;"
v-if="loadingPageList"
></v-skeleton-loader>
<v-list v-if="guideIndex && !loadingPageList" dense class="px-2"
:key="treeKey"
>
<v-list-item-content class="mx-4 pb-0 grey--text text-caption">
서비스 가이드
</v-list-item-content>
<tree
:items="guideIndex"
:selectedItem="selectedIndex"
......@@ -98,11 +103,19 @@
<template v-slot:append>
<v-divider/>
<v-list-item dense href="http://www.vazilcompany.com" target="_blank" class="ma-2">
<v-list-item-content>
<v-row no-gutters align="center">
<v-img class="mr-2" src="/logo-a.svg" max-height="20" max-width="20" contain/>
Powered By <strong class="font-weight-bold ml-1">VAZIL</strong>
</v-row>
<v-list-item-icon class="mr-4">
<v-img src="/logo-a.svg" max-height="20" max-width="20" contain/>
</v-list-item-icon>
<v-list-item-content >
<v-list-item-action-text>
<v-row no-gutters align="center" >
<span style="font-size: 12px !important;">
Powered By
</span>
<strong class="font-weight-bold ml-2" style="font-size:12px !important; letter-spacing: 1px;">© VAZIL</strong>
</v-row>
</v-list-item-action-text>
</v-list-item-content>
</v-list-item>
</template>
......@@ -115,6 +128,11 @@
flat
class="app-bar-wrap"
clipped-left
clipped-right
fixed
dark
dense
style="z-index:20;"
>
<client-only>
<v-row no-gutters align="center">
......@@ -123,12 +141,12 @@
>
<span style="cursor:pointer;">
<img class="mt-1 mr-1" @click="$router.push('/')" src="/logo_v2/s01.png" cover height="28"/>
<img class="mt-1" @click="$router.push('/')" src="/logo_v2/s01.png" cover height="28"/>
</span>
<span class="font-weight-bold">
<span>
V R I D G E
<strong class="ml-2">Docs</strong>
<strong class="ml-2 font-weight-bold">Docs</strong>
</span>
</div>
......@@ -200,7 +218,6 @@
</v-row>
</client-only>
<v-progress-linear absolute bottom :value="scrollPositionRate" height="1" background-color="#999" background-opacity="0.3" color="primary" style="transition:none !important;" />
<v-dialog v-model="editDialogPWActive" width="200">
<v-form class="pa-5" @submit.prevent>
......@@ -326,6 +343,28 @@
</v-dialog>
</v-app-bar>
<v-app-bar
app
flat
clipped-left
clipped-right
dense
style="top:48px;"
class="app-bar-wrap"
>
<v-row no-gutters align="center" style="font-size:1rem !important;">
<span>🏠 {{ $t('홈')}}</span>
<span v-for="item in paths" class="ml-2">
<v-icon small>mdi-chevron-right</v-icon>
{{ $t(item) }}
</span>
</v-row>
<v-progress-linear absolute bottom :value="scrollPositionRate" height="1" background-color="#999" background-opacity="0.3" color="primary" style="transition:none !important;" />
</v-app-bar>
<v-main>
<client-only>
<Nuxt/>
......@@ -347,6 +386,7 @@ export default{
},
data:() => ({
//스크롤 헤더 트래커
paths:[],
navPositionList: [],
currentNavIndex: 0,
keyword:'',
......@@ -655,10 +695,18 @@ export default{
},
'$store.state.guideNavigator'() {
this.navPositionList = this.$store.state.guideNavigator.map((nav) => nav.position)
this.scrollPositionRate = 0
},
'$route.params.guide'() {
this.activeNav()
},
'$store.state.path'() {
this.paths = []
for(let p of this.$store.state.path.split('/')) {
if(p)
this.paths.push(p)
}
},
showSearch(val){
if(val){
this.$nextTick(()=>{
......@@ -685,9 +733,9 @@ export default{
position: absolute;
right: 20px;
top: -6px;
font-size: 0.75rem;
font-size: 0.65rem;
text-transform: uppercase;
font-weight: 700;
font-weight: 400;
}
}
}
......
docs-front/pages/_guide/index.vue
View file @ e42f06be
......@@ -91,6 +91,7 @@ export default {
}),
methods:{
async getGuide(id){
this.$store.commit('setPath', '')
this.loading = true
await this.$axios.get('/guide-index',{
params:{
......@@ -99,6 +100,7 @@ export default {
})
.then(res=>{
this.guide = res.data
this.$store.commit('setPath', this.guide.path)
})
.catch(err=>{
console.log(err)
......@@ -127,24 +129,6 @@ export default {
})
},
getBreadcrumbs(){
let items = []
let paths = this.guide.path.substring(0, this.guide.path.length-1).split('/')
let pathTemp = ''
for(let i = 0; i < paths.length; i++) {
pathTemp += paths[i]
let item = {
text: paths[i],
paths: pathTemp
}
pathTemp += '_'
items.push(item)
}
return items
},
......
docs-front/pages/index.vue
View file @ e42f06be
<template>
<div class="guide-wrap-container">
<v-container class="guide-wrap">
<v-row no-gutters align="center" justify="center" class="guide-wrap-header">
<v-row no-gutters align="center" class="guide-wrap-header">
<h1 class="font-weight-bold">{{$t('서비스 가이드')}}</h1>
</v-row>
<v-row no-gutters class="guide-content">
<v-col cols="12" align="center" justify="center" class="ma-auto">
<img src="/logo_v2/s01.png" cover />
<v-col cols="12" justify="center" class="ma-auto">
<p v-html="$t('메인 페이지 설명글')"></p>
<v-list v-if="guideIndex" class="d-md-flex d-lg-none">
<v-btn
href="https://github.com/vazilcompany/vridge-docs"
target="_blank"
large
:elevation="0"
color="primary"
class="font-weight-bold"
>
<v-icon left>mdi-github</v-icon>
깃헙에서 문서보기
</v-btn>
<v-list v-if="guideIndex">
<tree
:items="guideIndex"
@clickItemEvent="openGuide"
/>
</v-list>
</v-col>
</v-row>
</v-container>
......@@ -29,7 +42,6 @@ export default {
}),
methods:{
async getGuideIndex(){
console.log(this.$axios.defaults.baseURL)
await this.$axios.get('/guide-index/all', {
params:{
locale: this.$i18n.locale
......@@ -53,10 +65,13 @@ export default {
}
})
console.log(indexTree)
// depth 2 이상인 인덱스들 트리구조 생성
this.setTreeChild(indexTree, unclassifiedList)
this.guideIndex = JSON.parse(JSON.stringify(indexTree))
},
setTreeChild(targetList, unclassifiedList){
targetList.forEach(el => {
......
docs-front/store/index.js
View file @ e42f06be
......@@ -10,7 +10,8 @@ const store = () => new Vuex.Store({
editMode:false,
guideId: null,
guideNavigator: [],
theme:false
theme:false,
path: ''
},
mutations:{
setEditMode: (state, val) => {
......@@ -28,6 +29,9 @@ const store = () => new Vuex.Store({
setTheme: (state, theme) => {
state.theme = theme
},
setPath: (state, path) => {
state.path = path
}
},
actions:{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment