From f8231f53b76c9c60a3e7af9474ff66be65fba249 Mon Sep 17 00:00:00 2001
From: Bram Wiepjes <bramw@protonmail.com>
Date: Wed, 27 Mar 2019 20:08:47 +0100
Subject: [PATCH] made it possible to collapse sidebar
---
web-frontend/public/grid.html | 14 ++++++++++++--
web-frontend/src/scss/components/_layout.scss | 16 ++++++++++++++++
2 files changed, 28 insertions(+), 2 deletions(-)
diff --git a/web-frontend/public/grid.html b/web-frontend/public/grid.html
index d9b52488a..20a612591 100644
--- a/web-frontend/public/grid.html
+++ b/web-frontend/public/grid.html
@@ -9,7 +9,7 @@
<title>Baserow</title>
</head>
<body>
- <div class="layout">
+ <div class="layout layout-collapsed">
<div class="layout-col-1 menu">
<ul class="menu-items">
<li>
@@ -26,6 +26,12 @@
</li>
</ul>
<ul class="menu-items">
+ <li class="layout-uncollapse">
+ <a href="#" class="menu-item" data-toggle-layout-collapse>
+ <i class="fas fa-angle-double-right"></i>
+ <span class="menu-item-text">Uncollapse</span>
+ </a>
+ </li>
<li>
<a href="#" class="user-item">
B
@@ -167,7 +173,7 @@
</nav>
</div>
<div class="sidebar-footer">
- <a href="#" class="sidebar-collapse">
+ <a href="#" class="sidebar-collapse" data-toggle-layout-collapse>
<i class="fas fa-angle-double-left"></i>
Collapse sidebar
</a>
@@ -522,6 +528,10 @@
$("[data-context]").click(function() {
$(this).siblings($(this).attr("data-context")).toggleClass("hidden");
});
+
+ $("[data-toggle-layout-collapse]").click(function() {
+ $(".layout").toggleClass("layout-collapsed");
+ });
})();
</script>
</body>
diff --git a/web-frontend/src/scss/components/_layout.scss b/web-frontend/src/scss/components/_layout.scss
index bf352abfc..77b759448 100644
--- a/web-frontend/src/scss/components/_layout.scss
+++ b/web-frontend/src/scss/components/_layout.scss
@@ -22,6 +22,10 @@
top: 0;
bottom: 0;
width: 226px;
+
+ .layout-collapsed & {
+ display: none;
+ }
}
.layout-col-3 {
@@ -31,6 +35,10 @@
top: 0;
bottom: 0;
right: 0;
+
+ .layout-collapsed & {
+ left: 52px;
+ }
}
.layout-col-3-1 {
@@ -48,3 +56,11 @@
right: 0;
bottom: 0;
}
+
+.layout-uncollapse {
+ display: none;
+
+ .layout-collapsed & {
+ display: block;
+ }
+}