octoleo/syncthing
1
0
Fork 0
mirror of https://github.com/octoleo/syncthing.git synced 2024-11-09 23:00:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

gui: Improve navigation header layout on mobile

Browse Source 
GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3240
This commit is contained in:
Daniel Harte 2016-06-02 06:08:18 +00:00 committed by Jakob Borg
parent f792989d9b
commit 36c6a1955f
2 changed files with 53 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
gui/default/assets/css/overrides.css
View File

@ -135,12 +135,27 @@ table.table-condensed td.no-overflow-ellipse {
display: none;
}
*[language-select] > .dropdown-menu {
width: 450px;
}
*[language-select] > .dropdown-menu > li {
float: left;
width: 50%;
}
*[language-select] > .dropdown-menu > li > a {
overflow: hidden;
text-overflow: ellipsis;
}
.nav>li{
float: left;
}
.navbar-right {
/* to align with panel */
padding-right: 15px;
float: right;
}
.panel-body .table-condensed {
@ -257,8 +272,29 @@ ul.three-columns li, ul.two-columns li {
position: relative;
}
.nav>li {
float:right;
.navbar-nav .open .dropdown-menu {
position: absolute;
left: auto;
right: 0;
background-color: #ffffff;
border: 1px solid #cccccc;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
border-radius: 2px;
}
*[language-select] {
position: static !important;
}
*[language-select] > .dropdown-menu {
margin-left: 15px;
margin-right: 15px;
margin-top: -12px !important;
max-width: 450px;
height: 265px;
overflow-y: scroll;
}
table.table-condensed td {
@ -268,42 +304,12 @@ ul.three-columns li, ul.two-columns li {
}
}
@media (min-width:650px) {
*[language-select] > .dropdown-menu > li {
width: 50%;
float: left;
}
*[language-select] > .dropdown-menu {
width: 440px;
}
}
/**
* Menu for select language
*/
@media (min-width:480px) and (max-width:649px) {
*[language-select] > .dropdown-menu {
width: 230px;
}
}
@media (max-width:479px) {
.dropdown-menu {
padding-top: 55px;
}
nav .dropdown-toggle {
font-size: 1em;
}
.dropdown-toggle {
float: left;
}
.logo{
margin:auto;
}
.navbar-nav .open .dropdown-menu > li > a {
padding: 12px 15px 12px 25px;
}

15
gui/default/index.html
View File

@ -40,22 +40,29 @@
<ul class="nav navbar-nav navbar-right">
<li ng-if="upgradeInfo && upgradeInfo.newer" class="upgrade-newer">
<button type="button" class="btn navbar-btn btn-primary btn-sm" ng-click="upgrade()">
<span class="fa fa-arrow-circle-up"></span>&nbsp;<span translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
<span class="fa fa-arrow-circle-up"></span>
<span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
</button>
</li>
<li ng-if="upgradeInfo && upgradeInfo.majorNewer" class="upgrade-newer-major">
<button type="button" class="btn navbar-btn btn-danger btn-sm" ng-click="upgradeMajor()">
<span class="fa fa-arrow-circle-up"></span>&nbsp;<span translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
<span class="fa fa-arrow-circle-up"></span>
<span class="hidden-xs" translate translate-value-version="{{upgradeInfo.latest}}">Upgrade To {%version%}</span>
</button>
</li>
<li class="dropdown" language-select></li>
<li>
<a class="navbar-link" href="https://docs.syncthing.net/intro/gui.html" target="_blank">
<span class="fa fa-question-circle"></span>&nbsp;<span class="hidden-xs" translate>Help</span>
<span class="fa fa-question-circle"></span>
<span class="hidden-xs" translate>Help</span>
</a>
</li>
<li class="dropdown action-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="fa fa-cog"></span>&nbsp;<span class="hidden-xs" translate>Actions</span> <span class="caret"></span></a>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="fa fa-cog"></span>
<span class="hidden-xs" translate>Actions</span>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="" ng-click="editSettings()"><span class="fa fa-fw fa-cog"></span>&nbsp;<span translate>Settings</span></a></li>
<li><a href="" ng-click="idDevice(thisDevice())"><span class="fa fa-fw fa-qrcode"></span>&nbsp;<span translate>Show ID</span></a></li>