keith/friendica
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[frio] Larger clickable area for dropdown menus

Browse source
This commit is contained in:
Damian Wajer 2023-01-17 20:01:34 +01:00
parent aa3e3307d7
commit f6e63a641d
2 changed files with 19 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
view/theme/frio/css/style.css
View file

@ -816,8 +816,8 @@ nav.navbar .nav > li > button:focus {
font-weight: bold; font-weight: bold;
} }
#topbar-first .dropdown.account li#nav-sitename { #topbar-first .dropdown.account li#nav-sitename {
padding-left: 15px; padding-left: 20px;
padding-right: 15px; padding-right: 20px;
font-weight: bold; font-weight: bold;
word-break: break-word; word-break: break-word;
} }
@ -967,13 +967,15 @@ ul li .intro-wrapper button.intro-action-link {
background-color: $nav_bg; background-color: $nav_bg;
border: none; border: none;
} }
.dropdown-menu .divider {
margin: 5px 0;
}
.nav-pills .dropdown-menu li.divider, .nav-pills .dropdown-menu li.divider,
.nav-tabs .dropdown-menu li.divider, .nav-tabs .dropdown-menu li.divider,
.account .dropdown-menu li.divider, .account .dropdown-menu li.divider,
.contact-photo-wrapper .dropdown-menu li.divider { .contact-photo-wrapper .dropdown-menu li.divider {
background-color: $menu_background_hover_color; background-color: $menu_background_hover_color;
border-bottom: none; border-bottom: none;
margin: 9px 1px !important;
} }
.nav-pills .dropdown-menu li > a, .nav-pills .dropdown-menu li > a,
.nav-tabs .dropdown-menu li > a, .nav-tabs .dropdown-menu li > a,
@ -991,8 +993,6 @@ ul li .intro-wrapper button.intro-action-link {
.contact-photo-wrapper .dropdown-menu li .btn-link { .contact-photo-wrapper .dropdown-menu li .btn-link {
color: $nav_icon_color; color: $nav_icon_color;
font-weight: 400; font-weight: 400;
font-size: 13px;
padding: 4px 15px;
width: 100%; width: 100%;
text-align: left; text-align: left;
} }
@ -2188,6 +2188,10 @@ the section element. Only after we have
moved it to the nav through js */ moved it to the nav through js */
display: none !important; display: none !important;
} }
.tabbar-wrapper__link {
padding-right: 10px;
padding-left: 10px;
}
#tabmenu, #tabmenu,
.tabbar-wrapper, .tabbar-wrapper,
.tabbar, .tabbar,
@ -2217,7 +2221,8 @@ ul.tabs li {
} }
ul.tabs li a { ul.tabs li a {
display: block; display: block;
padding: 11px 10px; padding-top: 11px;
padding-bottom: 11px;
} }
ul.tabs li:hover, ul.tabs li:hover,
ul.tabs li.active { ul.tabs li.active {
@ -2249,6 +2254,12 @@ ul.dropdown-menu li:hover {
box-sizing: border-box; box-sizing: border-box;
} }
/* Dropdown Menu */ /* Dropdown Menu */
.dropdown-menu li .btn-link,
.dropdown-menu li a,
.tabs .dropdown-menu li a {
padding: 6px 20px;
font-size: 14px;
}
.dropdown-menu li a, .dropdown-menu li a,
.dropdown-menu li .btn-link { .dropdown-menu li .btn-link {
color: $font_color_darker; color: $font_color_darker;

4
view/theme/frio/templates/common_tabs.tpl
View file

@ -6,7 +6,7 @@
<ul class="tabs flex-nav" role="menu"> <ul class="tabs flex-nav" role="menu">
{{foreach $tabs as $tab}} {{foreach $tabs as $tab}}
<li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}> <li id="{{$tab.id}}" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}>
<a role="menuitem" href="{{$tab.url}}" {{if $tab.accesskey}}accesskey="{{$tab.accesskey}}" {{/if}} <a role="menuitem" class="tabbar-wrapper__link" href="{{$tab.url}}" {{if $tab.accesskey}}accesskey="{{$tab.accesskey}}" {{/if}}
{{if $tab.title}} title="{{$tab.title}}" {{/if}}> {{if $tab.title}} title="{{$tab.title}}" {{/if}}>
{{$tab.label}} {{$tab.label}}
</a> </a>
@ -37,7 +37,7 @@
{{foreach $tabs as $tab}} {{foreach $tabs as $tab}}
{{if $tab.sel}} {{if $tab.sel}}
<li id="{{$tab.id}}-xs" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}> <li id="{{$tab.id}}-xs" role="presentation" {{if $tab.sel}} class="{{$tab.sel}}" {{/if}}>
<a role="menuitem" href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}" {{/if}}> <a role="menuitem" class="tabbar-wrapper__link" href="{{$tab.url}}" {{if $tab.title}} title="{{$tab.title}}" {{/if}}>
{{$tab.label}} {{$tab.label}}
</a> </a>
</li> </li>