mobile styling

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "build": "webpack --mode production",
     "lint": "eslint templates",
-    "sass": "dart-sass -s compressed templates/main.scss  ./static/cache/bundle/css/main.css",
+    "sass": "dart-sass -s compressed templates/main.scss  ./static/cache/bundle/css/main.css && dart-sass -s compressed templates/mobile.scss  ./static/cache/bundle/css/mobile.css",
     "start": "webpack-dev-server --mode development --progress --color",
     "test": "jest"
   },

src/api/v1/admin/auth.rs

@@ -36,14 +36,18 @@ pub mod routes {
     impl GetLoginRoute for Auth {
         fn get_login_route(&self, src: Option<&str>) -> String {
             if let Some(redirect_to) = src {
-                let mut url = Url::parse("http://x/").unwrap();
-                url.set_path(self.login);
-                url.query_pairs_mut()
-                    .append_pair("redirect_to", redirect_to);
-                let path = format!("{}/?{}", url.path(), url.query().unwrap());
-                path
+                //                uri::Builder::new().path_and_query(
+                format!(
+                    "{}?redirect_to={}",
+                    self.register,
+                    urlencoding::encode(redirect_to)
+                )
+            //                let mut url: Uri = self.register.parse().unwrap();
+            //                url.qu
+            //                url.query_pairs_mut()
+            //                    .append_pair("redirect_to", redirect_to);
             } else {
-                self.login.to_string()
+                self.register.to_string()
             }
         }
     }

src/main.rs

@@ -52,6 +52,10 @@ lazy_static! {
     pub static ref CSS: &'static str =
         FILES.get("./static/cache/bundle/css/main.css").unwrap();
 
+    pub static ref MOBILE_CSS: &'static str =
+        FILES.get("./static/cache/bundle/css/mobile.css").unwrap();
+
+
     pub static ref JS: &'static str =
         FILES.get("./static/cache/bundle/bundle.js").unwrap();
 

src/static_assets/static_files.rs

@@ -132,6 +132,7 @@ mod tests {
             assets::HEADSETS.path,
             *crate::JS,
             *crate::CSS,
+            *crate::MOBILE_CSS,
             *crate::GLUE,
         ]
         .iter()

templates/bench/index.html

@@ -17,9 +17,7 @@
         </label>
 
         <!--        <button id="start" type="submit">Start</button> -->
-        <button id="start" class="form__submit" type="submit">
-          Start
-        </button>
+        <button id="start" class="form__submit" type="submit">Start</button>
       </form>
     </div>
 
@@ -27,7 +25,7 @@
       <b>
         This is a WASM benchmark, please enable JavScript to run it. We don't
         collect any data and
-        <a href="https://github.com/mCaptcha/benches"
+        <a href="https://github.com/mCaptcha/survey"
           >source code is available here</a
         >
       </b>
@@ -35,13 +33,22 @@
 
     <div id="bench">
       <h1 id="status" class="name">Running benchmark</h1>
-
-      <div id="submission-proof"></div>
-      <div id="device-info"></div>
-
       <div id="counter"></div>
+      <button class="btn" id="advance">Show Advanced Log</button>
 
-      <table>
+      <div id="winner-instructions">
+        <h2>Winner Announcement</h2>
+        <p>
+          The winners will be announed on the organisation website on December
+          1, 2021. The winning submission IDs will be published and the winners
+          expected to provide the submission proof to claim their rewards.
+        </p>
+      </div>
+      <div id="submission-proof"></div>
+
+      <div class="advance-log" id="device-info"></div>
+
+      <table class="advance-log">
         <thead>
           <tr>
             <th>Difficulty factor</th>
@@ -59,7 +66,7 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-    padding: 40px 0;
+    padding: 0;
     display: hidden;
     align-items: center;
   }
@@ -77,6 +84,11 @@
     display: none;
   }
 
+  .survey__container {
+    flex: 2;
+    margin: 0 auto;
+  }
+
   #status {
     max-width: 80%;
     margin: auto;
@@ -101,7 +113,28 @@
 
   #device-info {
     margin: auto;
