Martchus
/
syncthing
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

gui: CSS tweaks for mobile views 

GitHub-Pull-Request: https://github.com/syncthing/syncthing/pull/3257
This commit is contained in:
Daniel Harte 2016-06-02 23:21:19 +00:00 committed by Audrius Butkevicius
parent 855a1bef89
commit 3795a786c9
8 changed files with 90 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -50,10 +50,6 @@ ul+h5 {
word-wrap:break-word;
}
.modal-header .fa {
margin-right: 15px;
}
.text-monospace {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}
@ -171,12 +167,20 @@ table.table-condensed td.no-overflow-ellipse {
}
/**
* Accordion Title bars
* Panel, Model and Accordion Title bars
*/
.panel-icon{
.panel-icon {
float: left;
margin-right: 15px;
margin-top: 0.125em;
margin-bottom: 0.125em;
line-height: 1;
}
.modal-title .panel-icon {
margin-top: 0.25em;
margin-bottom: 0.25em;
}
.panel-heading {
@ -201,11 +205,6 @@ identicon {
line-height: 1;
}
h3 identicon, h4 identicon{
margin-top: 0.125em;
margin-bottom: 0.125em;
}
.identicon {
width: 1em;
height: 1em;
@ -272,6 +271,10 @@ ul.three-columns li, ul.two-columns li {
padding-bottom: 0px;
}
.navbar-brand {
margin: 3.25px -15px;
}
.navbar-fixed-bottom {
position: relative;
}

41
gui/default/index.html
View File

@ -91,7 +91,14 @@
<div ng-if="openNoAuth" class="row">
<div class="col-md-12">
<div class="panel panel-danger">
<div class="panel-heading"><h3 class="panel-title"><span class="fa fa-exclamation-circle"></span><span translate>Danger!</span></h3></div>
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-exclamation-circle"></span>
</div>
<span translate>Danger!</span>
</h3>
</div>
<div class="panel-body">
<p>
<span translate>The Syncthing admin interface is configured to allow remote access without a password.</span>
@ -114,7 +121,14 @@
<div ng-if="!configInSync" class="row">
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading"><h3 class="panel-title"><span class="fa fa-exclamation-circle"></span><span translate>Restart Needed</span></h3></div>
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-exclamation-circle"></span>
</div>
<span translate>Restart Needed</span>
</h3>
</div>
<div class="panel-body">
<p translate>The configuration has been saved but not activated. Syncthing must restart to activate the new configuration.</p>
</div>
@ -170,7 +184,10 @@
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title"><span class="fa fa-folder"></span>
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-folder"></span>
</div>
<span translate ng-if="!folders[event.data.folder]">New Folder</span>
<span translate ng-if="folders[event.data.folder]">Share Folder</span>
<span class="pull-right">{{ event.time | date:"yyyy-MM-dd HH:mm:ss" }}</span>
@ -210,7 +227,14 @@
<div ng-if="errorList().length > 0" class="row">
<div class="col-md-12">
<div class="panel panel-warning">
<div class="panel-heading"><h3 class="panel-title"><span class="fa fa-exclamation-circle"></span><span translate>Notice</span></h3></div>
<div class="panel-heading">
<h3 class="panel-title">
<div class="panel-icon">
<span class="fa fa-exclamation-circle"></span>
</div>
<span translate>Notice</span>
</h3>
</div>
<div class="panel-body">
<p ng-repeat="err in errorList()"><small>{{err.when | date:"yyyy-MM-dd HH:mm:ss"}}:</small> {{friendlyDevices(err.message)}}</p>
</div>
@ -238,8 +262,8 @@
<div class="panel-progress" ng-show="folderStatus(folder) == 'syncing'" ng-attr-style="width: {{syncPercentage(folder.id)}}%"></div>
<div class="panel-progress" ng-show="folderStatus(folder) == 'scanning' && scanProgress[folder.id] != undefined" ng-attr-style="width: {{scanPercentage(folder.id)}}%"></div>
<h4 class="panel-title">
<div class="panel-icon">
<span class="fa hidden-xs fa-fw" ng-class="[folder.type == 'readonly' ? 'fa-lock' : 'fa-folder']"></span>
<div class="panel-icon hidden-xs">
<span class="fa fa-fw" ng-class="[folder.type == 'readonly' ? 'fa-lock' : 'fa-folder']"></span>
</div>
<div class="panel-status pull-right text-{{folderClass(folder)}}" ng-switch="folderStatus(folder)">
<span ng-switch-when="unknown"><span class="hidden-xs" translate>Unknown</span><span class="visible-xs">&#9724;</span></span>
@ -495,7 +519,8 @@
<a class="panel-heading" data-toggle="collapse" data-parent="#devices" href="#device-{{$index}}">
<div class="panel-progress" ng-show="deviceStatus(deviceCfg) == 'syncing'" ng-attr-style="width: {{completion[deviceCfg.deviceID]._total | number:0}}%"></div>
<h4 class="panel-title">
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>{{deviceName(deviceCfg)}}
<identicon class="panel-icon" data-value="deviceCfg.deviceID"></identicon>
<span>{{deviceName(deviceCfg)}}</span>
<span ng-switch="deviceStatus(deviceCfg)" class="pull-right text-{{deviceClass(deviceCfg)}}">
<span ng-switch-when="insync"><span class="hidden-xs" translate>Up to Date</span><span class="visible-xs">&#9724;</span></span>
<span ng-switch-when="syncing">
@ -528,7 +553,7 @@
</td>
</tr>
<tr ng-if="connections[deviceCfg.deviceID].connected && connections[deviceCfg.deviceID].type.indexOf('Relay') > -1" tooltip data-original-title="Connections via relays might be rate limited by the relay">
<th><span class="fa fa-fw fa-warning text-danger"></span>&nbsp<span translate>Connection Type</span></th>
<th><span class="fa fa-fw fa-warning text-danger"></span>&nbsp;<span translate>Connection Type</span></th>
<td class="text-right">{{connections[deviceCfg.deviceID].type}}</td>
</tr>
<tr ng-if="deviceCfg.compression != 'metadata'">

4
gui/default/modal.html
View File

@ -10,7 +10,9 @@
<div class="modal-content">
<div class="modal-header alert alert-{{status}}">
<h4 class="modal-title">
<span ng-if="icon" class="fa fa-{{icon}}"></span>
<div class="panel-icon">
<span ng-if="icon" class="fa fa-{{icon}}"></span>
</div>
{{title}}
</h4>
</div>

5
gui/default/syncthing/core/majorUpgradeModalView.html
View File

@ -3,7 +3,10 @@
<div class="modal-content">
<div class="modal-header alert alert-danger">
<h4 class="modal-title">
<span class="fa fa-arrow-circle-up"></span><span translate>Major Upgrade</span>
<div class="panel-icon">
<span class="fa fa-arrow-circle-up"></span>
</div>
<span translate>Major Upgrade</span>
</h4>
</div>
<div class="modal-body">

14
gui/default/syncthing/device/editDeviceModalView.html
View File

@ -3,8 +3,18 @@
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span ng-show="!editingExisting"><span class="fa fa-desktop"></span><span translate>Add Device</span></span>
<span ng-show="editingExisting"><span class="fa fa-pencil"></span><span translate>Edit Device</span></span>
<span ng-show="!editingExisting">
<div class="panel-icon">
<span class="fa fa-desktop"></span>
</div>
<span translate>Add Device</span>
</span>
<span ng-show="editingExisting">
<div class="panel-icon">
<span class="fa fa-pencil"></span>
</div>
<span translate>Edit Device</span>
</span>
</h4>
</div>
<div class="modal-body">

14
gui/default/syncthing/folder/editFolderModalView.html
View File

@ -3,8 +3,18 @@
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
<span ng-show="!editingExisting"><span class="fa fa-folder"></span><span translate>Add Folder</span></span>
<span ng-show="editingExisting"><span class="fa fa-pencil"></span><span translate>Edit Folder</span></span>
<span ng-show="!editingExisting">
<div class="panel-icon">
<span class="fa fa-folder"></span>
</div>
<span translate>Add Folder</span>
</span>
<span ng-show="editingExisting">
<div class="panel-icon">
<span class="fa fa-pencil"></span>
</div>
<span translate>Edit Folder</span>
</span>
</h4>
</div>
<div class="modal-body">

7
gui/default/syncthing/settings/advancedSettingsModalView.html
View File

@ -2,7 +2,12 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header alert alert-danger">
<h4 class="modal-title"><span class="fa fa-cogs"></span><span translate>Advanced Configuration</span></h4>
<h4 class="modal-title">
<div class="panel-icon">
<span class="fa fa-cog"></span>
</div>
<span translate>Advanced Configuration</span>
</h4>
</div>
<div class="modal-body">

7
gui/default/syncthing/settings/settingsModalView.html
View File

@ -2,7 +2,12 @@
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><span class="fa fa-cog"></span><span translate>Settings</span></h4>
<h4 class="modal-title">
<div class="panel-icon">
<span class="fa fa-cog"></span>
</div>
<span translate>Settings</span>
</h4>
</div>
<div class="modal-body">
<form role="form" name="settingsEditor">