diff options
| author | tomasz1986 <twilczynski@naver.com> | 2022-09-20 11:46:35 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-09-20 11:46:35 +0200 |
| commit | dab68cf8414a9be08d1041ca6627ada8e242bf97 (patch) | |
| tree | 5e67b68e751c5e5c5f82b3ff993418de652c0a0a | |
| parent | d51fe3fb3fe8e707f04211dd20a7d59b4315c043 (diff) | |
gui: Add size and improve alt text of device QR code image (#8545)
Currently, the QR code image has no size specified in the HTML. This
causes other elements of the modal to jump around when opening it for
the first time and waiting for the QR image to generate. The jumping is
especially noticeable when the GUI is accessed remotely and there is a
delay while loading the elements due to slow connection.
In addition, capitalise "QR" in the alt text. This is necessary for
accessibility reasons, e.g. when using a screen reader, which may read
upper- and lowercase characters differently.
Lastly, allow to translate the alt text itself.
Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
| -rw-r--r-- | gui/default/syncthing/device/idqrModalView.html | 2 |
1 files changed, 1 insertions, 1 deletions
diff --git a/gui/default/syncthing/device/idqrModalView.html b/gui/default/syncthing/device/idqrModalView.html index 24f8da0e70..729fc78aaa 100644 --- a/gui/default/syncthing/device/idqrModalView.html +++ b/gui/default/syncthing/device/idqrModalView.html @@ -1,7 +1,7 @@ <modal id="idqr" status="info" icon="fas fa-qrcode" heading="{{'Device Identification' | translate}} - {{deviceName(currentDevice)}}" large="yes" closeable="yes"> <div class="modal-body"> <div class="well well-sm text-monospace text-center select-on-click">{{currentDevice.deviceID}}</div> - <img ng-if="currentDevice.deviceID" class="center-block img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}" alt="qr code" /> + <img ng-if="currentDevice.deviceID" class="center-block img-thumbnail" ng-src="qr/?text={{currentDevice.deviceID}}" height="328" width="328" alt="{{'QR code' | translate}}" /> </div> <div class="modal-footer"> <button type="button" class="btn btn-default btn-sm" data-dismiss="modal"> |