git724/forgejo
1
0
Fork 0
Code Issues Pull requests 3 Projects 1 Releases Packages Wiki Activity

Make navbar scroll on overflow (#1777)

Browse source 
* Scrollbars on overflow of horizontal nav

* Update _base.less

* Add fade out on right side of overflowing nav

* Update _base.less
This commit is contained in:
Patrick G 2017-05-24 02:00:40 -04:00 • committed by Bo-Yi Wu
commit 98ae013e90
2 changed files with 73 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

36
public/css/index.css
View file

@ -428,6 +428,42 @@ footer .ui.language .menu {
background-color: #FAFAFA !important;
border-width: 1px !important;
}
@media only screen and (max-width: 1200px) {
.ui.menu.new-menu {
overflow-x: auto !important;
justify-content: left !important;
padding-bottom: 5px;
}
.ui.menu.new-menu::-webkit-scrollbar {
height: 8px;
display: none;
}
.ui.menu.new-menu:hover::-webkit-scrollbar {
display: block;
}
.ui.menu.new-menu::-webkit-scrollbar-track {
background: rgba(0,0,0,0.01);
}
.ui.menu.new-menu::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.2);
}
.ui.menu.new-menu:after {
position: absolute;
margin-top: -15px;
display: block;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
content: ' ';
right: 0;
height: 53px;
z-index: 1000;
width: 60px;
clear: none;
visibility: visible;
}
.ui.menu.new-menu a.item:last-child {
padding-right: 30px !important;
}
}
.markdown:not(code) {
overflow: hidden;
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;

37
public/less/_base.less
View file

@ -420,3 +420,40 @@ footer {
background-color: #FAFAFA !important;
border-width: 1px !important;
}
@media only screen and (max-width: 1200px) {
.ui.menu.new-menu {
overflow-x: auto !important;
justify-content: left !important;
padding-bottom: 5px;
}
.ui.menu.new-menu::-webkit-scrollbar {
height: 8px;
display: none;
}
.ui.menu.new-menu:hover::-webkit-scrollbar {
display: block;
}
.ui.menu.new-menu::-webkit-scrollbar-track {
background: rgba(0,0,0,0.01);
}
.ui.menu.new-menu::-webkit-scrollbar-thumb {
background:rgba(0,0,0,0.2);
}
.ui.menu.new-menu:after {
position: absolute;
margin-top: -15px;
display: block;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);
content: ' ';
right: 0;
height: 53px;
z-index: 1000;
width: 60px;
clear: none;
visibility: visible;
}
.ui.menu.new-menu a.item:last-child {
padding-right: 30px !important;
}
}