Form restyling; layout cleanup/responsiveness

static/script.js

@@ -106,10 +106,14 @@ $(document).ready(function() {
     $("#action-search").change(function() {
         $(".cv-search").prop("disabled", false);
         $(".cv-compare").prop("disabled", true);
+        $(".cv-search-oo-ui").addClass("oo-ui-widget-enabled").removeClass("oo-ui-widget-disabled");
+        $(".cv-compare-oo-ui").addClass("oo-ui-widget-disabled").removeClass("oo-ui-widget-enabled");
     });
     $("#action-compare").change(function() {
         $(".cv-search").prop("disabled", true);
         $(".cv-compare").prop("disabled", false);
+        $(".cv-search-oo-ui").addClass("oo-ui-widget-disabled").removeClass("oo-ui-widget-enabled");
+        $(".cv-compare-oo-ui").addClass("oo-ui-widget-enabled").removeClass("oo-ui-widget-disabled");
     });
 
     if ($("#action-search" ).is(":checked")) $("#action-search" ).change();
@@ -128,7 +132,10 @@ $(document).ready(function() {
         }
         $("#cv-form button[type='submit']")
             .prop("disabled", true)
-            .css("cursor", "progress");
+            .css("cursor", "progress")
+            .parent()
+            .addClass("oo-ui-widget-disabled")
+            .removeClass("oo-ui-widget-enabled");
     });
 
     if ($("#cv-additional").length >= 0) {

static/script.min.js

@@ -1 +1 @@
-function update_screen_size(){var cache=cache_cookie(),data={width:window.screen.availWidth,height:window.screen.availHeight};cache&&cache.width==data.width&&cache.height==data.height||set_cookie("CopyviosScreenCache",JSON.stringify(data),1095)}function cache_cookie(){var cookie=get_cookie("CopyviosScreenCache");if(cookie)try{data=JSON.parse(cookie);var width=data.width,height=data.height;if(width&&height)return{width:width,height:height}}catch(SyntaxError){}return!1}function get_cookie(name){for(var nameEQ=name+"=",ca=document.cookie.split(";"),i=0;i<ca.length;i++){for(var c=ca[i];" "==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf(nameEQ)){var value=window.atob(c.substring(nameEQ.length,c.length));if(0==value.indexOf("--cpv2"))return value.substring("--cpv2".length,value.length)}}return null}function set_cookie_with_date(name,value,expires){value=window.btoa("--cpv2"+value);var path=window.location.pathname.split("/",2)[1];expires=expires?"; expires="+expires.toUTCString():"",document.cookie=name+"="+value+expires+"; path=/"+path}function set_cookie(name,value,days){var date;days?((date=new Date).setTime(date.getTime()+24*days*60*60*1e3),set_cookie_with_date(name,value,date)):set_cookie_with_date(name,value)}function delete_cookie(name){set_cookie(name,"",-1)}function toggle_notice(){var details=$("#notice-collapse-box"),trigger=$("#notice-collapse-trigger");details.is(":hidden")?(details.show(),trigger.text("[hide]")):(details.hide(),trigger.text("[show]"))}function install_notice(){var details=$("#notice-collapse-box"),trigger=$("#notice-collapse-trigger");0<=details.length&&0<=trigger.length&&(trigger.replaceWith($("<a/>",{id:"notice-collapse-trigger",href:"#",text:"[show]",click:function(){return toggle_notice(),!1}})),details.hide())}$(document).ready(function(){$("#action-search").change(function(){$(".cv-search").prop("disabled",!1),$(".cv-compare").prop("disabled",!0)}),$("#action-compare").change(function(){$(".cv-search").prop("disabled",!0),$(".cv-compare").prop("disabled",!1)}),$("#action-search").is(":checked")&&$("#action-search").change(),$("#action-compare").is(":checked")&&$("#action-compare").change(),$("#cv-form").submit(function(){$("#action-search").is(":checked")&&$.each([["engine","use_engine"],["links","use_links"],["turnitin","turnitin"]],function(i,val){$("#cv-cb-"+val[0]).is(":checked")&&$("#cv-form input[type='hidden'][name='"+val[1]+"']").prop("disabled",!0)}),$("#cv-form button[type='submit']").prop("disabled",!0).css("cursor","progress")}),0<=$("#cv-additional").length&&($("#cv-additional").css("display","block"),$(".source-default-hidden").css("display","none"),$("#show-additional-sources").click(function(){return $(".source-default-hidden").css("display",""),$("#cv-additional").css("display","none"),!1})),install_notice()});
+function update_screen_size(){var cache=cache_cookie(),data={width:window.screen.availWidth,height:window.screen.availHeight};cache&&cache.width==data.width&&cache.height==data.height||set_cookie("CopyviosScreenCache",JSON.stringify(data),1095)}function cache_cookie(){var cookie=get_cookie("CopyviosScreenCache");if(cookie)try{data=JSON.parse(cookie);var width=data.width,height=data.height;if(width&&height)return{width:width,height:height}}catch(SyntaxError){}return!1}function get_cookie(name){for(var nameEQ=name+"=",ca=document.cookie.split(";"),i=0;i<ca.length;i++){for(var c=ca[i];" "==c.charAt(0);)c=c.substring(1,c.length);if(0==c.indexOf(nameEQ)){var value=window.atob(c.substring(nameEQ.length,c.length));if(0==value.indexOf("--cpv2"))return value.substring("--cpv2".length,value.length)}}return null}function set_cookie_with_date(name,value,expires){value=window.btoa("--cpv2"+value);var path=window.location.pathname.split("/",2)[1];expires=expires?"; expires="+expires.toUTCString():"",document.cookie=name+"="+value+expires+"; path=/"+path}function set_cookie(name,value,days){var date;days?((date=new Date).setTime(date.getTime()+24*days*60*60*1e3),set_cookie_with_date(name,value,date)):set_cookie_with_date(name,value)}function delete_cookie(name){set_cookie(name,"",-1)}function toggle_notice(){var details=$("#notice-collapse-box"),trigger=$("#notice-collapse-trigger");details.is(":hidden")?(details.show(),trigger.text("[hide]")):(details.hide(),trigger.text("[show]"))}function install_notice(){var details=$("#notice-collapse-box"),trigger=$("#notice-collapse-trigger");0<=details.length&&0<=trigger.length&&(trigger.replaceWith($("<a/>",{id:"notice-collapse-trigger",href:"#",text:"[show]",click:function(){return toggle_notice(),!1}})),details.hide())}$(document).ready(function(){$("#action-search").change(function(){$(".cv-search").prop("disabled",!1),$(".cv-compare").prop("disabled",!0),$(".cv-search-oo-ui").addClass("oo-ui-widget-enabled").removeClass("oo-ui-widget-disabled"),$(".cv-compare-oo-ui").addClass("oo-ui-widget-disabled").removeClass("oo-ui-widget-enabled")}),$("#action-compare").change(function(){$(".cv-search").prop("disabled",!0),$(".cv-compare").prop("disabled",!1),$(".cv-search-oo-ui").addClass("oo-ui-widget-disabled").removeClass("oo-ui-widget-enabled"),$(".cv-compare-oo-ui").addClass("oo-ui-widget-enabled").removeClass("oo-ui-widget-disabled")}),$("#action-search").is(":checked")&&$("#action-search").change(),$("#action-compare").is(":checked")&&$("#action-compare").change(),$("#cv-form").submit(function(){$("#action-search").is(":checked")&&$.each([["engine","use_engine"],["links","use_links"],["turnitin","turnitin"]],function(i,val){$("#cv-cb-"+val[0]).is(":checked")&&$("#cv-form input[type='hidden'][name='"+val[1]+"']").prop("disabled",!0)}),$("#cv-form button[type='submit']").prop("disabled",!0).css("cursor","progress").parent().addClass("oo-ui-widget-disabled").removeClass("oo-ui-widget-enabled")}),0<=$("#cv-additional").length&&($("#cv-additional").css("display","block"),$(".source-default-hidden").css("display","none"),$("#show-additional-sources").click(function(){return $(".source-default-hidden").css("display",""),$("#cv-additional").css("display","none"),!1})),install_notice()});

static/style.css

@@ -25,7 +25,19 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: center;
-    max-width: 1600px;
+}
+
+@media only screen and (min-width: 1200px) {
+    #container.splash {
+        min-width: 1200px;
+        max-width: 1600px;
+    }
+}
+
+@media only screen and (max-width: 1200px) {
+    #container.splash {
+        width: 100%;
+    }
 }
 
 #container.splash > .padding {
@@ -40,6 +52,18 @@ body {
     padding: 1em;
 }
 
+@media only screen and (max-width: 1000px) {
+    #content {
+        margin: 1em 1em;
+    }
+}
+
+@media only screen and (max-width: 400px) {
+    #content {
+        margin: 0;
+    }
+}
+
 header {
     background-color: #eaecf0;
     padding: 0.2em 1em;
@@ -56,6 +80,12 @@ header h1 {
     margin: 0 1em 0 0;
 }
 
+@media only screen and (max-width: 500px) {
+    header h1 {
+        font-size: 1.5em;
+    }
+}
+
 #settings-link::before {
     content: ' ';
     font-size: 0.85em;
@@ -88,6 +118,10 @@ footer li:not(:last-child)::after {
     content: ' \00b7';
 }
 
+footer a {
+    white-space: nowrap;
+}
+
 ul, ol {
     line-height: 1.5;
 }
@@ -96,13 +130,9 @@ h2 {
     margin-bottom: 0.2em;
 }
 
-#notice-box {
-    padding: 10px;
-    margin: 10px 5px;
-}
-
-#notice-box p {
-    margin: 0.25em 0;
+#notice-box, #info-box {
+    padding: 0 1em;
+    margin: 1em 0;
 }
 
 #notice-box ul {
@@ -110,74 +140,56 @@ h2 {
     margin: 0;
 }
 
-#info-box {
-    padding: 0 10px;
-    margin: 10px 5px;
-}
-
 #cv-result {
-    padding: 5px;
-    margin: 10px 5px;
+    padding: 0.5em;
+    margin: 1em 0;
 }
 
 #attribution-warning {
     padding: 1em;
-    margin: 15px 5px 10px 5px;
+    margin: 1em 0;
 }
 
 #turnitin-container {
-    padding: 5px;
-    margin: 15px 5px 10px 5px;
+    padding: 0.5em 1em 1em;
+    margin: 1em 0;
 }
 
 #sources-container {
-    padding: 5px 10px;
-    margin: 15px 5px 10px 5px;
+    padding: 0.5em 1em 1em;
+    margin: 1em 0;
     background-color: #eee;
     border: 1px solid #bbb;
 }
 
 #turnitin-title, #sources-title {
-    margin-bottom: -5px;
+    margin-bottom: -0.5em;
     text-align: center;
     font-weight: bold;
 }
 
-#turnitin-summary {
-    padding-bottom: 5px;
-    font-style: italic;
-}
-
 #cv-additional {
     display: none;
 }
 
 #generation-time {
-    margin-right: 5px;
     text-align: right;
     font-style: italic;
 }
 
-#cv-chain-container {
-    margin: 0 4px;
+@media only screen and (min-width: 600px) {
+    #generation-time {
+        margin-top: -1em;
+    }
 }
 
 #heading {
     width: 100%;
 }
 
-#cv-form-outer {
-    width: 800px;
-}
-
-#cv-form-inner {
-    width: 100%;
-    border-spacing: 0;
-}
-
 #cv-result-sources {
     width: 100%;
-    border-spacing: 0 4px;
+    border-spacing: 0 0.4em;
     table-layout: fixed;
 }
 
@@ -222,6 +234,7 @@ h2 {
 
 #cv-result-head-table td:nth-child(2) div:nth-child(1) {
     font-weight: bold;
+    white-space: nowrap;
 }
 
 #cv-result-head-table td:nth-child(2) div:nth-child(2) {
@@ -236,7 +249,6 @@ h2 {
 
 #cv-chain-table {
     width: 100%;
-    margin-bottom: 10px;
     border-spacing: 0;
     table-layout: fixed;
 }
@@ -256,35 +268,6 @@ h2 {
     text-align: right;
 }
 
-#cv-col1 {
-    width: 15%;
-}
-
-#cv-col2 {
-    width: 55%;
-}
-
-#cv-col3 {
-    width: 15%;
-    text-align: center;
-}
-
-#cv-col4 {
-    width: 15%;
-}
-
-#cv-inner-col1 {
-    width: 4%;
-}
-
-#cv-inner-col2 {
-    width: 22%;
-}
-
-#cv-inner-col3 {
-    width: 76%;
-}
-
 #cv-result-header {
     margin: 0;
 }
