Skip to content

Commit 60fe9ad

Browse files
Mobile: Better width settings (#1828)
* changed to max-width instead of width * and set that the padding is reduced from 40px to 10px if the screen is narrow * xpubs-table is too wide. Made it x-scrollable.
1 parent 9394d79 commit 60fe9ad

File tree

13 files changed

+44
-26
lines changed

13 files changed

+44
-26
lines changed

src/cryptoadvance/specter/services/swan/templates/swan/index.jinja

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373

7474
{% else %}
7575

76-
<div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
76+
<div class="card center auto-width" style="min-width: 90%">
7777
<a class="button_wide" href="{{ swan_frontend_url }}" target="_swan">
7878
<span class="big_option">
7979
<div class="big_option_text">

src/cryptoadvance/specter/services/swan/templates/swan/oauth2_start.jinja

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
}
77
</style>
88
<img src="{{ url_for(service.id +'_endpoint' + '.static', filename=service.logo) }}" width="300"/>
9-
<div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
9+
<div class="card center auto-width" style="min-width: 90%;">
1010
<h1>{{ _("Enable Swan Integration") }}</h1>
1111
<br/>
1212

src/cryptoadvance/specter/services/swan/templates/swan/oauth2_success.jinja

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
{% block main %}
88
<img src="{{ url_for(service.id +'_endpoint' + '.static', filename=service.logo) }}" width="300"/>
9-
<div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
9+
<div class="card center auto-width" style="min-width: 90%;">
1010
<h1>{{ _("Swan Integration Success!") }}</h1>
1111
<br/>
1212
<h2>{{ _("You can close this browser tab now.") }}</h2>

