quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

minor fixes: scroll bars on overflowing elements, copy button size, function args spacing, type icons padding, link to window.location.href

Browse source
This commit is contained in:
Xanazf 2024-09-28 10:44:54 +03:00
parent 3c2fb32b3e
commit ffdbd0e614
13 changed files with 488 additions and 546 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/components/hooks/CreateCopyButtons.astro
View file

@ -42,6 +42,7 @@
button.onclick = () => {
let link = window.location.href.split("#")[0];
link += `#-${heading.textContent?.slice(10).trimEnd().replaceAll(" ", "-").toLowerCase()}`;
window.location.href = link
navigator.clipboard.writeText(link);
heading.classList.toggle("copied")
setTimeout(() => heading.classList.remove("copied"), 1000);

4
src/components/navigation/search/index.tsx
View file

@ -7,6 +7,8 @@ import {
import type { SearchResult } from "./types";
import SearchModal from "./SearchModal";
//const pagefindPath = "@dist/pagefind/pagefind.js";
//const pagefind = await import(pagefindPath);
const pagefind = await import("@dist/pagefind/pagefind.js");
pagefind.init();
@ -44,7 +46,7 @@ const SearchComponent: Component = () => {
value={query()}
placeholder="Search"
onChange={e => handleSearch(e.target.value)}
//onfocusout={() => setQuery("")}
//onfocusout={() => setQuery("")}
/>{" "}
{!results.loading && results() && results()!.length > 0 ? (
<SearchModal

12
src/components/type/Functions.astro
View file

@ -19,19 +19,13 @@ const { funcData, title } = Astro.props;
<ul class="typedata typefuncs">
{
funcData.map(item => {
const functionParams = item.params.length > 0 ? item.params : null
const functionParams = item.params.length > 0 ? item.params.map((funcparam,index) => `${funcparam.name}${index !== item.params.length -1 ? ", ":""}`) : null
const retTypeLink = getQMLTypeLink(item.ret as unknown as QMLTypeLinkObject)
return (
<li id={item.name} class="typedata-root typefunc-root">
<p class="typedata-name typefunc-name">
{item.name}({functionParams
? functionParams.map((itemType, index) => (
<span class="typedata-param">{itemType.name}{
index !== functionParams.length - 1
&& ", "
}</span>
)
) : null})<span class="type-datatype">:&nbsp;<a
{item.name}(<span class="typedata-param">{functionParams}</span>)
<span class="type-datatype">:&nbsp;<a
href={retTypeLink}
target="_blank"
>{item.ret.name || item.ret.type}</a></span>

4
src/components/type/Signals.astro
View file

@ -27,11 +27,11 @@ const { signalKeys, signalsData, title } = Astro.props;
</p>
{
signalData.params && signalData.params.length > 0 ? (
<p class="typesignal-params">
<p class="typedata-params typesignal-params">
{
signalData.params.map((param, _) => {
return (
<span class="typesignal-param typedata-param">
<span class="typedata-param typesignal-param">
<Tag client:idle/>
{param.name}<span class="type-datatype">:&nbsp;<a
href=""

6
src/styles/css-config/code.css
View file

@ -1,4 +1,4 @@
:where(p, li):has(>code) code {
:where(p, li):has(> code) code {
padding-inline: 0.272rem;
border-radius: 0.272rem;
color: hsl(var(--blue) 100 69);
@ -14,8 +14,8 @@ pre {
&>button {
all: unset;
width: 3svh;
height: 3svh;
width: 2rem;
height: 2rem;
position: absolute;
top: 0.5rem;
right: 0.5rem;

24
src/styles/docs/docs-types.css
View file

@ -27,7 +27,6 @@
&>p:not(:first-child) {
margin-block: 0.724rem;
}
}
.type-module {
@ -39,7 +38,6 @@
}
.typedocs-content {
&>p {
margin-block: 0.618rem;
}
@ -50,7 +48,6 @@
}
}
.typedocs-data {
& subheading {
display: flex;
@ -69,7 +66,6 @@
padding: 1.272rem;
transition: border 0.3s;
&>.typedata-name {
display: flex;
align-items: center;
@ -77,10 +73,10 @@
margin: 0;
margin-top: 0.272rem;
&>svg {
& svg {
width: 27px;
height: 27px;
margin-right: 6px;
margin-right: 3px;
}
}
}
@ -96,9 +92,10 @@
align-items: center;
gap: 0.117rem;
&>svg {
& svg {
height: 1.272rem;
width: 1.272rem;
margin-right: 3px;
}
}
}
@ -137,13 +134,12 @@
color: hsl(var(--var-link-color));
& a {
color: hsl(var(--var-link-color))
color: hsl(var(--var-link-color));
}
}
}
}
.typedata-link {
display: inline-flex;
align-items: baseline;
@ -156,7 +152,6 @@
}
}
.typedata-param {
color: hsla(var(--prop-link-color) / 1);
}
@ -179,7 +174,7 @@
display: flex;
align-items: center;
gap: 0.117rem;
color: hsl(var(--inner-param-color))
color: hsl(var(--inner-param-color));
}
}
@ -198,7 +193,6 @@
& .typeprop-name {
color: hsl(var(--prop-link-color));
}
}
}
@ -219,7 +213,6 @@
}
& .typefunc-params {
& .typefunc-param {
margin-top: 0.272rem;
display: flex;
@ -231,13 +224,10 @@
width: 1.272rem;
}
}
}
}
}
.typesignals {
& .typesignal-root {
border: 1px solid hsla(var(--signal-color) / 0.3);
@ -330,7 +320,6 @@
.typedata-detailsdata,
.typedocs-subheading {
max-width: 42svw;
}
.root-nav {
@ -401,7 +390,6 @@
}
}
}
}
}
}

14
src/styles/docs/docs.css
View file

@ -4,7 +4,6 @@
.docslayout-root {
margin: 0.618rem;
margin-top: 3.5rem;
overflow: hidden;
}
.docs,
@ -40,7 +39,7 @@
}
.heading {
& > [id] {
&>[id] {
width: max-content;
}
@ -70,7 +69,7 @@ ul {
.markdown-alert {
margin-block: 0.618rem;
& > *:not(:first-child) {
&>*:not(:first-child) {
margin-block: 0.724rem;
}
}
@ -81,6 +80,7 @@ ul {
}
@media (min-width: 768px) {
.docs,
.docslayout-root {
gap: 0.648rem;
@ -90,10 +90,6 @@ ul {
margin-left: calc(1.618rem + 260px);
}
.docslayout-inner {
display: block;
}
.docs-content {
margin-inline: 1.272rem;
@ -121,4 +117,8 @@ ul {
.docslayout-root {
margin-inline: calc(10svw + 260px);
}
.docslayout-inner {
min-width: 33.8rem;
}
}

11
src/styles/docs/nav/nav-tree.css
View file

@ -8,7 +8,6 @@
& [data-part="item"] {
padding-right: 0;
}
}
}
@ -39,7 +38,6 @@
width: max-content;
padding: 4px;
overflow: scroll;
z-index: 101;
}
}
@ -74,7 +72,6 @@
&:hover {
background-color: hsl(var(--blue) 30 30);
}
}
[data-scope="accordion"][data-part="item-indicator"][data-state="open"] {
@ -121,7 +118,6 @@
animation: percentToFifty 250ms ease-in-out forwards;
}
&>a {
padding-top: 1em;
width: 100%;
@ -134,11 +130,11 @@
}
[data-scope="accordion"][data-part="item-content"][data-state="open"] {
animation: slideDown 250ms ease-in-out;
animation: slideDown 250ms ease;
}
[data-scope="accordion"][data-part="item-content"][data-state="closed"] {
animation: slideUp 200ms ease-in-out;
animation: slideUp 200ms ease;
}
.__current-type-doc {
@ -146,7 +142,6 @@
& [data-part="item-trigger"] a {
color: hsl(var(--blue) 100 70) !important;
}
&>a {
@ -160,12 +155,10 @@
hsla(var(--accent-400) / 0) 100%);
animation: percentToZero 250ms ease-in-out forwards;
width: 100%;
}
&:hover::before {
animation: percentToFifty 250ms ease-in-out forwards;
}
}
}

40
src/styles/docs/toc/toc.css
View file

@ -3,10 +3,28 @@
.toc-wrapper {
display: none;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.toc-wrapper-mobile {
display: block;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
background-color: transparent;
}
.toc-content {
background-color: transparent;
}
.toc-toggle {
@ -16,14 +34,8 @@
height: 24px;
font-size: 1.614rem;
max-height: 500px;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
& > svg {
&>svg {
height: 100%;
width: 24px;
}
@ -53,12 +65,11 @@
display: none;
}
transition:
width 0.3s ease,
height 0.3s ease,
background-color 0.3s ease,
backdrop-filter 0.3s ease,
padding 0.3s ease;
transition: width 0.3s ease,
height 0.3s ease,
background-color 0.3s ease,
backdrop-filter 0.3s ease,
padding 0.3s ease;
&.shown {
padding: 0.3rem;
@ -85,6 +96,7 @@
}
.toc-wrapper {
background-color: transparent;
display: block;
position: fixed;
top: 5rem;
@ -107,7 +119,7 @@
list-style: none;
&.active {
& > .toc_a {
&>.toc_a {
color: hsl(var(--green) 72 60);
}
}

10
src/styles/docs/toc/types-toc.css
View file

@ -1,7 +1,15 @@
.toc-content {
height: 100%;
width: 100%;
overflow: scroll;
overflow-y: scroll;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
padding: 6px;
& .props-list {