Skip to content

Commit 51cb928

Browse files
simonredfernsimonredfern
authored
Merge pull request #99 from nemozak1/develop
Fix scrollbars being everywhere
2 parents d441a89 + bcb5ca1 commit 51cb928

File tree

5 files changed

+83
-42
lines changed

5 files changed

+83
-42
lines changed

‎components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ declare module 'vue' {
1717
ElCol: typeof import('element-plus/es')['ElCol']
1818
ElCollapse: typeof import('element-plus/es')['ElCollapse']
1919
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
20+
ElConainer: typeof import('element-plus/es')['ElConainer']
2021
ElContainer: typeof import('element-plus/es')['ElContainer']
2122
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
2223
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']

‎src/App.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,17 @@ const isChatbotEnabled = import.meta.env.VITE_CHATBOT_ENABLED === 'true'
3939
<!--Header-->
4040
<HeaderNav />
4141
</el-header>
42-
<RouterView />
42+
<el-main>
43+
44+
<RouterView />
45+
</el-main>
4346
<ChatWidget v-if="isChatbotEnabled"/>
4447
</el-container>
4548
</div>
4649
</template>
4750

48-
<style scoped></style>
51+
<style scoped>
52+
.common-layout {
53+
overflow: hidden;
54+
}
55+
</style>

‎src/assets/main.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ main {
6464

6565
.search-nav {
6666
background-color: #f8f9fb;
67-
padding: 8px;
67+
padding: 8px 0 8px 8px;
6868
border-right: solid 1px var(--el-menu-border-color);
6969
}
7070

‎src/components/SearchNav.vue

Lines changed: 52 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -203,43 +203,66 @@ const searchEvent = (value) => {
203203
</script>
204204

205205
<template>
206-
<el-row>
207-
<el-col :span="24">
208-
<el-input v-model="form.search" placeholder="Search" :prefix-icon="Search" @input="searchEvent" />
209-
</el-col>
210-
</el-row>
211-
<el-collapse v-model="activeKeys">
212-
<el-collapse-item title="My Collections" v-show="showMyCollections" name="my-collections">
213-
<el-collapse-item v-for="(api, key) of apiCollections" :key="key" :title="api.api_collection_name"
214-
:name="api.api_collection_name" class="child-collapse">
215-
<div class="el-tabs--right">
216-
<div v-for="(value, key) of apiCollectionsEndpoint[api.api_collection_name]" :key="key" class="api-router-tab"
217-
@click="setActive">
218-
<RouterLink :to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }" :id="value"
219-
active-class="active-api-router-link" class="api-router-link">{{ operationIdTitle[value] }}</RouterLink>
206+
<el-container class="search-nav-container">
207+
<el-header class="search-nav-search-bar">
208+
<el-col :span="24">
209+
<el-input v-model="form.search" placeholder="Search" :prefix-icon="Search" @input="searchEvent" />
210+
</el-col>
211+
</el-header>
212+
<el-main>
213+
<el-collapse v-model="activeKeys" class="search-nav-collapse">
214+
<el-collapse-item title="My Collections" v-show="showMyCollections" name="my-collections">
215+
<el-collapse-item v-for="(api, key) of apiCollections" :key="key" :title="api.api_collection_name"
216+
:name="api.api_collection_name" class="child-collapse">
217+
<div class="el-tabs--right">
218+
<div v-for="(value, key) of apiCollectionsEndpoint[api.api_collection_name]" :key="key" class="api-router-tab"
219+
@click="setActive">
220+
<RouterLink :to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }" :id="value"
221+
active-class="active-api-router-link" class="api-router-link">{{ operationIdTitle[value] }}</RouterLink>
222+
</div>
223+
</div>
224+
</el-collapse-item>
225+
</el-collapse-item>
226+
<el-collapse-item v-for="key in sortedKeys" :title="key" :key="key" :name="key">
227+
<div class="el-tabs--right">
228+
<div v-for="(value, key) of sortLinks(groups[key])" :key="value" class="api-router-tab" @click="setActive">
229+
<RouterLink active-class="active-api-router-link" class="api-router-link" :id="value"
230+
:to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }">{{ key }}</RouterLink>
231+
</div>
220232
</div>
221-
</div>
222-
</el-collapse-item>
223-
</el-collapse-item>
224-
<el-collapse-item v-for="key in sortedKeys" :title="key" :key="key" :name="key">
225-
<div class="el-tabs--right">
226-
<div v-for="(value, key) of sortLinks(groups[key])" :key="value" class="api-router-tab" @click="setActive">
227-
<RouterLink active-class="active-api-router-link" class="api-router-link" :id="value"
228-
:to="{ name: 'api', params: { id: value }, query: { version: selectedVersion } }">{{ key }}</RouterLink>
229-
</div>
230-
</div>
231-
</el-collapse-item>
232-
</el-collapse>
233+
</el-collapse-item>
234+
</el-collapse>
235+
</el-main>
236+
</el-container>
237+
233238
</template>
234239

235240
<style scoped>
241+
.search-nav-container {
242+
height: 100%;
243+
max-height: 100%;
244+
overflow: hidden;
245+
padding: 0;
246+
}
236247
.search-nav {
237248
background-color: #f8f9fb;
238-
padding: 8px;
249+
max-height: 100%;
250+
padding-right: 0;
239251
border-right: solid 1px var(--el-menu-border-color);
240-
overflow: unset !important;
252+
253+
}
254+
.search-nav-collapse {
255+
height: 100%;
256+
max-height: 99%;
257+
margin-right: -10px;
258+
width: 100%;
259+
overflow-x: hidden;
260+
min-height: unset;
261+
}
262+
.search-nav-search-bar {
263+
box-shadow: rgba(0, 0, 0, 0.40) 0px 25px 50px -20px;
264+
height: auto;
241265
}
242-
243266
.api-router-link {
244267
width: 100%;
245268
margin-left: 15px;

‎src/views/BodyView.vue

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ import { inject } from 'vue'
4949
</el-header>
5050
<el-container class="middle">
5151
<el-aside class="summary" width="50%">
52-
<!--Middle -->
5352
<RouterView name="body" />
5453
</el-aside>
55-
<el-aside class="preview" width="50%">
54+
<el-main class="preview">
5655
<!--right -->
5756
<RouterView class="preview" name="preview" />
58-
</el-aside>
57+
</el-main>
5958
</el-container>
59+
6060
<!--<el-footer> -->
6161
<!--Bottom -->
6262
<!--Footer
@@ -68,19 +68,29 @@ import { inject } from 'vue'
6868

6969
<style>
7070
.root {
71-
min-height: 100vh;
72-
overflow: unset;
73-
}
74-
.middle {
75-
max-height: 95vh;
71+
height: 100%;
72+
/* min-height: 100vh; */
7673
}
7774
.summary {
78-
max-height: 95vh;
75+
max-height: 100%;
76+
}
77+
.main {
78+
height: 100%;
79+
overflow: hidden;
80+
}
81+
.search-nav {
82+
height: 100%;
83+
max-height: 100%;
84+
overflow: hidden;
85+
}
86+
.middle {
87+
height: 100%;
88+
overflow: hidden;
7989
}
8090
.preview {
8191
color: white;
8292
background-color: #151d30;
83-
max-height: 100vh;
93+
max-height: 100%;
8494
}
8595
.collections {
8696
margin-left: -20px;

0 commit comments

Comments
 (0)