mirror/FreshRSS
0
0
Fork 0
mirror of https://github.com/FreshRSS/FreshRSS.git synced 2026-01-31 08:31:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve dropdown menu mobile (#4141)

Browse Source 
* Theme template.css

* theme adark

* theme ansum

* theme bluelagoon

* theme dark

* theme template.css RTL fix

* theme flat

* theme Origine

* theme Origine-compact

* theme Pafat

* theme Screwdriver

* theme Swage

* theme Mapco

* dropdown menu with thin scrollbar

* Fix CI foundings

* Fix RTL

* Fix CSS semicolons

* Fix CSS RTL

* Fix SCSS

* Update _mobile.scss
This commit is contained in:
maTh
2022-01-11 23:53:40 +01:00
committed by GitHub
parent 9cd9e9a093
commit f94ec779e6
31 changed files with 337 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/helpers/index/normal/entry_bottom.phtml
View File

@@ -44,7 +44,7 @@
<a class="dropdown-toggle" href="#dropdown-labels-<?= $this->entry->id() ?>"><?php
echo _t('index.menu.tags');
?></a>
<ul class="dropdown-menu dropdown-menu-scrollable">
<ul class="dropdown-menu dropdown-menu-scrollable scrollbar-thin">
<li class="dropdown-close"><a href="#close">❌</a></li>
<!-- Ajax -->
</ul>

6
p/themes/Alternative-Dark/adark.css
View File

