Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-07-19 21:29:41 +02:00
Code Issues Releases Activity

[Fix] Several ui fixes (#205)

Browse source 
* Fix sidebar

* Use squircle mask for header links

* Firefox mask-box-image fix
This commit is contained in:
Tanya 2022-06-27 20:06:56 +08:00 • committed by GitHub
parent 669b78b967
commit 8c0211d7bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/backend/views/components/sidebar.twig
View file

@ -5,7 +5,7 @@
{{ svg('menu') }} Table of contents {{ svg('menu') }} Table of contents
</div> </div>
<aside class="docs-sidebar__content docs-sidebar__content--hidden"> <aside class="docs-sidebar__content docs-sidebar__content--invisible">
{% for firstLevelPage in menu %} {% for firstLevelPage in menu %}
<section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}"> <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
<a class="docs-sidebar__section-title-wrapper" <a class="docs-sidebar__section-title-wrapper"

3
src/frontend/js/modules/sidebar.js
View file

@ -33,6 +33,7 @@ export default class Sidebar {
sidebarToggler: 'docs-sidebar__toggler', sidebarToggler: 'docs-sidebar__toggler',
sidebarContent: 'docs-sidebar__content', sidebarContent: 'docs-sidebar__content',
sidebarContentHidden: 'docs-sidebar__content--hidden', sidebarContentHidden: 'docs-sidebar__content--hidden',
sidebarContentInvisible: 'docs-sidebar__content--invisible',
}; };
} }
@ -173,6 +174,6 @@ export default class Sidebar {
* @returns {void} * @returns {void}
*/ */
ready() { ready() {
this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentHidden); this.nodes.sidebarContent.classList.remove(Sidebar.CSS.sidebarContentInvisible);
} }
} }

1
src/frontend/styles/components/button.pcss
View file

@ -12,7 +12,6 @@
cursor: pointer; cursor: pointer;
transition-property: background-color; transition-property: background-color;
transition-duration: 0.1s; transition-duration: 0.1s;
border-radius: 8px;
@apply --squircle; @apply --squircle;

3
src/frontend/styles/components/header.pcss
View file

@ -35,9 +35,10 @@
&__menu-link { &__menu-link {
padding: 4px 10px; padding: 4px 10px;
font-weight: 500; font-weight: 500;
border-radius: 8px;
transition: background-color .13s; transition: background-color .13s;
@apply --squircle;
&:hover { &:hover {
background-color: var(--color-link-hover); background-color: var(--color-link-hover);
} }

6
src/frontend/styles/components/sidebar.pcss
View file

@ -25,6 +25,10 @@
&--hidden { &--hidden {
display: none; display: none;
} }
&--invisible {
visibility: hidden;
}
} }
@ -58,7 +62,7 @@
} }
&__section:not(:first-child) { &__section:not(:first-child) {
margin-top: 20px; margin-top: 19px;
} }
&__section-title { &__section-title {

2
src/frontend/styles/vars.pcss
View file

@ -78,6 +78,8 @@
} }
--squircle { --squircle {
border-radius: 8px;
@supports(-webkit-mask-box-image: url('')){ @supports(-webkit-mask-box-image: url('')){
border-radius: 0; 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%;; -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%;;