@@ -310,10 +293,10 @@ h2 {
 #cv-cached span {
     display: none;
     position: absolute;
-    top: 20px;
-    left: -50px;
-    width: 500px;
-    padding: 5px;
+    top: 1.5em;
+    left: -5em;
+    width: 30em;
+    padding: 1em;
     z-index: 1;
     background: #f3f3f3;
     border: 1px solid #aaa;
@@ -347,7 +330,7 @@ h2 {
 }
 
 .cv-source-footer {
-    padding-bottom: 5px;
+    padding-bottom: 0.5em;
     font-style: italic;
 }
 
@@ -356,7 +339,7 @@ h2 {
 }
 
 .cv-chain-detail {
-    padding: 0 10px 0 10px;
+    padding: 0 1em;
     background-color: #fff;
     border: 1px solid #bbb;
 }
@@ -367,11 +350,11 @@ h2 {
 }
 
 .cv-chain-cell:first-child {
-    padding-right: 5px;
+    padding-right: 0.5em;
 }
 
 .cv-chain-cell:last-child {
-    padding-left: 5px;
+    padding-left: 0.5em;
 }
 
 .turnitin-table-cell {
@@ -383,19 +366,6 @@ h2 {
     line-height: 1.4;
 }
 
-.cv-text {
-    width: 100%;
-}
-
-.cv-search {
-    margin-left: 0;
-    margin-right: 5px;
-}
-
-.cv-search ~ .cv-search {
-    margin-left: 20px;
-}
-
 .cv-hl {
     background: #faa;
 }
@@ -452,3 +422,44 @@ header a:active {
 .source-url:visited { color: #357; }
 .source-url:hover   { color: #035; }
 .source-url:active  { color: #404; }
+
+.oo-ui-horizontalLayout > .oo-ui-textInputWidget,
+.oo-ui-horizontalLayout > .oo-ui-dropdownInputWidget {
+    width: auto;
+}
+
+.oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
+    hyphens: initial;
+}
+
+.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left  > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
+.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
+    width: 10%;
+}
+
+.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left  > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field,
+.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
+    width: 90%;
+}
+
+.page-title.oo-ui-textInputWidget, .compare-url.oo-ui-textInputWidget {
+    width: 60%;
+}
+
+.page-oldid.oo-ui-textInputWidget {
+    width: 10em;
+}
+
+label.site, label.page {
+    min-width: 4em;
+}
+
+label.action {
+    min-width: 10em;
+}
+
+@media only screen and (max-width: 720px) {
+    .oo-ui-horizontalLayout > .oo-ui-widget {
+        width: 100%;
+    }
+}

templates/index.mako

@@ -29,7 +29,7 @@
             % elif query.error == "bad oldid":
                 The revision ID <code>${query.oldid | h}</code> is invalid. It should be an integer.
             % elif query.error == "no URL":
-                URL comparison mode requires a URL to be entered. Enter one in the text box below, or choose copyvio search mode to look for content similar to the article elsewhere on the web.
+                Compare mode requires a URL to be entered. Enter one in the text box below, or choose copyvio search mode to look for content similar to the article elsewhere on the web.
             % elif query.error == "bad URI":
                 Unsupported URI scheme: <a href="${query.url | h}">${query.url | h}</a>.
             % elif query.error == "no data":
@@ -56,118 +56,125 @@
         </div>
     % endif
 %endif
-<p>This tool attempts to detect <a href="https://en.wikipedia.org/wiki/WP:COPYVIO">copyright violations</a> in articles. In <i>search mode</i>, it will check for similar content elsewhere on the web using <a href="https://developers.google.com/custom-search/">Google</a>, external links present in the text of the page, or <a href="https://en.wikipedia.org/wiki/Wikipedia:Turnitin">Turnitin</a> (via <a href="https://en.wikipedia.org/wiki/User:EranBot">EranBot</a>), depending on which options are selected. In <i>comparison mode</i>, the tool will compare the article to a specific webpage without making additional searches, like the <a href="https://dupdet.toolforge.org/">Duplication Detector</a>.</p>
+<p>This tool attempts to detect <a href="https://en.wikipedia.org/wiki/WP:COPYVIO">copyright violations</a> in articles. In <i>search mode</i>, it will check for similar content elsewhere on the web using <a href="https://developers.google.com/custom-search/">Google</a>, external links present in the text of the page, or <a href="https://en.wikipedia.org/wiki/Wikipedia:Turnitin">Turnitin</a> (via <a href="https://en.wikipedia.org/wiki/User:EranBot">EranBot</a>), depending on which options are selected. In <i>compare mode</i>, the tool will compare the article to a specific webpage without making additional searches, like the <a href="https://dupdet.toolforge.org/">Duplication Detector</a>.</p>
 <p>Running a full check can take up to a minute if other websites are slow or if the tool is under heavy use. Please be patient. If you get a timeout, wait a moment and refresh the page.</p>
 <p>Be aware that other websites can copy from Wikipedia, so check the results carefully, especially for older or well-developed articles. Specific websites can be skipped by adding them to the <a href="https://en.wikipedia.org/wiki/User:EarwigBot/Copyvios/Exclusions">excluded URL list</a>.</p>
 <form id="cv-form" action="${request.script_root}/" method="get">
-    <table id="cv-form-outer">
-        <tr>
-            <td>Site:</td>
-            <td colspan="3">
-                <span class="mono">https://</span>
-                <select name="lang">
-                    <% selected_lang = query.orig_lang if query.orig_lang else g.cookies["CopyviosDefaultLang"].value if "CopyviosDefaultLang" in g.cookies else cache.bot.wiki.get_site().lang %>\
-                    % for code, name in cache.langs:
-                        % if code == selected_lang:
-                            <option value="${code | h}" selected="selected">${name}</option>
-                        % else:
-                            <option value="${code | h}">${name}</option>
-                        % endif
-                    % endfor
-                </select>
-                <span class="mono">.</span>
-                <select name="project">
-                    <% selected_project = query.project if query.project else g.cookies["CopyviosDefaultProject"].value if "CopyviosDefaultProject" in g.cookies else cache.bot.wiki.get_site().project %>\
-                    % for code, name in cache.projects:
-                        % if code == selected_project:
-                            <option value="${code | h}" selected="selected">${name}</option>
-                        % else:
-                            <option value="${code | h}">${name}</option>
-                        % endif
-                    % endfor
-                </select>
-                <span class="mono">.org</span>
-            </td>
-        </tr>
-        <tr>
-            <td id="cv-col1">Page&nbsp;title:</td>
-            <td id="cv-col2">
+    <div class="oo-ui-layout oo-ui-horizontalLayout">
+        <label class="site oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">Site</label>
+        <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-dropdownInputWidget oo-ui-dropdownInputWidget-php">
+            <select name="lang" required="" class="oo-ui-inputWidget-input oo-ui-indicator-down" title="Language">
+                <% selected_lang = query.orig_lang if query.orig_lang else g.cookies["CopyviosDefaultLang"].value if "CopyviosDefaultLang" in g.cookies else cache.bot.wiki.get_site().lang %>\
+                % for code, name in cache.langs:
+                    % if code == selected_lang:
+                        <option value="${code | h}" selected="selected">${name}</option>
+                    % else:
+                        <option value="${code | h}">${name}</option>
+                    % endif
+                % endfor
+            </select>
+        </div>
+        <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-dropdownInputWidget oo-ui-dropdownInputWidget-php">
+            <select name="project" required="" class="oo-ui-inputWidget-input oo-ui-indicator-down" title="Project">
+                <% selected_project = query.project if query.project else g.cookies["CopyviosDefaultProject"].value if "CopyviosDefaultProject" in g.cookies else cache.bot.wiki.get_site().project %>\
+                % for code, name in cache.projects:
+                    % if code == selected_project:
+                        <option value="${code | h}" selected="selected">${name}</option>
+                    % else:
+                        <option value="${code | h}">${name}</option>
+                    % endif
+                % endfor
+            </select>
+        </div>
+    </div>
+    <div class="oo-ui-layout oo-ui-horizontalLayout">
+        <label for="cv-title" class="page oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">Page</label>
+        <div class="page-title oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-textInputWidget oo-ui-textInputWidget-type-text oo-ui-textInputWidget-php">
+            <input id="cv-title" type="text" class="oo-ui-inputWidget-input" name="title" placeholder="Title" title="Page title"
                 % if query.title:
-                    <input class="cv-text" type="text" name="title" value="${query.page.title if query.page else query.title | h}" />
-                % else:
-                    <input class="cv-text" type="text" name="title" />
+                    value="${query.page.title if query.page else query.title | h}"
                 % endif
-            </td>
-            <td id="cv-col3">or&nbsp;revision&nbsp;ID:</td>
-            <td id="cv-col4">
+            >
+        </div>
+        <label class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">or</label>
+        <div class="page-oldid oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-textInputWidget oo-ui-textInputWidget-type-text oo-ui-textInputWidget-php">
+            <input id="cv-oldid" type="text" class="oo-ui-inputWidget-input" name="oldid" placeholder="Revision ID" title="Revision ID"
                 % if query.oldid:
-                    <input class="cv-text" type="text" name="oldid" value="${query.oldid | h}" />
-                % else:
-                    <input class="cv-text" type="text" name="oldid" />
+                    value="${query.oldid | h}"
                 % endif
-            </td>
-        </tr>
-        <tr>
-            <td>Action:</td>
-            <td colspan="3">
-                <table id="cv-form-inner">
-                    <tr>
-                        <td id="cv-inner-col1">
-                            <input id="action-search" type="radio" name="action" value="search" ${'checked="checked"' if (query.action == "search" or not query.action) else ""} />
-                        </td>
-                        <td id="cv-inner-col2"><label for="action-search">Copyvio&nbsp;search:</label></td>
-                        <td id="cv-inner-col3">
-                            <input type="hidden" name="use_engine" value="0" />
-                            <input id="cv-cb-engine" class="cv-search" type="checkbox" name="use_engine" value="1" ${'checked="checked"' if query.use_engine not in ("0", "false") else ""} />
-                            <label for="cv-cb-engine">Use&nbsp;search&nbsp;engine</label>
+            >
+        </div>
+    </div>
+    <div class="oo-ui-layout oo-ui-horizontalLayout">
+        <span class="oo-ui-widget oo-ui-widget-enabled">
+            <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-radioInputWidget">
+                <input id="action-search" class="oo-ui-inputWidget-input" type="radio" name="action" value="search" ${'checked="checked"' if (query.action == "search" or not query.action) else ""}><span></span>
+            </span>
+            <label for="action-search" class="action oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">Copyvio search</label>
+        </span>
 
-                            <input type="hidden" name="use_links" value="0" />
-                            <input id="cv-cb-links" class="cv-search" type="checkbox" name="use_links" value="1" ${'checked="checked"' if query.use_links not in ("0", "false") else ""} />
-                            <label for="cv-cb-links">Use&nbsp;links&nbsp;in&nbsp;page</label>
+        <input type="hidden" name="use_engine" value="0">
+        <span class="oo-ui-widget oo-ui-widget-enabled">
+            <span class="cv-search-oo-ui oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
+                <input id="cv-cb-engine" class="cv-search oo-ui-inputWidget-input" type="checkbox" name="use_engine" value="1" ${'checked="checked"' if query.use_engine not in ("0", "false") else ""}>
+                <span class="oo-ui-checkboxInputWidget-checkIcon oo-ui-widget oo-ui-widget-enabled oo-ui-iconElement-icon oo-ui-icon-check oo-ui-iconElement oo-ui-labelElement-invisible oo-ui-iconWidget oo-ui-image-invert"></span>
+            </span>
+            <label for="cv-cb-engine" class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">Use search engine</label>
+        </span>
 
-                            <input type="hidden" name="turnitin" value="0" />
-                            <input id="cv-cb-turnitin" class="cv-search" type="checkbox" name="turnitin" value="1" ${'checked="checked"' if query.turnitin in ("1", "true") else ""}/>
-                            <label for="cv-cb-turnitin">Use&nbsp;Turnitin</label>
-                        </td>
-                    </tr>
-                    <tr>
-                        <td>
-                            <input id="action-compare" type="radio" name="action" value="compare" ${'checked="checked"' if query.action == "compare" else ""} />
-                        </td>
-                        <td><label for="action-compare">URL&nbsp;comparison:</label></td>
-                        <td>
-                            <input class="cv-compare cv-text" type="text" name="url"
-                            % if query.url:
-                                value="${query.url | h}"
-                            % endif
-                            />
-                        </td>
-                    </tr>
-                </table>
-            </td>
-        </tr>
-        % if query.nocache or (result and result.cached):
-            <tr>
-                <td><label for="cb-nocache">Bypass&nbsp;cache:</label></td>
-                <td colspan="3">
-                    <input id="cb-nocache" type="checkbox" name="nocache" value="1" ${'checked="checked"' if query.nocache else ""}  />
-                </td>
-            </tr>
-        % endif
-        <tr>
-            <td colspan="4">
-                <button type="submit">Submit</button>
-            </td>
-        </tr>
-    </table>
+        <input type="hidden" name="use_links" value="0">
+        <span class="oo-ui-widget oo-ui-widget-enabled">
+            <span class="cv-search-oo-ui oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
+                <input id="cv-cb-links" class="cv-search oo-ui-inputWidget-input" type="checkbox" name="use_links" value="1" ${'checked="checked"' if query.use_links not in ("0", "false") else ""}>
+                <span class="oo-ui-checkboxInputWidget-checkIcon oo-ui-widget oo-ui-widget-enabled oo-ui-iconElement-icon oo-ui-icon-check oo-ui-iconElement oo-ui-labelElement-invisible oo-ui-iconWidget oo-ui-image-invert"></span>
+            </span>
+            <label for="cv-cb-links" class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">Use links in page</label>
+        </span>
+
+        <input type="hidden" name="turnitin" value="0">
+        <span class="oo-ui-widget oo-ui-widget-enabled">
+            <span class="cv-search-oo-ui oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
+                <input id="cv-cb-turnitin" class="cv-search oo-ui-inputWidget-input" type="checkbox" name="turnitin" value="1" ${'checked="checked"' if query.turnitin in ("1", "true") else ""}>
+                <span class="oo-ui-checkboxInputWidget-checkIcon oo-ui-widget oo-ui-widget-enabled oo-ui-iconElement-icon oo-ui-icon-check oo-ui-iconElement oo-ui-labelElement-invisible oo-ui-iconWidget oo-ui-image-invert"></span>
+            </span>
+            <label for="cv-cb-turnitin" class="oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">Use Turnitin</label>
+        </span>
+    </div>
+    <div class="oo-ui-layout oo-ui-horizontalLayout">
+        <span class="oo-ui-widget oo-ui-widget-enabled">
+            <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-radioInputWidget">
+                <input id="action-compare" class="oo-ui-inputWidget-input" type="radio" name="action" value="compare" ${'checked="checked"' if query.action == "compare" else ""}><span></span>
+            </span>
+            <label for="action-compare" class="action oo-ui-widget oo-ui-widget-enabled oo-ui-labelElement-label oo-ui-labelElement oo-ui-labelWidget">Copyvio compare</label>
+        </span>
+        <div class="compare-url cv-compare-oo-ui oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-textInputWidget oo-ui-textInputWidget-type-text oo-ui-textInputWidget-php">
+            <input type="text" class="cv-compare oo-ui-inputWidget-input" name="url" placeholder="URL" title="URL to compare"
+                % if query.url:
+                    value="${query.url | h}"
+                % endif
+            >
+        </div>
+    </div>
+    % if query.nocache or (result and result.cached):
+        <div class="oo-ui-layout oo-ui-horizontalLayout">
+            <span class="cv-search-oo-ui oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-checkboxInputWidget">
+                <input id="cb-nocache" class="oo-ui-inputWidget-input" type="checkbox" name="nocache" value="1" ${'checked="checked"' if query.nocache else ""}>
+                <span class="oo-ui-checkboxInputWidget-checkIcon oo-ui-widget oo-ui-widget-enabled oo-ui-iconElement-icon oo-ui-icon-check oo-ui-iconElement oo-ui-labelElement-invisible oo-ui-iconWidget oo-ui-image-invert"></span>
+            </span>
+            <label for="cb-nocache">Bypass cache</label>
+        </div>
+    % endif
+    <div class="oo-ui-layout oo-ui-horizontalLayout">
+        <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-flaggedElement-primary oo-ui-flaggedElement-progressive oo-ui-buttonWidget">
+            <button type="submit" class="oo-ui-buttonElement-button">Submit</button>
+        </span>
+    </div>
 </form>
 
 % if result:
     <div id="generation-time">
         Results
-        % if result.cached:
-            <a id="cv-cached" href="#">cached<span>To save time (and money), this tool will retain the results of checks for up to 72 hours. This includes the URLs of the checked sources, but neither their content nor the content of the article. Future checks on the same page (assuming it remains unchanged) will not involve additional search queries, but a fresh comparison against the source URL will be made. If the page is modified, a new check will be run.</span></a> from <abbr title="${result.cache_time}">${result.cache_age} ago</abbr>. Originally
-        % endif
+        <a id="cv-cached" href="#">cached<span>To save time (and money), this tool will retain the results of checks for up to 72 hours. This includes the URLs of the checked sources, but neither their content nor the content of the article. Future checks on the same page (assuming it remains unchanged) will not involve additional search queries, but a fresh comparison against the source URL will be made. If the page is modified, a new check will be run.</span></a> from some time ago. Originally
         generated in <span class="mono">${round(result.time, 3)}</span>
         % if query.action == "search":
             seconds using <span class="mono">${result.queries}</span> quer${"y" if result.queries == 1 else "ies"}.
@@ -198,13 +205,13 @@
                 <td>
                     <div>
                         % if result.confidence >= T_SUSPECT:
-                            Violation&nbsp;Suspected
+                            Violation suspected
                         % elif result.confidence >= T_POSSIBLE:
-                            Violation&nbsp;Possible
+                            Violation possible
                         % elif result.sources:
-                            Violation&nbsp;Unlikely
+                            Violation unlikely
                         % else:
-                            No&nbsp;Violation
+                            No violation
                         % endif
                     </div>
                     <div>${round(result.confidence * 100, 1)}%</div>
@@ -300,13 +307,11 @@
             % endif
         </div>
     % endif
-    <div id="cv-chain-container">
-        <table id="cv-chain-table">
-            <tr>
-                <td class="cv-chain-cell">Article: <div class="cv-chain-detail"><p>${highlight_delta(result.article_chain, result.best.chains[1] if result.best else None)}</p></div></td>
-                <td class="cv-chain-cell">Source: <div class="cv-chain-detail"><p>${highlight_delta(result.best.chains[0], result.best.chains[1]) if result.best else ""}</p></div></td>
-            </tr>
-        </table>
-    </div>
+    <table id="cv-chain-table">
+        <tr>
+            <td class="cv-chain-cell">Article: <div class="cv-chain-detail"><p>${highlight_delta(result.article_chain, result.best.chains[1] if result.best else None)}</p></div></td>
+            <td class="cv-chain-cell">Source: <div class="cv-chain-detail"><p>${highlight_delta(result.best.chains[0], result.best.chains[1]) if result.best else ""}</p></div></td>
+        </tr>
+    </table>
 % endif
 <%include file="/support/footer.mako"/>

templates/settings.mako

@@ -9,103 +9,88 @@
         <p>${status}</p>
     </div>
 % endif
-<p>This page contains some configurable options for the copyvio detector. Settings are saved as cookies. You can view and delete all cookies generated by this site at the bottom of this page.</p>
+<h2>Settings</h2>
+<p>This page contains some configurable options for the copyvio detector. Settings are saved as cookies.</p>
 <form action="${request.script_root}/settings" method="post">
-    <table>
-        <tr>
-            <td>Default site:</td>
-            <td>
-                <span class="mono">https://</span>
-                <select name="lang">
-                    <% selected_lang = g.cookies["CopyviosDefaultLang"].value if "CopyviosDefaultLang" in g.cookies else default_lang %>\
-                    % for code, name in cache.langs:
-                        % if code == selected_lang:
-                            <option value="${code | h}" selected="selected">${name}</option>
-                        % else:
-                            <option value="${code | h}">${name}</option>
-                        % endif
-                    % endfor
-                </select>
-                <span class="mono">.</span>
-                <select name="project">
-                    <% selected_project = g.cookies["CopyviosDefaultProject"].value if "CopyviosDefaultProject" in g.cookies else default_project %>\
-                    % for code, name in cache.projects:
-                        % if code == selected_project:
-                            <option value="${code | h}" selected="selected">${name}</option>
-                        % else:
-                            <option value="${code | h}">${name}</option>
-                        % endif
+    <h3>Default site</h2>
+    <div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-top">
+        <div class="oo-ui-fieldLayout-body">
+            <div class="oo-ui-fieldLayout-field">
+                <div class="oo-ui-widget oo-ui-widget-enabled">
+                    <div class="oo-ui-layout oo-ui-horizontalLayout">
+                        <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-dropdownInputWidget oo-ui-dropdownInputWidget-php">
+                            <select name="lang" required="" class="oo-ui-inputWidget-input oo-ui-indicator-down">
+                                <% selected_lang = g.cookies["CopyviosDefaultLang"].value if "CopyviosDefaultLang" in g.cookies else default_lang %>\
+                                % for code, name in cache.langs:
+                                    % if code == selected_lang:
+                                        <option value="${code | h}" selected="selected">${name}</option>
+                                    % else:
+                                        <option value="${code | h}">${name}</option>
+                                    % endif
+                                % endfor
+                            </select>
+                        </div>
+                        <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-dropdownInputWidget oo-ui-dropdownInputWidget-php">
+                            <select name="project" required="" class="oo-ui-inputWidget-input oo-ui-indicator-down">
+                                <% selected_project = g.cookies["CopyviosDefaultProject"].value if "CopyviosDefaultProject" in g.cookies else default_project %>\
+                                % for code, name in cache.projects:
+                                    % if code == selected_project:
+                                        <option value="${code | h}" selected="selected">${name}</option>
+                                    % else:
+                                        <option value="${code | h}">${name}</option>
+                                    % endif
+                                % endfor
+                            </select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <h3>Background</h2>
+    <%
+        background_options = [
+            ("list", 'Randomly select from <a href="https://commons.wikimedia.org/wiki/User:The_Earwig/POTD">a subset</a> of previous <a href="https://commons.wikimedia.org/">Wikimedia Commons</a> <a href="https://commons.wikimedia.org/wiki/Commons:Picture_of_the_day">Pictures of the Day</a> that work well as widescreen backgrounds, refreshed daily (default).'),
+            ("potd", 'Use the current Commons Picture of the Day, unfiltered. Certain POTDs may be unsuitable as backgrounds due to their aspect ratio or subject matter.'),
+            ("plain", "Use a plain background."),
+        ]
+        selected = g.cookies["CopyviosBackground"].value if "CopyviosBackground" in g.cookies else "list"
+    %>\
+    <div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-top">
+        <div class="oo-ui-fieldLayout-body">
+            <div class="oo-ui-fieldLayout-field">
+                <div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-radioSelectInputWidget">
+                    % for value, desc in background_options:
+                        <div class="oo-ui-layout oo-ui-labelElement oo-ui-fieldLayout oo-ui-fieldLayout-align-inline">
+                            <div class="oo-ui-fieldLayout-body">
+                                <span class="oo-ui-fieldLayout-field">
+                                    <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-radioInputWidget">
+                                        <input id="background-${value}" class="oo-ui-inputWidget-input" type="radio" name="background" value="${value}" ${'checked="checked"' if value == selected else ''}><span></span>
+                                    </span>
+                                </span>
+                                <span class="oo-ui-fieldLayout-header">
+                                    <label for="background-${value}" class="oo-ui-labelElement-label">${desc}</label>
+                                </span>
+                            </div>
+                        </div>
                     % endfor
-                </select>
-                <span class="mono">.org</span>
-            </td>
-        </tr>
-        <%
-            background_options = [
-                ("list", 'Randomly select from <a href="https://commons.wikimedia.org/wiki/User:The_Earwig/POTD">a subset</a> of previous <a href="https://commons.wikimedia.org/">Wikimedia Commons</a> <a href="https://commons.wikimedia.org/wiki/Commons:Picture_of_the_day">Pictures of the Day</a> that work well as widescreen backgrounds, refreshed daily (default).'),
-                ("potd", 'Use the current Commons Picture of the Day, unfiltered. Certain POTDs may be unsuitable as backgrounds due to their aspect ratio or subject matter.'),
-                ("plain", "Use a plain background."),
-            ]
-            selected = g.cookies["CopyviosBackground"].value if "CopyviosBackground" in g.cookies else "list"
-        %>\
-        % for i, (value, desc) in enumerate(background_options):
-            <tr>
-                % if i == 0:
-                    <td>Background:</td>
-                % else:
-                    <td>&nbsp;</td>
-                % endif
-                <td>
-                    <input type="radio" name="background" value="${value}" ${'checked="checked"' if value == selected else ''} /> ${desc}
-                </td>
-            </tr>
-        % endfor
-        <tr>
-            <td colspan="2">
-                <input type="hidden" name="action" value="set"/>
-                <button type="submit">Save</button>
-            </td>
-        </tr>
-    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <input type="hidden" name="action" value="set"/>
+    <div class="oo-ui-layout oo-ui-fieldLayout oo-ui-fieldLayout-align-left">
+        <div class="oo-ui-fieldLayout-body">
+            <span class="oo-ui-fieldLayout-field">
+                <span class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-flaggedElement-primary oo-ui-flaggedElement-progressive oo-ui-labelElement oo-ui-buttonInputWidget">
+                    <button type="submit" class="oo-ui-inputWidget-input oo-ui-buttonElement-button">
+                        <span class="oo-ui-labelElement-label">Save</span>
+                    </button>
+                </span>
+            </span>
+        </div>
+    </div>
 </form>
-<h2>Cookies</h2>
-% if g.cookies:
-    <table>
-    <% cookie_order = ["CopyviosDefaultProject", "CopyviosDefaultLang", "CopyviosBackground", "CopyviosScreenCache"] %>\
-    % for key in [key for key in cookie_order if key in g.cookies]:
-        <% cookie = g.cookies[key] %>\
-        <tr>
-            <td><b><span class="mono">${key | h}</span></b></td>
-            % try:
-                <% lines = dumps(loads(cookie.value), indent=4).splitlines() %>\
-                <td>
-                    % for line in lines:
-                        <span class="mono"><div class="indentable">${line | h}</div></span>
-                    % endfor
-                </td>
-            % except ValueError:
-                <td><span class="mono">${cookie.value | h}</span></td>
-            % endtry
-            <td>
-                <form action="${request.script_root}/settings" method="post">
-                    <input type="hidden" name="action" value="delete">
-                    <input type="hidden" name="cookie" value="${key | h}">
-                    <button type="submit">Delete</button>
-                </form>
-            </td>
-        </tr>
-    % endfor
-        <tr>
-            <td>
-                <form action="${request.script_root}/settings" method="post">
-                    <input type="hidden" name="action" value="delete">
-                    <input type="hidden" name="all" value="1">
-                    <button type="submit">Delete all</button>
-                </form>
-            </td>
-        </tr>
-    </table>
-% else:
-    <p>No cookies!</p>
-% endif
 <%include file="/support/footer.mako"/>

templates/support/header.mako

@@ -8,6 +8,9 @@
 <head>
     <meta charset="utf-8">
     <title>${title | h}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://tools-static.wmflabs.org/cdnjs/ajax/libs/oojs-ui/0.41.3/oojs-ui-core-wikimediaui.min.css" integrity="sha512-xL+tTXAo7a4IAwNrNqBcOGWSqJF6ip0jg4SEda2mapAUxPzfOZQ7inazR4TvSCblHQjwtTOkUDIFtnpaSrg3xg==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://tools-static.wmflabs.org/cdnjs/ajax/libs/oojs-ui/0.41.3/oojs-ui-images-wikimediaui.min.css" integrity="sha512-A0LSCuOGH1+SyLhOs4eSKGbNgIEGXgIGh4ytb0GRj9GSUsjmmK6LFzB/E0o9ymRUvD+q7bZyv74XpboQt5qFvQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
     <link rel="stylesheet" href="${request.script_root}${url_for('static', file='style.min.css')}"/>
     <script src="https://tools-static.wmflabs.org/cdnjs/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
     <script src="${request.script_root}${url_for('static', file='script.min.js')}"></script>