sunoru/mastodon
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix(dropdown_menu): Open as modal on mobile (#4295)

Browse source 
* fix(dropdown_menu): Open as modal on mobile

* fix(dropdown_menu): Open modal on touch

* fix(dropdown_menu): Show status

* fix(dropdown_menu): Max dimensions and reduce padding

* chore(dropdown_menu): Test new functionality

* refactor: Use DropdownMenuContainer instead of DropdownMenu

* feat(privacy_dropdown): Open as modal on touch devices

* feat(modal_root): Do not load actions-modal async
This commit is contained in:
Sorin Davidoi 2017-07-27 22:31:59 +02:00 • committed by Eugen Rochko
parent aa803153e2
commit 50d38d7605
12 changed files with 276 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

62
app/javascript/styles/components.scss
View file

@ -214,16 +214,18 @@
}
.dropdown--active::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4.5px 7.8px;
border-color: transparent transparent $ui-secondary-color;
bottom: 8px;
right: 104px;
@media screen and (min-width: 1025px) {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 4.5px 7.8px;
border-color: transparent transparent $ui-secondary-color;
bottom: 8px;
right: 104px;
}
}
.invisible {
@ -3402,7 +3404,8 @@ button.icon-button.active i.fa-retweet {
.boost-modal,
.confirmation-modal,
.report-modal {
.report-modal,
.actions-modal {
background: lighten($ui-secondary-color, 8%);
color: $ui-base-color;
border-radius: 8px;
@ -3493,6 +3496,43 @@ button.icon-button.active i.fa-retweet {
}
}
.actions-modal {
.status {
overflow-y: auto;
max-height: 300px;
}
max-height: 80vh;
max-width: 80vw;
ul {
overflow-y: auto;
flex-shrink: 0;
li:not(:empty) {
a {
color: $ui-base-color;
display: flex;
padding: 10px;
align-items: center;
text-decoration: none;
&.active {
&,
button {
background: $ui-highlight-color;
color: $primary-text-color;
}
}
button:first-child {
margin-right: 10px;
}
}
}
}
}
.confirmation-modal__action-bar {
.confirmation-modal__cancel-button {
background-color: transparent;