Cleaner GridItem width overriding; remembered scroll position
This commit is contained in:
parent
b50e79ae4d
commit
251b1e7501
6 changed files with 135 additions and 119 deletions
|
|
@ -1,67 +1,106 @@
|
|||
---
|
||||
import Icon from './Icon.astro';
|
||||
|
||||
export interface Props {
|
||||
id: string;
|
||||
title: string;
|
||||
text: string;
|
||||
url: string;
|
||||
elemClass?: Array<String>;
|
||||
btnClass?: Array<string>;
|
||||
dataJs?: string;
|
||||
width?: number;
|
||||
}
|
||||
|
||||
const {
|
||||
id,
|
||||
title, text, url,
|
||||
elemClass = [],
|
||||
btnClass = [],
|
||||
dataJs = "",
|
||||
width = 9,
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<div class:list={["gi", ...elemClass]}>
|
||||
<a href={url} target="_blank" class="gi-main">
|
||||
<span class="icon-wrapper">
|
||||
<slot name="icon-primary" />
|
||||
</span>
|
||||
<span class="content">
|
||||
<span class="title">
|
||||
<slot name="title">
|
||||
{title}
|
||||
</slot>
|
||||
<div class="gi" id={id}>
|
||||
<div class="gi-row">
|
||||
<div class="gi-main">
|
||||
<span class="icon-wrapper">
|
||||
<slot name="icon-primary" />
|
||||
</span>
|
||||
<span class="text">
|
||||
<slot name="text">
|
||||
{text}
|
||||
</slot>
|
||||
<span class="content">
|
||||
<span class="title">
|
||||
<slot name="title">
|
||||
{title}
|
||||
</slot>
|
||||
</span>
|
||||
<span class="text">
|
||||
<slot name="text">
|
||||
{text}
|
||||
</slot>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</a>
|
||||
<a href="javascript:void(0)" class:list={["gi-btn", ...btnClass]} data-js={dataJs}>
|
||||
<span class="icon-wrapper">
|
||||
<slot name="icon-btn" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<a href={`#${id}`} class="gi-btn gi-btn-expand">
|
||||
<span class="icon-wrapper">
|
||||
<Icon code="" />
|
||||
</span>
|
||||
</a>
|
||||
<a href="#scroll" class="gi-btn gi-btn-close">
|
||||
<span class="icon-wrapper">
|
||||
<Icon code="" />
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="gi-options">
|
||||
<slot name="options" />
|
||||
</div>
|
||||
<div class="gi-options gi-note">
|
||||
<slot name="note" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="less">
|
||||
@import "/src/styles/grid_calc.less";
|
||||
|
||||
<style lang="less" define:vars={{width: `${width}rem`}}>
|
||||
.gi {
|
||||
// vertical horizontal
|
||||
padding: 0.4rem @gi-horiz-padding;
|
||||
padding: 0.4rem 0.6rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
width: @gi-width;
|
||||
min-height: 3rem;
|
||||
border-radius: var(--bdrs);
|
||||
|
||||
&:hover {
|
||||
background: var(--accent-bg);
|
||||
}
|
||||
|
||||
.gi-options { display: none }
|
||||
.gi-btn-close { display: none }
|
||||
.gi-btn-expand { display: flex }
|
||||
|
||||
&:target {
|
||||
background: var(--accent-bg);
|
||||
|
||||
.gi-options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
:global(.icon) {
|
||||
@icon-size: 1.75rem;
|
||||
|
||||
font-size: @icon-size;
|
||||
width: @icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.gi-btn-close { display: flex }
|
||||
.gi-btn-expand { display: none }
|
||||
}
|
||||
}
|
||||
|
||||
a.gi-main {
|
||||
.gi-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gi-main {
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -73,17 +112,36 @@ const {
|
|||
text-decoration: none;
|
||||
|
||||
.icon-wrapper {
|
||||
width: @gi-icon-primary;
|
||||
font-size: @gi-icon-primary;
|
||||
margin-right: @gi-icon-margin;
|
||||
@icon-size: 2.3rem;
|
||||
|
||||
width: @icon-size;
|
||||
font-size: @icon-size;
|
||||
margin-right: 0.4rem;
|
||||
|
||||
& > :global(img) {
|
||||
width: @gi-icon-primary;
|
||||
width: @icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: var(--width);
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--fg-sec);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.gi-btn {
|
||||
.gi-btn {
|
||||
position: relative;
|
||||
font-size: 1.1rem;
|
||||
|
||||
|
|
@ -92,12 +150,14 @@ const {
|
|||
align-items: center;
|
||||
|
||||
.icon-wrapper {
|
||||
width: @gi-icon-btn;
|
||||
font-size: @gi-icon-btn;
|
||||
margin-left: @gi-icon-margin;
|
||||
@icon-size: 1.25rem;
|
||||
|
||||
width: @icon-size;
|
||||
font-size: @icon-size;
|
||||
margin-left: 0.4rem;
|
||||
|
||||
& > :global(img) {
|
||||
width: @gi-icon-btn;
|
||||
width: @icon-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -106,22 +166,7 @@ const {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: @gi-text-width;
|
||||
overflow: hidden;
|
||||
|
||||
.title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 0.9rem;
|
||||
color: var(--fg-sec);
|
||||
}
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,23 +12,11 @@ const { name, description, url, iconUrl = `${url}/favicon.ico` } = Astro.props;
|
|||
---
|
||||
|
||||
<GridItem
|
||||
id={`s-${name.toLowerCase()}`}
|
||||
title={name}
|
||||
text={description}
|
||||
url={url}
|
||||
elemClass={["gi-service"]}
|
||||
width={14}
|
||||
>
|
||||
<img src={iconUrl} slot="icon-primary" />
|
||||
</GridItem>
|
||||
|
||||
<style lang="less" is:global>
|
||||
@import "/src/styles/grid_calc.less";
|
||||
|
||||
// Overwriting default GridItem's width
|
||||
.gi-service {
|
||||
width: @service-width;
|
||||
|
||||
.content {
|
||||
width: @service-text-width;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,26 +8,37 @@ export interface Props {
|
|||
name: string;
|
||||
icon: string;
|
||||
copyName?: boolean;
|
||||
note?: string;
|
||||
}
|
||||
|
||||
const { app, url, name, icon, copyName = false } = Astro.props;
|
||||
const {
|
||||
app, url, name, icon,
|
||||
copyName = false,
|
||||
note = "",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
<GridItem
|
||||
id={`p-${app.toLowerCase()}`}
|
||||
title={app} text={name} url={url}
|
||||
elemClass={["gi-profile"]}
|
||||
btnClass={["profile-copy"]}
|
||||
dataJs={copyName ? name : url}
|
||||
width={9.5}
|
||||
>
|
||||
<Icon code={icon} slot="icon-primary" />
|
||||
<Icon code="" slot="icon-btn" />
|
||||
<Fragment slot="options">
|
||||
<a href="javascript:void(0)" class="profile-copy" data-url={copyName ? name : url}>
|
||||
<Icon code="" />
|
||||
</a>
|
||||
<a href={url}>
|
||||
<Icon code="" />
|
||||
</a>
|
||||
</Fragment>
|
||||
</GridItem>
|
||||
|
||||
<script>
|
||||
const copy = document.querySelectorAll('.profile-copy')
|
||||
const copyClickHandler = (ev: Event) => {
|
||||
const elem = ev.currentTarget as HTMLElement
|
||||
const link = elem.dataset.js
|
||||
const link = elem.dataset.url
|
||||
if (!link) return
|
||||
navigator.clipboard.writeText(link)
|
||||
}
|
||||
|
|
@ -35,15 +46,3 @@ const { app, url, name, icon, copyName = false } = Astro.props;
|
|||
elem.addEventListener('click', copyClickHandler)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" is:global>
|
||||
@import "/src/styles/grid_calc.less";
|
||||
|
||||
.gi-profile {
|
||||
width: @profile-width;
|
||||
|
||||
.content {
|
||||
width: @profile-text-width;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const { title, description } = Astro.props;
|
|||
<title>{title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="scroll"></div>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -44,7 +45,7 @@ const { title, description } = Astro.props;
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
main {
|
||||
margin: auto;
|
||||
padding: @main-padding;
|
||||
max-width: @max-width;
|
||||
|
|
@ -113,3 +114,11 @@ const { title, description } = Astro.props;
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
#scroll {
|
||||
position: fixed;
|
||||
display: block;
|
||||
height: 1px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const { id } = Astro.props;
|
|||
---
|
||||
|
||||
<div class="modal-bg" id={id}>
|
||||
<a href="#" class="modal-bg-close"></a>
|
||||
<a href="#scroll" class="modal-bg-close"></a>
|
||||
<div class="modal">
|
||||
<div class="controls">
|
||||
<a href="#"><Icon code="" /></a>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
@import "/src/styles/max_width.less";
|
||||
|
||||
@gi-icon-primary: 2.3rem;
|
||||
@gi-icon-btn: 1.8rem;
|
||||
|
||||
@gi-text-width: 9.5rem;
|
||||
@profile-text-width: 9rem;
|
||||
@service-text-width: 14rem;
|
||||
|
||||
@gi-icon-margin: 0.4rem;
|
||||
@gi-horiz-padding: 0.6rem;
|
||||
|
||||
// GridItem width without text
|
||||
@gi-width-wo-text: @gi-horiz-padding + @gi-icon-primary + @gi-icon-margin + @gi-icon-margin + @gi-icon-btn + @gi-horiz-padding;
|
||||
|
||||
@gi-width: @gi-width-wo-text + @gi-text-width;
|
||||
@profile-width: @gi-width-wo-text + @profile-text-width;
|
||||
@service-width: @gi-width-wo-text + @service-text-width;
|
||||
|
||||
.grid-mixin() {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue