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

[Fix] Several ui fixes #205

Merged
merged 3 commits into from
Jun 27, 2022
Merged

[Fix] Several ui fixes #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
378bcc0
Fix sidebar
TatianaFomina Jun 21, 2022
fdc2c3d
Use squircle mask for header links
TatianaFomina Jun 21, 2022
14b6fe0
Firefox mask-box-image fix
TatianaFomina Jun 21, 2022
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
2 changes: 1 addition & 1 deletion src/backend/views/components/sidebar.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{{ svg('menu') }} Table of contents
</div>

<aside class="docs-sidebar__content docs-sidebar__content--hidden">
<aside class="docs-sidebar__content docs-sidebar__content--invisible">
{% for firstLevelPage in menu %}
<section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
<a class="docs-sidebar__section-title-wrapper"
Expand Down
3 changes: 2 additions & 1 deletion src/frontend/js/modules/sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export default class Sidebar {
sidebarToggler: 'docs-sidebar__toggler',
sidebarContent: 'docs-sidebar__content',
sidebarContentHidden: 'docs-sidebar__content--hidden',
neSpecc marked this conversation as resolved.
Show resolved Hide resolved
sidebarContentInvisible: 'docs-sidebar__content--invisible',
};
}

Expand Down Expand Up @@ -173,6 +174,6 @@ export default class Sidebar {
* @returns {void}
*/
ready() {
this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentHidden);
this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentInvisible);
}
}
1 change: 0 additions & 1 deletion src/frontend/styles/components/button.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
cursor: pointer;
transition-property: background-color;
transition-duration: 0.1s;
border-radius: 8px;

@apply --squircle;

Expand Down
3 changes: 2 additions & 1 deletion src/frontend/styles/components/header.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,10 @@
&__menu-link {
padding: 4px 10px;
font-weight: 500;
border-radius: 8px;
transition: background-color .13s;

@apply --squircle;

&:hover {
background-color: var(--color-link-hover);
}
Expand Down
6 changes: 5 additions & 1 deletion src/frontend/styles/components/sidebar.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
&--hidden {
display: none;
}

&--invisible {
visibility: hidden;
}
}


Expand Down Expand Up @@ -58,7 +62,7 @@
}

&__section:not(:first-child) {
margin-top: 20px;
margin-top: 19px;
}

&__section-title {
Expand Down
2 changes: 2 additions & 0 deletions src/frontend/styles/vars.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@
}

--squircle {
border-radius: 8px;

@supports(-webkit-mask-box-image: url('')){
border-radius: 0;
-webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10.3872C0 1.83334 1.83334 0 10.3872 0H13.6128C22.1667 0 24 1.83334 24 10.3872V13.6128C24 22.1667 22.1667 24 13.6128 24H10.3872C1.83334 24 0 22.1667 0 13.6128V10.3872Z' fill='black'/%3E%3C/svg%3E%0A") 48% 41% 37.9% 53.3%;;
Expand Down