Skip to content

Commit 6e3d12c

Browse files
colloceocolloceo
committed
Fix independent scrolling and polish JOIN results display
1 parent f0d8e17 commit 6e3d12c

3 files changed

Lines changed: 138 additions & 93 deletions

File tree

‎templates/base.html‎

Lines changed: 124 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,48 @@
99
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
1010
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
1111
<style>
12+
html,
1213
body {
14+
height: 100%;
15+
margin: 0;
16+
padding: 0;
17+
overflow: hidden;
1318
background-color: #f8f9fa;
1419
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
1520
}
1621

22+
body {
23+
display: flex;
24+
flex-direction: column;
25+
}
26+
27+
/* Navbar Layout */
28+
.navbar {
29+
z-index: 1030;
30+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
31+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
32+
flex-shrink: 0;
33+
}
34+
35+
/* Layout Container */
36+
.main-wrapper {
37+
display: flex;
38+
flex: 1;
39+
overflow: hidden;
40+
width: 100%;
41+
}
42+
1743
/* Sidebar Styling */
1844
.sidebar {
19-
min-height: 100vh;
45+
width: 240px;
2046
background-color: #1a1d20;
2147
color: #ffffff;
22-
padding-top: 1rem;
48+
overflow-y: auto;
49+
flex-shrink: 0;
50+
display: flex;
51+
flex-direction: column;
2352
box-shadow: inset -1px 0 0 rgba(255, 255, 255, .05);
53+
scroll-behavior: smooth;
2454
}
2555

2656
.sidebar .nav-link {
@@ -61,12 +91,10 @@
6191
}
6292

6393
.content {
94+
flex: 1;
95+
overflow-y: auto;
6496
padding: 2rem;
65-
}
66-
67-
.navbar {
68-
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
69-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
97+
background-color: #f8f9fa;
7098
}
7199

72100
.navbar-brand {
@@ -75,13 +103,27 @@
75103
color: #0d6efd !important;
76104
}
77105

