Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commita771d19

Browse files
Dan cell xscroll fix (#562)
1 parent59ee207 commita771d19

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-
@mediaonly screenand (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-
headernava {
319-
font-size:0;
320-
}
321-
headernavulli.logo {
322-
display: none;
323-
}
324-
headernavulli {
325-
width:24%;
326-
padding:15px0;
327-
text-align: center;
328-
}
329-
headernavaspan.material-symbols-outlined {
330-
font-size:3rem;
331-
}
332-
main {
333-
padding:0px0100px;
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:30px0;
349-
}
350-
section {
351-
border-radius:0;
352-
margin:0020px;
353-
}
354-
}
355-
356-
@mediaonly screenand (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 auto20px auto;
448+
}
506449

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

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

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

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

527468
.notebook-cell {
528-
margin:020px;
469+
margin:0auto;
529470
border-radius:0;
530471
padding:1rem;
531472
border-left:2px solidvar(--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:0px0px10px10px;
481+
}
482+
538483
.notebook-cellarticle.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-contentscode {
@@ -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:2px5px;
612-
margin-bottom:0.12rem;
613-
margin-left:0.2rem;
614-
}
615-
616-
.notebook-cell .notebook-buttonbutton, .markdown-bodybutton {
559+
.notebook-cellbutton, .notebook-titlebutton, .markdown-bodybutton {
617560
padding:2px5px;
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 solidvar(--gray-7);
628-
padding:0.5rem6px;
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 solidvar(--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+
@mediaonly screenand (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+
headernava {
704+
font-size:0;
705+
}
706+
headernavulli.logo {
707+
display: none;
708+
}
709+
headernavulli {
710+
width:24%;
711+
padding:15px0;
712+
text-align: center;
713+
}
714+
headernavaspan.material-symbols-outlined {
715+
font-size:3rem;
716+
}
717+
main {
718+
padding:0px0100px;
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:30px0;
734+
}
735+
section {
736+
border-radius:0;
737+
margin:0020px;
738+
}
739+
mainturbo-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+
@mediaonly screenand (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
<divclass="notebook-cell-edit">
99
<formaction="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/edit"method="post"data-notebook-cell-target="form"data-action="notebook-cell#play">
1010
<divclass="flex">
11-
<divclass="flex-grow">
11+
<divclass="flex-grow margin-right-1">
1212
<textareaname="contents"data-notebook-cell-target="editor"><%= cell.contents %></textarea>
1313
</div>
14-
<divclass="flex flex-end">
14+
<divclass="notebook-buttons flex-end">
1515
<selectname="cell_type"data-action="notebook-cell#selectCellType"title="Select cell type"data-notebook-cell-target="type">
1616
<optionvalue="3"<% if cell.cell_type == 3 { %>selected<% } %>>SQL</option>
1717
<optionvalue="1"<% if cell.cell_type == 1 { %>selected<% } %>>Markdown</option>
1818
</select>
19-
<buttontype="submit"class="button notebook-button"title="Execute cell"data-notebook-cell-target="play">
19+
<buttontype="submit"title="Execute cell"data-notebook-cell-target="play">
2020
<spanclass="material-symbols-outlined">play_arrow</span>
2121
</button>
22-
<buttonclass="button notebook-button"title="Cancel edit"data-action="notebook-cell#cancelEdit">
22+
<buttontitle="Cancel edit"data-action="notebook-cell#cancelEdit">
2323
<spanclass="material-symbols-outlined">cancel</span>
2424
</button>
2525
</div>
@@ -35,39 +35,35 @@
3535
<div>
3636
<divclass="flex">
3737
<divclass="cell-number"><%= cell.cell_number %></div>
38-
<divclass="flex-grow margin-right-1">
38+
<divclass="notebook-render-container">
3939
<% if cell.code() { %>
4040
<divclass="markdown-body notebook-contents">
4141
<pre><codeclass="language-sql"><%- cell.contents %></code></pre>
4242
</div>
4343
<% } %>
4444

4545
<% if cell.html().is_some() { %>
46-
<divclass="notebook-rendering"data-turbo="false">
47-
<%- cell.html().unwrap() %>
48-
</div>
46+
<divclass="notebook-rendering"data-turbo="false">
47+
<%- cell.html().unwrap() %>
48+
</div>
4949
<% } %>
5050
</div>
51-
52-
<% if cell.code() && !edit { %>
53-
<divclass="notebook-button">
51+
52+
<divclass="notebook-buttons">
53+
<% if cell.code() && !edit { %>
5454
<formaction="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/play"method="post"data-action="notebook-cell#play">
5555
<buttontype="submit"title="Execute cell"data-notebook-cell-target="play">
5656
<spanclass="material-symbols-outlined">
5757
play_arrow
5858
</span>
5959
</button>
6060
</form>
61-
</div>
62-
<% } %>
63-
<divclass="notebook-button">
61+
<% } %>
6462
<formaction="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/remove"method="post">
6563
<buttontype="submit"title="Delete cell">
6664
<spanclass="material-symbols-outlined">delete_forever</span>
6765
</button>
6866
</form>
69-
</div>
70-
<divclass="notebook-button">
7167
<formaction="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/edit?bust_cache=<%= bust_cache %>"method="get">
7268
<buttontype="submit"title="Edit cell">
7369
<spanclass="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
<divdata-controller="notebook">
4-
<section>
4+
<sectionclass="notebook-title">
55
<divclass="flex flex-center">
6-
<div>
6+
<divclass="notebook-render-container">
77
<h1class="flex-grow"data-action="click->notebook#renameNotebook"data-notebook-target="notebookName">
88
<spanclass="material-symbols-outlined">newspaper</span>
99
<%= notebook.name %>
1010
</h1>
1111
</div>
12-
<divclass="flex-grow">
12+
<divclass="notebook-buttons">
1313
<formclass="hidden"action="/dashboard/notebooks/<%= notebook.id %>/rename"method="post"data-notebook-target="renameNotebookForm">
1414
<h1><inputtype="text"name="name"value="<%= notebook.name %>"required></h1>
1515
</form>
16-
</div>
17-
<div>
1816
<formaction="/dashboard/notebooks/<%= notebook.id %>/reset"method="post">
19-
<buttontype="submit"title="Reset all executable cells"style="padding: 0.5rem 1rem;">
17+
<buttontype="submit"title="Reset all executable cells">
2018
<spanclass="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-
<sectionclass="notebook-cell"data-controller="notebook-cell">
37+
<sectionclass="notebook-last-cell notebook-cell"data-controller="notebook-cell">
4038
<divclass="notebook-cell-edit">
4139
<formaction="/dashboard/notebooks/<%= notebook.id %>/cell"method="post"data-notebook-cell-target="form"data-action="notebook-cell#freezeScrollOnNextRender notebook-cell#play">
4240
<divclass="flex">
43-
<divclass="flex-grow">
41+
<divclass="flex-grow margin-right-1">
4442
<textareadata-cell-id="new"name="contents"data-notebook-cell-target="editor"></textarea>
4543
</div>
46-
<divclass="flex flex-end">
44+
<divclass="notebook-buttons flex-end">
4745
<selectname="cell_type"id="cell_type"data-action="notebook-cell#selectCellType"title="Select cell type"data-notebook-cell-target="type">
4846
<optionvalue="3"selected>SQL</option>
4947
<optionvalue="1">Markdown</option>
5048
</select>
51-
<buttontype="submit"class="button notebook-button"title="Create cell"data-notebook-cell-target="play">
49+
<buttontype="submit"title="Create cell"data-notebook-cell-target="play">
5250
<spanclass="material-symbols-outlined">play_arrow</span>
5351
</button>
5452
</div>

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp