sitediff 0.0.2 → 1.1.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,171 @@
1
+ <%
2
+ # Changed pages.
3
+ changed_pages = results.count { |result| !result.success? }
4
+
5
+ # Pages compared.
6
+ compared_pages = results.length
7
+ %>
8
+ <!DOCTYPE html>
9
+ <html>
10
+ <head>
11
+ <%# Important: without charset, chrome chokes on non-ascii characters %>
12
+ <title> SiteDiff Report</title>
13
+ <meta charset="utf-8" />
14
+ <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
15
+ <meta http-equiv="Pragma" content="no-cache" />
16
+ <meta http-equiv="Expires" content="0" />
17
+ <style>
18
+ <%= SiteDiff::Report.css %>
19
+ </style>
20
+ <script>
21
+ <%= SiteDiff::Report.js %>
22
+ </script>
23
+ </head>
24
+ <body class="page-overview" data-page="overview">
25
+ <div id="layout">
26
+ <div class="container">
27
+ <div class="heading">
28
+ <h1><%= report["title"] %></h1>
29
+ <p><%= report["details"] %></p>
30
+ </div>
31
+ </div>
32
+ <div class="container">
33
+ <div class="statistical-info">
34
+ <div class="changed-pages">
35
+ <h3>Changed pages</h3>
36
+ <span class="count">
37
+ <%= changed_pages %>
38
+ </span>
39
+ </div>
40
+
41
+ <div class="compared-pages">
42
+ <h3>Pages compared</h3>
43
+ <span class="count">
44
+ <%= compared_pages %>
45
+ </span>
46
+ </div>
47
+ </div>
48
+ </div>
49
+
50
+ <div class="container">
51
+ <div class="site-info">
52
+ <% tags = %w[before after] %>
53
+ <% tags.each do |tag| %>
54
+ <div class="site site-<%= tag %>">
55
+ <% notes = ['base url']
56
+ notes << 'cached' if cache.read_tags.include?(tag.to_sym) %>
57
+ <div>
58
+ <h3 class="site__tag"><%= tag.capitalize %></h3>
59
+ </div>
60
+ <div>
61
+ <% if display_url = report[tag + '_url_report'] %>
62
+ <a href="<%= display_url %>" class="site__url"><%= display_url %></a>
63
+ <% else %>
64
+ <a href="<%= eval(tag) %>" class="site__url"><%= eval(tag) %></a>
65
+ <% if cache.read_tags.include?(tag.to_sym) %>
66
+ (<%= 'cached' if cache.read_tags.include?(tag.to_sym) %>)
67
+ <% end %>
68
+ <% end %>
69
+ </div>
70
+ <div>
71
+ Crawled on: <%= report[tag + '_time'] %>
72
+ </div>
73
+ <div>
74
+ <%= report[tag + '_note'] %>
75
+ </div>
76
+
77
+ </div>
78
+ <% end %>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="sitediff-toolbar">
83
+ <div class="container">
84
+ <div class="toolbar__left">
85
+ <form class="filter-form">
86
+
87
+ <div class="form-item form-search form-item--search">
88
+ <label>Search</label>
89
+ <input type="search" id="input-search" autofocus placeholder="Search" />
90
+ </div>
91
+
92
+ <div class="form-item form-checkboxes form-item--status">
93
+ <div class="form-checkbox">
94
+ <input type="checkbox" id="input-status-changed" value="changed" />
95
+ <label for="input-status-changed">Changed</label>
96
+ </div>
97
+ <div class="form-checkbox">
98
+ <input type="checkbox" id="input-status-unchanged" value="unchanged" />
99
+ <label for="input-status-unchanged">Unchanged</label>
100
+ </div>
101
+ <div class="form-checkbox">
102
+ <input type="checkbox" id="input-status-error" value="error" />
103
+ <label for="input-status-error">Errors</label>
104
+ </div>
105
+ </div>
106
+
107
+ </form>
108
+ </div>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="container">
113
+ <table id="sitediff-report" cellspacing="0" cellpadding="0">
114
+
115
+ <colgroup>
116
+ <col class="path-col">
117
+ <col class="icon-col">
118
+ <col class="status-col">
119
+ </colgroup>
120
+
121
+ <thead>
122
+ <tr>
123
+ <th>Path</th>
124
+ <th>&nbsp;</th>
125
+ <th>Status</th>
126
+ </tr>
127
+ </thead>
128
+
129
+ <tbody>
130
+ <% results.each do |result| %>
131
+ <tr class="sitediff-result sitediff-result--<%= result.status_text %>" data-status="<%= result.status_text %>">
132
+ <td class="description">
133
+ <span class="path"><%= result.path %></span>
134
+ <div class="buttons">
135
+ <% unless relative %>
136
+ <% unless report['before_url_report'] === false %>
137
+ <a href="<%= result.url(:before, before_url_report || before, cache) %>" class="button-before" target="_blank">Before</a>
138
+ <% end %>
139
+ <% unless report['after_url_report'] === false %>
140
+ <a href="<%= result.url(:after, after_url_report || after, cache) %>" class="button-after" target="_blank">After</a>
141
+ <% end %>
142
+ <% unless report['before_url_report'] === false || report['after_url_report'] === false %>
143
+ <a href="/sidebyside<%= result.path %>" class="button-both">Both</a>
144
+ <% end %>
145
+ <% end %>
146
+ <% unless result.diff_url.nil? %>
147
+ <a href="<%= result.diff_url(relative) %>" class="button button-diff">View diff</a>
148
+ <% end %>
149
+ </div>
150
+ </td>
151
+ <td class="icon">
152
+ <span class="icon icon-result-<%= result.status_text %>"></span>
153
+ </td>
154
+ <td class="status">
155
+ <%= result.status_text.capitalize %>
156
+ </td>
157
+ </tr>
158
+ <% end %>
159
+ </tbody>
160
+
161
+ </table>
162
+ </div>
163
+
164
+ <footer id="footer">
165
+ <div class="credit">
166
+ Brought to you by <a href="https://evolvingweb.ca/?utm_source=sitediff&utm_medium=report&utm_content=footer-link" target="_blank">Evolving Web</a>.
167
+ </div>
168
+ </footer>
169
+ </div>
170
+ </body>
171
+ </html>
@@ -1,10 +1,13 @@
1
1
  <html>
