Itmens/lib.itmens
Itmens/lib.itmens
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add toggleable relation dropdown

Browse source
This commit is contained in:
doubaniux 2021-02-17 15:55:46 +01:00
parent 5268fc5aa2
commit 708548c2a9
4 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
common/static/css/boofilsic.css
View file

@ -2269,6 +2269,10 @@ select::placeholder {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
}
.relation-dropdown .relation-dropdown__button:focus {
background-color: red;
}
.relation-dropdown .relation-dropdown__button > .icon-arrow {
-webkit-transition: -webkit-transform 0.3s;
@ -2276,11 +2280,14 @@ select::placeholder {
transition: transform 0.3s;
transition: transform 0.3s, -webkit-transform 0.3s;
}
.relation-dropdown .relation-dropdown__button:hover > .icon-arrow {
.relation-dropdown .relation-dropdown__button:hover > .icon-arrow > svg {
fill: #00a1cc;
}
.relation-dropdown .relation-dropdown__button > .icon-arrow--expand {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.relation-dropdown .relation-dropdown__button:hover + .relation-dropdown__body {
.relation-dropdown .relation-dropdown__button + .relation-dropdown__body--expand {
max-height: 500px;
-webkit-transition: max-height 0.6s ease-in;
transition: max-height 0.6s ease-in;

2
common/static/css/boofilsic.min.css vendored
View file

File diff suppressed because one or more lines are too long

17
common/static/js/home.js
View file

@ -109,5 +109,22 @@ $(document).ready( function() {
}
);
// mobile dropdown
$(".relation-dropdown__button").click(e => {
const button = $(e.currentTarget);
button.children('.icon-arrow').toggleClass("icon-arrow--expand");
button.siblings('.relation-dropdown__body').toggleClass("relation-dropdown__body--expand");
})
// close when click outside
window.onclick = evt => {
const button = $(".relation-dropdown__button");
const target = $(evt.target);
if (!target.parents('.relation-dropdown__button').length && !target.hasClass("relation-dropdown__button")) {
button.children('.icon-arrow').removeClass("icon-arrow--expand");
button.siblings('.relation-dropdown__body').removeClass("relation-dropdown__body--expand");
}
}
});

10
common/static/sass/_AsideSection.sass
View file

@ -266,14 +266,20 @@ $aside-section-padding-mobile: 24px 25px 10px 25px
display: flex
justify-content: center
align-items: center
cursor: pointer
&:focus
background-color: red
& &__button > .icon-arrow
transition: transform 0.3s
& &__button:hover > .icon-arrow
& &__button:hover > .icon-arrow > svg
fill: $color-primary
& &__button > .icon-arrow--expand
transform: rotate(-180deg)
& &__button:hover + &__body
& &__button + &__body--expand
max-height: 500px
transition: max-height 0.6s ease-in