Merge pull request #105 from crazy-max/website-layout

website: fix layout
moby · Sep 17, 2024 · 688c89b · 688c89b
2 parents 113bf10 + 4f80962
commit 688c89b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 22 deletions.
diff --git a/website/src/App.vue b/website/src/App.vue
@@ -1,7 +1,11 @@
 <template>
-  <div id="app">
-    <ResultsList />
-    <router-view></router-view>
+  <div class="container">
+    <aside class="sidebar">
+      <ResultsList />
+    </aside>
+    <section class="result-view">
+      <router-view></router-view>
+    </section>
   </div>
 </template>
 
@@ -16,5 +20,22 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
+.container {
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.sidebar {
+  width: 200px;
+  background-color: #f8f9fa;
+  border-right: 1px solid #dee2e6;
+  padding: 10px;
+}
+
+.result-view {
+  flex-grow: 1;
+  position: relative;
+}
 </style>
diff --git a/website/src/components/ResultView.vue b/website/src/components/ResultView.vue
@@ -18,14 +18,13 @@ export default {
 
 <style scoped>
 .result {
-  margin-left: 250px;
   height: 100vh;
   overflow: hidden;
   position: relative;
 }
 
 iframe {
-  width: 100%;
+  width: calc(100% - 250px);
   height: 100%;
   border: none;
   position: fixed;

diff --git a/website/src/components/ResultsList.vue b/website/src/components/ResultsList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar">
+  <div class="results">
     <h2>Results</h2>
     <ul>
       <li v-for="result in results" :key="result" @click="loadResult(result)"
@@ -61,27 +61,18 @@ export default {
 </script>
 
 <style scoped>
-.sidebar {
-  width: 250px;
-  background-color: #f8f9fa;
-  padding: 15px;
-  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
-  height: 100vh;
-  position: fixed;
-}
-
-.sidebar h2 {
+.results h2 {
   font-size: 1.5em;
   margin-bottom: 20px;
   color: #343a40;
 }
 
-.sidebar ul {
+.results ul {
   list-style-type: none;
   padding: 0;
 }
 
-.sidebar .result-item {
+.results .result-item {
   padding: 10px;
   margin-bottom: 10px;
   background-color: #ffffff;
@@ -90,16 +81,16 @@ export default {
   transition: background-color 0.3s, transform 0.3s;
 }
 
-.sidebar .result-item:hover {
+.results .result-item:hover {
   background-color: #e9ecef;
   transform: translateX(5px);
 }
 
-.sidebar .result-item:active {
+.results .result-item:active {
   background-color: #dee2e6;
 }
 
-.sidebar .result-item.selected {
+.results .result-item.selected {
   background-color: #d4edda;
   border-left: 5px solid #28a745;
 }