UI enhancements on mobile (#6180)

* Set fallback font for log viewer

* Enable logo scaling in About view

* Don't split "dependency list" into 2 columns on mobile
This commit is contained in:
Mateusz Ż 2019-11-23 13:25:25 +01:00 committed by Audrius Butkevicius
parent 65d4dd32cb
commit e2f6d0d6c4
3 changed files with 8 additions and 2 deletions

View File

@ -356,6 +356,12 @@ ul.three-columns li, ul.two-columns li {
* columns. */ * columns. */
white-space: normal; white-space: normal;
} }
.two-columns {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
} }
@media (max-width:479px) { @media (max-width:479px) {

View File

@ -1,7 +1,7 @@
<modal id="about" status="info" icon="far fa-heart" heading="{{'About' | translate}}" large="yes" closeable="yes"> <modal id="about" status="info" icon="far fa-heart" heading="{{'About' | translate}}" large="yes" closeable="yes">
<div class="modal-body"> <div class="modal-body">
<h1 class="text-center"> <h1 class="text-center">
<img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="vertical-align: -16px" height="100" width="366" /> <img alt="Syncthing" src="assets/img/logo-horizontal.svg" style="max-width: 366px; vertical-align: -16px" />
<br /> <br />
<small>{{versionString()}}</small> <small>{{versionString()}}</small>
<br /> <br />

View File

@ -8,7 +8,7 @@
<div id="log-viewer-log" class="tab-pane in active"> <div id="log-viewer-log" class="tab-pane in active">
<label translate ng-if="logging.logEntries.length == 0">Loading...</label> <label translate ng-if="logging.logEntries.length == 0">Loading...</label>
<textarea id="logViewerText" class="form-control" rows="20" ng-if="logging.logEntries.length != 0" readonly style="font-family: Consolas; font-size: 11px; overflow: auto;">{{ logging.content() }}</textarea> <textarea id="logViewerText" class="form-control" rows="20" ng-if="logging.logEntries.length != 0" readonly style="font-family: Consolas, monospace; font-size: 11px; overflow: auto;">{{ logging.content() }}</textarea>
<p translate class="help-block" ng-style="{'visibility': logging.paused ? 'visible' : 'hidden'}">Log tailing paused. Scroll to the bottom to continue.</p> <p translate class="help-block" ng-style="{'visibility': logging.paused ? 'visible' : 'hidden'}">Log tailing paused. Scroll to the bottom to continue.</p>
</div> </div>