mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-11 08:34:27 +02:00
Code Issues Releases Wiki Activity

feat: Presence indicator

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-20 18:19:19 +07:00
parent c64e8a5f81
commit 603336d667
7 changed files with 76 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
contents/_includes/patterns/presence-indicator.njk Normal file
View File

@@ -0,0 +1,3 @@
<div class="presence-indicator">
<div class="presence-indicator__indicator"></div>
</div>

1
contents/index.njk
View File

@@ -73,6 +73,7 @@ eleventyExcludeFromCollections: true
<h2 class="category__name">Feedback</h2> <h2 class="category__name">Feedback</h2>
<div class="category__posts"> <div class="category__posts">
{% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %} {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
{% pattern "Presence indicator" %}{% include "patterns/presence-indicator.njk" %}{% endpattern %}
{% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %} {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
{% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %} {% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %}
{% pattern "Resizable element" %}{% include "patterns/resizable-element.njk" %}{% endpattern %} {% pattern "Resizable element" %}{% include "patterns/resizable-element.njk" %}{% endpattern %}

46
contents/presence-indicator.md Normal file
View File

@@ -0,0 +1,46 @@
---
layout: layouts/post.njk
title: Presence indicator
description: Create a presence indicator with CSS
keywords: css indicator
---
## HTML
```html
<div class="presence-indicator">
<!-- Other element such as avatar -->
...
<!-- The presence indicator -->
<div class="presence-indicator__indicator"></div>
</div>
```
## CSS
```css
.presence-indicator {
position: relative;
}
.presence-indicator__indicator {
/* Shown at the bottom right corner */
bottom: 0;
position: absolute;
right: 0;
transform: translate(50%, 50%);
/* Rounded border */
border-radius: 9999px;
height: 1rem;
width: 1rem;
/* Background color */
background-color: #22c55e;
}
```
{% demo %}
{% include "patterns/presence-indicator.njk" %}
{% enddemo %}

95
pages/presence-indicator/index.tsx
View File

@@ -1,95 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.PresenceIndicator}>
<Head>
<meta name="description" content="Create a presence indicator with CSS" />
<meta name="og:description" content="Create a presence indicator with CSS" />
<meta name="twitter:description" content="Create a presence indicator with CSS" />
<meta name="keywords" content="css indicator" />
</Head>
<BrowserFrame
html={`
<div class="container">
<!-- Other element such as avatar -->
...
<!-- The presence indicator -->
<div class="container__indicator"></div>
</div>
`}
css={`
.container {
position: relative;
}
.container__indicator {
/* Shown at the bottom right corner */
bottom: 0,
position: absolute;
right: 0;
transform: translate(50%, 50%);
/* Rounded border */
border-radius: 9999px;
height: 16px;
width: 16px;
/* Background color */
background-color: #FF4136;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
height: '64px',
marginRight: '16px',
position: 'relative',
width: '64px',
}}
>
<Circle size={64} />
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '16px',
}}
/>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns
patterns={[Pattern.Avatar, Pattern.AvatarList, Pattern.DockedAtCorner, Pattern.InitialAvatar]}
/>
</PatternLayout>
);
};
export default Details;

45
patterns/presence-indicator/Cover.tsx
View File

@@ -1,45 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '9999px',
height: '32px',
position: 'relative',
width: '32px',
}}
>
<div
style={{
backgroundColor: '#FF4136',
borderRadius: '9999px',
bottom: 0,
height: '8px',
position: 'absolute',
right: 0,
transform: 'translate(50%, 50%)',
width: '8px',
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -44,6 +44,7 @@
@import './patterns/media-object'; @import './patterns/media-object';
@import './patterns/overlay-play-button'; @import './patterns/overlay-play-button';
@import './patterns/popover-arrow'; @import './patterns/popover-arrow';
@import './patterns/presence-indicator';
@import './patterns/price-tag'; @import './patterns/price-tag';
@import './patterns/pricing-table'; @import './patterns/pricing-table';
@import './patterns/progress-bar'; @import './patterns/progress-bar';

25
styles/patterns/_presence-indicator.scss Normal file
View File

@@ -0,0 +1,25 @@
.presence-indicator {
position: relative;
/* Demo */
background-color: #d1d5db;
border-radius: 9999px;
height: 6rem;
width: 6rem;
}
.presence-indicator__indicator {
/* Shown at the bottom right corner */
bottom: 0;
position: absolute;
right: 0;
transform: translate(50%, 50%);
/* Rounded border */
border-radius: 9999px;
height: 1rem;
width: 1rem;
/* Background color */
background-color: #22c55e;
}