Skip to content

Dan cell xscroll fix #562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 13, 2023
Merged

Dan cell xscroll fix #562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c41b899
scroll code area, add boarder radius to last cell
chillenberger Mar 12, 2023
2cb42d0
make responsive, clean up code
chillenberger Mar 13, 2023
690688a
add new line to end of base css
chillenberger Mar 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 100 additions & 78 deletions pgml-dashboard/static/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -305,67 +305,6 @@ footer {
height: 0;
}

@media only screen and (max-width: 690px) {
header {
top: unset;
left: 0;
bottom: 0;
position: fixed;
border: 0;
padding: 0;
width: 100%;
}
header nav a {
font-size: 0;
}
header nav ul li.logo {
display: none;
}
header nav ul li {
width: 24%;
padding: 15px 0;
text-align: center;
}
header nav a span.material-symbols-outlined {
font-size: 3rem;
}
main {
padding: 0px 0 100px;
}
dl {
max-height: 6em;
}
dt {
margin-top: 1em;
}
dt, dd {
margin-right: 2em;
}
figure {
display: inline-block;
width: 75vmin;
height: 75vmin;
margin: 30px 0;
}
section {
border-radius: 0;
margin: 0 0 20px;
}
}

@media only screen and (max-width: 300px) {
dl {
max-height: 12em;
}
dt {
margin-top: 1em;
}
dt, dd {
margin-right: 2em;
}
}


ol.object_list {
width: 100%;
}
Expand Down Expand Up @@ -503,14 +442,17 @@ nav ol, nav ul {
list-style: none;
}

.notebook-title {
padding: 1rem;
margin: 20px auto 20px auto;
}

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

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

Expand All @@ -519,13 +461,12 @@ nav ol, nav ul {
}

main turbo-frame:first-of-type .notebook-cell {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-radius: 10px 10px 0px 0px;
border-top: 1px solid var(--gray-8);
}