src/cryptoadvance/specter/static/styles.css

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -498,6 +498,10 @@ input:hover{
498498
border-radius: 4px;
499499
padding: 40px;
500500
}
501+
.auto-width{
502+
width: auto;
503+
margin: 40px;
504+
}
501505
.spacer{
502506
height: 50px;
503507
min-height: 50px;
@@ -598,7 +602,6 @@ textarea{
598602
cursor: pointer;
599603
}
600604
.card .note{
601-
width: 100%;
602605
margin-bottom: 10px;
603606
}
604607
/*.btn.btn-inline{
@@ -1099,14 +1102,24 @@ This style is used for a div at the bottom in the <main> element to create a dis
10991102
}
11001103
}
11011104
@media (max-width: 690px){
1105+
.main-page-container{
1106+
max-width: 90%;
1107+
}
11021108
.table-holder{
11031109
padding-left: 10px;
11041110
padding-right: 10px;
11051111
}
11061112
.card{
11071113
border-width: 0px;
11081114
width: auto;
1115+
padding: 10px;
1116+
}
1117+
.auto-width{
1118+
margin: 0px;
11091119
}
1120+
.table-holder{
1121+
padding: 0 10px;
1122+
}
11101123
nav.row{
11111124
padding-left: 0;
11121125
padding-right: 0;

src/cryptoadvance/specter/templates/device/device_blinding_key.jinja

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
{% include "includes/hwi/hwi.jinja" %}
44
{% include "includes/qr-scanner.html" %}
55
<form name="form" action="{{ url_for('devices_endpoint.device_blinding_key', device_alias=device.alias) }}" method="POST" style="width: 100%;" onsubmit="showPacman();">
6-
<div style="width: auto; margin: 40px;" class="card center" >
6+
<div class="card center auto-width">
77
<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
88
<div>
99
<h1> {{ _("Get the master blinding key") }} </h1>

src/cryptoadvance/specter/templates/device/new_device/new_device_keys.jinja

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
td {
77
text-align: left;
88
}
9+
.xpubs-table{
10+
overflow-x: auto;
11+
}
912
1013
@media screen and (max-width:720px) {
1114
#device_setup_wizard th, #device_setup_wizard td {
@@ -33,7 +36,7 @@
3336
}
3437
</style>
3538
<form id="form" action="{{ url_for('devices_endpoint.new_device_keys', device_type=device_class.device_type) }}" method="POST" style="width: 100%;" onsubmit="showPacman();">
36-
<div style="width: auto; margin: 40px;" class="card center" >
39+
<div class="card center auto-width">
3740
{% if existing_device %}
3841
<input type="hidden" name="existing_device" value="{{ existing_device.alias }}">
3942
{% endif %}
@@ -99,16 +102,18 @@
99102
</p>
100103
</div>
101104
<br>
102-
<table>
103-
<thead>
104-
<tr>
105-
<th></th><th>{{ _("Purpose") }}</th><th>{{ _("Derivation") }}</th><th>XPUB</th><th><button type="button" class="btn" style="width: 60px;" id="edit-xpubs-table-btn" onclick="editXpubsTable(this)">{{ _("Edit") }}</button></th>
106-
</tr>
107-
</thead>
108-
<tbody id="xpubs_table">
109-
</tbody>
110-
<input id="xpubs-table-rows-count" name="xpubs_rows_count" type="hidden"/>
111-
</table>
105+
<div class="xpubs-table">
106+
<table>
107+
<thead>
108+
<tr>
109+
<th></th><th>{{ _("Purpose") }}</th><th>{{ _("Derivation") }}</th><th>XPUB</th><th><button type="button" class="btn" style="width: 60px;" id="edit-xpubs-table-btn" onclick="editXpubsTable(this)">{{ _("Edit") }}</button></th>
110+
</tr>
111+
</thead>
112+
<tbody id="xpubs_table">
113+
</tbody>
114+
<input id="xpubs-table-rows-count" name="xpubs_rows_count" type="hidden"/>
115+
</table>
116+
</div>
112117
<br>
113118
<div class="row overflow">
114119
<div id="connect-hwi" style="max-width: 250px; width: 250px; margin: 10px;" class="btn {% if not device_class.hwi_support %}hidden{% endif %}">

src/cryptoadvance/specter/templates/device/new_device/new_device_mnemonic.jinja

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,14 +33,14 @@
3333
}
3434
</style>
3535
<form id="form" action="{{ url_for('devices_endpoint.new_device_mnemonic', device_type=device_type) }}" method="POST" style="width: 100%;" onsubmit="if (checkAdvancedValidState()) { showPacman(); } else { event.preventDefault(); }">
36-
<div class="card center" style="width: auto; margin: 40px;" >
36+
<div class="card center auto-width">
3737
<h1 style="font-size: 2em;">{{ _("Add") }} {% if existing_device %}{{ _("Keys") }}{% else %}{{ _("Device") }}{% endif %}</h1><br>
3838
{% if existing_device %}
3939
<input type="hidden" name="existing_device" value="{{ existing_device.alias }}">
4040
{% endif %}
4141
<input type="hidden" class="csrf-token" name="csrf_token" value="{{ csrf_token() }}"/>
4242
<div>
43-
<div id="hot-wallet" style="width: 80%; max-width: 700px; margin: auto;">
43+
<div id="hot-wallet" style="max-width: 700px; margin: auto;">
4444
<br>
4545
<p class="note" style="border-radius: 5px; padding: 20px; background: rgba(0,0,0,0.1); color: #ccc;">
4646
<span style="display: inline-block;font-weight: bold; margin-bottom: 8px;">⚠️ A note on hot wallets:</span><br>

src/cryptoadvance/specter/templates/device/new_device/new_device_type.jinja

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% extends "base.jinja" %}
22
{% block main %}
33
<h1 style="font-size: 2em;">{{ _("Add Device") }}</h1><br>
4-
<div id="device_setup_wizard" class="card center" style="width: auto; min-width: 90%; margin: 40px;">
4+
<div id="device_setup_wizard" class="card center auto-width" style="min-width: 90%;">
55
<div id="device-type-container">
66
<h1 style="font-size: 1.8em;">{{ _("Select Your Device Type") }}</h1>
77
<input id="device-type-searchbar" type="text" placeholder='{{ _("Filter devices...") }}' style="width: 60%; font-size: 1.4em; padding: 10px;" oninput="filterDeviceTypes(this.value)">

src/cryptoadvance/specter/templates/services/choose.jinja

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -194,7 +194,7 @@
194194
</div>
195195
{% endif %}
196196

197-
<div class="card center" style="width: auto; min-width: 90%; margin: 40px;">
197+
<div class="card center auto-width" style="min-width: 90%;">
198198
<hr>
199199
<h2>Plugins in Production</h2>
200200
<br>

src/cryptoadvance/specter/templates/settings/general_settings.jinja

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<input type="file" id="file" class="inputfile" webkitdirectory mozdirectory/>
6969
<input type="hidden" id="restorewallets" name="restorewallets"/>
7070
<input type="hidden" id="restoredevices" name="restoredevices"/>
71-
<label for="file" class="btn" style="min-width: 500px; margin-top: 5px;">
71+
<label for="file" class="btn" style="max-width: 500px; margin-top: 5px;">
7272
{{ _("Choose backup folder (unzipped)") }}
7373
</label>
7474
</div>

0 commit comments

Comments
 (0)