rdelaage
/
castopod
mirror of https://code.castopod.org/adaures/castopod.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(charts): set duration charts label to HHhMM for listening time analytics 

+ fix stylelint issues
This commit is contained in:
Yassine Doghri 2023-06-08 14:42:32 +00:00
parent d4d58b948b
commit 3fc1d8e18d
18 changed files with 87 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.stylelintrc.json
View File

@ -14,6 +14,7 @@
]
}
],
"no-descending-specificity": null
"no-descending-specificity": null,
"selector-class-pattern": null
}
}

2
app/Resources/js/modules/Charts.ts
View File

@ -149,7 +149,7 @@ const drawXYDurationChart = (
const yAxis = chart.yAxes.push(new am4charts.DurationAxis());
yAxis.baseUnit = "second";
chart.durationFormatter.durationFormat = "hh'h,' mm'mn'";
chart.durationFormatter.durationFormat = "hh'h'mm";
// Add data
chart.dataSource.url = dataUrl || "";

1
app/Resources/styles/breadcrumb.css
View File

@ -4,6 +4,7 @@
.breadcrumb-item + .breadcrumb-item::before {
@apply inline-block px-1;
color: hsl(var(--color-text-muted));
content: "/";
}

36
app/Resources/styles/choices.css
View File

@ -1,6 +1,6 @@
/*===============================
/* ===============================
= Choices =
===============================*/
=============================== */
@layer components {
.choices {
@ -21,8 +21,6 @@
.choices.is-disabled .choices__input {
opacity: 0.5;
cursor: not-allowed;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
@ -71,7 +69,7 @@
}
.choices[data-type*="select-one"] .choices__button:focus {
box-shadow: 0px 0px 0px 2px #00bcd4;
box-shadow: 0 0 0 2px #00bcd4;
}
.choices[data-type*="select-one"]
@ -80,7 +78,7 @@
display: none;
}
.choices[data-type*="select-one"]:after {
.choices[data-type*="select-one"]::after {
content: "";
height: 0;
width: 0;
@ -95,13 +93,13 @@
pointer-events: none;
}
.choices[data-type*="select-one"].is-open:after {
.choices[data-type*="select-one"].is-open::after {
border-color: transparent transparent hsl(var(--color-text-muted))
transparent;
margin-top: -7.5px;
}
.choices[data-type*="select-one"][dir="rtl"]:after {
.choices[data-type*="select-one"][dir="rtl"]::after {
left: 11.5px;
right: auto;
}
@ -212,12 +210,13 @@
}
.is-disabled .choices__list--multiple .choices__item {
background-color: #aaaaaa;
background-color: #aaa;
border: 1px solid #919191;
}
.choices__list--dropdown {
@apply z-50 border-2 shadow-lg border-contrast;
visibility: hidden;
position: absolute;
width: 100%;
@ -239,6 +238,7 @@
.is-flipped .choices__list--dropdown {
@apply border-b-0 rounded-t-lg rounded-b-none border-t-3;
top: auto;
bottom: 100%;
margin-top: 0;
@ -263,11 +263,12 @@
text-align: right;
}
@media (min-width: 640px) {
@media (width >= 640px) {
.choices__list--dropdown .choices__item--selectable {
padding-right: 100px;
}
.choices__list--dropdown .choices__item--selectable:after {
.choices__list--dropdown .choices__item--selectable::after {
content: attr(data-select-text);
font-size: 12px;
opacity: 0;
@ -276,12 +277,14 @@
top: 50%;
transform: translateY(-50%);
}
[dir="rtl"] .choices__list--dropdown .choices__item--selectable {
text-align: right;
padding-left: 100px;
padding-right: 10px;
}
[dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
[dir="rtl"] .choices__list--dropdown .choices__item--selectable::after {
right: auto;
left: 10px;
}
@ -291,7 +294,7 @@
background-color: hsl(var(--color-background-highlight));
}
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
.choices__list--dropdown .choices__item--selectable.is-highlighted::after {
opacity: 0.5;
}
@ -305,8 +308,6 @@
.choices__item--disabled {
cursor: not-allowed;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0.5;
}
@ -321,8 +322,6 @@
.choices__button {
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background-color: transparent;
@ -349,6 +348,7 @@
.choices__input:focus {
@apply outline-none;
box-shadow: none;
}
@ -362,4 +362,4 @@
}
}
/*===== End of Choices ======*/
/* ===== End of Choices ====== */

1
app/Resources/styles/colorRadioBtn.css
View File

@ -20,6 +20,7 @@
& + label {
@apply inline-block w-16 h-16 text-sm font-semibold rounded-full cursor-pointer border-contrast bg-accent-base text-accent-contrast border-3;
color: hsl(var(--color-text-muted));
}
}

4
app/Resources/styles/colors.css
View File

@ -4,21 +4,17 @@
--color-accent-hover: 172 100% 17%;
--color-accent-muted: 131 100% 12%;
--color-accent-contrast: 0 0% 100%;
--color-heading-foreground: 172 100% 17%;
--color-heading-background: 111 64% 94%;
--color-background-elevated: 0 0% 100%;
--color-background-base: 173 44% 96%;
--color-background-navigation: 172 100% 17%;
--color-background-header: 172 100% 17%;
--color-background-highlight: 111 64% 94%;
--color-background-backdrop: 0 0% 50%;
--color-border-subtle: 111 42% 86%;
--color-border-contrast: 0 0% 0%;
--color-border-navigation: 131 100% 12%;
--color-text-base: 158 8% 3%;
--color-text-muted: 172 8% 38%;
}

19
app/Resources/styles/custom.css
View File

@ -7,6 +7,7 @@
.ring-accent {
@apply outline-none ring-2 ring-offset-2;
/* FIXME: why doesn't ring-accent-base work? */
--tw-ring-opacity: 1;
--tw-ring-color: hsl(var(--color-accent-base) / var(--tw-ring-opacity));
@ -35,15 +36,15 @@
.backdrop-gradient {
background-image: linear-gradient(
180deg,
hsla(0 0% 35.29% / 0) 0%,
hsla(0 0% 34.53% / 0.034375) 16.36%,
hsla(0 0% 32.42% / 0.125) 33.34%,
hsla(0 0% 29.18% / 0.253125) 50.1%,
hsla(0 0% 24.96% / 0.4) 65.75%,
hsla(0 0% 19.85% / 0.546875) 79.43%,
hsla(0 0% 13.95% / 0.675) 90.28%,
hsla(0 0% 7.32% / 0.765625) 97.43%,
hsla(0 0% 0% / 0.8) 100%
hsla(0deg 0% 35.29% / 0%) 0%,
hsla(0deg 0% 34.53% / 3.44%) 16.36%,
hsla(0deg 0% 32.42% / 12.5%) 33.34%,
hsla(0deg 0% 29.18% / 25.3%) 50.1%,
hsla(0deg 0% 24.96% / 40%) 65.75%,
hsla(0deg 0% 19.85% / 54.7%) 79.43%,
hsla(0deg 0% 13.95% / 67.5%) 90.28%,
hsla(0deg 0% 7.32% / 76.6%) 97.43%,
hsla(0deg 0% 0% / 80%) 100%
);
}

1
app/Resources/styles/dropdown.css
View File

@ -2,6 +2,7 @@
[data-dropdown="menu"] {
@apply absolute z-50;
}
[data-dropdown="menu"]:not([data-show]) {
@apply hidden;
}

4
app/Resources/styles/fonts.css
View File

@ -19,7 +19,7 @@
/* inter-regular */
@font-face {
font-family: "Inter";
font-family: Inter;
font-style: normal;
font-weight: 400;
font-display: swap;
@ -28,7 +28,7 @@
/* inter-600 */
@font-face {
font-family: "Inter";
font-family: Inter;
font-style: normal;
font-weight: 600;
font-display: swap;

1
app/Resources/styles/formInputTabs.css
View File

@ -30,6 +30,7 @@
.form-input-tabs > input:checked + label::after {
@apply absolute inset-x-0 bottom-0 w-full mx-auto bg-accent-base;
content: "";
height: 0.2rem;
}

30
app/Resources/styles/index.css
View File

@ -1,15 +1,15 @@
@import "./tailwind.css";
@import "./custom.css";
@import "./fonts.css";
@import "./colors.css";
@import "./breadcrumb.css";
@import "./dropdown.css";
@import "./choices.css";
@import "./radioBtn.css";
@import "./colorRadioBtn.css";
@import "./switch.css";
@import "./radioToggler.css";
@import "./formInputTabs.css";
@import "./stickyHeader.css";
@import "./readMore.css";
@import "./seeMore.css";
@import url("./tailwind.css");
@import url("./custom.css");
@import url("./fonts.css");
@import url("./colors.css");
@import url("./breadcrumb.css");
@import url("./dropdown.css");
@import url("./choices.css");
@import url("./radioBtn.css");
@import url("./colorRadioBtn.css");
@import url("./switch.css");
@import url("./radioToggler.css");
@import url("./formInputTabs.css");
@import url("./stickyHeader.css");
@import url("./readMore.css");
@import url("./seeMore.css");

13
app/Resources/styles/inputRange.css
View File

@ -6,6 +6,7 @@
height: 5.25em;
font: 1em/1 arial, sans-serif;
}
[type="range"] {
flex: 1;
margin: 0;
@ -14,10 +15,12 @@
background: transparent;
font: inherit;
}
[type="range"],
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
}
[type="range"]::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
@ -25,6 +28,7 @@
height: 0.25em;
background: #ccc;
}
[type="range"]::-moz-range-track {
box-sizing: border-box;
border: none;
@ -32,6 +36,7 @@
height: 0.25em;
background: #ccc;
}
[type="range"]::-ms-track {
box-sizing: border-box;
border: none;
@ -39,6 +44,7 @@
height: 0.25em;
background: #ccc;
}
[type="range"]::-webkit-slider-thumb {
margin-top: -0.625em;
box-sizing: border-box;
@ -48,6 +54,7 @@
border-radius: 50%;
background: #f90;
}
[type="range"]::-moz-range-thumb {
box-sizing: border-box;
border: none;
@ -56,6 +63,7 @@
border-radius: 50%;
background: #f90;
}
[type="range"]::-ms-thumb {
margin-top: 0;
box-sizing: border-box;
@ -65,12 +73,15 @@
border-radius: 50%;
background: #f90;
}
[type="range"]::-ms-tooltip {
display: none;
}
[type="range"] ~ output {
display: none;
}
.js [type="range"] ~ output {
display: block;
position: absolute;

1
app/Resources/styles/radioBtn.css
View File

@ -16,6 +16,7 @@
& + label {
@apply inline-flex items-center py-2 pl-8 pr-2 text-sm font-semibold rounded-lg cursor-pointer border-contrast bg-elevated border-3;
color: hsl(var(--color-text-muted));
}
}

4
app/Resources/styles/readMore.css
View File

@ -6,12 +6,14 @@ Read more component (basic unstyled component)
@layer components {
.read-more {
@apply flex flex-col items-start;
/* You can update this variable directly in the html with the style attribute: style="--line-clamp: 3" */
--line-clamp: 3;
}
.read-more__text {
@apply overflow-hidden;
display: -webkit-box;
-webkit-line-clamp: var(--line-clamp);
-webkit-box-orient: vertical;
@ -19,6 +21,7 @@ Read more component (basic unstyled component)
.read-more__checkbox {
@apply absolute overflow-hidden whitespace-nowrap;
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;
@ -48,6 +51,7 @@ Read more component (basic unstyled component)
.read-more__checkbox:checked ~ .read-more__text {
--line-clamp: none;
-webkit-line-clamp: var(--line-clamp);
}
}

3
app/Resources/styles/seeMore.css
View File

@ -5,11 +5,13 @@
.see-more__content {
@apply relative overflow-hidden;
height: var(--content-height);
}
.see-more_content-fade {
@apply absolute bottom-0 left-0 w-full h-full pointer-events-none;
background-image: linear-gradient(
to bottom,
transparent 70%,
@ -19,6 +21,7 @@
.see-more__checkbox {
@apply absolute overflow-hidden whitespace-nowrap;
clip: rect(0 0 0 0);
clip-path: inset(100%);
height: 1px;

3
app/Resources/styles/switch.css
View File

@ -16,6 +16,7 @@
&:checked + .form-switch-slider::after {
@apply transform translate-x-0 left-2;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z'/%3E%3C/svg%3E%0A");
}
@ -40,6 +41,7 @@
&::after {
@apply translate-x-5;
left: 0;
top: -1px;
}
@ -47,6 +49,7 @@
&::before {
@apply absolute z-10 w-6 h-6 transition duration-200 rounded-full shadow bg-elevated ring-1 ring-black ring-opacity-5;
content: "";
left: 1px;
bottom: 1px;

10
app/Views/Components/Charts/XYDuration.php Normal file
View File

@ -0,0 +1,10 @@
<?php
declare(strict_types=1);
namespace App\Views\Components\Charts;
class XYDuration extends ChartsComponent
{
protected string $type = 'xy-duration-chart';
}

4
themes/cp_admin/podcast/analytics/listening_time.php
View File

@ -11,14 +11,14 @@
<?= $this->section('content') ?>
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<Charts.XY class="col-span-1" title="<?= lang('Charts.daily_listening_time') ?>" dataUrl="<?= route_to(
<Charts.XYDuration class="col-span-1" title="<?= lang('Charts.daily_listening_time') ?>" dataUrl="<?= route_to(
'analytics-data',
$podcast->id,
'Podcast',
'TotalListeningTimeByDay',
) ?>"/>
<Charts.XY class="col-span-1" title="<?= lang('Charts.monthly_listening_time') ?>" dataUrl="<?= route_to(
<Charts.XYDuration class="col-span-1" title="<?= lang('Charts.monthly_listening_time') ?>" dataUrl="<?= route_to(
'analytics-data',
$podcast->id,
'Podcast',