.notebook-cell {
margin: 0 20px;
margin: 0 auto;
border-radius: 0;
padding: 1rem;
border-left: 2px solid var(--gray-8);
Expand All @@ -535,6 +476,10 @@ main turbo-frame:first-of-type .notebook-cell {
background: var(--gray-10);
}

.notebook-last-cell {
border-radius: 0px 0px 10px 10px;
}

.notebook-cell article.markdown-body {
background-color: inherit;
}
Expand Down Expand Up @@ -564,8 +509,10 @@ main turbo-frame:first-of-type .notebook-cell {
color: #000;
}

.notebook-button {
margin: 0.1rem;
.notebook-buttons {
display: flex;
flex-direction: row;
gap: 0.2rem;
}

.notebook-contents code {
Expand Down Expand Up @@ -596,6 +543,10 @@ main turbo-frame:first-of-type .notebook-cell {
align-items: flex-end;
}

.flex-start {
align-items: flex-start;
}

.flex-row-reverse {
flex-direction: row-reverse;
}
Expand All @@ -605,16 +556,9 @@ main turbo-frame:first-of-type .notebook-cell {
font-family: monospace;
}

.notebook-cell .button {
height: fit-content;
width: fit-content;
padding: 2px 5px;
margin-bottom: 0.12rem;
margin-left: 0.2rem;
}

.notebook-cell .notebook-button button, .markdown-body button {
.notebook-cell button, .notebook-title button, .markdown-body button {
padding: 2px 5px;
height: 2rem;
}

.notebook-cell .button-delete {
Expand All @@ -625,15 +569,20 @@ main turbo-frame:first-of-type .notebook-cell {
font-weight: bold;
background: rgb(240, 240, 240);
border: 1px solid var(--gray-7);
padding: 0.5rem 6px;
height: 2rem;
border-radius: 2px;
margin-bottom: 2px;
}

.notebook-duration {
margin-top: 1rem;
}

.notebook-render-container {
min-width: 0px;
flex: 1;
margin-right: 1rem;
}

.notebook-rendering .markdown-body {
margin-top: 1rem;
}
Expand All @@ -651,6 +600,8 @@ main turbo-frame:first-of-type .notebook-cell {
*/
.CodeMirror {
font-size: 1rem;
border: 1px solid var(--gray-8);
border-radius: 10px;
}

/*
Expand Down Expand Up @@ -737,3 +688,74 @@ input[type=checkbox]:checked:after {
display: flex;
align-items: center;
}


@media only screen and (max-width: 690px) {
header {
top: unset;
left: 0;
bottom: 0;
position: fixed;
border: 0;
padding: 0;
width: 100%;
}
header nav a {
font-size: 0;
}
header nav ul li.logo {
display: none;
}
header nav ul li {
width: 24%;
padding: 15px 0;
text-align: center;
}
header nav a span.material-symbols-outlined {
font-size: 3rem;
}
main {
padding: 0px 0 100px;
}
dl {
max-height: 6em;
}
dt {
margin-top: 1em;
}
dt, dd {
margin-right: 2em;
}
figure {
display: inline-block;
width: 75vmin;
height: 75vmin;
margin: 30px 0;
}
section {
border-radius: 0;
margin: 0 0 20px;
}
main turbo-frame:first-of-type .notebook-cell {
border-radius: 0px;
}
.notebook-last-cell {
border-radius: 0px;
}
.notebook-buttons {
flex-direction: column;
justify-content: flex-start;
}
}

@media only screen and (max-width: 300px) {
dl {
max-height: 12em;
}
dt {
margin-top: 1em;
}
dt, dd {
margin-right: 2em;
}
}
1 change: 1 addition & 0 deletions pgml-dashboard/static/css/markdown.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
font-size: 16px;
line-height: 1.5;
word-wrap: break-word;
max-width: 75vw;
}

.markdown-body .octicon {
Expand Down
28 changes: 12 additions & 16 deletions pgml-dashboard/templates/cell.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@
<div class="notebook-cell-edit">
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/edit" method="post" data-notebook-cell-target="form" data-action="notebook-cell#play">
<div class="flex">
<div class="flex-grow">
<div class="flex-grow margin-right-1">
<textarea name="contents" data-notebook-cell-target="editor"><%= cell.contents %></textarea>
</div>
<div class="flex flex-end">
<div class="notebook-buttons flex-end">
<select name="cell_type" data-action="notebook-cell#selectCellType" title="Select cell type" data-notebook-cell-target="type">
<option value="3" <% if cell.cell_type == 3 { %>selected<% } %>>SQL</option>
<option value="1" <% if cell.cell_type == 1 { %>selected<% } %>>Markdown</option>
</select>
<button type="submit" class="button notebook-button" title="Execute cell" data-notebook-cell-target="play">
<button type="submit" title="Execute cell" data-notebook-cell-target="play">
<span class="material-symbols-outlined">play_arrow</span>
</button>
<button class="button notebook-button" title="Cancel edit" data-action="notebook-cell#cancelEdit">
<button title="Cancel edit" data-action="notebook-cell#cancelEdit">
<span class="material-symbols-outlined">cancel</span>
</button>
</div>
Expand All @@ -35,39 +35,35 @@
<div>
<div class="flex">
<div class="cell-number"><%= cell.cell_number %></div>
<div class="flex-grow margin-right-1">
<div class="notebook-render-container">
<% if cell.code() { %>
<div class="markdown-body notebook-contents">
<pre><code class="language-sql"><%- cell.contents %></code></pre>
</div>
<% } %>

<% if cell.html().is_some() { %>
<div class="notebook-rendering" data-turbo="false">
<%- cell.html().unwrap() %>
</div>
<div class="notebook-rendering" data-turbo="false">
<%- cell.html().unwrap() %>
</div>
<% } %>
</div>
<% if cell.code() && !edit { %>
<div class="notebook-button">

<div class="notebook-buttons">
<% if cell.code() && !edit { %>
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/play" method="post" data-action="notebook-cell#play">
<button type="submit" title="Execute cell" data-notebook-cell-target="play">
<span class="material-symbols-outlined">
play_arrow
</span>
</button>
</form>
</div>
<% } %>
<div class="notebook-button">
<% } %>
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/remove" method="post">
<button type="submit" title="Delete cell">
<span class="material-symbols-outlined">delete_forever</span>
</button>
</form>
</div>
<div class="notebook-button">
<form action="/dashboard/notebooks/<%= notebook.id %>/cell/<%= cell.id %>/edit?bust_cache=<%= bust_cache %>" method="get">
<button type="submit" title="Edit cell">
<span class="material-symbols-outlined">edit</span>
Expand Down
18 changes: 8 additions & 10 deletions pgml-dashboard/templates/notebook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
<% include!("header.html"); %>

<div data-controller="notebook">
<section>
<section class="notebook-title">
<div class="flex flex-center">
<div>
<div class="notebook-render-container">
<h1 class="flex-grow" data-action="click->notebook#renameNotebook" data-notebook-target="notebookName">
<span class="material-symbols-outlined">newspaper</span>
<%= notebook.name %>
</h1>
</div>
<div class="flex-grow">
<div class="notebook-buttons">
<form class="hidden" action="/dashboard/notebooks/<%= notebook.id %>/rename" method="post" data-notebook-target="renameNotebookForm">
<h1><input type="text" name="name" value="<%= notebook.name %>" required></h1>
</form>
</div>
<div>
<form action="/dashboard/notebooks/<%= notebook.id %>/reset" method="post">
<button type="submit" title="Reset all executable cells" style="padding: 0.5rem 1rem;">
<button type="submit" title="Reset all executable cells">
<span class="material-symbols-outlined">replay</span>
</button>
</form>
Expand All @@ -36,19 +34,19 @@ <h1><input type="text" name="name" value="<%= notebook.name %>" required></h1>
include!("cell.html");
} %>

<section class="notebook-cell" data-controller="notebook-cell">
<section class="notebook-last-cell notebook-cell" data-controller="notebook-cell">
<div class="notebook-cell-edit">
<form action="/dashboard/notebooks/<%= notebook.id %>/cell" method="post" data-notebook-cell-target="form" data-action="notebook-cell#freezeScrollOnNextRender notebook-cell#play">
<div class="flex">
<div class="flex-grow">
<div class="flex-grow margin-right-1">
<textarea data-cell-id="new" name="contents" data-notebook-cell-target="editor"></textarea>
</div>
<div class="flex flex-end">
<div class="notebook-buttons flex-end">
<select name="cell_type" id="cell_type" data-action="notebook-cell#selectCellType" title="Select cell type" data-notebook-cell-target="type">
<option value="3" selected>SQL</option>
<option value="1">Markdown</option>
</select>
<button type="submit" class="button notebook-button" title="Create cell" data-notebook-cell-target="play">
<button type="submit" title="Create cell" data-notebook-cell-target="play">
<span class="material-symbols-outlined">play_arrow</span>
</button>
</div>
Expand Down
Loading
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