-    font-size: 1.3rem;
+    font-size: 0.8rem;
+  }
+
+  .advance-log > b,
+  div {
+    font-size: 0.8rem;
+  }
+  .advance-log {
+    display: none;
+  }
+  #winner-instructions {
+    display: none;
+  }
+
+  #submission-proof {
+    margin: 15px auto;
+  }
+
+  #submission-proof > div,
+  b {
+    font-size: 1.2rem;
+    font-family: monospace, monospace;
   }
 </style>
 <script src="<.= &*crate::GLUE .>"></script>

templates/bench/index.ts

@@ -21,6 +21,25 @@ import isBlankString from "../utils/isBlankString";
 import createError from "../components/error/";
 
 export const index = () => {
+  const ADV = <HTMLButtonElement>document.getElementById("advance");
+
+  const toggleAdv = (e: Event) => {
+    e.preventDefault();
+    if (ADV.innerText.includes("Show")) {
+      ADV.innerText = "Hide Advance Log";
+      document
+        .querySelectorAll(".advance-log")
+        .forEach((e: HTMLElement) => (e.style.display = "block"));
+    } else {
+      ADV.innerText = "Show Advance Log";
+      document
+        .querySelectorAll(".advance-log")
+        .forEach((e: HTMLElement) => (e.style.display = "none"));
+    }
+  };
+
+  ADV.addEventListener("click", (e) => toggleAdv(e));
+
   const initSession = async () => {
     fetch(ROUTES.register);
   };
@@ -64,7 +83,7 @@ export const index = () => {
       const data: SubmissionProof = await resp.json();
       const element = document.createElement("div");
       const token = document.createElement("b");
-      token.innerText = "User Agent: ";
+      token.innerText = "Submissinon ID: ";
       const tokenText = document.createTextNode(`${data.token}`);
 
       const proof = document.createElement("b");
@@ -77,6 +96,7 @@ export const index = () => {
       element.appendChild(proof);
       element.appendChild(proofText);
       document.getElementById("submission-proof").appendChild(element);
+      document.getElementById("winner-instructions").style.display = "block";
     }
   };
 
@@ -90,11 +110,11 @@ export const index = () => {
     console.log(INFO);
 
     const element = document.createElement("div");
-    const ua = document.createElement("b");
+    const ua = document.createElement("span");
     ua.innerText = "User Agent: ";
     const os = document.createTextNode(`${INFO.oscup}`);
 
-    const threads = document.createElement("b");
+    const threads = document.createElement("span");
     threads.innerText = "Hardware concurrency: ";
     const threadsText = document.createTextNode(`${INFO.threads}`);
 

templates/components/_button.scss

@@ -15,7 +15,6 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-
 @mixin button {
 	border: none;
 

templates/components/base/top.html

@@ -5,4 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><.= PAGE .> | <.= crate::pages::NAME .></title>
     <link rel="stylesheet" href="<.= &*crate::CSS .>" />
+    <link
+      rel="stylesheet"
+      media="screen and (max-width: 1250px)"
+      type="text/css"
+      href="<.= &*crate::MOBILE_CSS .>"
+    />
   </head>

templates/index.html

@@ -75,6 +75,15 @@
       <b>No Personally identifying information is collected</b>
     </section>
 
+    <section>
+      <h2>Winner Announcement</h2>
+      <p>
+        The winners will be announed on the organisation website on December 1,
+        2021. The winning submission IDs will be published and the winners
+        expected to provide the submission proof to claim their rewards.
+      </p>
+    </section>
+
     <a
       class="link__btn"
       href="<.= crate::PAGES.panel.campaigns.get_bench_route(uuid) .>"

templates/main.scss

@@ -49,6 +49,7 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
+	justify-content: space-between;
 }
 
 .survey__body {

templates/mobile.scss

@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2021  Aravinth Manivannan <realaravinth@batsense.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.survey__container {
+	width: 90%;
+}
+
+.footer {
+	margin: auto;
+	width: auto;
+}
+
+.survey__container h2 {
+	font-weight: 550;
+}

templates/panel/main.scss

@@ -38,6 +38,10 @@
     padding-bottom: 0.2rem;
 }
 
+.btn {
+    @include button;
+}
+
 table {
     border-collapse: collapse;
     caption-side: bottom;