lee/changedetection.io
1
0
Fork 0
mirror of https://github.com/dgtlmoon/changedetection.io.git synced 2026-09-23 22:06:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Mobile fixes (#87)

Browse Source 
#48 - Settings page on android didnt work
- Responsive table layout for the watch list
- Few more improvements
This commit is contained in:
dgtlmoon
2021-06-14 19:40:41 +10:00
committed by GitHub
parent bae6641777
commit 1f1d2708c6
5 changed files with 123 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/static/css/styles.css
+114 -3
View File
@@ -48,7 +48,6 @@ section.content {
/* table related */
.watch-table {
width: 100%;
}
.watch-table tr.unviewed {
@@ -93,6 +92,7 @@ section.content {
padding: 0px;
margin: 0px;
}
#post-list-buttons li {
display: inline-block;
}
@@ -219,6 +219,10 @@ body:after, body:before {
color: #fff;
}
#new-watch-form input {
width: auto !important;
}
#diff-col {
padding-left:40px;
}
@@ -264,7 +268,7 @@ footer {
}
#new-version-text a{
color: #e07171;
color: #e07171;http://127.0.0.1:4000/settings
}
.paused-state.state-False img {
@@ -274,4 +278,111 @@ footer {
.paused-state.state-False:hover img{
opacity: 0.8;
}
}
.pure-form input[type=url] {
width: 100%;
}
.pure-form textarea {
width: 100%;
font-size: 14px;
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
.box {
max-width: 95%
}
.edit-form {
padding: 0.5em;
margin: 0.5em;
}
#nav-menu {
overflow-x: scroll;
}
}
/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
.last-checked::before {
color: #555;
content: "Last Checked ";
}
.last-changed::before {
color: #555;
content: "Last Changed ";
}
/* Force table to not be like tables anymore */
td.inline {
display: inline-block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
.pure-table td, .pure-table th {
border: none;
}
.pure-table-striped tr {
background-color: #fff;
}
.pure-table-striped tr:nth-child(2n-1) {
background-color: #eee;
}
.pure-table-striped tr:nth-child(2n-1) td {
background-color: inherit;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/*
Label the data
*//*
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Secret Alias"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }*/
}
backend/templates/base.html
+2 -1
View File
@@ -16,7 +16,8 @@
<body>
<div class="header">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed" id="nav-menu">
{% if has_password and not current_user.is_authenticated %}
<a class="pure-menu-heading" href="https://github.com/dgtlmoon/changedetection.io" rel="noopener"><strong>Change</strong>Detection.io</a>
{% else %}
backend/templates/edit.html
+1 -1
View File
@@ -29,7 +29,7 @@
<label for="minutes">CSS Filter</label>
<input type="text" id="css_filter" name="css_filter" value="{{watch.css_filter}}"
size="25"/>
<span class="pure-form-message-inline">Limit text to this CSS rule, all matching CSS is included.</span>
<span class="pure-form-message-inline">Limit text to this CSS rule, only matching CSS is included.</span>
</div>
<!-- @todo: move to tabs --->
<fieldset class="pure-group">
backend/templates/settings.html
+1 -1
View File
@@ -4,7 +4,7 @@
<div class="edit-form">
<form class="pure-form pure-form-stacked" action="/settings" method="POST">
<form class="pure-form pure-form-stacked settings" action="/settings" method="POST">
<fieldset>
<div class="pure-control-group">
<label for="minutes">Maximum time in minutes until recheck.</label>
backend/templates/watch-overview.html
+5 -5
View File
@@ -44,9 +44,9 @@
{% if watch.last_error is defined and watch.last_error != False %}error{% endif %}
{% if watch.paused is defined and watch.paused != False %}paused{% endif %}
{% if watch.newest_history_key| int > watch.last_viewed| int %}unviewed{% endif %}">
<td>{{ loop.index }}</td>
<td class="paused-state state-{{watch.paused}}"><a href="/?pause={{ watch.uuid}}{% if active_tag %}&tag={{active_tag}}{% endif %}"><img src="/static/images/pause.svg" alt="Pause"/></a></td>
<td class="title-col">{{watch.title if watch.title is not none else watch.url}}
<td class="inline">{{ loop.index }}</td>
<td class="inline paused-state state-{{watch.paused}}"><a href="/?pause={{ watch.uuid}}{% if active_tag %}&tag={{active_tag}}{% endif %}"><img src="/static/images/pause.svg" alt="Pause"/></a></td>
<td class="title-col inline">{{watch.title if watch.title is not none else watch.url}}
<a class="external" target="_blank" rel="noopener" href="{{ watch.url }}"></a>
{% if watch.last_error is defined and watch.last_error != False %}
<div class="fetch-error">{{ watch.last_error }}</div>
@@ -55,8 +55,8 @@
<span class="watch-tag-list">{{ watch.tag}}</span>
{% endif %}
</td>
<td>{{watch|format_last_checked_time}}</td>
<td>{% if watch.history|length >= 2 and watch.last_changed %}
<td class="last-checked">{{watch|format_last_checked_time}}</td>
<td class="last-changed">{% if watch.history|length >= 2 and watch.last_changed %}
{{watch.last_changed|format_timestamp_timeago}}
{% else %}
Not yet