Skip to content

Commit 934a5d7

Browse files
EfniliteEfnilite
committed
fix mobile share formatting
1 parent dbebb0d commit 934a5d7

File tree

4 files changed

+31
-21
lines changed

4 files changed

+31
-21
lines changed

‎src/components/docs/Doc.astro‎

Lines changed: 22 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -66,9 +66,20 @@ function color(): string {
6666
<section data-new={docType.new} data-type={docType.type} data-since={docType.since}
6767
class="doc-container">
6868

69-
<div class="flex flex-col gap-1">
70-
<div class="flex flex-row gap-3 flex-wrap">
69+
<div class="flex sm:flex-row flex-col gap-y-2 -mb-2">
70+
<div class="flex flex-row gap-3 flex-shrink-0">
7171
{docType.deprecated ? <h2 class="opacity-50 line-through">{docType.name}</h2> : <h2>{docType.name}</h2>}
72+
<div class="flex-auto sm:flex-0"></div>
73+
<button class="share flex sm:hidden">
74+
<p class="p-2 hidden absolute w-64 my-auto shadow-lg
75+
rounded-full bg-l-icon-hover dark:bg-d-icon-hover">Copied to clipboard</p>
76+
<svg width="18" height="19" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
77+
<path d="M12.75 17C12.125 17 11.5938 16.7812 11.1562 16.3438C10.7188 15.9062 10.5 15.375 10.5 14.75C10.5 14.675 10.5188 14.5 10.5562 14.225L5.2875 11.15C5.0875 11.3375 4.85625 11.4845 4.59375 11.591C4.33125 11.6975 4.05 11.7505 3.75 11.75C3.125 11.75 2.59375 11.5312 2.15625 11.0938C1.71875 10.6562 1.5 10.125 1.5 9.5C1.5 8.875 1.71875 8.34375 2.15625 7.90625C2.59375 7.46875 3.125 7.25 3.75 7.25C4.05 7.25 4.33125 7.30325 4.59375 7.40975C4.85625 7.51625 5.0875 7.663 5.2875 7.85L10.5562 4.775C10.5312 4.6875 10.5157 4.60325 10.5097 4.52225C10.5037 4.44125 10.5005 4.3505 10.5 4.25C10.5 3.625 10.7188 3.09375 11.1562 2.65625C11.5938 2.21875 12.125 2 12.75 2C13.375 2 13.9062 2.21875 14.3438 2.65625C14.7812 3.09375 15 3.625 15 4.25C15 4.875 14.7812 5.40625 14.3438 5.84375C13.9062 6.28125 13.375 6.5 12.75 6.5C12.45 6.5 12.1687 6.44675 11.9062 6.34025C11.6438 6.23375 11.4125 6.087 11.2125 5.9L5.94375 8.975C5.96875 9.0625 5.9845 9.147 5.991 9.2285C5.9975 9.31 6.0005 9.4005 6 9.5C5.9995 9.5995 5.9965 9.69025 5.991 9.77225C5.9855 9.85425 5.96975 9.9385 5.94375 10.025L11.2125 13.1C11.4125 12.9125 11.6438 12.7657 11.9062 12.6597C12.1687 12.5537 12.45 12.5005 12.75 12.5C13.375 12.5 13.9062 12.7188 14.3438 13.1562C14.7812 13.5938 15 14.125 15 14.75C15 15.375 14.7812 15.9062 14.3438 16.3438C13.9062 16.7812 13.375 17 12.75 17Z"/>
78+
</svg>
79+
</button>
80+
</div>
81+
82+
<div class="w-full flex flex-row gap-y-0 gap-x-3 flex-wrap">
7283
{[docType.new].filter(x => x).map(x => <DocsFiche text="New" color="B10003"/>)}
7384
<DocsFiche text={docType.type} color={color()}/>
7485
{[docType.deprecated].filter(x => x).map(x => <DocsFiche text="Deprecated" color="520f0f"/>)}
@@ -85,16 +96,21 @@ function color(): string {
8596
}
8697
})}
8798

