Skip to content

Style: Responsive Images/Figures & SCSS/Content Cleanup #551

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

Merged
merged 8 commits into from
May 12, 2025
Merged

Style: Responsive Images/Figures & SCSS/Content Cleanup #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8e19f4e
Update
zihanKuang May 7, 2025
e59b652
Update
zihanKuang May 7, 2025
3ec67c5
Update
zihanKuang May 7, 2025
3bb2aea
Update
zihanKuang May 7, 2025
27a5bec
Update
zihanKuang May 7, 2025
d82cc8a
Update
zihanKuang May 7, 2025
5237407
Update
zihanKuang May 7, 2025
f117d0f
Merge branch 'master' into improve-css
vishalvivekm May 12, 2025
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
87 changes: 33 additions & 54 deletions assets/scss/_styles_project.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,20 @@ body {
border: 0;
}
}

img,
.md__image img,
img.md-image-responsive {
display: block;
width: 100%;
max-width: clamp(320px, 100%, 700px);
height: auto;
margin: 0 auto;
object-fit: contain;
box-sizing: border-box;
}

overflow-x: hidden;
}

// Links
Expand Down Expand Up @@ -166,7 +180,6 @@ a:not([href]):not([class]):hover {
text-decoration: none;
transition: color 0.2s;
clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);
clip-path: polygon(100% 0, 100% 100%, 0.8em 100%, 0 50%, 0.8em 0);


&:hover {
Expand Down Expand Up @@ -456,67 +469,33 @@ a:not([href]):not([class]):hover {
}
}

figure,
figure[style*="width"] {
width: max-content !important;
max-width: 70% !important;
.td-content figure,
.td-content figure {
width: max-content;
max-width: clamp(320px, 100%, 700px);
margin: 0 auto 2rem auto;

box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;

> img {
width: auto !important;
max-width: 100% !important;
height: auto;
object-fit: contain !important;
display: block;
margin: 0 auto;
border-radius: .5rem .5rem 0rem 0rem !important;
box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4) !important;

&:hover {
cursor: pointer;
}
}

> figcaption {
width: 100% !important;
text-align: center;
padding: 0.5rem 1rem;
background-color: rgba($lightslategray, 1);
color: $dark;
border-radius: 0 0 .5rem .5rem;
box-sizing: border-box;
}
}

// Mobile: override for full-width content alignment
@media (max-width: 600px) {
figure,
figure[style*="width"] {
max-width: 100% !important;
box-sizing: border-box;
}
}

.md__image img,
img.md-image-responsive {
.td-content figure > img {
width: auto;
max-width: 70%;
max-height: 80vh;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
max-width: 100%;
border-radius: .5rem .5rem 0 0;
box-shadow: 0 0 0.5rem rgba(0, 179, 159, 0.4);
transition: box-shadow 0.2s;
}

@media (max-width: 600px) {
width: auto;
max-width: 100%;
padding: 0 1rem;
box-sizing: border-box;
}
.td-content figure > figcaption {
width: 100%;
text-align: center;
padding: 0.5rem 1rem;
background-color: rgba($lightslategray, 1);
color: $dark;
border-radius: 0 0 .5rem .5rem;
box-sizing: border-box;
}

.dashboard {
Expand Down
4 changes: 2 additions & 2 deletions content/en/kanvas/advanced/performance/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ Kanvas supports up to 1,000 relationships per design. Exceeding this limit can i

Tags are indexed and searchable. However, the performance of design operations may degrade as the number of tags increases. To ensure an optimal user experience, we recommend using tags judiciously and limiting the number of tags used in a design.

Upon loading a design exceeds that exceeds 20 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the “Group Components” button in the Designer dock. For more information, see [Working with Tags](/kanvas/designer/tagsets/).
Upon loading a design exceeds that exceeds 20 tags within a single design, Kanvas will automatically disable grouping by tags. You can manually enable grouping by tags by clicking the "Group Components" button in the Designer dock. For more information, see [Working with Tags](/kanvas/designer/tagsets/).

<!--
#### Maximum Number of Relationships per Component
Expand Down Expand Up @@ -87,7 +87,7 @@ In the same way, as you toggle the evaluation of different types of relationship
Using the Layers panel you control the level of sophistication or simplicity of the rendering of components and relationships in your designs. You can both simplify your design layout by removing unnecessary elements and improve performance simultaneously. Alternatively, you can increase the level of detail in your design by enabling additional layers and relationships, while controlling the balance between detail and performance.

{{< alert type="info" title="Keep It Lightweight" >}}
Hide layers you don’t need at the moment to keep your workspace lightweight and responsive.
Hide layers you don't need at the moment to keep your workspace lightweight and responsive.
{{< /alert >}}

### Optimize use of Images in your Design
Expand Down
25 changes: 13 additions & 12 deletions content/en/kanvas/designer/comments/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ aliases:

Kanvas's Designer enables you to place comments "inline" with your infrastructure as code. Use comments to offer feedback to team members, take detailed design notes, capture helpful tips for your team members, and include justification as to your infrastructure and application configuration decisions. Pay it forward to your future self by leaving historical record for reference later.

<figure style="width:400px;">
<figure>
<img src="./kanvas-comment.png" alt="Comments in Designer" />
<figcaption>Example of comments in Designer</figcaption>
</figure>
Expand All @@ -28,7 +28,7 @@ You can add comments in a number of convenient ways. Since designs are public by
1. Click on the comment icon in the toolbar to open a comment instantly. This is your go-to method for quick annotations without leaving your design or first identifying where you want to place your comment.
2. You can also create a comment by dragging and dropping the comment icon from the Dock to your design. This method allows you to place comments directly on specific elements or areas of your design.

<figure style="width:400px;">
<figure>
<img src="./comment-dock.png" alt="Create a comment from the Dock" />
<figcaption>Create a comment from the Dock</figcaption>
</figure>
Expand All @@ -37,7 +37,7 @@ You can add comments in a number of convenient ways. Since designs are public by

Context-click on any area of your design, and from the contextual menu, select "Add a Comment". Using this context-click method allows for inline placement of your remarks right where you need them - *in context*.

<figure style="width:400px;">
<figure>
<img src="./comment-canvas.png" alt="Comment by context-clicking on your design" />
<figcaption>Comment by context-clicking on your design</figcaption>
</figure>
Expand All @@ -48,7 +48,7 @@ Context-click on any area of your design, and from the contextual menu, select "

## Design review using comments

<figure style="width:400px;">
<figure>
<img src="./conversation-screenshot.png" alt="Peer review using comments in Designer" />
<figcaption>Peer review using comments in Designer</figcaption>
</figure>
Expand Down Expand Up @@ -79,7 +79,7 @@ You can also reopen comments.

### View Comment History

<figure style="width:400px;">
<figure>
<img src="./comments-conversation.gif" alt="View comment history" />
<figcaption>View comment history</figcaption>
</figure>
Expand Down Expand Up @@ -123,7 +123,7 @@ Learn more about [sharing settings](/kanvas/designer/sharing).

- **Right-click and Copy**: Choose **Copy** to manually paste it later.

<figure style="width:400px;">
<figure>
<img src="./comment-copy.gif" alt="Copy a comment" />
<figcaption>Copy a comment</figcaption>
</figure>
Expand Down Expand Up @@ -158,7 +158,7 @@ Kanvas auto-generates comment names, useful for quick feedback. When duplicating
You can temporarily hide or reveal open comments using the Layers panel—just like toggling layers in Photoshop.
This helps you focus on the most important parts of your design and improves clarity during reviews.

<figure style="width:400px;">
<figure>
<img src="./comments-hide.png" alt="Hide comments using Layers" />
<figcaption>Hide comments using the Layers panel</figcaption>
</figure>
Expand All @@ -171,8 +171,9 @@ Want to improve the performance of your workspace? [Learn more about using the L

If you plan to keep certain comments in your design for documentation, team reference, or historical context, it's a good idea to give them meaningful names. This simple habit improves clarity for both you and your team—especially when reviewing or revisiting designs later.

<figure style="width:400px;">
<figure>
<img src="./naming-comments.png" alt="Naming a comment in Designer" />
<figcaption>Naming a comment in Designer</figcaption>
</figure>

{{< alert type="info" title="Best Practice" >}}
Expand All @@ -186,7 +187,7 @@ If a comment is resolved by mistake, it can be reopened. Adding a new comment to

Follow the steps below to reopen a comment:

<figure style="width:400px;">
<figure>
<img src="./comments-unresolved.gif" alt="Unresolving comments in designer" />
<figcaption>Unresolving comments in designer</figcaption>
</figure>
Expand All @@ -195,7 +196,7 @@ Follow the steps below to reopen a comment:

Each time that a new comment is made in a design, remark placed into existing comment, a comment is resolved or reopened, you and your collaborators might receive notification via email.

<figure style="width:400px;">
<figure>
<img src="./example-notification-email.png" alt="Example email notification received when design comment is made" />
<figcaption>Example email notification received when design comment is made.</figcaption>
</figure>
Expand All @@ -214,14 +215,14 @@ Customize your [notification preferences](/cloud/identity/users/notification-pre

Customize your notification preferences to mute email notifications for comments on your design. With notifications for new comments silenced, you won't receive email notifications for new comments on your design. This can be useful if you want to temporarily pause notifications or reduce email clutter.

<figure style="width:400px;">
<figure>
<img src="./comment-notificationBell.png" alt="Turn Off notification from comments in designer" style="width:auto">
<figcaption>Example of comments in Designer</figcaption>
</figure>

You can also manage all your comment notification settings centrally through the **Cloud -> Account -> [Preference](https://docs.layer5.io/cloud/identity/users/notification-preferences/)**.

<figure style="width:400px;">
<figure>
<img src="./comment-cloud-manage.png" alt="Manage comment notifications in the Cloud Portal" style="width:auto">
<figcaption>Manage all comment notifications centrally in the Cloud</figcaption>
</figure>
Expand Down