Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: Optimize tx-table for mobile screen #1804

Merged
merged 16 commits into from
Aug 25, 2022
Merged

UI: Optimize tx-table for mobile screen #1804

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
dbdcb2c
cellphone style
relativisticelectron Jul 14, 2022
37ea491
nice y behavior, but tooltip missing.
relativisticelectron Jul 14, 2022
c6d5f4e
buttons in a second row
relativisticelectron Jul 14, 2022
d9a2cd6
working stopPropagation
relativisticelectron Jul 14, 2022
3ea9c74
Merge remote-tracking branch 'cryptoadvance/master' into 20220714_mob…
relativisticelectron Jul 28, 2022
d55e1ef
fixing the left and middle part of the toolbar again
relativisticelectron Jul 28, 2022
87c3549
undoing the toolbar
relativisticelectron Jul 28, 2022
1d74f85
removed now useless code
relativisticelectron Jul 28, 2022
d1ce815
Merge branch 'master' into 20220714_mobilescreen
relativisticelectron Aug 2, 2022
824b0bc
Merge branch 'master' into 20220714_mobilescreen
relativisticelectron Aug 8, 2022
5e19947
removed empty line
relativisticelectron Aug 9, 2022
b080a0a
Merge branch 'master' into 20220714_mobilescreen
relativisticelectron Aug 10, 2022
49e6974
change to auto
relativisticelectron Aug 18, 2022
778a85f
make buttons column stack when narrow screen
relativisticelectron Aug 18, 2022
1b65413
Merge remote-tracking branch 'cryptoadvance/master' into 20220714_mob…
relativisticelectron Aug 18, 2022
7f96399
Merge branch 'master' into 20220714_mobilescreen
k9ert Aug 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/cryptoadvance/specter/static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1099,6 +1099,10 @@ This style is used for a div at the bottom in the <main> element to create a dis
}
}
@media (max-width: 690px){
.table-holder{
padding-left: 10px;
padding-right: 10px;
}
.card{
border-width: 0px;
width: auto;
Expand Down
3 changes: 2 additions & 1 deletion src/cryptoadvance/specter/templates/includes/tx-row.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -342,7 +342,7 @@
// Select tx option
if (this.mode == 'utxo') {
this.selectTxImg.classList.remove('hidden');
this.selectTxImg.onclick = () => {
this.selectTxImg.onclick = (e) => {
this.selectTxImg.src = this.selectTxValue.value ? `{{ url_for('static', filename='img/checkbox-untick.svg') }}` : `{{ url_for('static', filename='img/checkbox-tick.svg') }}`;
this.selectTxValue.value = this.selectTxValue.value ? "" : "true";
let event = new CustomEvent('txRowSelected', { detail: {
Expand All @@ -353,6 +353,7 @@
locked: this.tx.locked,
} });
this.dispatchEvent(event);
e.stopPropagation(); // this prevent the onclick of outer divs to be triggered
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@relativisticelectron could you explain this? Which onclick listeneres picked that up? Where did that bubble to? I thought it would be contained within the web component.

Copy link
Collaborator Author

@relativisticelectron relativisticelectron Aug 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The entire row becomes clickable

specter-desktop/src/cryptoadvance/specter/templates/includes/tx-row.html

Line 206 in bb45ac6

if (window.innerWidth < 690) {

The propagation to the outer div has to be stopped.

}
} else {
this.selectTxImg.classList.add('hidden');
Expand Down
8 changes: 7 additions & 1 deletion src/cryptoadvance/specter/templates/includes/tx-table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
align-items: center;
}
.selected-rows-action-box .btn {
width: 200px;
min-width: 170px;
margin: 5px;
height: 38px;
}
Expand Down Expand Up @@ -200,6 +200,7 @@
width: 100%;
margin-bottom: 10px;
border: 1.5px solid var(--cmap-border);
overflow-x: auto;
}
.scrollbar {
overflow-y: auto;
Expand Down Expand Up @@ -265,6 +266,11 @@
flex-direction: column;
height: 100%;
}
@media (max-width: 690px){
.selected-rows-action-box{
flex-direction: column;
}
}
</style>

<nav class="switcher row">
Expand Down