88-
<div class="id flex-auto relative -top-37" id={docType.id}></div> <!-- Anchor all the way up or else its in the nav bar -->
89-
<button class="share">
99+
<div class="flex-auto"></div>
100+
<button class="share hidden sm:flex">
90101
<p class="p-2 hidden absolute w-64 my-auto shadow-lg
91102
rounded-full bg-l-icon-hover dark:bg-d-icon-hover">Copied to clipboard</p>
92-
<svg class="my-auto" width="18" height="19" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
103+
<svg width="18" height="19" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
93104
<path d="M12.75 17C12.125 17 11.5938 16.7812 11.1562 16.3438C10.7188 15.9062 10.5 15.375 10.5 14.75C10.5 14.675 10.5188 14.5 10.5562 14.225L5.2875 11.15C5.0875 11.3375 4.85625 11.4845 4.59375 11.591C4.33125 11.6975 4.05 11.7505 3.75 11.75C3.125 11.75 2.59375 11.5312 2.15625 11.0938C1.71875 10.6562 1.5 10.125 1.5 9.5C1.5 8.875 1.71875 8.34375 2.15625 7.90625C2.59375 7.46875 3.125 7.25 3.75 7.25C4.05 7.25 4.33125 7.30325 4.59375 7.40975C4.85625 7.51625 5.0875 7.663 5.2875 7.85L10.5562 4.775C10.5312 4.6875 10.5157 4.60325 10.5097 4.52225C10.5037 4.44125 10.5005 4.3505 10.5 4.25C10.5 3.625 10.7188 3.09375 11.1562 2.65625C11.5938 2.21875 12.125 2 12.75 2C13.375 2 13.9062 2.21875 14.3438 2.65625C14.7812 3.09375 15 3.625 15 4.25C15 4.875 14.7812 5.40625 14.3438 5.84375C13.9062 6.28125 13.375 6.5 12.75 6.5C12.45 6.5 12.1687 6.44675 11.9062 6.34025C11.6438 6.23375 11.4125 6.087 11.2125 5.9L5.94375 8.975C5.96875 9.0625 5.9845 9.147 5.991 9.2285C5.9975 9.31 6.0005 9.4005 6 9.5C5.9995 9.5995 5.9965 9.69025 5.991 9.77225C5.9855 9.85425 5.96975 9.9385 5.94375 10.025L11.2125 13.1C11.4125 12.9125 11.6438 12.7657 11.9062 12.6597C12.1687 12.5537 12.45 12.5005 12.75 12.5C13.375 12.5 13.9062 12.7188 14.3438 13.1562C14.7812 13.5938 15 14.125 15 14.75C15 15.375 14.7812 15.9062 14.3438 16.3438C13.9062 16.7812 13.375 17 12.75 17Z"/>
94105
</svg>
95106
</button>
96107
</div>
97-
{docType.description?.map((line: string) => <p><Fragment set:html={line}/></p>)}
108+
109+
<div class="id relative -top-37" id={docType.id}></div> <!-- Anchor all the way up or else its in the nav bar -->
110+
</div>
111+
112+
<div class="flex flex-col gap-1">
113+
{docType.description?.map((line: string) => <p><Fragment set:html={line}/></p>)}
98114
</div>
99115

100116
{[docType.patterns]

‎src/components/docs/Docs.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ function type(doc: any): DocType {
8383

8484
document.querySelectorAll(".share").forEach((button) => {
8585
button.addEventListener("click", () => {
86-
const id = button.parentElement!!.querySelector(`.id`)!!.id;
86+
const id = button.parentElement!!.parentElement!!.querySelector(`.id`)!!.id;
8787
const url = `${window.location.origin}${window.location.pathname}#${id}`;
8888
navigator.clipboard.writeText(url);
8989

@@ -150,7 +150,8 @@ function type(doc: any): DocType {
150150
}
151151
})}/>
152152

153-
<div id="docs" class="p-2 md:p-6 flex-auto h-fit flex flex-col gap-2 md:gap-4">
153+
<div id="docs" class="p-2 md:p-6 flex-auto h-fit flex flex-col gap-2 md:gap-4
154+
overflow-x-hidden">
154155
{docTypes.map(x => <Doc docType={x}/>)}
155156
</div>
156157

‎src/components/nav/NavLogo.astro‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ import docs from "../../assets/docs/docs.json";
66
<a target="_blank"
77
href={`https://github.com/SkriptLang/Skript/releases/tag/${docs.skriptVersion}`}
88
class="my-auto hover:underline">{docs.skriptVersion}</a>
9-
<div class="my-auto h-fit px-2 py-1 font-bold rounded-md text-xs text-white bg-skript select-none">
10-
Preview
11-
</div>
129
<a href="/" class="-m-2 p-2 flex flex-row text-5xl">
1310
<span>sk</span>
1411
<span class="m-0 text-skript">.</span>

‎src/style.css‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,13 @@
3333
}
3434

3535
body, p, div, table {
36-
/* scrollbar-width: thin;
37-
scrollbar-color: var(--color-l-search-fill) var(--color-l-bg); */
36+
scrollbar-width: thin;
37+
scrollbar-color: auto;
3838

3939
font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova",
4040
"Nimbus Sans", Arial, sans-serif;
4141
}
4242

43-
body, .dark {
44-
scrollbar-width: thin;
45-
scrollbar-color: var(--color-d-search-fill) var(--color-d-bg);
46-
}
47-
4843
h1 {
4944
@apply break-words;
5045

@@ -104,12 +99,13 @@ pre {
10499

105100
.doc-container {
106101
@apply p-4 md:p-6 flex flex-col gap-4 rounded-md
107-
bg-l-bg-secondary dark:bg-d-bg-secondary;
102+
bg-l-bg-secondary dark:bg-d-bg-secondary
103+
overflow-x-hidden;
108104
}
109105

110106
.share {
111-
@apply flex flex-row-reverse gap-2
112-
p-2 my-auto rounded-full
107+
@apply flex-row-reverse gap-2
108+
p-2 mt-0 sm:my-auto rounded-full
113109
hover:bg-l-icon-hover dark:hover:bg-d-icon-hover
114110
hover:cursor-pointer;
115111
}

0 commit comments

Comments
 (0)