mirrors/opencode
1
0
Fork 0
mirror of https://github.com/sst/opencode.git synced 2025-08-30 17:57:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

docs: share fix mobile diffs

Browse source
This commit is contained in:
Jay V 2025-07-10 18:19:18 -04:00
parent b4950a157c
commit f7d44b178b
3 changed files with 81 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

1
packages/web/src/components/share/content-code.module.css
View file

@ -9,6 +9,7 @@
border: none; border: none;
background-color: transparent; background-color: transparent;
padding: 0; padding: 0;
border-radius: 0;
} }
pre { pre {

109
packages/web/src/components/share/content-diff.module.css
View file

@ -31,7 +31,7 @@
overflow-x: visible; overflow-x: visible;
min-width: 0; min-width: 0;
align-items: stretch; align-items: stretch;
padding: 0 1rem; padding: 0 1rem 0 2.2ch;
&[data-diff-type="removed"] { &[data-diff-type="removed"] {
background-color: var(--sl-color-red-low); background-color: var(--sl-color-red-low);
@ -44,7 +44,7 @@
&::before { &::before {
content: "-"; content: "-";
position: absolute; position: absolute;
left: 0.5ch; left: 0.6ch;
top: 1px; top: 1px;
user-select: none; user-select: none;
color: var(--sl-color-red-high); color: var(--sl-color-red-high);
@ -64,7 +64,7 @@
position: absolute; position: absolute;
user-select: none; user-select: none;
color: var(--sl-color-green-high); color: var(--sl-color-green-high);
left: 0.5ch; left: 0.6ch;
top: 1px; top: 1px;
} }
} }
@ -75,50 +75,95 @@
} }
} }
.diff > .row:first-child [data-section="cell"]:first-child { /* .diff > .row:first-child [data-section="cell"]:first-child { */
padding-top: 0.5rem; /* padding-top: 0.5rem; */
} /* } */
/**/
/* .diff > .row:last-child [data-section="cell"]:last-child { */
/* padding-bottom: 0.5rem; */
/* } */
/**/
/* [data-section="cell"] { */
/* position: relative; */
/* flex: 1; */
/* display: flex; */
/* flex-direction: column; */
/**/
/* width: 100%; */
/* padding: 0.1875rem 0.5rem 0.1875rem 2.2ch; */
/* margin: 0; */
/**/
/* &[data-display-mobile="true"] { */
/* display: none; */
/* } */
/**/
/* pre { */
/* --shiki-dark-bg: var(--sl-color-bg-surface) !important; */
/* background-color: var(--sl-color-bg-surface) !important; */
/**/
/* white-space: pre-wrap; */
/* word-break: break-word; */
/**/
/* code > span:empty::before { */
/* content: "\00a0"; */
/* white-space: pre; */
/* display: inline-block; */
/* width: 0; */
/* } */
/* } */
/* } */
.diff > .row:last-child [data-section="cell"]:last-child { [data-component="mobile"] {
padding-bottom: 0.5rem;
}
[data-section="cell"] { & > [data-component="diff-block"] > div {
position: relative; padding: 0 1rem 0 2.2ch;
flex: 1;
display: flex;
flex-direction: column;
width: 100%; &[data-diff-type="removed"] {
padding: 0.1875rem 0.5rem 0.1875rem 2.2ch; position: relative;
margin: 0; background-color: var(--sl-color-red-low);
&[data-display-mobile="true"] { pre {
display: none; --shiki-dark-bg: var(--sl-color-red-low) !important;
} background-color: var(--sl-color-red-low) !important;
}
pre { &::before {
--shiki-dark-bg: var(--sl-color-bg-surface) !important; content: "-";
background-color: var(--sl-color-bg-surface) !important; position: absolute;
left: 0.6ch;
top: 1px;
user-select: none;
color: var(--sl-color-red-high);
}
}
white-space: pre-wrap; &[data-diff-type="added"] {
word-break: break-word; position: relative;
background-color: var(--sl-color-green-low);
code > span:empty::before { pre {
content: "\00a0"; --shiki-dark-bg: var(--sl-color-green-low) !important;
white-space: pre; background-color: var(--sl-color-green-low) !important;
display: inline-block; }
width: 0;
&::before {
content: "+";
position: absolute;
left: 0.6ch;
top: 1px;
user-select: none;
color: var(--sl-color-green-high);
}
} }
} }
} }
@media (max-width: 40rem) { @media (max-width: 40rem) {
[data-slot="desktop"] { [data-component="desktop"] {
display: none; display: none;
} }
[data-slot="mobile"] { [data-component="mobile"] {
display: block; display: block;
} }
} }

9
packages/web/src/components/share/content-diff.tsx
View file

@ -173,12 +173,9 @@ export function ContentDiff(props: Props) {
{mobileRows().map((block) => ( {mobileRows().map((block) => (
<div data-component="diff-block" data-type={block.type}> <div data-component="diff-block" data-type={block.type}>
{block.lines.map((line) => ( {block.lines.map((line) => (
<ContentCode <div data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}>
code={line} <ContentCode code={line} lang={props.lang} flush />
lang={props.lang} </div>
data-section="cell"
data-diff-type={block.type === "removed" ? "removed" : block.type === "added" ? "added" : ""}
/>
))} ))}
</div> </div>
))} ))}