mirror
/
changedetection.io
kopia lustrzana https://github.com/dgtlmoon/changedetection.io
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

UI - Browser Steps - Improving Browser Steps usability on mobile

pull/3012/head
dgtlmoon 2025-02-26 22:23:47 +01:00
rodzic 8e9a83d8f4
commit 957aef4ff3
3 zmienionych plików z 43 dodań i 32 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

2
changedetectionio/static/js/browser-steps.js
Wyświetl plik

@ -221,7 +221,7 @@ $(document).ready(function () {
// If you switch to "Click X,y" after an element here is setup, it will give the last co-ords anyway // If you switch to "Click X,y" after an element here is setup, it will give the last co-ords anyway
//if (x['isClickable'] || x['tagName'].startsWith('h') || x['tagName'] === 'a' || x['tagName'] === 'button' || x['tagtype'] === 'submit' || x['tagtype'] === 'checkbox' || x['tagtype'] === 'radio' || x['tagtype'] === 'li') { //if (x['isClickable'] || x['tagName'].startsWith('h') || x['tagName'] === 'a' || x['tagName'] === 'button' || x['tagtype'] === 'submit' || x['tagtype'] === 'checkbox' || x['tagtype'] === 'radio' || x['tagtype'] === 'li') {
$('select', first_available).val('Click element').change(); $('select', first_available).val('Click element').change();
$('input[type=text]', first_available).first().val(x['xpath']); $('input[type=text]', first_available).first().val(x['xpath']).focus();;
found_something = true; found_something = true;
//} //}
} }

36
changedetectionio/static/styles/scss/parts/_browser-steps.scss
Wyświetl plik

@ -40,19 +40,22 @@
} }
} }
@media only screen and (min-width: 760px) {
#browser-steps .flex-wrapper { #browser-steps .flex-wrapper {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
height: 70vh; height: 70vh;
font-size: 80%; font-size: 80%;
#browser-steps-ui {
flex-grow: 1; /* Allow it to grow and fill the available space */
flex-shrink: 1; /* Allow it to shrink if needed */
flex-basis: 0; /* Start with 0 base width so it stretches as much as possible */
background-color: #eee;
border-radius: 5px;
#browser-steps-ui {
flex-grow: 1; /* Allow it to grow and fill the available space */
flex-shrink: 1; /* Allow it to shrink if needed */
flex-basis: 0; /* Start with 0 base width so it stretches as much as possible */
background-color: #eee;
border-radius: 5px;
}
} }
#browser-steps-fieldlist { #browser-steps-fieldlist {
@ -63,15 +66,21 @@
padding-left: 1rem; padding-left: 1rem;
overflow-y: scroll; overflow-y: scroll;
} }
/* this is duplicate :( */
#browsersteps-selector-wrapper {
height: 100% !important;
}
} }
/* this is duplicate :( */ /* this is duplicate :( */
#browsersteps-selector-wrapper { #browsersteps-selector-wrapper {
height: 100%;
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
position: relative; position: relative;
//width: 100%; height: 80vh;
> img { > img {
position: absolute; position: absolute;
max-width: 100%; max-width: 100%;
@ -91,7 +100,6 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin-left: -40px;
z-index: 100; z-index: 100;
max-width: 350px; max-width: 350px;
text-align: center; text-align: center;

37
changedetectionio/static/styles/styles.css
Wyświetl plik

@ -46,21 +46,22 @@
#browser_steps li > label { #browser_steps li > label {
display: none; } display: none; }
#browser-steps .flex-wrapper { @media only screen and (min-width: 760px) {
display: flex; #browser-steps .flex-wrapper {
flex-flow: row; display: flex;
height: 70vh; flex-flow: row;
font-size: 80%; } height: 70vh;
#browser-steps .flex-wrapper #browser-steps-ui { font-size: 80%; }
flex-grow: 1; #browser-steps .flex-wrapper #browser-steps-ui {
/* Allow it to grow and fill the available space */ flex-grow: 1;
flex-shrink: 1; /* Allow it to grow and fill the available space */
/* Allow it to shrink if needed */ flex-shrink: 1;
flex-basis: 0; /* Allow it to shrink if needed */
/* Start with 0 base width so it stretches as much as possible */ flex-basis: 0;
background-color: #eee; /* Start with 0 base width so it stretches as much as possible */
border-radius: 5px; } background-color: #eee;
#browser-steps .flex-wrapper #browser-steps-fieldlist { border-radius: 5px; }
#browser-steps-fieldlist {
flex-grow: 0; flex-grow: 0;
/* Don't allow it to grow */ /* Don't allow it to grow */
flex-shrink: 0; flex-shrink: 0;
@ -71,13 +72,16 @@
/* Set a max width to prevent overflow */ /* Set a max width to prevent overflow */
padding-left: 1rem; padding-left: 1rem;
overflow-y: scroll; } overflow-y: scroll; }
/* this is duplicate :( */
#browsersteps-selector-wrapper {
height: 100% !important; } }
/* this is duplicate :( */ /* this is duplicate :( */
#browsersteps-selector-wrapper { #browsersteps-selector-wrapper {
height: 100%;
width: 100%; width: 100%;
overflow-y: scroll; overflow-y: scroll;
position: relative; position: relative;
height: 80vh;
/* nice tall skinny one */ } /* nice tall skinny one */ }
#browsersteps-selector-wrapper > img { #browsersteps-selector-wrapper > img {
position: absolute; position: absolute;
@ -92,7 +96,6 @@
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
margin-left: -40px;
z-index: 100; z-index: 100;
max-width: 350px; max-width: 350px;
text-align: center; } text-align: center; }