Skip to content

Commit 14e5105

Browse files
chillenbergerchillenberger
authored
Dan cell xscroll fix (#562)
1 parent 4154cd8 commit 14e5105

File tree

5 files changed

+122
-107
lines changed

5 files changed

+122
-107
lines changed

‎pgml-dashboard/static/css/base.css

Lines changed: 100 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -305,67 +305,6 @@ footer {
305305
height: 0;
306306
}
307307

308-
@media only screen and (max-width: 690px) {
309-
header {
310-
top: unset;
311-
left: 0;
312-
bottom: 0;
313-
position: fixed;
314-
border: 0;
315-
padding: 0;
316-
width: 100%;
317-
}
318-
header nav a {
319-
font-size: 0;
320-
}
321-
header nav ul li.logo {
322-
display: none;
323-
}
324-
header nav ul li {
325-
width: 24%;
326-
padding: 15px 0;
327-
text-align: center;
328-
}
329-
header nav a span.material-symbols-outlined {
330-
font-size: 3rem;
331-
}
332-
main {
333-
padding: 0px 0 100px;
334-
}
335-
dl {
336-
max-height: 6em;
337-
}
338-
dt {
339-
margin-top: 1em;
340-
}
341-
dt, dd {
342-
margin-right: 2em;
343-
}
344-
figure {
345-
display: inline-block;
346-
width: 75vmin;
347-
height: 75vmin;
348-
margin: 30px 0;
349-
}
350-
section {
351-
border-radius: 0;
352-
margin: 0 0 20px;
353-
}
354-
}
355-
356-
@media only screen and (max-width: 300px) {
357-
dl {
358-
max-height: 12em;
359-
}
360-
dt {
361-
margin-top: 1em;
362-
}
363-
dt, dd {
364-
margin-right: 2em;
365-
}
366-
}
367-
368-
369308
ol.object_list {
370309
width: 100%;
371310
}
@@ -503,14 +442,17 @@ nav ol, nav ul {
503442
list-style: none;
504443
}
505444

445+
.notebook-title {
446+
padding: 1rem;
447+
margin: 20px auto 20px auto;
448+
}
506449

507450
.notebook-cell.active {
508451
border: 1px solid var(--gray-8);
509452
padding: 0;
510453
}
511454

512455
.notebook-cell-edit {
513-
border: 1px solid var(--gray-8);
514456
margin-bottom: 1rem;
515457
}
516458

@@ -519,13 +461,12 @@ nav ol, nav ul {
519461
}
520462

521463
main turbo-frame:first-of-type .notebook-cell {
522-
border-top-left-radius: 10px;
523-
border-top-right-radius: 10px;
464+
border-radius: 10px 10px 0px 0px;
524465
border-top: 1px solid var(--gray-8);
525466
}
526467

527468
.notebook-cell {
528-
margin: 0 20px;
469+
margin: 0 auto;
529470
border-radius: 0;
530471
padding: 1rem;
531472
border-left: 2px solid var(--gray-8);
@@ -535,6 +476,10 @@ main turbo-frame:first-of-type .notebook-cell {
535476
background: var(--gray-10);
536477
}
537478

479+
.notebook-last-cell {
480+
border-radius: 0px 0px 10px 10px;
481+
}
482+
538483
.notebook-cell article.markdown-body {
539484
background-color: inherit;
540485
}
@@ -564,8 +509,10 @@ main turbo-frame:first-of-type .notebook-cell {
564509
color: #000;
565510
}
566511

567-
.notebook-button {
568-
margin: 0.1rem;
512+
.notebook-buttons {
513+
display: flex;
514+
flex-direction: row;
515+
gap: 0.2rem;
569516
}
570517

571518
.notebook-contents code {
@@ -596,6 +543,10 @@ main turbo-frame:first-of-type .notebook-cell {
596543
align-items: flex-end;
597544
}
598545

546+
.flex-start {
547+
align-items: flex-start;
548+
}
549+
599550
.flex-row-reverse {
600551
flex-direction: row-reverse;
601552
}
@@ -605,16 +556,9 @@ main turbo-frame:first-of-type .notebook-cell {
605556
font-family: monospace;
606557
}
607558

608-
.notebook-cell .button {
609-
height: fit-content;
610-
width: fit-content;
611-
padding: 2px 5px;
612-
margin-bottom: 0.12rem;
613-
margin-left: 0.2rem;
614-
}
615-
616-
.notebook-cell .notebook-button button, .markdown-body button {
559+
.notebook-cell button, .notebook-title button, .markdown-body button {
617560
padding: 2px 5px;
561+
height: 2rem;
618562
}
619563

620564
.notebook-cell .button-delete {
@@ -625,15 +569,20 @@ main turbo-frame:first-of-type .notebook-cell {
625569
font-weight: bold;
626570
background: rgb(240, 240, 240);
627571
border: 1px solid var(--gray-7);
628-
padding: 0.5rem 6px;
572+
height: 2rem;
629573
border-radius: 2px;
630-
margin-bottom: 2px;
631574
}
632575

633576
.notebook-duration {
634577
margin-top: 1rem;
635578
}
636579

580+
.notebook-render-container {
581+
min-width: 0px;
582+
flex: 1;
583+
margin-right: 1rem;
584+
}
585+
637586
.notebook-rendering .markdown-body {
638587
margin-top: 1rem;
639588
}
@@ -651,6 +600,8 @@ main turbo-frame:first-of-type .notebook-cell {
651600
*/
652601
.CodeMirror {
653602
font-size: 1rem;
603+
border: 1px solid var(--gray-8);
604+
border-radius: 10px;
654605
}
655606

656607
/*
@@ -737,3 +688,74 @@ input[type=checkbox]:checked:after {
737688
display: flex;
738689
align-items: center;
739690
}
691+
692+
693+
@media only screen and (max-width: 690px) {
694+
header {
695+
top: unset;
696+
left: 0;
697+
bottom: 0;
698+
position: fixed;
699+
border: 0;
700+
padding: 0;
701+
width: 100%;
702+
}
703+
header nav a {
704+
font-size: 0;
705+
}
706+
header nav ul li.logo {
707+
display: none;
708+
}
709+
header nav ul li {
710+
width: 24%;
711+
padding: 15px 0;
712+
text-align: center;
713+
}
714+
header nav a span.material-symbols-outlined {
715+
font-size: 3rem;
716+
}
717+
main {
718+
padding: 0px 0 100px;
719+
}
720+
dl {
721+
max-height: 6em;
722+
}
723+
dt {
724+
margin-top: 1em;
725+
}
726+
dt, dd {
727+
margin-right: 2em;
728+
}
729+
figure {
730+
display: inline-block;
731+
width: 75vmin;
732+
height: 75vmin;
733+
margin: 30px 0;
734+
}
735+
section {
736+
border-radius: 0;
737+
margin: 0 0 20px;
738+
}
739+
main turbo-frame:first-of-type .notebook-cell {
740+
border-radius: 0px;
741+
}
742+
.notebook-last-cell {
743+
border-radius: 0px;
744+
}
745+
.notebook-buttons {
746+
flex-direction: column;
747+
justify-content: flex-start;
748+
}
749+
}
750+
751+
@media only screen and (max-width: 300px) {
752+
dl {
753+
max-height: 12em;
754+
}
755+
dt {
756+
margin-top: 1em;
757+
}
758+
dt, dd {
759+
margin-right: 2em;
760+
}
761+
}

‎pgml-dashboard/static/css/markdown.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
font-size: 16px;
1515
line-height: 1.5;
1616
word-wrap: break-word;
17+
max-width: 75vw;
1718
}
1819

1920
.markdown-body .octicon {

‎pgml-dashboard/templates/cell.html

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@
88
<div class="notebook-cell-edit">
99
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/edit" method="post" data-notebook-cell-target="form" data-action="notebook-cell#play">
1010
<div class="flex">
11-
<div class="flex-grow">
11+
<div class="flex-grow margin-right-1">
1212
<textarea name="contents" data-notebook-cell-target="editor"><%= cell.contents %></textarea>
1313
</div>
14-
<div class="flex flex-end">
14+
<div class="notebook-buttons flex-end">
1515
<select name="cell_type" data-action="notebook-cell#selectCellType" title="Select cell type" data-notebook-cell-target="type">
1616
<option value="3" <% if cell.cell_type == 3 { %>selected<% } %>>SQL</option>
1717
<option value="1" <% if cell.cell_type == 1 { %>selected<% } %>>Markdown</option>
1818
</select>
19-
<button type="submit" class="button notebook-button" title="Execute cell" data-notebook-cell-target="play">
19+
<button type="submit" title="Execute cell" data-notebook-cell-target="play">
2020
<span class="material-symbols-outlined">play_arrow</span>
2121
</button>
22-
<button class="button notebook-button" title="Cancel edit" data-action="notebook-cell#cancelEdit">
22+
<button title="Cancel edit" data-action="notebook-cell#cancelEdit">
2323
<span class="material-symbols-outlined">cancel</span>
2424
</button>
2525
</div>
@@ -35,39 +35,35 @@
3535
<div>
3636
<div class="flex">
3737
<div class="cell-number"><%= cell.cell_number %></div>
38-
<div class="flex-grow margin-right-1">
38+
<div class="notebook-render-container">
3939
<% if cell.code() { %>
4040
<div class="markdown-body notebook-contents">
4141
<pre><code class="language-sql"><%- cell.contents %></code></pre>
4242
</div>
4343
<% } %>
4444

4545
<% if cell.html().is_some() { %>
46-
<div class="notebook-rendering" data-turbo="false">
47-
<%- cell.html().unwrap() %>
48-
</div>
46+
<div class="notebook-rendering" data-turbo="false">
47+
<%- cell.html().unwrap() %>
48+
</div>
4949
<% } %>
5050
</div>
51-
52-
<% if cell.code() && !edit { %>
53-
<div class="notebook-button">
51+
52+
<div class="notebook-buttons">
53+
<% if cell.code() && !edit { %>
5454
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/play" method="post" data-action="notebook-cell#play">
5555
<button type="submit" title="Execute cell" data-notebook-cell-target="play">
5656
<span class="material-symbols-outlined">
5757
play_arrow
5858
</span>
5959
</button>
6060
</form>
61-
</div>
62-
<% } %>
63-
<div class="notebook-button">
61+
<% } %>
6462
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/remove" method="post">
6563
<button type="submit" title="Delete cell">
6664
<span class="material-symbols-outlined">delete_forever</span>
6765
</button>
6866
</form>
69-
</div>
70-
<div class="notebook-button">
7167
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/edit?bust_cache=<%= bust_cache %>" method="get">
7268
<button type="submit" title="Edit cell">
7369
<span class="material-symbols-outlined">edit</span>

‎pgml-dashboard/templates/notebook.html

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
<% include!("header.html"); %>
22

33
<div data-controller="notebook">
4-
<section>
4+
<section class="notebook-title">
55
<div class="flex flex-center">
6-
<div>
6+
<div class="notebook-render-container">
77
<h1 class="flex-grow" data-action="click->notebook#renameNotebook" data-notebook-target="notebookName">
88
<span class="material-symbols-outlined">newspaper</span>
99
<%= notebook.name %>
1010
</h1>
1111
</div>
12-
<div class="flex-grow">
12+
<div class="notebook-buttons">
1313
<form class="hidden" action="/dashboard/notebooks/<%= notebook.id %>/rename" method="post" data-notebook-target="renameNotebookForm">
1414
<h1><input type="text" name="name" value="<%= notebook.name %>" required></h1>
1515
</form>
16-
</div>
17-
<div>
1816
<form action="/dashboard/notebooks/<%= notebook.id %>/reset" method="post">
19-
<button type="submit" title="Reset all executable cells" style="padding: 0.5rem 1rem;">
17+
<button type="submit" title="Reset all executable cells">
2018
<span class="material-symbols-outlined">replay</span>
2119
</button>
2220
</form>
@@ -36,19 +34,19 @@ <h1><input type="text" name="name" value="<%= notebook.name %>" required></h1>
3634
include!("cell.html");
3735
} %>
3836

39-
<section class="notebook-cell" data-controller="notebook-cell">
37+
<section class="notebook-last-cell notebook-cell" data-controller="notebook-cell">
4038
<div class="notebook-cell-edit">
4139
<form action="/dashboard/notebooks/<%= notebook.id %>/cell" method="post" data-notebook-cell-target="form" data-action="notebook-cell#freezeScrollOnNextRender notebook-cell#play">
4240
<div class="flex">
43-
<div class="flex-grow">
41+
<div class="flex-grow margin-right-1">
4442
<textarea data-cell-id="new" name="contents" data-notebook-cell-target="editor"></textarea>
4543
</div>
46-
<div class="flex flex-end">
44+
<div class="notebook-buttons flex-end">
4745
<select name="cell_type" id="cell_type" data-action="notebook-cell#selectCellType" title="Select cell type" data-notebook-cell-target="type">
4846
<option value="3" selected>SQL</option>
4947
<option value="1">Markdown</option>
5048
</select>
51-
<button type="submit" class="button notebook-button" title="Create cell" data-notebook-cell-target="play">
49+
<button type="submit" title="Create cell" data-notebook-cell-target="play">
5250
<span class="material-symbols-outlined">play_arrow</span>
5351
</button>
5452
</div>

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy