Skip to content

Commit

Permalink
Merge pull request #1528 from strictdoc-project/_diff_changelog
Browse files Browse the repository at this point in the history
export/html: Diff/Search: improve CSS layout, add nav tabs template
  • Loading branch information
stanislaw authored Dec 24, 2023
2 parents 4c9cadb + d2fe2b9 commit 2941bf6
Show file tree
Hide file tree
Showing 11 changed files with 153 additions and 82 deletions.
50 changes: 42 additions & 8 deletions strictdoc/export/html/_static/content.css
Original file line number Diff line number Diff line change
@@ -1,35 +1,68 @@
/* .main */

.main {
padding: var(--base-gap);
position: relative;
overflow: auto;
scroll-behavior: smooth;
scrollbar-gutter: stable both-edges;
padding: var(--base-gap) /* == calc(var(--base-rhythm)*6) */
calc(var(--base-rhythm)*5); /* compensate both-edges scrollbar-gutter */

height: 100%;
background-color: var(--color-bg-main);

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--base-rhythm);
}

/* redefine main layout grid */

[data-viewtype="diff"] .main {
overflow: hidden;
display: grid;
grid-template-rows: minmax(0, max-content) /* form */
minmax(0, max-content) /* tabs */
minmax(0, 1fr); /* content */
gap: var(--base-rhythm);
padding-bottom: 0;
padding-top: 0; /* tabs */
}

[data-viewtype="source-file"] .main {
padding: 0;
background: white;
}

.main_sticky_header {
position: sticky;
top: 0;
left: 0;
z-index: 11;

display: flex;
flex-direction: column;
gap: var(--base-rhythm);

/* margin-bottom: calc(var(--base-rhythm)*4); */
background-color: var(--color-bg-main);
border: none;
}

.main_sticky_header > * {
position: relative;
}

.main_sticky_header::before {
content: '';
position: absolute;
bottom: 0;
top: -60px;
left: calc(-1 * var(--base-gap));
right: calc(-1 * var(--base-gap));
background-color: var(--color-bg-main);
z-index: 0;
}

/* .content */

.content {
width: 100%;
min-width: calc(var(--card-width) + calc(var(--base-padding)*4));
}

Expand Down Expand Up @@ -162,4 +195,5 @@ sdoc-main-placeholder.page-tips {
font-weight:unset;
color: unset;
opacity: 0.5;
align-items: unset;
}
22 changes: 6 additions & 16 deletions strictdoc/export/html/_static/diff.css
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@
grid-template-rows: minmax(0, max-content) minmax(0, max-content);

gap: var(--base-rhythm);
/* height: calc(100% - var(--base-rhythm) - var(--base-rhythm)); */

min-height: 0; /* to prevent from overflowing the parent flex container */
}

/* controls */
Expand Down Expand Up @@ -64,13 +65,14 @@
.diff_column {
overflow: auto;
overflow-y: scroll;
padding-bottom: 100%; /* to balance the scrolling freely */

overflow-wrap: break-word;
/* border: 1px solid var(--thumbBG); */

border-radius: 4px;
border: 1px solid var(--color-border);

/* for position:sticky*/
position: relative;
position: relative; /* for position:sticky */
}

.diff_column[left] {
Expand All @@ -90,7 +92,6 @@
flex-direction: column;
gap: var(--base-rhythm);
padding: var(--base-rhythm);
margin-bottom: 200%; /* to balance the scrolling freely */
}

/* details with summary */
Expand Down Expand Up @@ -561,14 +562,3 @@
-2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}

/* tabs */

.sdoc-tabs {
padding-inline: 0;
box-shadow: 0 1px 0 white, 0 2px 0 var(--thumbBG);
}

a.sdoc-tab {
color: var(--color-fg-contrast);
}
55 changes: 55 additions & 0 deletions strictdoc/export/html/_static/element.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,15 @@ h4 { font-size: 1.2em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; }

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}

/* a */

