feat: utilize more screen real estate on wide screens

giladgd · giladgd · commit f4b144840a08 · 2022-04-06T21:19:18.000+03:00
diff --git a/index.html b/index.html
@@ -34,11 +34,10 @@
         TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Supports MySQL, PostgreSQL, MariaDB, SQLite, MS SQL Server, Oracle, WebSQL databases. Works in NodeJS, Browser, Ionic, Cordova and Electron platforms.
     </title>
 
-</head>
 </head>
 <body>
 
-<div class="container" id="app">
+<div id="app">
     <main-page></main-page>
 </div>
 
diff --git a/script/component/MainPage.js b/script/component/MainPage.js
@@ -1,6 +1,6 @@
 const MainPage = {
     template: `<div>
-    <nav class="navbar navbar-expand navbar-light bg-light">
+    <nav class="navbar navbar-expand navbar-light">
         <!--<img src="image/logo-large.png" width="10%" height="10%">-->
         <a class="navbar-brand" href="/"><span style="color: #E83524">Type</span><span style="color: #000">ORM</span></a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -62,8 +62,8 @@ const MainPage = {
             </form>-->
         </div>
     </nav>
-    <div class="row">
-        <div class="col-12 col-sm-5 col-md-4 left-panel">
+    <div class="panels">
+        <div class="left-panel">
             <ul>
                 <li v-for="link in links">
                     <div v-if="link.links">
@@ -85,7 +85,7 @@ const MainPage = {
             </ul>
             <div class="carbon-container" ref="carbon"></div>
           </div>
-        <div class="col-12 col-sm-7 col-md-8">
+        <div class="right-panel">
             <router-view></router-view>
         </div>
     </div>
diff --git a/style/app.css b/style/app.css
@@ -1,3 +1,6 @@
+html {
+    scroll-padding-top: 80px;
+}
 body {
     padding-bottom: 20px;
 }
@@ -33,6 +36,19 @@ h2, h3 {
 }
 .navbar {
     margin-bottom: 30px;
+    position: sticky;
+    top: 0px;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 1);
+    border-bottom: 1px solid #EEE;
+    height: 60px;
+}
+@supports (-webkit-backdrop-filter: blur(6px)) or (backdrop-filter: blur(6px)) {
+    .navbar {
+        background-color: rgba(255, 255, 255, 0.6);
+        -webkit-backdrop-filter: blur(6px);
+        backdrop-filter: blur(6px);
+    }
 }
 .document h1+ul, .document h1+ul ul {
     list-style: none;
@@ -55,9 +71,30 @@ h1 code, h2 code, h3 code {
     color: #333;
 }
 
-.bg-light {
-    background-color: transparent !important;
-    border-bottom: 1px solid #EEE;
+.panels {
+    display: flex;
+    flex-direction: row;;
+    flex-wrap: wrap;
+}
+
+.left-panel {
+    max-width: 340px;
+    min-width: 240px;
+    padding-right: 16px;
+    flex: 1;
+}
+
+@media only screen and (min-width: 579px) {
+    .left-panel {
+        max-width: 579px;
+    }
+}
+
+.right-panel {
+    flex: 2;
+    width: 0px;
+    min-width: 340px;
+    padding: 0px 16px;
 }
 
 .left-panel ul {
@@ -134,7 +171,7 @@ ol {
     border-top: 1px solid #eee;
     padding-top: 20px;
     margin-left: 80px;
-    margin-right: 80px;
+    margin-right: 60px;
     min-width: 120px;
     margin-bottom: 20px;
 }
