Merge pull request #99 from nemozak1/develop

Fix scrollbars being everywhere

Author: simonredfern

components.d.ts

@@ -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']

src/App.vue

@@ -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>

src/assets/main.css

@@ -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);
 }
 

src/components/SearchNav.vue

@@ -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;

src/views/BodyView.vue

@@ -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;