a {
Expand Down Expand Up @@ -542,6 +551,52 @@ sdoc-anchor[visible]:hover .anchor_back_links_number {
cursor: default;
}

/* sdoc tabs (page nav) */

.sdoc-tabs {
border-bottom: 1px solid var(--color-border);
}

.sdoc-tab-list {
display: flex;
overflow: auto;
margin-bottom: -1px;
}

.sdoc-tab {
padding: var(--base-rhythm) calc(2 * var(--base-rhythm));
font-size: var(--font-size-xsm);
font-weight: 600;
line-height: 1;
color: var(--color-link);
text-decoration: none;
background-color: transparent;
border-width: 1px 1px 0px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
border-image: initial;
border-bottom-style: initial;
border-bottom-color: initial;

color: var(--color-fg-contrast);
}

.sdoc-tab:hover {
color: var(--color-hover);
}

.sdoc-tab[active] {
color: var(--color-fg-contrast);
border-color: var(--color-border);
border-top-right-radius: 4px;
border-top-left-radius: 4px;
background-color: var(--color-bg-main);
}

/* tags */

.tags {
Expand Down
24 changes: 2 additions & 22 deletions strictdoc/export/html/_static/form.css
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,6 @@ sdoc-tab-content[active] {
display: contents;
}

.sdoc-tabs,
sdoc-tabs {
grid-column: 1 / -1;

Expand All @@ -507,7 +506,6 @@ sdoc-tabs {
display: flex;
}

.sdoc-tab,
sdoc-tab {
font-size: var(--font-size-xsm);
font-weight: 600;
Expand Down Expand Up @@ -544,12 +542,10 @@ sdoc-tab {
transition: 0.2s;
}

.sdoc-tab:hover,
sdoc-tab:hover {
background-color: rgba(255, 255, 255, 0.5);
}

.sdoc-tab[active],
sdoc-tab[active] {
color: var(--color-hover);
background-color: rgba(255, 255, 255, 1);
Expand Down Expand Up @@ -626,14 +622,9 @@ sdoc-form[diff] form {

sdoc-form[search] {
display: block;
position: sticky;
top: 0;
left: 0;
z-index: 11;

margin-bottom: calc(var(--base-rhythm)*4);
background-color: transparent;
border: none;
border-radius: 0;
}

sdoc-form[search] form {
Expand All @@ -647,18 +638,7 @@ sdoc-form[search] form {
}

sdoc-form[search][success] {
box-shadow: 0 0 1rem 0.5rem var(--thumbBG);
}

sdoc-form[search]::before {
content: '';
position: absolute;
bottom: 0;
top: -60px;
left: -60px;
right: -60px;
background-color: var(--color-bg-main);
z-index: 0;
border-bottom: 1px solid var(--color-border);
}

.sdoc-form-error,
Expand Down
2 changes: 1 addition & 1 deletion strictdoc/export/html/templates/screens/git/form.jinja
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<sdoc-form diff>
<sdoc-form sticky diff>
<form
action="/diff"
method="GET"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<turbo-frame id="diff_result">
{% if results %}
<div class="changelog preloaded">
<div class="diff_column">

{%- with tab="changelog" -%}
{% include "screens/git/changelog_content.jinja" %}
{%- endwith -%}
</div>

</div>
{% endif %}
</turbo-frame>
3 changes: 2 additions & 1 deletion strictdoc/export/html/templates/screens/git/index.jinja
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
{{ project_config.project_title }} - {{ template_type }}
{% endblock title %}

{% block viewtype %}diff{% endblock viewtype %}
{% assert tab in ("diff", "changelog") %}
{% block viewtype %}{{ tab }}{% endblock viewtype %}

{% block layout_nav %}
{% include "_shared/nav.jinja.html" %}
Expand Down
44 changes: 24 additions & 20 deletions strictdoc/export/html/templates/screens/git/legend.jinja
Original file line number Diff line number Diff line change
@@ -1,22 +1,26 @@
<div>
<h5>Legend</h5>
<p>The Diff/Changelog feature only works when StrictDoc is run against a directory which is a Git repository.</p>
<p>The left-hand-side (LHS) and the right-hand-side (RHS) revisions must be valid Git revisions.</p>
<p>A valid revision can be a Git branch, a Git commit or a Git tag. Examples: `main`, `origin/main`, `63fd784`, `v1.0.0`.
<p>The StrictDoc's custom revision `HEAD+` can be used to indicate "the current branch + all uncommitted changes".</p>
<p>The Diff/Changelog query is shareable via a URL. Example: <a href="http://127.0.0.1:5111/diff?left_revision=HEAD%5E&right_revision=HEAD&tab=diff">This link</a> opens a diff between the last commit and the last but one commit.</p>
<sdoc-main-placeholder
class="page-tips"
data-testid="changelog-main-placeholder"
>
<div>
<p>The Diff/Changelog feature only works when StrictDoc is run against a directory which is a Git repository.</p>
<p>The left-hand-side (LHS) and the right-hand-side (RHS) revisions must be valid Git revisions.</p>
<p>A valid revision can be a Git branch, a Git commit or a Git tag. Examples: `main`, `origin/main`, `63fd784`, `v1.0.0`.</p>
<p>The StrictDoc's custom revision `HEAD+` can be used to indicate "the current branch + all uncommitted changes".</p>
<p>The Diff/Changelog query is shareable via a URL. Example: {# djlint:off H022 #}<a href="http://127.0.0.1:5111/diff?left_revision=HEAD%5E&right_revision=HEAD&tab=diff">This link</a>{# djlint:on #} opens a diff between the last commit and the last but one commit.</p>

<p>The StrictDoc diff algorithm compares documentation trees (left-hand side, LHS, and right-hand side, RHS) based on these principles:</p>
<p>The StrictDoc diff algorithm compares documentation trees (left-hand side, LHS, and right-hand side, RHS) based on these principles:</p>

<ul>
<li>
Optimal comparison of document contents is achieved using automatically-generated Machine Identifiers (MID). This ensures the best match.
</li>
<li>
If document nodes, such as Sections or Requirements, lack MIDs, they are matched using their UID field. Matching quality with UIDs is comparable to that with MIDs, provided all nodes have UIDs.
</li>
<li>
In cases where document nodes do not have either MID or UID, matching generally isn't performed or is very limited to the most basic cases. Changes to nodes lacking MID/UID are recorded as separate events: "node removed" for LHS and "node added" for RHS.
</li>
</ul>
</div>
<ul>
<li>
Optimal comparison of document contents is achieved using automatically-generated Machine Identifiers (MID). This ensures the best match.
</li>
<li>
If document nodes, such as Sections or Requirements, lack MIDs, they are matched using their UID field. Matching quality with UIDs is comparable to that with MIDs, provided all nodes have UIDs.
</li>
<li>
In cases where document nodes do not have either MID or UID, matching generally isn't performed or is very limited to the most basic cases. Changes to nodes lacking MID/UID are recorded as separate events: "node removed" for LHS and "node added" for RHS.
</li>
</ul>
</div>
</sdoc-main-placeholder>
14 changes: 3 additions & 11 deletions strictdoc/export/html/templates/screens/git/main.jinja
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,11 @@

<div class="main">

<div class="sdoc-tabs">
<a class="sdoc-tab"
{% if tab == "diff" %}active{% endif %}
href="/diff?tab=diff&left_revision={{ left_revision_urlencoded }}&right_revision={{ right_revision_urlencoded }}"
>Diff</a>
<a class="sdoc-tab"
{% if tab == "changelog" %}active{% endif %}
href="/diff?tab=changelog&left_revision={{ left_revision_urlencoded }}&right_revision={{ right_revision_urlencoded }}"
>Changelog</a>
<div class="main_sticky_header">
{% include "screens/git/form.jinja" %}
{% include "screens/git/nav_tabs.jinja" %}
</div>

{% include "screens/git/form.jinja" %}

{% if project_config.is_running_on_server %}
{% if error_message is none and left_revision is not none and right_revision is not none and left_revision|length > 0 and right_revision|length > 0 %}
<turbo-frame id="diff_result" src="/diff_result?tab={{ tab }}&left_revision={{ left_revision_urlencoded }}&right_revision={{ right_revision_urlencoded }}">
Expand Down
12 changes: 12 additions & 0 deletions strictdoc/export/html/templates/screens/git/nav_tabs.jinja
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<nav class="sdoc-tabs">
<div class="sdoc-tab-list">
<a class="sdoc-tab"
{% if tab == "diff" %}active{% endif %}
href="/diff?tab=diff&left_revision={{ left_revision_urlencoded }}&right_revision={{ right_revision_urlencoded }}"
>Diff</a>
<a class="sdoc-tab"
{% if tab == "changelog" %}active{% endif %}
href="/diff?tab=changelog&left_revision={{ left_revision_urlencoded }}&right_revision={{ right_revision_urlencoded }}"
>Changelog</a>
</div>
</nav>
5 changes: 4 additions & 1 deletion strictdoc/export/html/templates/screens/search/main.jinja
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<div
class="main"
>
{%- include "components/form/search.jinja" -%}
<div class="main_sticky_header">
{%- include "components/form/search.jinja" -%}
</div>

{%- if search_results|length > 0 -%}
<div class="content">
{% for node in search_results %}
Expand Down

0 comments on commit 2941bf6

Please sign in to comment.