diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 4fd3194b9..884e2a2d2 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -996,7 +996,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default; $box-shadow-transparent: 0 0 0 0 transparent !default; $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default; $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default; -$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default; +$box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default; $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default; $box-shadow-dropdown: 0 16px 24px 2px rgba(0, 0, 0, 0.07), diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss index 4577b5ab4..7189d22b8 100644 --- a/core/scss/ui/_alerts.scss +++ b/core/scss/ui/_alerts.scss @@ -1,10 +1,11 @@ .alert { - --#{$prefix}alert-color: var(--#{$prefix}body-color); - --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1, var(--#{$prefix}bg-surface))}; + --#{$prefix}alert-variant-color: var(--#{$prefix}body-color); + --#{$prefix}alert-color: color-mix(in srgb, var(--#{$prefix}alert-variant-color) 50%, var(--#{$prefix}body-color)); + --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))}; --#{$prefix}alert-padding-x: #{$alert-padding-x}; --#{$prefix}alert-padding-y: #{$alert-padding-y}; --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; - --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2, + --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))}; --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color); --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius); @@ -17,6 +18,8 @@ background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface)); border-radius: var(--#{$prefix}alert-border-radius); border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color); + box-shadow: var(--#{$prefix}box-shadow); + color: var(--#{$prefix}alert-color); display: flex; flex-direction: row; gap: 1rem; @@ -94,6 +97,6 @@ @each $name, $color in $theme-colors { .alert-#{$name} { - --#{$prefix}alert-color: var(--#{$prefix}#{$name}); + --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name}); } } diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss index 244957997..3759606cd 100644 --- a/core/scss/ui/_avatars.scss +++ b/core/scss/ui/_avatars.scss @@ -59,6 +59,10 @@ border-radius: $border-radius-pill; } +.avatar-square { + border-radius: var(--#{$prefix}border-radius); +} + @each $avatar-size, $size in $avatar-sizes { .avatar-#{$avatar-size} { --#{$prefix}avatar-size: #{map.get($size, size)}; @@ -67,14 +71,14 @@ --#{$prefix}avatar-icon-size: #{map.get($size, icon-size)}; --#{$prefix}avatar-brand-size: #{map.get($size, brand-size)}; - @if map.has-key($size, border-radius) { - border-radius: map.get($size, border-radius); - } - .badge:empty { width: map.get($size, status-size); height: map.get($size, status-size); } + + &.avatar-square { + --#{$prefix}avatar-border-radius: #{map.get($size, border-radius)}; + } } } diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss index 35e395d76..0c4187343 100644 --- a/core/scss/ui/_cards.scss +++ b/core/scss/ui/_cards.scss @@ -57,6 +57,7 @@ .card-transparent { background: transparent; border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color); + box-shadow: none; } // Card stamp diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss index af08ec406..510f64c2d 100644 --- a/core/scss/ui/_progress.scss +++ b/core/scss/ui/_progress.scss @@ -93,6 +93,8 @@ Progressbg .progressbg-text { position: relative; z-index: 1; + display: flex; + align-items: center; @include text-truncate; } diff --git a/shared/e11ty/filters.mjs b/shared/e11ty/filters.mjs index 1765f0894..4cc2a09f5 100644 --- a/shared/e11ty/filters.mjs +++ b/shared/e11ty/filters.mjs @@ -160,31 +160,36 @@ export function appFilters(eleventyConfig) { // time ago from today eleventyConfig.addFilter("timeago", function (date) { - const seconds = Math.floor((new Date() - date) / 1000); + let seconds; + if (typeof date === 'number') { + seconds = date; + } else { + seconds = Math.floor((new Date() - date) / 1000); + } let interval = Math.floor(seconds / 31536000); - if (interval > 1) { - return interval + " years ago"; + if (interval >= 1) { + return `${interval} year${interval > 1 ? 's' : ''} ago`; } interval = Math.floor(seconds / 2592000); - if (interval > 1) { - return interval + " months ago"; + if (interval >= 1) { + return `${interval} month${interval > 1 ? 's' : ''} ago`; } interval = Math.floor(seconds / 86400); - if (interval > 1) { - return interval + " days ago"; + if (interval >= 1) { + return `${interval} day${interval > 1 ? 's' : ''} ago`; } interval = Math.floor(seconds / 3600); - if (interval > 1) { - return interval + " hours ago"; + if (interval >= 1) { + return `${interval} hour${interval > 1 ? 's' : ''} ago`; } interval = Math.floor(seconds / 60); - if (interval > 1) { - return interval + " minutes ago"; + if (interval >= 1) { + return `${interval} minute${interval > 1 ? 's' : ''} ago`; } if (seconds > 0) { - return Math.floor(seconds) + " seconds ago"; + return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`; } return "now"; diff --git a/shared/includes/cards/card.html b/shared/includes/cards/card.html index c8ebe70ce..b471b5c45 100644 --- a/shared/includes/cards/card.html +++ b/shared/includes/cards/card.html @@ -2,7 +2,7 @@ <{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}"> {% if include['empty'] %} - {% include "ui/empty.html" illustration=true %} + {% include "ui/empty.html" illustration="not-found" height=160 %} {% else %} diff --git a/shared/includes/cards/charts/revenue.html b/shared/includes/cards/charts/revenue.html index f346de845..b293368bd 100644 --- a/shared/includes/cards/charts/revenue.html +++ b/shared/includes/cards/charts/revenue.html @@ -13,5 +13,5 @@ - {% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom" %} + {% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom-3" %} diff --git a/shared/includes/cards/small-stats.html b/shared/includes/cards/small-stats.html index 7281489e7..cbcdb4c05 100644 --- a/shared/includes/cards/small-stats.html +++ b/shared/includes/cards/small-stats.html @@ -1,11 +1,12 @@ {% assign chart-type = include.chart-type | default: 'line' %} {% assign chart-position = include.chart-position | default: 'right' %} +{% assign chart-color = include.color | default: 'primary' %}
{% if include.icon %}
- {% include "ui/icon.html" icon=include.icon %} + {% include "ui/icon.html" icon=include.icon %}
{% elsif include.person-id %}
@@ -30,13 +31,24 @@
{{ include.description | default: "Users" }} -
{% if include.chart-data and chart-position=="right" %}
- {% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %} + {% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=chart-color label=include.chart-label label-icon=include.chart-label-icon %} +
+ {% endif %} + + {% if include.trending %} +
+ {% include "ui/trending.html" value=include.trending %} +
+ {% endif %} + + {% if include.button %} +
+ {% include "ui/button.html" text=include.button size="sm" %}
{% endif %}
diff --git a/shared/includes/cards/tables/progressbg.html b/shared/includes/cards/tables/progressbg.html index 1757a7fb2..b9539292b 100644 --- a/shared/includes/cards/tables/progressbg.html +++ b/shared/includes/cards/tables/progressbg.html @@ -10,12 +10,12 @@ - {% for url in urls %} + {% for url in urls limit: 8 %} {% include "ui/progressbg.html" value=url.bounce text=url.uri %} - {{ url.visitors }} + {{ url.visitors }} {% endfor %} diff --git a/shared/includes/ui/alert.html b/shared/includes/ui/alert.html index c519311a5..fa579cd4f 100644 --- a/shared/includes/ui/alert.html +++ b/shared/includes/ui/alert.html @@ -12,7 +12,7 @@ {%- assign icon = 'info-circle' -%} {%- endif -%} {%- endunless -%} -