@@ -1149,6 +1149,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #333;
border-top: 2px solid #262626;
border-left: 2px solid #262626;
}
.day .name {
display: none!important;
font-size: 1.1rem;

6
p/themes/Alternative-Dark/adark.rtl.css
View File

@@ -1149,6 +1149,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #333;
border-top: 2px solid #262626;
border-right: 2px solid #262626;
}
.day .name {
display: none!important;
font-size: 1.1rem;

7
p/themes/Ansum/_components.scss
View File

@@ -20,7 +20,7 @@
/*=== Dropdown */
.dropdown-menu {
margin: 0;
margin: 9px 0 0 0;
padding: 0.5rem 0 1rem 0;
background: $grey-lighter;
font-size: 1rem;
@@ -30,13 +30,14 @@
text-align: left;
&::after {
background: white;
background: $grey-lighter;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
right: 13px;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
// border-top: 1px solid #95a5a6;

1
p/themes/Ansum/_layout.scss
View File

@@ -306,7 +306,6 @@
#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
vertical-align: middle;
background-color: $grey-medium-dark;
border-radius: 3px;
}

20
p/themes/Ansum/_mobile.scss
View File

@@ -147,7 +147,27 @@
}
}
.dropdown-target:target {
~ .dropdown-toggle::after {
background-color: $grey-lighter;
border-top: 1px solid $grey-light;
border-left: 1px solid $grey-light;
right: 21px;
bottom: -14px;
}
~ a.dropdown-toggle {
&:not(.btn) {
~ .dropdown-menu {
margin-top: 0;
}
&::after {
bottom: -17px;
}
}
}
}
.day {
text-align: center;

22
p/themes/Ansum/ansum.css
View File

@@ -227,7 +227,7 @@ form th {
/*=== Dropdown */
.dropdown-menu {
margin: 0;
margin: 9px 0 0 0;
padding: 0.5rem 0 1rem 0;
background: #fcfaf8;
font-size: 1rem;
@@ -237,13 +237,14 @@ form th {
text-align: left;
}
.dropdown-menu::after {
background: white;
background: #fcfaf8;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
right: 13px;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
}
@@ -1038,7 +1039,6 @@ form th {
#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
vertical-align: middle;
background-color: #ba9;
border-radius: 3px;
}
@@ -1554,6 +1554,20 @@ form th {
padding: 0.5rem 0;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fcfaf8;
border-top: 1px solid #f5f0ec;
border-left: 1px solid #f5f0ec;
right: 21px;
bottom: -14px;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 0;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
bottom: -17px;
}
.day {
text-align: center;
padding: 1rem 0;

22
p/themes/Ansum/ansum.rtl.css
View File

@@ -227,7 +227,7 @@ form th {
/*=== Dropdown */
.dropdown-menu {
margin: 0;
margin: 9px 0 0 0;
padding: 0.5rem 0 1rem 0;
background: #fcfaf8;
font-size: 1rem;
@@ -237,13 +237,14 @@ form th {
text-align: right;
}
.dropdown-menu::after {
background: white;
background: #fcfaf8;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
left: 13px;
left: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(-45deg);
}
@@ -1038,7 +1039,6 @@ form th {
#dropdown-query ~ .dropdown-menu .dropdown-header .icon {
vertical-align: middle;
background-color: #ba9;
border-radius: 3px;
}
@@ -1554,6 +1554,20 @@ form th {
padding: 0.5rem 0;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fcfaf8;
border-top: 1px solid #f5f0ec;
border-right: 1px solid #f5f0ec;
left: 21px;
bottom: -14px;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 0;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
bottom: -17px;
}
.day {
text-align: center;
padding: 1rem 0;

7
p/themes/BlueLagoon/BlueLagoon.css
View File

@@ -1322,6 +1322,13 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #222;
border-top: 1px solid #171717;
border-left: 1px solid #171717;
right: 13px;
}
.day .name {
display: none;
}

7
p/themes/BlueLagoon/BlueLagoon.rtl.css
View File

@@ -1322,6 +1322,13 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #222;
border-top: 1px solid #171717;
border-right: 1px solid #171717;
left: 13px;
}
.day .name {
display: none;
}

6
p/themes/Dark/dark.css
View File

@@ -1172,6 +1172,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #1a1a1a;
border-top: 1px solid #888;
border-left: 1px solid #888;
}
.day .name {
font-size: 1.1rem;
}

6
p/themes/Dark/dark.rtl.css
View File

@@ -1172,6 +1172,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #1a1a1a;
border-top: 1px solid #888;
border-right: 1px solid #888;
}
.day .name {
font-size: 1.1rem;
}

10
p/themes/Flat/flat.css
View File

@@ -1165,6 +1165,16 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fafafa;
border-top: 1px solid #95a5a6;
border-left: 1px solid #95a5a6;
}
.dropdown-target:target ~ .btn.dropdown-toggle::after {
bottom: -19px;
}
.day .name {
font-size: 1.1rem;
}

10
p/themes/Flat/flat.rtl.css
View File

@@ -1165,6 +1165,16 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fafafa;
border-top: 1px solid #95a5a6;
border-right: 1px solid #95a5a6;
}
.dropdown-target:target ~ .btn.dropdown-toggle::after {
bottom: -19px;
}
.day .name {
font-size: 1.1rem;
}

7
p/themes/Mapco/_components.scss
View File

@@ -20,7 +20,7 @@
/*=== Dropdown */
.dropdown-menu {
margin: 0;
margin: 9px 0 0 0;
padding: 0.5rem 0 1rem 0;
background: $grey-lighter;
font-size: 1rem;
@@ -30,13 +30,14 @@
text-align: left;
&::after {
background: white;
background: $grey-lighter;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
right: 13px;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
// border-top: 1px solid #95a5a6;

20
p/themes/Mapco/_mobile.scss
View File

@@ -147,7 +147,27 @@
}
}
.dropdown-target:target {
~ .dropdown-toggle::after {
background-color: $grey-lighter;
border-top: 1px solid $grey-light;
border-left: 1px solid $grey-light;
right: 21px;
bottom: -14px;
}
~ a.dropdown-toggle {
&:not(.btn) {
~ .dropdown-menu {
margin-top: 0;
}
&::after {
bottom: -17px;
}
}
}
}
.day {
text-align: center;

21
p/themes/Mapco/mapco.css
View File

@@ -228,7 +228,7 @@ form th {
/*=== Dropdown */
.dropdown-menu {
margin: 0;
margin: 9px 0 0 0;
padding: 0.5rem 0 1rem 0;
background: #f9fafb;
font-size: 1rem;
@@ -238,13 +238,14 @@ form th {
text-align: left;
}
.dropdown-menu::after {
background: white;
background: #f9fafb;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
right: 13px;
right: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(45deg);
}
@@ -1566,6 +1567,20 @@ form th {
padding: 0.5rem 0;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #f9fafb;
border-top: 1px solid #eff0f2;
border-left: 1px solid #eff0f2;
right: 21px;
bottom: -14px;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 0;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
bottom: -17px;
}
.day {
text-align: center;
padding: 1rem 0;

21
p/themes/Mapco/mapco.rtl.css
View File

@@ -228,7 +228,7 @@ form th {
/*=== Dropdown */
.dropdown-menu {
margin: 0;
margin: 9px 0 0 0;
padding: 0.5rem 0 1rem 0;
background: #f9fafb;
font-size: 1rem;
@@ -238,13 +238,14 @@ form th {
text-align: right;
}
.dropdown-menu::after {
background: white;
background: #f9fafb;
width: 10px;
height: 10px;
content: "";
position: absolute;
top: -4px;
left: 13px;
left: 18px;
bottom: -14px;
z-index: -10;
transform: rotate(-45deg);
}
@@ -1566,6 +1567,20 @@ form th {
padding: 0.5rem 0;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #f9fafb;
border-top: 1px solid #eff0f2;
border-right: 1px solid #eff0f2;
left: 21px;
bottom: -14px;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 0;
}
.dropdown-target:target ~ a.dropdown-toggle:not(.btn)::after {
bottom: -17px;
}
.day {
text-align: center;
padding: 1rem 0;

10
p/themes/Origine-compact/origine-compact.css
View File

@@ -1247,6 +1247,16 @@ a.btn,
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fff;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 5px;
}
.day .name {
font-size: 1.1rem;
text-shadow: none;

10
p/themes/Origine-compact/origine-compact.rtl.css
View File

@@ -1247,6 +1247,16 @@ a.btn,
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fff;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 5px;
}
.day .name {
font-size: 1.1rem;
text-shadow: none;

6
p/themes/Origine/origine.css
View File

@@ -1188,6 +1188,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fff;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.form-group.form-actions {
margin-left: -15px;
margin-right: -15px;

6
p/themes/Origine/origine.rtl.css
View File

@@ -1188,6 +1188,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fff;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.form-group.form-actions {
margin-right: -15px;
margin-left: -15px;

5
p/themes/Pafat/pafat.css
View File

@@ -1176,6 +1176,11 @@ a.signin {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
}
.day .name {
font-size: 1.1rem;
text-shadow: none;

5
p/themes/Pafat/pafat.rtl.css
View File

@@ -1176,6 +1176,11 @@ a.signin {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
border-top: 1px solid #aaa;
border-right: 1px solid #aaa;
}
.day .name {
font-size: 1.1rem;
text-shadow: none;

6
p/themes/Screwdriver/screwdriver.css
View File

@@ -1307,6 +1307,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #222;
border-top: 1px solid #171717;
border-left: 1px solid #171717;
}
.day .name {
display: none;
}

6
p/themes/Screwdriver/screwdriver.rtl.css
View File

@@ -1307,6 +1307,12 @@ a.btn {
width: 400px;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #222;
border-top: 1px solid #171717;
border-right: 1px solid #171717;
}
.day .name {
display: none;
}

4
p/themes/Swage/swage.css
View File

@@ -1011,6 +1011,10 @@ form th {
padding-right: 10px;
}
.dropdown-target:target ~ .dropdown-toggle.btn::after {
display: none;
}
.day .name {
font-size: 1.1rem;
}

4
p/themes/Swage/swage.rtl.css
View File

@@ -1011,6 +1011,10 @@ form th {
padding-left: 10px;
}
.dropdown-target:target ~ .dropdown-toggle.btn::after {
display: none;
}
.day .name {
font-size: 1.1rem;
}

4
p/themes/Swage/swage.scss
View File

@@ -1253,6 +1253,10 @@ form {
padding-right: 10px;
}
.dropdown-target:target ~ .dropdown-toggle.btn::after {
display: none;
}
.day .name {
font-size: 1.1rem;
}

54
p/themes/base-theme/template.css
View File

@@ -1394,25 +1394,63 @@ input:checked + .slide-container .properties {
margin-left: 0;
}
.dropdown {
position: inherit;
}
.dropdown .dropdown-menu {
width: 100%;
width: 94%;
border-radius: 0;
bottom: 0;
position: fixed;
left: 3%;
right: 3%;
position: absolute;
}
.dropdown .dropdown-menu .item {
margin: 2px 0;
}
.dropdown .dropdown-menu .item button.as-link,
.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
width: 100%;
}
.dropdown-target:target ~ .dropdown-toggle {
position: relative;
overflow: visible;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fff;
width: 10px;
height: 10px;
content: "";
position: absolute;
right: 8px;
bottom: -17px;
transform: rotate(45deg);
z-index: 9999;
cursor: default;
}
.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 0;
}
.configure .dropdown .dropdown-menu {
width: 90%;
height: 100vh;
top: 0;
right: 0;
bottom: 0;
left: auto;
position: fixed;
padding-top: 0;
margin-top: 0;
overflow: auto;
box-shadow: -3px 0 3px #aaa;
}
.dropdown-target ~ .dropdown-menu {
width: 0;
}
.dropdown-target:target ~ .dropdown-menu {
display: table-cell;
z-index: 1000;

54
p/themes/base-theme/template.rtl.css
View File

@@ -1394,25 +1394,63 @@ input:checked + .slide-container .properties {
margin-right: 0;
}
.dropdown {
position: inherit;
}
.dropdown .dropdown-menu {
width: 100%;
width: 94%;
border-radius: 0;
bottom: 0;
position: fixed;
right: 3%;
left: 3%;
position: absolute;
}
.dropdown .dropdown-menu .item {
margin: 2px 0;
}
.dropdown .dropdown-menu .item button.as-link,
.dropdown .dropdown-menu .item button.as-link:hover, button.as-link:active {
width: 100%;
}
.dropdown-target:target ~ .dropdown-toggle {
position: relative;
overflow: visible;
}
.dropdown-target:target ~ .dropdown-toggle::after {
background-color: #fff;
width: 10px;
height: 10px;
content: "";
position: absolute;
left: 8px;
bottom: -17px;
transform: rotate(-45deg);
z-index: 9999;
cursor: default;
}
.dropdown-target:target ~ .dropdown-toggle:not(.btn) ~ .dropdown-menu {
margin-top: 0;
}
.configure .dropdown .dropdown-menu {
width: 90%;
height: 100vh;
top: 0;
left: 0;
bottom: 0;
right: auto;
position: fixed;
padding-top: 0;
margin-top: 0;
overflow: auto;
box-shadow: 3px 0 3px #aaa;
}
.dropdown-target ~ .dropdown-menu {
width: 0;
}
.dropdown-target:target ~ .dropdown-menu {
display: table-cell;
z-index: 1000;