Skip to content

Minds Frontend
Minds Frontend
Commit d10fb49e authored by Ben Hayward's avatar Ben Hayward
Browse files
Options
  • Download

Fix dropdown menu click area #2223

parent d9a35b88
fix/dropdown-item-padding-2223
1 merge request!649Adjusted dropdown menus to have a larger clickable area #2223
Pipeline #96777712 failed with stages
in 5 minutes and 53 seconds
Hide whitespace changes
Inline Side-by-side
Showing with 201 additions and 164 deletions
src/app/common/components/dropdown/dropdown.component.scss
View file @ d10fb49e
......@@ -69,9 +69,12 @@
vertical-align: middle;
}
> div,
> a {
> * {
padding: 8px;
display: flex;
width: 100%;
height: 100%;
align-items: center;
}
}
}
......@@ -96,10 +99,6 @@
border: 1px solid themed($m-grey-50);
}
.m-dropdown--list--item {
padding: 8px;
}
.m-dropdown--list--item,
.m-dropdownList__item {
@include m-theme() {
......
src/app/common/components/nsfw-selector/nsfw-selector.component.html
View file @ d10fb49e
......@@ -17,14 +17,16 @@
*ngFor="let reason of service.reasons"
(click)="toggle(reason)"
>
<span>{{ reason.label }}</span>
<div class="m-layout__spacer"></div>
<m-tooltip icon="locked" [hidden]="!reason.locked">
NSFW tags are locked for this channel
</m-tooltip>
<i class="material-icons selected" [hidden]="!reason.selected"
>checkmark</i
>
<div>
<span>{{ reason.label }}</span>
<div class="m-layout__spacer"></div>
<m-tooltip icon="locked" [hidden]="!reason.locked">
NSFW tags are locked for this channel
</m-tooltip>
<i class="material-icons selected" [hidden]="!reason.selected"
>checkmark</i
>
</div>
</li>
</ul>
</m-dropdown>
src/app/common/components/nsfw-selector/nsfw-selector.component.scss
View file @ d10fb49e
......@@ -7,7 +7,7 @@
}
.m-dropdownList__item {
cursor: pointer;
padding: 8px;
i {
width: 18px;
}
......
src/app/common/components/sort-selector/sort-selector.component.html
View file @ d10fb49e
......@@ -24,13 +24,15 @@
[class.m-dropdown--list--item--disabled]="isDisabled(item.id)"
(click)="setAlgorithm(item.id); closeDropdowns()"
>
<i
class="material-icons m-dropdown--label-icon m-sort-selector--item-label-icon"
*ngIf="item.icon"
>{{ item.icon }}</i
>
<div>
<i
class="material-icons m-dropdown--label-icon m-sort-selector--item-label-icon"
*ngIf="item.icon"
>{{ item.icon }}</i
>
<span [className]="labelClass">{{ item.label }}</span>
<span [className]="labelClass">{{ item.label }}</span>
</div>
</li>
</ul>
</m-dropdown>
......@@ -83,18 +85,20 @@
[class.m-dropdown--list--item--selected]="item.id === customType"
(click)="setCustomType(item.id); closeDropdowns()"
>
<i
class="material-icons m-dropdown--label-icon m-sort-selector--item-label-icon"
[title]="item.label"
*ngIf="item.icon"
>{{ item.icon }}</i
>
<div>
<i
class="material-icons m-dropdown--label-icon m-sort-selector--item-label-icon"
[title]="item.label"
*ngIf="item.icon"
>{{ item.icon }}</i
>
<span
[className]="labelClass"
*ngIf="!expandedCustomTypeDropdown || item.id === customType"
>{{ item.label }}</span
>
<span
[className]="labelClass"
*ngIf="!expandedCustomTypeDropdown || item.id === customType"
>{{ item.label }}</span
>
</div>
</li>
</ul>
</m-dropdown>
src/app/common/components/sort-selector/sort-selector.component.scss
View file @ d10fb49e
......@@ -10,6 +10,21 @@ m-sort-selector {
.m-dropdown--list--item {
cursor: pointer;
// nested list items are vertical.
// m-dropdown--list li {
// padding: 8px;
// }
// .m-sort-selector--algorithm-dropdown {
// }
> * {
// padding: 0 !important;
padding-right: 4px !important;
padding-left: 4px !important;
// padding-right: 8px !important;
}
}
.m-sort-selector--item-label-icon {
......
src/app/modules/newsfeed/dropdown/dropdown.component.html
View file @ d10fb49e
......@@ -13,170 +13,182 @@
boostService.getBoostRating() == 2 && boostService.isBoostEnabled()
"
>
<span i18n="@@M__COMMON__EXPLICIT">Explicit</span>
<m-tooltip
icon="help"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__EXPLICIT_ITEM_TOOLTIP"
>
By selecting Explicit mode, you acknowledge that you are 18+ years of
age and are willing to see graphic content.
</m-tooltip>
<div class="m-layout--spacer"></div>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-explicit"
[mdlSwitch]
[toggled]="true"
*ngIf="session.getLoggedInUser().mature"
>
<input
type="checkbox"
id="switch-explicit"
class="mdl-switch__input"
[ngModel]="session.getLoggedInUser().mature"
(ngModelChange)="setExplicit(false)"
/>
</label>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-explicit"
[mdlSwitch]
[toggled]="false"
*ngIf="!session.getLoggedInUser().mature"
>
<input
type="checkbox"
id="switch-explicit"
class="mdl-switch__input"
[ngModel]="session.getLoggedInUser().mature"
(ngModelChange)="setExplicit(true)"
/>
</label>
<div>
<span i18n="@@M__COMMON__EXPLICIT">Explicit</span>
<m-tooltip
icon="help"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__EXPLICIT_ITEM_TOOLTIP"
>
By selecting Explicit mode, you acknowledge that you are 18+ years
of age and are willing to see graphic content.
</m-tooltip>
<div class="m-layout--spacer"></div>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-explicit"
[mdlSwitch]
[toggled]="true"
*ngIf="session.getLoggedInUser().mature"
>
<input
type="checkbox"
id="switch-explicit"
class="mdl-switch__input"
[ngModel]="session.getLoggedInUser().mature"
(ngModelChange)="setExplicit(false)"
/>
</label>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-explicit"
[mdlSwitch]
[toggled]="false"
*ngIf="!session.getLoggedInUser().mature"
>
<input
type="checkbox"
id="switch-explicit"
class="mdl-switch__input"
[ngModel]="session.getLoggedInUser().mature"
(ngModelChange)="setExplicit(true)"
/>
</label>
</div>
</li>
</ng-container>
<ng-container *mIfFeature="'top-feeds'">
<li class="m-dropdown--list--item" (click)="toggleRating($event)">
<span style="text-transform: capitalize">Open</span>
<div>
<span style="text-transform: capitalize">Open</span>
<m-tooltip
icon="help"
i18n="@@MINDS__TOPBAR__TOP__OPEN_TRENDING_ITEM_TOOLTIP"
>
Open may contain controversial content. By selecting Open, you
acknowledge that you are willing to see controversial content.
</m-tooltip>
<div class="m-layout--spacer"></div>
<span class="m-dropdown--spacer"></span>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-1"
[mdlSwitch]
[toggled]="true"
*ngIf="rating == 2"
>
<input
type="checkbox"
id="switch-1"
class="mdl-switch__input"
[ngModel]="rating"
(click)="toggleRating($event)"
/>
</label>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-1"
[mdlSwitch]
[toggled]="false"
*ngIf="rating != 2"
>
<input
type="checkbox"
id="switch-1"
class="mdl-switch__input"
[ngModel]="rating"
(click)="toggleRating($event)"
/>
</label>
</div>
</li>
</ng-container>
<li
class="m-dropdown--list--item"
(click)="toggleBoostPause()"
*ngIf="boostService.isBoostEnabled()"
>
<div>
<span i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__AUTO_ROTATE_ITEM"
>Auto-rotate</span
>
<m-tooltip
icon="help"
i18n="@@MINDS__TOPBAR__TOP__OPEN_TRENDING_ITEM_TOOLTIP"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__AUTO_ROTATE_ITEM_TOOLTIP"
>
Open may contain controversial content. By selecting Open, you
acknowledge that you are willing to see controversial content.
This will enable/disable the Boost box on top of your feed from
self-rotating.
</m-tooltip>
<div class="m-layout--spacer"></div>
<span class="m-dropdown--spacer"></span>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-1"
for="switch-pause"
[mdlSwitch]
[toggled]="true"
*ngIf="rating == 2"
*ngIf="!boostService.isBoostPaused()"
>
<input
type="checkbox"
id="switch-1"
id="switch-pause"
class="mdl-switch__input"
[ngModel]="rating"
(click)="toggleRating($event)"
[ngModel]="!boostService.isBoostPaused()"
/>
</label>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-1"
for="switch-pause"
[mdlSwitch]
[toggled]="false"
*ngIf="rating != 2"
*ngIf="boostService.isBoostPaused()"
>
<input
type="checkbox"
id="switch-1"
id="switch-pause"
class="mdl-switch__input"
[ngModel]="rating"
(click)="toggleRating($event)"
[ngModel]="boostService.isBoostPaused()"
/>
</label>
</li>
</ng-container>
<li
class="m-dropdown--list--item"
(click)="toggleBoostPause()"
*ngIf="boostService.isBoostEnabled()"
>
<span i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__AUTO_ROTATE_ITEM"
>Auto-rotate</span
>
<m-tooltip
icon="help"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__AUTO_ROTATE_ITEM_TOOLTIP"
>
This will enable/disable the Boost box on top of your feed from
self-rotating.
</m-tooltip>
<div class="m-layout--spacer"></div>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-pause"
[mdlSwitch]
[toggled]="true"
*ngIf="!boostService.isBoostPaused()"
>
<input
type="checkbox"
id="switch-pause"
class="mdl-switch__input"
[ngModel]="!boostService.isBoostPaused()"
/>
</label>
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="switch-pause"
[mdlSwitch]
[toggled]="false"
*ngIf="boostService.isBoostPaused()"
>
<input
type="checkbox"
id="switch-pause"
class="mdl-switch__input"
[ngModel]="boostService.isBoostPaused()"
/>
</label>
</div>
</li>
<li class="m-dropdown--list--item" *ngIf="plus">
<span
*ngIf="boostService.isBoostEnabled()"
(click)="hideBoost()"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__HIDE_BOOST_ITEM"
>Hide Boost</span
>
<span
*ngIf="!boostService.isBoostEnabled()"
(click)="showBoost()"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__SHOW_BOOST_ITEM"
>Show Boost</span
>
<m-tooltip
icon="help"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__BOOST_VISIBILITY_TOOLTIP"
>
Plus users may hide Boosts from their newsfeed.
</m-tooltip>
<div>
<span
*ngIf="boostService.isBoostEnabled()"
(click)="hideBoost()"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__HIDE_BOOST_ITEM"
>Hide Boost</span
>
<span
*ngIf="!boostService.isBoostEnabled()"
(click)="showBoost()"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__SHOW_BOOST_ITEM"
>Show Boost</span
>
<m-tooltip
icon="help"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__BOOST_VISIBILITY_TOOLTIP"
>
Plus users may hide Boosts from their newsfeed.
</m-tooltip>
</div>
</li>
<li class="m-dropdown--list--item" *ngIf="!plus">
<span
routerLink="/plus"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__HIDE_BOOST_ITEM"
>Hide Boost</span
>
<m-tooltip
icon="help"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__BOOST_VISIBILITY_UPGRADE_TOOLTIP"
>
Upgrade to Plus in order to turn off Boost.
</m-tooltip>
<div>
<span
routerLink="/plus"
i18n="@@MINDS__NEWSFEED__BOOST_ROTATOR__HIDE_BOOST_ITEM"
>Hide Boost</span
>
<m-tooltip
icon="help"
i18n="
@@MINDS__NEWSFEED__BOOST_ROTATOR__BOOST_VISIBILITY_UPGRADE_TOOLTIP
"
>
Upgrade to Plus in order to turn off Boost.
</m-tooltip>
</div>
</li>
<li
class="m-dropdown--list--item"
......
src/app/modules/newsfeed/feeds/search.component.scss
View file @ d10fb49e
......@@ -3,7 +3,7 @@
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px;
padding: 0 12px;
margin-bottom: 16px;
@include m-theme() {
background-color: themed($m-white);
......
src/app/modules/newsfeed/feeds/sorted.component.scss
View file @ d10fb49e
......@@ -53,8 +53,13 @@ m-newsfeed--sorted {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px;
margin-bottom: 16px;
padding: 0 12px;
@media screen and (max-width: $min-tablet) {
padding: 12px;
}
@include m-theme() {
background-color: themed($m-white);
}
......
Please register or to comment