artin/API-Explorer-II
1
0
Fork 0
mirror of https://github.com/OpenBankProject/API-Explorer-II.git synced 2026-02-06 10:47:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #99 from nemozak1/develop

Browse Source 
Fix scrollbars being everywhere
This commit is contained in:
Simon Redfern 2025-03-31 12:03:48 +02:00 committed by GitHub
commit 51cb928e3f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 83 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -17,6 +17,7 @@ declare module 'vue' {
ElCol: typeof import('element-plus/es')['ElCol']
ElCollapse: typeof import('element-plus/es')['ElCollapse']
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElConainer: typeof import('element-plus/es')['ElConainer']
ElContainer: typeof import('element-plus/es')['ElContainer']
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']

11
src/App.vue
View File

@ -39,10 +39,17 @@ const isChatbotEnabled = import.meta.env.VITE_CHATBOT_ENABLED === 'true'
<!--Header-->
<HeaderNav />
</el-header>
<RouterView />
<el-main>
<RouterView />
</el-main>
<ChatWidget v-if="isChatbotEnabled"/>
</el-container>
</div>
</template>
<style scoped></style>
<style scoped>
.common-layout {
overflow: hidden;
}
</style>

2
src/assets/main.css
View File

@ -64,7 +64,7 @@ main {
.search-nav {
background-color: #f8f9fb;
padding: 8px;
padding: 8px 0 8px 8px;
border-right: solid 1px var(--el-menu-border-color);
}

81
src/components/SearchNav.vue
View File

@ -203,43 +203,66 @@ const searchEvent = (value) => {
</script>
<template>
<el-row>
<el-col :span="24">
<el-input v-model="form.search" placeholder="Search" :prefix-icon="Search" @input="searchEvent" />
</el-col>
</el-row>
<el-collapse v-model="activeKeys">
<el-collapse-item title="My Collections" v-show="showMyCollections" name="my-collections">
<el-collapse-item v-for="(api, key) of apiCollections" :key="key" :title="api.api_collection_name"
:name="api.api_collection_name" class="child-collapse">
<div class="el-tabs--right">
<div v-for="(value, key) of apiCollectionsEndpoint[api.api_collection_name]" :key="key" class="api-router-tab"
@click="setActive">
<RouterLink :to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }" :id="value"
active-class="active-api-router-link" class="api-router-link">{{ operationIdTitle[value] }}</RouterLink>
<el-container class="search-nav-container">
<el-header class="search-nav-search-bar">
<el-col :span="24">
<el-input v-model="form.search" placeholder="Search" :prefix-icon="Search" @input="searchEvent" />
</el-col>
</el-header>
<el-main>
<el-collapse v-model="activeKeys" class="search-nav-collapse">
<el-collapse-item title="My Collections" v-show="showMyCollections" name="my-collections">
<el-collapse-item v-for="(api, key) of apiCollections" :key="key" :title="api.api_collection_name"
:name="api.api_collection_name" class="child-collapse">
<div class="el-tabs--right">
<div v-for="(value, key) of apiCollectionsEndpoint[api.api_collection_name]" :key="key" class="api-router-tab"
@click="setActive">
<RouterLink :to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }" :id="value"
active-class="active-api-router-link" class="api-router-link">{{ operationIdTitle[value] }}</RouterLink>
</div>
</div>
</el-collapse-item>
</el-collapse-item>
<el-collapse-item v-for="key in sortedKeys" :title="key" :key="key" :name="key">
<div class="el-tabs--right">
<div v-for="(value, key) of sortLinks(groups[key])" :key="value" class="api-router-tab" @click="setActive">
<RouterLink active-class="active-api-router-link" class="api-router-link" :id="value"
:to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }">{{ key }}</RouterLink>
</div>
</div>
</div>
</el-collapse-item>
</el-collapse-item>
<el-collapse-item v-for="key in sortedKeys" :title="key" :key="key" :name="key">
<div class="el-tabs--right">
<div v-for="(value, key) of sortLinks(groups[key])" :key="value" class="api-router-tab" @click="setActive">
<RouterLink active-class="active-api-router-link" class="api-router-link" :id="value"
:to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }">{{ key }}</RouterLink>
</div>
</div>
</el-collapse-item>
</el-collapse>
</el-collapse-item>
</el-collapse>
</el-main>
</el-container>
</template>
<style scoped>
.search-nav-container {
height: 100%;
max-height: 100%;
overflow: hidden;
padding: 0;
}
.search-nav {
background-color: #f8f9fb;
padding: 8px;
max-height: 100%;
padding-right: 0;
border-right: solid 1px var(--el-menu-border-color);
overflow: unset !important;
}
.search-nav-collapse {
height: 100%;
max-height: 99%;
margin-right: -10px;
width: 100%;
overflow-x: hidden;
min-height: unset;
}
.search-nav-search-bar {
box-shadow: rgba(0, 0, 0, 0.40) 0px 25px 50px -20px;
height: auto;
}
.api-router-link {
width: 100%;
margin-left: 15px;

30
src/views/BodyView.vue
View File

@ -49,14 +49,14 @@ import { inject } from 'vue'
</el-header>
<el-container class="middle">
<el-aside class="summary" width="50%">
<!--Middle -->
<RouterView name="body" />
</el-aside>
<el-aside class="preview" width="50%">
<el-main class="preview">
<!--right -->
<RouterView class="preview" name="preview" />
</el-aside>
</el-main>
</el-container>
<!--<el-footer> -->
<!--Bottom -->
<!--Footer
@ -68,19 +68,29 @@ import { inject } from 'vue'
<style>
.root {
min-height: 100vh;
overflow: unset;
}
.middle {
max-height: 95vh;
height: 100%;
/* min-height: 100vh; */
}
.summary {
max-height: 95vh;
max-height: 100%;
}
.main {
height: 100%;
overflow: hidden;
}
.search-nav {
height: 100%;
max-height: 100%;
overflow: hidden;
}
.middle {
height: 100%;
overflow: hidden;
}
.preview {
color: white;
background-color: #151d30;
max-height: 100vh;
max-height: 100%;
}
.collections {
margin-left: -20px;