Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Information overlays #194

Merged
merged 30 commits into from
Nov 22, 2024
Merged

Information overlays #194

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
aaf8bcd
added basic implementation
damongolding Nov 20, 2024
23d423f
landscape mode and remove on polling restart
damongolding Nov 20, 2024
8754b81
damn JS!!
damongolding Nov 20, 2024
1df6799
clunky but it works
damongolding Nov 20, 2024
029613c
Update .coderabbit.yaml
damongolding Nov 20, 2024
bf3b535
Update .coderabbit.yaml
damongolding Nov 20, 2024
d196d48
Update image-more-info.css
damongolding Nov 20, 2024
dd8d983
Update .coderabbit.yaml
damongolding Nov 20, 2024
a59332c
Update .coderabbit.yaml
damongolding Nov 20, 2024
1e782c4
refinements
damongolding Nov 21, 2024
b1b5ba8
Merge branch 'feature/more-into-overlay' of https://github.com/damong…
damongolding Nov 21, 2024
be96fc4
design update (colours) and webhook trigger
damongolding Nov 21, 2024
39eeade
consistency and http reinit safety
damongolding Nov 21, 2024
dd20266
new colour and rate limiter
damongolding Nov 21, 2024
15be838
added a signature on the webhook endpoint
damongolding Nov 21, 2024
2652519
Delete .coderabbit.yaml
damongolding Nov 21, 2024
c8f8ca6
housekeeping
damongolding Nov 21, 2024
5de4ab6
Update common.go
damongolding Nov 21, 2024
47d8c27
better more info design
damongolding Nov 22, 2024
4d5cb2a
landscape fix and docs
damongolding Nov 22, 2024
57ba92a
removing generated files
damongolding Nov 22, 2024
eddd48e
templ in docker build step
damongolding Nov 22, 2024
966ffec
generate templ files in actions
damongolding Nov 22, 2024
621cdda
rename css and remove dups
damongolding Nov 22, 2024
fb279d3
Update custom.example.css
damongolding Nov 22, 2024
fd1c4ce
add docs
damongolding Nov 22, 2024
f448363
Merge pull request #195 from damongolding/docs/contributing
damongolding Nov 22, 2024
3ff9104
only show webhook button is a webhook is set in config
damongolding Nov 22, 2024
7f36ce4
docs a ts safety
damongolding Nov 22, 2024
7085966
task file desc
damongolding Nov 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions custom.example.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ to{}
.frameless .frame--layout-splitview-landscape{}
.frame--layout-splitview-landscape .frame--image{}
/* src/css/image.css */
.polling-paused.more-info .image--metadata{}
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Empty CSS blocks require implementation

The following selectors have empty blocks that need to be implemented with appropriate styles:

  1. Image metadata styles:

    • .polling-paused.more-info .image--metadata

  2. More info overlay styles:

    • #more-info
    • .polling-paused.more-info .frame--image img
    • .polling-paused.more-info #more-info
    • .polling-paused.more-info #more-info .more-info--image
    • .polling-paused.more-info #more-info .more-info--image .more-info--image--data
    • .polling-paused.more-info #more-info .more-info--image h3
    • .polling-paused.more-info #more-info .more-info--image a
    • .polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code
    • .polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code img
    • .layout-splitview-landscape #more-info
    • .layout-splitview-landscape #more-info .more-info--image

  3. Container styles:

    • .polling-paused.more-info #clock-weather-container

  4. Navigation styles:

    • .navigation--more-info svg

Would you like me to help generate the CSS implementations for these selectors based on the AI summary's description of the intended functionality?

Also applies to: 66-76, 93-93, 161-161

🧰 Tools
🪛 Biome

[error] 43-43: An empty block isn't allowed.

Consider removing the empty block or adding styles inside it.

(lint/suspicious/noEmptyBlock)

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add this file to ignore list

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@damongolding, understood. To have CodeRabbit ignore this file in future reviews, you can add a path filter to your CodeRabbit configuration. Here's how you can do it:

In your .coderabbit.yml configuration file, add the following:

path_filters:
  - path: 'custom.example.css'
    action: ignore

This will instruct CodeRabbit to skip reviewing custom.example.css. For more details on path-based instructions, you can refer to the CodeRabbit documentation:

Path-based and AST-based Instructions

Let me know if you need any assistance with this configuration.

.image--metadata{}
.image--metadata--theme-fade::before{}
.frame--layout-splitview:nth-child(1) .image--metadata--theme-fade::before{}
Expand All @@ -61,6 +62,18 @@ to{}
.frame .frame--image-smart-zoom-in img{}
.polling-paused .frame{}
.polling-paused .frame img{}
/* src/css/image-more-info.css */
#more-info{}
.polling-paused.more-info .frame--image img{}
.polling-paused.more-info #more-info{}
.polling-paused.more-info #more-info .more-info--image{}
.polling-paused.more-info #more-info .more-info--image .more-info--image--data{}
.polling-paused.more-info #more-info .more-info--image h3{}
.polling-paused.more-info #more-info .more-info--image a{}
.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code{}
.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code img{}
.layout-splitview-landscape #more-info{}
.layout-splitview-landscape #more-info .more-info--image{}
/* src/css/error.css */
.error-container{}
.error{}
Expand All @@ -77,6 +90,7 @@ to{}
.offline{}
.sleep #offline{}
/* src/css/clock-weather-container.css */
.polling-paused.more-info #clock-weather-container{}
#clock-weather-container{}
.layout-splitview #clock-weather-container{}
.sleep #clock-weather-container{}
Expand Down Expand Up @@ -144,6 +158,7 @@ to{}
.navigation--fullscreen--exit{}
.navigation--fullscreen-enabled .navigation--fullscreen--exit{}
.navigation--fullscreen-enabled .navigation--fullscreen--enter{}
.navigation--more-info svg{}
.navigation--media-buttons{}
.navigation--media-buttons .navigation--item{}
.navigation--play-pause--play{}
Expand Down
112 changes: 108 additions & 4 deletions frontend/public/assets/css/kiosk.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,6 +368,9 @@ body {
}

/* src/css/image.css */
.polling-paused.more-info .image--metadata {
opacity: 0.2;
}
.image--metadata {
position: absolute;
display: -webkit-flex;
Expand Down Expand Up @@ -548,6 +551,100 @@ body {
}
}

/* src/css/image-more-info.css */
#more-info {
display: none;
}
.polling-paused.more-info .frame--image img {
-webkit-filter: grayscale(1) blur(4px) brightness(0.4);
filter: grayscale(1) blur(4px) brightness(0.4);
}
damongolding marked this conversation as resolved.
Show resolved Hide resolved
.polling-paused.more-info #more-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-box;
display: flex;
gap: 0.4rem;
padding: 0.4rem;
z-index: 99998;
}
.polling-paused.more-info #more-info .more-info--image {
width: 100%;
height: 100%;
background-color: rgb(51 52 96 / 60%);
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
padding: 6rem 3rem 3rem 3rem;
color: #fff;
border-radius: 0.74rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove duplicate display:flex declarations and consider accessibility improvements.

There are a few issues to address in the more-info overlay styles:

  1. Duplicate display:flex declarations (lines 568-570 and 592-593)
  2. The background colour rgb(51 52 96 / 60%) might not provide sufficient contrast for text

Apply this diff to fix the duplicates and improve accessibility:

    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
            flex-direction: column;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
            justify-content: space-between;
    padding: 6rem 3rem 3rem 3rem;
    color: #fff;
    border-radius: 0.74rem;
-   display: flex;
-   flex-direction: column;
    gap: 2rem;
+   background-color: rgba(51, 52, 96, 0.85);
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/* src/css/image-more-info.css */
#more-info {
display: none;
}
.polling-paused.more-info .frame--image img {
-webkit-filter: grayscale(1) blur(4px) brightness(0.4);
filter: grayscale(1) blur(4px) brightness(0.4);
}
.polling-paused.more-info #more-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-box;
display: flex;
gap: 0.4rem;
padding: 0.4rem;
z-index: 99998;
}
.polling-paused.more-info #more-info .more-info--image {
width: 100%;
height: 100%;
background-color: rgb(51 52 96 / 60%);
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
padding: 6rem 3rem 3rem 3rem;
color: #fff;
border-radius: 0.74rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
/* src/css/image-more-info.css */
#more-info {
display: none;
}
.polling-paused.more-info .frame--image img {
-webkit-filter: grayscale(1) blur(4px) brightness(0.4);
filter: grayscale(1) blur(4px) brightness(0.4);
}
.polling-paused.more-info #more-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: -webkit-flex;
display: -moz-box;
display: flex;
gap: 0.4rem;
padding: 0.4rem;
z-index: 99998;
}
.polling-paused.more-info #more-info .more-info--image {
width: 100%;
height: 100%;
background-color: rgba(51, 52, 96, 0.85);
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-justify-content: space-between;
-moz-box-pack: justify;
justify-content: space-between;
padding: 6rem 3rem 3rem 3rem;
color: #fff;
border-radius: 0.74rem;
gap: 2rem;
}

Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ignore everything in frontend/public/*

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@damongolding, to have CodeRabbit ignore everything in frontend/public/*, you can update your CodeRabbit configuration to exclude this path using the path_filters option. Here's how you can set it up:

path_filters:
  exclude:
    - 'frontend/public/*'

This will prevent files under frontend/public/ from being included in future code reviews.

.polling-paused.more-info #more-info .more-info--image .more-info--image--data {
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-flex: 1;
-moz-box-flex: 1;
flex: 1;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
gap: 2rem;
}
.polling-paused.more-info #more-info .more-info--image h3 {
margin: 0.5rem 0;
}
.polling-paused.more-info #more-info .more-info--image a {
font-weight: 600;
text-decoration: underline;
color: #fff;
}
.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code {
display: -webkit-flex;
display: -moz-box;
display: flex;
-webkit-align-items: flex-end;
-moz-box-align: end;
align-items: flex-end;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.polling-paused.more-info #more-info .more-info--image .more-info--image--qr-code img {
max-width: 14rem;
border-radius: 0.5rem;
}
.layout-splitview-landscape #more-info {
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
flex-direction: column;
}
.layout-splitview-landscape #more-info .more-info--image {
-webkit-flex-direction: row;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
flex-direction: row;
}

/* src/css/error.css */
.error-container {
position: absolute;
Expand Down Expand Up @@ -634,6 +731,9 @@ body {
}

/* src/css/clock-weather-container.css */
.polling-paused.more-info #clock-weather-container {
opacity: 0.2;
}
#clock-weather-container {
position: absolute;
display: -webkit-flex;
Expand Down Expand Up @@ -1130,7 +1230,7 @@ body {
justify-content: center;
width: 100%;
height: 100%;
z-index: 99999;
z-index: 99997;
background-color: transparent;
}
#navigation-interaction-area--previous-image,
Expand All @@ -1147,7 +1247,7 @@ body {
display: -webkit-flex;
display: -moz-box;
display: flex;
gap: 1.6rem;
gap: 1.4rem;
position: absolute;
top: 1rem;
right: 50%;
Expand Down Expand Up @@ -1194,8 +1294,8 @@ body {
}
.navigation svg {
fill: white;
width: 2rem;
height: 2rem;
width: 1.8rem;
height: 1.8rem;
}
.rounded {
border-radius: 40rem;
Expand All @@ -1216,6 +1316,10 @@ body {
display: none;
visibility: hidden;
}
.navigation--more-info svg {
width: 1.5rem;
height: 1.5rem;
}
.navigation--media-buttons {
display: -webkit-flex;
display: -moz-box;
Expand Down
2 changes: 1 addition & 1 deletion frontend/public/assets/js/kiosk.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions frontend/src/css/clock-weather-container.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
.polling-paused.more-info {
#clock-weather-container {
opacity: 0.2;
}
}

#clock-weather-container {
position: absolute;
display: flex;
Expand Down
79 changes: 79 additions & 0 deletions frontend/src/css/image-more-info.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
#more-info {
display: none;
}

.polling-paused.more-info {
.frame--image img {
filter: grayscale(1) blur(4px) brightness(0.4);
}

#more-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

display: flex;
gap: 0.4rem;
padding: 0.4rem;

z-index: 99998;

.more-info--image {
width: 100%;
height: 100%;
background-color: rgb(51 52 96 / 60%);

display: flex;
flex-direction: column;
justify-content: space-between;

padding: 6rem 3rem 3rem 3rem;
color: #fff;
border-radius: 0.74rem;

display: flex;
flex-direction: column;
gap: 2rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Remove duplicate flex properties

The flex properties are declared twice. Remove the duplicate declarations to improve maintainability.

            display: flex;
            flex-direction: column;
            justify-content: space-between;

            padding: 6rem 3rem 3rem 3rem;
            color: #fff;
            border-radius: 0.74rem;

-            display: flex;
-            flex-direction: column;
            gap: 2rem;
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rem 3rem 3rem 3rem;
color: #fff;
border-radius: 0.74rem;
display: flex;
flex-direction: column;
gap: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rem 3rem 3rem 3rem;
color: #fff;
border-radius: 0.74rem;
gap: 2rem;


.more-info--image--data {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
gap: 2rem;
}

h3 {
margin: 0.5rem 0;
}

a {
font-weight: 600;
text-decoration: underline;
color: #fff;
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Enhance accessibility and user experience

The link styles should include focus and hover states, and state changes should be smooth.

            a {
                font-weight: 600;
                text-decoration: underline;
                color: #fff;
+                transition: opacity 0.2s ease;
+                
+                &:hover,
+                &:focus {
+                    opacity: 0.8;
+                    outline: 2px solid #fff;
+                    outline-offset: 2px;
+                }
            }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
a {
font-weight: 600;
text-decoration: underline;
color: #fff;
}
a {
font-weight: 600;
text-decoration: underline;
color: #fff;
transition: opacity 0.2s ease;
&:hover,
&:focus {
opacity: 0.8;
outline: 2px solid #fff;
outline-offset: 2px;
}
}


.more-info--image--qr-code {
display: flex;
align-items: flex-end;
justify-content: center;
img {
max-width: 14rem;
border-radius: 0.5rem;
}
}
}
}
}

.layout-splitview-landscape {
#more-info {
flex-direction: column;

.more-info--image {
flex-direction: row;
}
}
}
6 changes: 6 additions & 0 deletions frontend/src/css/image.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
/* --- image metadata --- */
.polling-paused.more-info {
.image--metadata {
opacity: 0.2;
}
}
Comment on lines +2 to +6
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Consider increasing the opacity value for better accessibility

Whilst the reduced opacity effectively indicates the paused state, the value of 0.2 might be too low for users with visual impairments. The Web Content Accessibility Guidelines (WCAG) recommend maintaining sufficient contrast ratios.

Consider adjusting the opacity to a more accessible value:

.polling-paused.more-info {
    .image--metadata {
-        opacity: 0.2;
+        opacity: 0.4;
    }
}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.polling-paused.more-info {
.image--metadata {
opacity: 0.2;
}
}
.polling-paused.more-info {
.image--metadata {
opacity: 0.4;
}
}


.image--metadata {
position: absolute;
display: flex;
Expand Down
1 change: 1 addition & 0 deletions frontend/src/css/kiosk.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@import url("./spinner.css");
@import url("./frame.css");
@import url("./image.css");
@import url("./image-more-info.css");
@import url("./error.css");
@import url("./progress.css");
@import url("./offline.css");
Expand Down
15 changes: 11 additions & 4 deletions frontend/src/css/menu.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
justify-content: center;
width: 100%;
height: 100%;
z-index: 99999;
z-index: 99997;
background-color: transparent;
}

Expand All @@ -28,7 +28,7 @@
/* --- menu --- */
.navigation {
display: flex;
gap: 1.6rem;
gap: 1.4rem;
position: absolute;
top: 1rem;
right: 50%;
Expand Down Expand Up @@ -71,8 +71,8 @@

.navigation svg {
fill: white;
width: 2rem;
height: 2rem;
width: 1.8rem;
height: 1.8rem;
}

.rounded {
Expand Down Expand Up @@ -102,6 +102,13 @@
}
}

.navigation--more-info {
svg {
width: 1.5rem;
height: 1.5rem;
}
}

/* nav controls */
.navigation--media-buttons {
display: flex;
Expand Down
Loading
Loading