feat: add progress shortcode (#305)
This commit is contained in:
parent
0a01df1885
commit
b7de69863a
|
@ -50,6 +50,19 @@ Dolor sit, sumo unique argument um no. Gracie nominal id xiv. Romanesque acclima
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## Skills
|
||||||
|
|
||||||
|
<!-- prettier-ignore-start -->
|
||||||
|
<!-- spellchecker-disable -->
|
||||||
|
{{% progress title=Hacking value=95 icon=gblog_search %}}
|
||||||
|
{{% progress title=Cyber-Things value=80 icon=gblog_cloud_off %}}
|
||||||
|
{{% progress title=Coding value=65 icon=gblog_code %}}
|
||||||
|
{{% progress title=Eating value=85 icon=gblog_heart %}}
|
||||||
|
<!-- spellchecker-enable -->
|
||||||
|
<!-- prettier-ignore-end -->
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Contact
|
## Contact
|
||||||
|
|
||||||
<!-- prettier-ignore-start -->
|
<!-- prettier-ignore-start -->
|
||||||
|
|
|
@ -170,11 +170,11 @@ Hint shortcode can be used as hint/alerts/notification block.
|
||||||
|
|
||||||
### Attributes
|
### Attributes
|
||||||
|
|
||||||
| Name | Description | default |
|
| Name | Description | default |
|
||||||
| ---------------- | -------------------------------------------------------------------------------------- | --------- |
|
| ---------------- | --------------------------------------------------------------------------------------- | --------- |
|
||||||
| type | hint type | note |
|
| type | hint type | note |
|
||||||
| icon (optional) | custom icon to use,need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
|
| icon (optional) | custom icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
|
||||||
| title (optional) | hint title | undefined |
|
| title (optional) | hint title | undefined |
|
||||||
|
|
||||||
### Usage
|
### Usage
|
||||||
|
|
||||||
|
@ -455,3 +455,29 @@ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
|
||||||
<!-- spellchecker-enable -->
|
<!-- spellchecker-enable -->
|
||||||
|
|
||||||
Text continues here.
|
Text continues here.
|
||||||
|
|
||||||
|
## Progress
|
||||||
|
|
||||||
|
### Attributes
|
||||||
|
|
||||||
|
| Name | Description | default |
|
||||||
|
| ---------------- | -------------------------------------------------------------------------------- | --------- |
|
||||||
|
| value | progress value | 0 |
|
||||||
|
| icon (optional) | icon to use, need to be an icon from an [SVG sprite](/posts/features/icon-sets/) | undefined |
|
||||||
|
| title (optional) | progress title | undefined |
|
||||||
|
|
||||||
|
### Usage
|
||||||
|
|
||||||
|
<!-- prettier-ignore-start -->
|
||||||
|
```tpl
|
||||||
|
{{</* progress title=Eating value=65 icon=gblog_heart */>}}
|
||||||
|
```
|
||||||
|
<!-- prettier-ignore-end -->
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
<!-- prettier-ignore-start -->
|
||||||
|
<!-- spellchecker-disable -->
|
||||||
|
{{< progress title=Eating value=65 icon=gblog_heart >}}
|
||||||
|
<!-- spellchecker-enable -->
|
||||||
|
<!-- prettier-ignore-end -->
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{{ $type := default "note" (.Get "type") }}
|
{{- $type := default "note" (.Get "type") -}}
|
||||||
{{ $icon := .Get "icon" }}
|
{{- $icon := .Get "icon" -}}
|
||||||
{{ $title := default ($type | title) (.Get "title") }}
|
{{- $title := default ($type | title) (.Get "title") }}
|
||||||
|
|
||||||
|
|
||||||
<blockquote class="gblog-hint {{ $type | lower }}">
|
<blockquote class="gblog-hint {{ $type | lower }}">
|
||||||
|
|
|
@ -0,0 +1,23 @@
|
||||||
|
{{- $value := default 0 (.Get "value") -}}
|
||||||
|
{{- $title := .Get "title" -}}
|
||||||
|
{{- $icon := .Get "icon" -}}
|
||||||
|
|
||||||
|
|
||||||
|
<div class="gblog-progress">
|
||||||
|
<div class="gblog-progress__label flex justify-between">
|
||||||
|
<div class="gblog-progress__label--name flex align-center">
|
||||||
|
{{ with $icon -}}
|
||||||
|
<svg class="gblog-icon {{ . }}"><use xlink:href="#{{ . }}"></use></svg>
|
||||||
|
{{- end }}
|
||||||
|
{{ with $title }}<span>{{ . }}</span>{{ end }}
|
||||||
|
</div>
|
||||||
|
<div>{{ $value }}%</div>
|
||||||
|
</div>
|
||||||
|
<div class="gblog-progress__wrap">
|
||||||
|
<div
|
||||||
|
class="gblog-progress__bar"
|
||||||
|
data-percent="{{ $value }}"
|
||||||
|
style="width: {{ $value }}%;"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -245,3 +245,38 @@
|
||||||
padding: $padding-8;
|
padding: $padding-8;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gblog-progress {
|
||||||
|
margin-bottom: $padding-16;
|
||||||
|
|
||||||
|
&__label {
|
||||||
|
padding: $padding-4 0;
|
||||||
|
|
||||||
|
&--name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrap {
|
||||||
|
background-color: var(--accent-color-lite);
|
||||||
|
border-radius: 1em;
|
||||||
|
box-shadow: inset 0 0 0 $border-1 var(--accent-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__bar {
|
||||||
|
height: 1em;
|
||||||
|
border-radius: 1em;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
-45deg,
|
||||||
|
rgba(255, 255, 255, 0.125) 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 50%,
|
||||||
|
rgba(255, 255, 255, 0.125) 50%,
|
||||||
|
rgba(255, 255, 255, 0.125) 75%,
|
||||||
|
transparent 75%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
background-size: 2.5em 2.5em;
|
||||||
|
background-color: $main-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue