add latency to terminal window #463

SuperDuperAlon · 2024-04-04T12:54:33Z

Summary by CodeRabbit

Style
- Enhanced positioning, styling, and responsiveness of various elements like .windows-container, .search-container, and .gate in the CSS file.
Bug Fixes
- Rectified positioning logic in the Gate class for improved alignment.
Documentation
- Updated display logic for statistics to only exhibit round trip time information.

coderabbitai · 2024-04-04T12:54:43Z

Walkthrough

The recent updates focus on refining the user interface and interactivity within a web application. Key adjustments include the repositioning and restyling of elements for better visual alignment and responsiveness, particularly in smaller screens. Additionally, there's a simplification in the display of statistics, emphasizing essential data. These changes aim to enhance user experience by improving layout fluidity and data presentation.

Changes

File(s)	Summary
`css/.../terminal7.css`	Adjusted positioning, styling, and responsiveness for `.windows-container`, `.search-container`, etc.
`src/gate.ts`	Modified positioning logic in `Gate` class.

🐇✨
In a land of code and pixel sprites,
Changes bloom under the moonlit nights.
Elements dance in responsive delight,
While data sings, concise and bright.
Here's to the craft, in the glow of our screens,
Where every byte, in harmony, convenes.
🌟🐾

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai generate interesting stats about this repository and render them as a table.
- @coderabbitai show all the console.log statements in this repository.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

netlify · 2024-04-04T12:54:49Z

✅ Deploy Preview for terminal7 ready!

Name	Link
🔨 Latest commit	`d0eba20`
🔍 Latest deploy log	https://app.netlify.com/sites/terminal7/deploys/6612641407cc330008f6df17
😎 Deploy Preview	https://deploy-preview-463--terminal7.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2024-04-04T12:55:42Z

✅ Deploy Preview for dazzling-kringle-090742 ready!

Name	Link
🔨 Latest commit	`d0eba20`
🔍 Latest deploy log	https://app.netlify.com/sites/dazzling-kringle-090742/deploys/66126414b5e8dc000808c2dd
😎 Deploy Preview	https://deploy-preview-463--dazzling-kringle-090742.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

coderabbitai

Actionable comments posted: 0

Review Status

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 415b32e and 7354af1.

Files selected for processing (3)

css/terminal7.css (5 hunks)
src/gate.ts (1 hunks)
src/map.ts (1 hunks)

Additional comments not posted (5)

src/map.ts (1)

222-222: Ensure that stats.roundTripTime is properly sanitized before being inserted into the DOM to prevent XSS attacks.

css/terminal7.css (3)

306-306: The change to .windows-container positioning aligns well with the PR's objectives of enhancing the terminal window's layout and appearance.

534-534: The addition of .search-container with specific styling for margin and width supports the PR's goal of improving UI responsiveness and appearance.

897-917: Adjustments to media queries for screens under 600px width enhance the application's responsiveness and usability on mobile devices.

src/gate.ts (1)

448-453: > 📝 NOTE

This review was outside the diff hunks, and no overlapping diff hunk was found. Original lines [1-1]

Verify the impact of removing container.style.top = "22px" on the layout and positioning of elements within the Gate class to ensure it aligns with the intended objectives.

coderabbitai

Actionable comments posted: 0

Review Status

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 7354af1 and 70b67dc.

Files selected for processing (1)

css/terminal7.css (5 hunks)

Files skipped from review as they are similar to previous changes (1)

css/terminal7.css

…into latency-branch

coderabbitai

Actionable comments posted: 0

Review Status

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 70b67dc and 1bc0970.

Files selected for processing (3)

css/terminal7.css (5 hunks)
src/gate.ts (1 hunks)
src/map.ts (1 hunks)

Files skipped from review as they are similar to previous changes (3)

css/terminal7.css
src/gate.ts
src/map.ts

yaelih

Looks great!

coderabbitai

Actionable comments posted: 0

Review Status

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 1bc0970 and fe36318.

Files selected for processing (2)

css/terminal7.css (9 hunks)
src/gate.ts (1 hunks)

Files skipped from review as they are similar to previous changes (2)

css/terminal7.css
src/gate.ts

daonb

Thanks! It's almost there...

daonb · 2024-04-07T05:12:12Z

css/terminal7.css

@@ -897,4 +888,17 @@ video {
    opacity: 0.8;
    z-index: 3;
 }
-
+@media (max-width: 600px) {


Why did you move this section here?

It is customary for CSS files to be ordered by media query sizes. So when I started studying the app, I put it at the bottom as a best practice habit, it serves no actual purpose.

daonb · 2024-04-07T05:12:48Z

src/gate.ts

@@ -448,7 +448,7 @@ export class Gate {
            container.style.removeProperty("height")
            scale = 1
            container.style.left = "0"
-            container.style.top = "22px"
+            container.style.top = "0"


Is this line necessary? We already have top: 0 in the css

daonb · 2024-04-07T05:19:39Z

css/terminal7.css

@@ -767,11 +749,20 @@ audio { display: none; }
    text-align: left;
    padding-left: 1.5em;
    text-shadow: none;
+    z-index: 20;


It seems that gate-stats is also used in the map and it changes it. You should move your changes to .gate > .gate-stats bellow

daonb · 2024-04-07T05:32:25Z

css/terminal7.css

@@ -767,11 +749,20 @@ audio { display: none; }
    text-align: left;
    padding-left: 1.5em;
    text-shadow: none;
+    z-index: 20;
+    border-bottom: 1px rgba(255, 255, 255, 0.7) solid;


Let's use the current border color of we use the separate buttons on the bnav bar: rgba(55, 55, 2, 1)

Will change it
the root color is --dark-border

daonb · 2024-04-07T05:37:08Z

css/terminal7.css

+    border-bottom: 1px rgba(255, 255, 255, 0.7) solid;
+    border-right: 0;
+    border-top: 0;
+    -webkit-border-top-right-radius: 6px;


This and the next line are not needed anymore. It's an ancient hack and all modern browsers have support for border-top-right-radius. In the future, use https://caniuse.com to check if you need any browser specific rules

It's not clear, what lines we're talking about

4th line will be changed to border-top-right-radius

lines 2-3 can be removed

coderabbitai

Actionable comments posted: 0

Review Status

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between fe36318 and d0eba20.

Files selected for processing (2)

css/terminal7.css (9 hunks)
src/gate.ts (1 hunks)

Files skipped from review as they are similar to previous changes (2)

css/terminal7.css
src/gate.ts

daonb · 2024-04-07T17:57:52Z

Thanks! I merged manually

latency

7354af1

coderabbitai bot reviewed Apr 4, 2024

View reviewed changes

fix bug - reset height to image

70b67dc

coderabbitai bot reviewed Apr 4, 2024

View reviewed changes

Merge branch 'master' of https://github.com/SuperDuperAlon/terminal7 …

1bc0970

…into latency-branch

coderabbitai bot reviewed Apr 4, 2024

View reviewed changes

code review changes

fe36318

yaelih reviewed Apr 4, 2024

View reviewed changes

coderabbitai bot reviewed Apr 4, 2024

View reviewed changes

daonb requested changes Apr 7, 2024

View reviewed changes

SuperDuperAlon added 3 commits April 7, 2024 11:38

removed double css styling

98ff9cd

css .gate-stats class adjusting

ea0aac7

remove unnecessary css rules

d0eba20

coderabbitai bot reviewed Apr 7, 2024

View reviewed changes

daonb closed this Apr 7, 2024

daonb added a commit to daonb/terminal7 that referenced this pull request Apr 21, 2024

Fixing touch event handling tuzig#463

9219135

daonb mentioned this pull request Apr 29, 2024

Improving gesture using interactjs #469

Merged

daonb mentioned this pull request May 28, 2024

Customizing font family & initial size #473

Merged

daonb mentioned this pull request Aug 11, 2024

Reconnect #484

Merged

daonb mentioned this pull request Sep 23, 2024

fixing reconnect #491

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add latency to terminal window #463

add latency to terminal window #463

SuperDuperAlon commented Apr 4, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 4, 2024 •

edited

Loading

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

Documentation and Community

netlify bot commented Apr 4, 2024 •

edited

Loading

netlify bot commented Apr 4, 2024 •

edited

Loading

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

yaelih left a comment

coderabbitai bot left a comment

daonb left a comment

daonb Apr 7, 2024

SuperDuperAlon Apr 7, 2024

daonb Apr 7, 2024

daonb Apr 7, 2024

daonb Apr 7, 2024

SuperDuperAlon Apr 7, 2024

daonb Apr 7, 2024

SuperDuperAlon Apr 7, 2024

coderabbitai bot left a comment

daonb commented Apr 7, 2024

add latency to terminal window #463

add latency to terminal window #463

Conversation

SuperDuperAlon commented Apr 4, 2024 • edited by coderabbitai bot Loading

Summary by CodeRabbit

coderabbitai bot commented Apr 4, 2024 • edited Loading

Walkthrough

Changes

Chat

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

Documentation and Community

netlify bot commented Apr 4, 2024 • edited Loading

✅ Deploy Preview for terminal7 ready!

netlify bot commented Apr 4, 2024 • edited Loading

✅ Deploy Preview for dazzling-kringle-090742 ready!

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

yaelih left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

daonb left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

daonb commented Apr 7, 2024

SuperDuperAlon commented Apr 4, 2024 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 4, 2024 •

edited

Loading

CodeRabbit Configration File (`.coderabbit.yaml`)

netlify bot commented Apr 4, 2024 •

edited

Loading

netlify bot commented Apr 4, 2024 •

edited

Loading