sitediff 0.0.2 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -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
+ }