2
2
  <head>
3
3
  <title>Comparison for <%= path %></title>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
6
+ <meta http-equiv="Pragma" content="no-cache" />
7
+ <meta http-equiv="Expires" content="0" />
4
8
  <style>
5
- <%= SiteDiff::Diff.css %>
9
+ <%= SiteDiff::Report.css %>
6
10
  </style>
7
- <meta charset="utf-8" />
8
11
  </head>
9
12
  <body id="sidebyside">
10
13
  <iframe src="<%= before %>"></iframe>
@@ -1,53 +1,326 @@
1
- .sitediff {
2
- font-family: monospace;
3
- font-size: 1.2em;
1
+ * {
2
+ box-sizing: border-box;
4
3
  }
5
- .sitediff .legend {
6
- width: 95%;
7
- margin: 1em auto;
4
+
5
+ a {
6
+ color: #6E73B7;
7
+ text-decoration: none;
8
+ }
9
+
10
+ body {
11
+ font-family: sans-serif;
12
+ font-size: 16px;
13
+ padding: 3em 0;
14
+ }
15
+
16
+ .container {
17
+ overflow: hidden;
18
+ margin: 0 auto;
19
+ padding-left: 1em;
20
+ padding-right: 1em;
21
+ max-width: 1280px;
22
+ }
23
+
24
+ #footer {
25
+ font-size: 90%;
26
+ margin-top: 2em;
8
27
  text-align: center;
9
28
  }
10
- .sitediff .results thead {
11
- background: black;
12
- color: white;
29
+
30
+ .site-info {
31
+ display: flex;
32
+ flex-direction: row;
33
+ align-items: center;
34
+ justify-content: space-between;
35
+ }
36
+
37
+ .site-info .site {
38
+ background-color: #F9F9FB;
39
+ flex-basis: 49%;
40
+ flex-grow: 0;
41
+ flex-shrink: 0;
42
+ padding: 1em;
43
+ }
44
+
45
+ .site__tag {
46
+ margin-top: 0;
47
+ margin-bottom: .5em;
48
+ }
49
+
50
+ /* Statistical info */
51
+ .statistical-info {
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: space-between;
55
+ flex-direction: row;
56
+ margin-bottom: 1em;
57
+ }
58
+
59
+ .statistical-info > div {
60
+ flex-basis: 49%;
61
+ }
62
+
63
+ .statistical-info h3 {
64
+ display: inline-block;
65
+ margin-right: 1em;
13
66
  }
14
- .sitediff .results td {
67
+
68
+ .statistical-info .count {
69
+ background-color: #eeeeee;
70
+ border-radius: 50%;
71
+ display: inline-block;
72
+ font-weight: bold;
73
+ line-height: 2em;
74
+ padding: .1em .25em 0;
75
+ height: 2em;
76
+ width: 2em;
15
77
  text-align: center;
16
78
  }
17
- .sitediff .results td.path {
79
+
80
+ /* Buttons */
81
+ .button {
82
+ background-color: #EAECF3;
83
+ cursor: pointer;
84
+ display: inline-block;
85
+ font-size: .9em;
86
+ padding: .25em .5em .3em;
87
+ text-decoration: none;
88
+ }
89
+
90
+ /**
91
+ * Forms.
92
+ */
93
+ label[for] {
94
+ cursor: pointer;
95
+ }
96
+
97
+ /* Checkboxes */
98
+ .form-checkboxes .form-checkbox {
99
+ display: inline-block;
100
+ margin-right: .5em;
101
+ }
102
+
103
+ .form-checkbox input {
104
+ height: 1em;
105
+ width: 1em;
106
+ }
107
+
108
+ /* Search */
109
+ .form-search label {
110
+ display: none;
111
+ }
112
+
113
+ .form-search input {
114
+ font-size: .9em;
115
+ padding-left: .5em;
116
+ padding-right: .5em;
117
+ width: 200px;
118
+ }
119
+
120
+ /* SiteDiff Toolbar */
121
+ .sitediff-toolbar {
122
+ margin-top: 1em;
123
+ margin-bottom: 1em;
124
+ overflow: hidden;
125
+ padding-top: 5px;
126
+ padding-bottom: 5px;
127
+ }
128
+
129
+ .sitediff-toolbar .form-item {
130
+ display: inline-block;
131
+ margin-right: 1em;
132
+ }
133
+
134
+ .sitediff-toolbar .form-item:last-child {
135
+ margin-right: 0;
136
+ }
137
+
138
+ .sitediff-toolbar .toolbar__left {
139
+ float: left;
140
+ }
141
+
142
+ .sitediff-toolbar .toolbar__right {
143
+ float: right;
144
+ }
145
+
146
+ /* Table */
147
+ table {
148
+ width: 100%;
149
+ }
150
+
151
+ table thead {
152
+ background: #F9F9FB;
153
+ color: #999999;
154
+ }
155
+
156
+ td,
157
+ th {
18
158
  text-align: left;
19
- padding-left: 1em;
159
+ padding: .4em .5em;
20
160
  }
21
- .sitediff .results {
22
- padding: 1em;
23
- width: 95%;
24
- margin: 1em auto;
25
- font-size: 1em;
161
+
162
+ th {
163
+ border-bottom: 2px solid #EAECF3;
164
+ padding-top: .5em;
165
+ padding-bottom: .5em;
26
166
  }
27
- .sitediff tr.error > td.status,
28
- .sitediff tr.error > td.path {
29
- background-color: khaki;
167
+
168
+ table tbody td {
169
+ border-bottom: 2px solid #F9F9FB;
30
170
  }
31
- .sitediff tr.failure > td.status,
32
- .sitediff tr.failure > td.path {
33
- background-color: salmon;
171
+
172
+ table tbody tr:hover {
173
+ background-color: #F9F9FB;
34
174
  }
35
- .sitediff .before-col,
36
- .sitediff .both-col,
37
- .sitediff .after-col,
38
- .sitediff .diff-stat-col {
39
- width: 10%;
175
+
176
+ table .path {
177
+ margin-right: 1em;
40
178
  }
41
- .sitediff .path-col {
42
- width: 55%;
179
+
180
+ table td.description .buttons {
181
+ float: right;
182
+ }
183
+
184
+ table td.description a {
185
+ display: none;
186
+ margin-left: .4em;
187
+ }
188
+
189
+ table td.description:hover a {
190
+ display: inline-block;
191
+ }
192
+
193
+ table td.description .button-diff {
194
+ display: block;
195
+ }
196
+
197
+ table .icon-col {
198
+ width: 25px;
43
199
  }
44
200
 
201
+ table .status-col {
202
+ width: 100px;
203
+ }
204
+
205
+ /* Icons */
206
+ .icon {
207
+ display: inline-block;
208
+ height: 1em;
209
+ width: 1em;
210
+ }
211
+
212
+ .icon-result-changed {
213
+ background-color: lightcoral;
214
+ border-radius: 50%;
215
+ }
216
+
217
+ .icon-result-unchanged {
218
+ background-color: lightgreen;
219
+ border-radius: 50%;
220
+ }
221
+
222
+ .icon-result-error {
223
+ background: khaki;
224
+ border-radius: 50%;
225
+ }
226
+
227
+ /* Side-by-side view */
45
228
  #sidebyside {
46
229
  margin: 0;
47
230
  }
231
+
48
232
  #sidebyside iframe {
49
233
  float: left;
50
234
  height: 100%;
51
235
  width: 50%;
52
236
  border: 0;
53
237
  }
238
+
239
+ /* Page: Diff */
240
+ #diff-navigator {
241
+ background-color: #fefefe;
242
+ box-shadow: 0 0 .5em rgba(0, 0, 0, .25);
243
+ padding: .25em;
244
+ margin-top: 0;
245
+ position: fixed;
246
+ top: 0;
247
+ width: 100%;
248
+ }
249
+
250
+ /*** Overlay */
251
+ .overlay {
252
+ background-color: rgba(0, 0, 0, 0.25);
253
+ height: 100vh;
254
+ left: 0;
255
+ padding: 2em;
256
+ position: fixed;
257
+ top: 0;
258
+ width: 100vw;
259
+ }
260
+
261
+ .overlay__inner {
262
+ background-color: #fff;
263
+ height: 100%;
264
+ margin: 0;
265
+ position: relative;
266
+ width: 100%;
267
+ }
268
+
269
+ .overlay header {
270
+ background-color: #f9f9fb;
271
+ border-bottom: 2px solid #eaecf3;
272
+ display: flex;
273
+ min-height: 3em;
274
+ left: 0;
275
+ position: absolute;
276
+ top: 0;
277
+ width: 100%;
278
+ }
279
+
280
+ .overlay header .prev,
281
+ .overlay header .next,
282
+ .overlay header .exit {
283
+ padding: 0.5em 0;
284
+ margin: 0.5em;
285
+ }
286
+
287
+ .overlay header .prev a,
288
+ .overlay header .next a,
289
+ .overlay header .exit a {
290
+ background-color: #eaecf3;
291
+ font-size: .9em;
292
+ padding: 0.5em;
293
+ text-decoration: none;
294
+ }
295
+
296
+ .overlay header .prev a:hover,
297
+ .overlay header .next a:hover,
298
+ .overlay header .exit a:hover {
299
+ background-color: #d2d7ef;
300
+ }
301
+
302
+ .overlay header .prev.disabled a,
303
+ .overlay header .next.disabled a,
304
+ .overlay header .exit.disabled a,
305
+ .overlay header .prev.disabled a:hover,
306
+ .overlay header .next.disabled a:hover,
307
+ .overlay header .exit.disabled a:hover {
308
+ background-color: eaecf3;
309
+ color: #9b9db8;
310
+ cursor: not-allowed;
311
+ }
312
+ .overlay header .path {
313
+ flex-grow: 1;
314
+ padding: 1em;
315
+ }
316
+
317
+ .overlay article {
318
+ background-color: #fff;
319
+ height: 100%;
320
+ width: 100%;
321
+ }
322
+
323
+ .overlay article iframe {
324
+ height: 100%;
325
+ width: 100%;
326
+ }