Self-Hosted
/
changedetection.io
mirror of https://github.com/dgtlmoon/changedetection.io.git
1
0
Fork 0
Code Issues 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
pull/89/head
dgtlmoon 4 years ago committed by GitHub
parent bae6641777
commit 1f1d2708c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 123 additions and 11 deletions
Show Stats Download Patch File Download Diff File

117
backend/static/css/styles.css
Unescape View File

@ -48,7 +48,6 @@ section.content {
/* table related */ /* table related */
.watch-table { .watch-table {
width: 100%; width: 100%;
} }
.watch-table tr.unviewed { .watch-table tr.unviewed {
@ -93,6 +92,7 @@ section.content {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
} }
#post-list-buttons li { #post-list-buttons li {
display: inline-block; display: inline-block;
} }
@ -219,6 +219,10 @@ body:after, body:before {
color: #fff; color: #fff;
} }
#new-watch-form input {
width: auto !important;
}
#diff-col { #diff-col {
padding-left:40px; padding-left:40px;
} }
@ -264,7 +268,7 @@ footer {
} }
#new-version-text a{ #new-version-text a{
color: #e07171; color: #e07171;http://127.0.0.1:4000/settings
} }
.paused-state.state-False img { .paused-state.state-False img {
@ -274,4 +278,111 @@ footer {
.paused-state.state-False:hover img{ .paused-state.state-False:hover img{
opacity: 0.8; 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"; }*/
}

3
backend/templates/base.html
Unescape View File

@ -16,7 +16,8 @@
<body> <body>
<div class="header"> <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 %} {% 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> <a class="pure-menu-heading" href="https://github.com/dgtlmoon/changedetection.io" rel="noopener"><strong>Change</strong>Detection.io</a>
{% else %} {% else %}

2
backend/templates/edit.html
Unescape View File

@ -29,7 +29,7 @@
<label for="minutes">CSS Filter</label> <label for="minutes">CSS Filter</label>
<input type="text" id="css_filter" name="css_filter" value="{{watch.css_filter}}" <input type="text" id="css_filter" name="css_filter" value="{{watch.css_filter}}"
size="25"/> 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> </div>
<!-- @todo: move to tabs ---> <!-- @todo: move to tabs --->
<fieldset class="pure-group"> <fieldset class="pure-group">

2
backend/templates/settings.html
Unescape View File

@ -4,7 +4,7 @@
<div class="edit-form"> <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> <fieldset>
<div class="pure-control-group"> <div class="pure-control-group">
<label for="minutes">Maximum time in minutes until recheck.</label> <label for="minutes">Maximum time in minutes until recheck.</label>

10
backend/templates/watch-overview.html
Unescape View File

@ -44,9 +44,9 @@
{% if watch.last_error is defined and watch.last_error != False %}error{% endif %} {% 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.paused is defined and watch.paused != False %}paused{% endif %}
{% if watch.newest_history_key| int > watch.last_viewed| int %}unviewed{% endif %}"> {% if watch.newest_history_key| int > watch.last_viewed| int %}unviewed{% endif %}">
<td>{{ loop.index }}</td> <td class="inline">{{ 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="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">{{watch.title if watch.title is not none else watch.url}} <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> <a class="external" target="_blank" rel="noopener" href="{{ watch.url }}"></a>
{% if watch.last_error is defined and watch.last_error != False %} {% if watch.last_error is defined and watch.last_error != False %}
<div class="fetch-error">{{ watch.last_error }}</div> <div class="fetch-error">{{ watch.last_error }}</div>
@ -55,8 +55,8 @@
<span class="watch-tag-list">{{ watch.tag}}</span> <span class="watch-tag-list">{{ watch.tag}}</span>
{% endif %} {% endif %}
</td> </td>
<td>{{watch|format_last_checked_time}}</td> <td class="last-checked">{{watch|format_last_checked_time}}</td>
<td>{% if watch.history|length >= 2 and watch.last_changed %} <td class="last-changed">{% if watch.history|length >= 2 and watch.last_changed %}
{{watch.last_changed|format_timestamp_timeago}} {{watch.last_changed|format_timestamp_timeago}}
{% else %} {% else %}
Not yet Not yet

Write Preview
Loading…
Cancel
Save