mCaptcha/survey
2
0
Fork 0
Code Issues 4 Pull requests 10 Projects Releases Packages Wiki Activity

mobile styling

Browse source
This commit is contained in:
Aravinth Manivannan 2021-10-27 11:39:37 +05:30
parent eccb87fd99
commit 0524208a39
Signed by: realaravinth
GPG key ID: AD9F0F08E855ED88
13 changed files with 145 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -5,7 +5,7 @@
"scripts": { "scripts": {
"build": "webpack --mode production", "build": "webpack --mode production",
"lint": "eslint templates", "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", "start": "webpack-dev-server --mode development --progress --color",
"test": "jest" "test": "jest"
}, },

18
src/api/v1/admin/auth.rs
View file

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

4
src/main.rs
View file

@ -52,6 +52,10 @@ lazy_static! {
pub static ref CSS: &'static str = pub static ref CSS: &'static str =
FILES.get("./static/cache/bundle/css/main.css").unwrap(); 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 = pub static ref JS: &'static str =
FILES.get("./static/cache/bundle/bundle.js").unwrap(); FILES.get("./static/cache/bundle/bundle.js").unwrap();

1
src/static_assets/static_files.rs
View file

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

57
templates/bench/index.html
View file

@ -1,7 +1,7 @@
<. include!("../components/base/top.html"); .> <. include!("../components/base/top.html"); .>
<body class="survey__body"> <body class="survey__body">
<main class="survey__container"> <main class="survey__container">
<. include!("../components/error/index.html"); .> <. include!("../components/error/index.html"); .>
<div id="pre-bench"> <div id="pre-bench">
<h1>Click to Start Benchmark</h1> <h1>Click to Start Benchmark</h1>
<form class="new-campaign__form" accept-charset="utf-8"> <form class="new-campaign__form" accept-charset="utf-8">
@ -17,9 +17,7 @@
</label> </label>
<!-- <button id="start" type="submit">Start</button> --> <!-- <button id="start" type="submit">Start</button> -->
<button id="start" class="form__submit" type="submit"> <button id="start" class="form__submit" type="submit">Start</button>
Start
</button>
</form> </form>
</div> </div>
@ -27,7 +25,7 @@
<b> <b>
This is a WASM benchmark, please enable JavScript to run it. We don't This is a WASM benchmark, please enable JavScript to run it. We don't
collect any data and collect any data and
<a href="https://github.com/mCaptcha/benches" <a href="https://github.com/mCaptcha/survey"
>source code is available here</a >source code is available here</a
> >
</b> </b>
@ -35,13 +33,22 @@
<div id="bench"> <div id="bench">
<h1 id="status" class="name">Running benchmark</h1> <h1 id="status" class="name">Running benchmark</h1>
<div id="submission-proof"></div>
<div id="device-info"></div>
<div id="counter"></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> <thead>
<tr> <tr>
<th>Difficulty factor</th> <th>Difficulty factor</th>
@ -59,7 +66,7 @@
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 40px 0; padding: 0;
display: hidden; display: hidden;
align-items: center; align-items: center;
} }
@ -77,6 +84,11 @@
display: none; display: none;
} }
.survey__container {
flex: 2;
margin: 0 auto;
}
#status { #status {
max-width: 80%; max-width: 80%;
margin: auto; margin: auto;
@ -101,7 +113,28 @@
#device-info { #device-info {
margin: auto; 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> </style>
<script src="<.= &*crate::GLUE .>"></script> <script src="<.= &*crate::GLUE .>"></script>

26
templates/bench/index.ts
View file

@ -21,6 +21,25 @@ import isBlankString from "../utils/isBlankString";
import createError from "../components/error/"; import createError from "../components/error/";
export const index = () => { 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 () => { const initSession = async () => {
fetch(ROUTES.register); fetch(ROUTES.register);
}; };
@ -64,7 +83,7 @@ export const index = () => {
const data: SubmissionProof = await resp.json(); const data: SubmissionProof = await resp.json();
const element = document.createElement("div"); const element = document.createElement("div");
const token = document.createElement("b"); const token = document.createElement("b");
token.innerText = "User Agent: "; token.innerText = "Submissinon ID: ";
const tokenText = document.createTextNode(`${data.token}`); const tokenText = document.createTextNode(`${data.token}`);
const proof = document.createElement("b"); const proof = document.createElement("b");
@ -77,6 +96,7 @@ export const index = () => {
element.appendChild(proof); element.appendChild(proof);
element.appendChild(proofText); element.appendChild(proofText);
document.getElementById("submission-proof").appendChild(element); document.getElementById("submission-proof").appendChild(element);
document.getElementById("winner-instructions").style.display = "block";
} }
}; };
@ -90,11 +110,11 @@ export const index = () => {
console.log(INFO); console.log(INFO);
const element = document.createElement("div"); const element = document.createElement("div");
const ua = document.createElement("b"); const ua = document.createElement("span");
ua.innerText = "User Agent: "; ua.innerText = "User Agent: ";
const os = document.createTextNode(`${INFO.oscup}`); const os = document.createTextNode(`${INFO.oscup}`);
const threads = document.createElement("b"); const threads = document.createElement("span");
threads.innerText = "Hardware concurrency: "; threads.innerText = "Hardware concurrency: ";
const threadsText = document.createTextNode(`${INFO.threads}`); const threadsText = document.createTextNode(`${INFO.threads}`);

1
templates/components/_button.scss
View file

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

6
templates/components/base/top.html
View file

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

20
templates/components/footer/main.scss
View file

@ -16,21 +16,21 @@
*/ */
.footer { .footer {
font-size: 0.8rem; font-size: 0.8rem;
padding: 0px 20px; padding: 0px 20px;
position: relative; position: relative;
bottom: 10px; bottom: 10px;
width: 100%; width: 100%;
} }
.footer__section { .footer__section {
display: inline; display: inline;
float: right; float: right;
} }
.footer__item { .footer__item {
display: inline; display: inline;
list-style: none; list-style: none;
padding: 10px; padding: 10px;
} }

9
templates/index.html
View file

@ -75,6 +75,15 @@
<b>No Personally identifying information is collected</b> <b>No Personally identifying information is collected</b>
</section> </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 <a
class="link__btn" class="link__btn"
href="<.= crate::PAGES.panel.campaigns.get_bench_route(uuid) .>" href="<.= crate::PAGES.panel.campaigns.get_bench_route(uuid) .>"

1
templates/main.scss
View file

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

29
templates/mobile.scss Normal file
View 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;
}

4
templates/panel/main.scss
View file

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