78-
/* Utility */
79-
.shadow-xs {
80-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
106+
/* Styling for custom scrollbars to maintain premium feel */
107+
::-webkit-scrollbar {
108+
width: 6px;
109+
height: 6px;
110+
}
111+
112+
::-webkit-scrollbar-track {
113+
background: transparent;
114+
}
115+
116+
::-webkit-scrollbar-thumb {
117+
background: rgba(0, 0, 0, 0.1);
118+
border-radius: 10px;
81119
}
82120

83-
.border-light-gray {
84-
border-color: #dee2e6 !important;
121+
.sidebar::-webkit-scrollbar-thumb {
122+
background: rgba(255, 255, 255, 0.1);
123+
}
124+
125+
::-webkit-scrollbar-thumb:hover {
126+
background: rgba(0, 0, 0, 0.2);
85127
}
86128
</style>
87129
</head>
@@ -98,82 +140,78 @@
98140
</div>
99141
</nav>
100142

101-
<div class="container-fluid">
102-
<div class="row">
103-
<!-- Sidebar -->
104-
<nav class="col-md-3 col-lg-2 d-md-block sidebar px-0">
105-
<div class="position-sticky">
106-
<!-- Section: General -->
107-
<div class="nav flex-column mt-2">
108-
<a href="/" class="nav-link {% if request.path == '/' %}active{% endif %}">
109-
<i class="fas fa-tachometer-alt me-2"></i> Dashboard
110-
</a>
111-
</div>
112-
113-
<!-- System Section -->
114-
<h6 class="sidebar-heading">
115-
System
116-
</h6>
117-
<nav class="nav flex-column">
118-
<a class="nav-link {% if request.path == '/sql-console' %}active{% endif %}"
119-
href="/sql-console">
120-
<i class="fas fa-terminal me-2"></i> SQL Console
121-
</a>
122-
<a class="nav-link {% if request.path == '/create_table' %}active{% endif %}"
123-
href="/create_table">
124-
<i class="fas fa-magic me-2"></i> Table Designer
125-
</a>
126-
<a class="nav-link {% if request.path == '/documentation' %}active{% endif %}"
127-
href="/documentation">
128-
<i class="fas fa-book me-2"></i> Documentation
129-
</a>
130-
</nav>
131-
132-
<!-- Data Section -->
133-
<h6 class="sidebar-heading">
134-
Data
135-
</h6>
136-
<nav class="nav flex-column mb-2">
137-
{% if tables %}
138-
{% for table_name in tables %}
139-
<a class="nav-link {% if active_table == table_name or '/table/' + table_name in request.path %}active{% endif %}"
140-
href="/table/{{ table_name }}">
141-
<i class="fas fa-table me-2"></i> {{ table_name }}
142-
</a>
143-
{% endfor %}
144-
{% else %}
145-
<span class="nav-link small opacity-50">
146-
<i class="fas fa-inbox me-2"></i> No tables
147-
</span>
148-
{% endif %}
149-
</nav>
150-
151-
<div class="px-3 mt-3">
152-
<a href="/create_table" class="btn btn-outline-light btn-sm w-100 py-1"
153-
style="font-size: 0.75rem; border-color: rgba(255,255,255,0.1);">
154-
<i class="fas fa-plus me-1"></i> New Table
155-
</a>
156-
</div>
157-
158-
<hr class="sidebar-divider">
159-
160-
<!-- Analysis Section -->
161-
<h6 class="sidebar-heading">
162-
Analysis
163-
</h6>
164-
<nav class="nav flex-column mb-4">
165-
<a class="nav-link {% if request.path == '/report' %}active{% endif %}" href="/report">
166-
<i class="fas fa-project-diagram me-2"></i> JOIN Report
167-
</a>
168-
</nav>
143+
<div class="main-wrapper">
144+
<!-- Sidebar -->
145+
<nav class="sidebar">
146+
<div class="w-100">
147+
<!-- Section: General -->
148+
<div class="nav flex-column mt-2">
149+
<a href="/" class="nav-link {% if request.path == '/' %}active{% endif %}">
150+
<i class="fas fa-tachometer-alt me-2"></i> Dashboard
151+
</a>
169152
</div>
170-
</nav>
171153

172-
<!-- Main Content -->
173-
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 content">
174-
{% block content %}{% endblock %}
175-
</main>
176-
</div>
154+
<!-- System Section -->
155+
<h6 class="sidebar-heading">
156+
System
157+
</h6>
158+
<nav class="nav flex-column">
159+
<a class="nav-link {% if request.path == '/sql-console' %}active{% endif %}" href="/sql-console">
160+
<i class="fas fa-terminal me-2"></i> SQL Console
161+
</a>
162+
<a class="nav-link {% if request.path == '/create_table' %}active{% endif %}" href="/create_table">
163+
<i class="fas fa-magic me-2"></i> Table Designer
164+
</a>
165+
<a class="nav-link {% if request.path == '/documentation' %}active{% endif %}"
166+
href="/documentation">
167+
<i class="fas fa-book me-2"></i> Documentation
168+
</a>
169+
</nav>
170+
171+
<!-- Data Section -->
172+
<h6 class="sidebar-heading">
173+
Data
174+
</h6>
175+
<nav class="nav flex-column mb-2">
176+
{% if tables %}
177+
{% for table_name in tables %}
178+
<a class="nav-link {% if active_table == table_name or '/table/' + table_name in request.path %}active{% endif %}"
179+
href="/table/{{ table_name }}">
180+
<i class="fas fa-table me-2"></i> {{ table_name }}
181+
</a>
182+
{% endfor %}
183+
{% else %}
184+
<span class="nav-link small opacity-50">
185+
<i class="fas fa-inbox me-2"></i> No tables
186+
</span>
187+
{% endif %}
188+
</nav>
189+
190+
<div class="px-3 mt-3">
191+
<a href="/create_table" class="btn btn-outline-light btn-sm w-100 py-1"
192+
style="font-size: 0.75rem; border-color: rgba(255,255,255,0.1);">
193+
<i class="fas fa-plus me-1"></i> New Table
194+
</a>
195+
</div>
196+
197+
<hr class="sidebar-divider">
198+
199+
<!-- Analysis Section -->
200+
<h6 class="sidebar-heading">
201+
Analysis
202+
</h6>
203+
<nav class="nav flex-column mb-4">
204+
<a class="nav-link {% if request.path == '/report' %}active{% endif %}" href="/report">
205+
<i class="fas fa-project-diagram me-2"></i> JOIN Report
206+
</a>
207+
</nav>
208+
</div>
209+
</nav>
210+
211+
<!-- Main Content -->
212+
<main class="content">
213+
{% block content %}{% endblock %}
214+
</main>
177215
</div>
178216

179217
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

‎templates/console.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,14 @@ <h6 class="mb-0 fw-bold text-dark"><i class="fas fa-database me-2 text-muted"></
7777
</div>
7878

7979
{% elif result_type == 'table' %}
80-
<div class="table-responsive">
80+
<div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
8181
<table class="table table-hover align-middle mb-0">
82-
<thead class="bg-light">
82+
<thead class="bg-light sticky-top" style="z-index: 10;">
8383
<tr>
84-
{% if result_data %}
84+
{% if result_data and result_data[0] is mapping %}
8585
{% for col in result_data[0].keys() %}
86-
<th class="py-3 px-4 text-uppercase small fw-bold text-muted" style="letter-spacing: 0.05em;">{{
86+
<th class="py-3 px-4 text-uppercase small fw-bold text-muted border-bottom"
87+
style="letter-spacing: 0.05em; background-color: #f8f9fa;">{{
8788
col }}</th>
8889
{% endfor %}
8990
{% endif %}
@@ -92,13 +93,18 @@ <h6 class="mb-0 fw-bold text-dark"><i class="fas fa-database me-2 text-muted"></
9293
<tbody>
9394
{% for row in result_data %}
9495
<tr style="font-family: 'Fira Code', monospace; font-size: 0.85rem;">
96+
{% if row is mapping %}
9597
{% for val in row.values() %}
9698
<td class="py-3 px-4 text-dark">{{ val }}</td>
9799
{% endfor %}
100+
{% else %}
101+
<td class="py-3 px-4 text-dark">{{ row }}</td>
102+
{% endif %}
98103
</tr>
99104
{% else %}
100105
<tr>
101-
<td colspan="100%" class="text-center py-5 text-muted italic">No data returned.</td>
106+
<td colspan="100%" class="text-center py-5 text-muted italic">No data returned or query produced
107+
no results.</td>
102108
</tr>
103109
{% endfor %}
104110
</tbody>

‎templates/report.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ <h1 class="h2 dashboard-title">
1818
<div class="card-body p-4">
1919
<h4 class="fw-bold text-dark mb-2">Student Course Enrollment</h4>
2020
<p class="text-muted mb-0">
21-
This report demonstrates MiniDB's high-performance <strong>Hash Join</strong> capability, efficiently
22-
combining spatial and relational data from the <code>students</code> and <code>courses</code> tables.
21+
This report demonstrates MiniDB's high-performance <strong>Hash Join</strong> capability (Inner Join),
22+
efficiently
23+
combining relational data from the <code>students</code> and <code>courses</code> tables.
2324
</p>
2425
</div>
2526
</div>

0 commit comments

Comments
 (0)