mobile styling
This commit is contained in:
parent
eccb87fd99
commit
0524208a39
13 changed files with 145 additions and 35 deletions
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -132,6 +132,7 @@ mod tests {
|
|||
assets::HEADSETS.path,
|
||||
*crate::JS,
|
||||
*crate::CSS,
|
||||
*crate::MOBILE_CSS,
|
||||
*crate::GLUE,
|
||||
]
|
||||
.iter()
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<. include!("../components/base/top.html"); .>
|
||||
<body class="survey__body">
|
||||
<main class="survey__container">
|
||||
<. include!("../components/error/index.html"); .>
|
||||
<. include!("../components/error/index.html"); .>
|
||||
<div id="pre-bench">
|
||||
<h1>Click to Start Benchmark</h1>
|
||||
<form class="new-campaign__form" accept-charset="utf-8">
|
||||
|
@ -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>
|
||||
|
|
|
@ -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}`);
|
||||
|
||||
|
|
|
@ -15,7 +15,6 @@
|
|||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
@mixin button {
|
||||
border: none;
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -16,21 +16,21 @@
|
|||
*/
|
||||
|
||||
.footer {
|
||||
font-size: 0.8rem;
|
||||
padding: 0px 20px;
|
||||
font-size: 0.8rem;
|
||||
padding: 0px 20px;
|
||||
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer__section {
|
||||
display: inline;
|
||||
float: right;
|
||||
display: inline;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.footer__item {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
display: inline;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
|
@ -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) .>"
|
||||
|
|
|
@ -49,6 +49,7 @@ body {
|
|||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.survey__body {
|
||||
|
|
29
templates/mobile.scss
Normal file
29
templates/mobile.scss
Normal file
|
@ -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;
|
||||
}
|
|
@ -38,6 +38,10 @@
|
|||
padding-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@include button;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
caption-side: bottom;
|
||||
|
|
Loading…
Reference in a new issue