Style changes

Redesign the nn upload page and make it mobile friendly Reorder test inputs and add some placeholders
vdbergh · Jun 17, 2022 · 5f98246 · 5f98246
1 parent c4bfa83
commit 5f98246
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 120 deletions.
diff --git a/server/fishtest/static/css/application.css b/server/fishtest/static/css/application.css
@@ -487,9 +487,7 @@ option.grayedoutoption {
   background-color: LightGray;
 }
 
-#user-administration,
-#login,
-#register {
+.col-limited-size {
   max-width: 450px;
   margin: 0 auto 30px auto;
 }
diff --git a/server/fishtest/static/css/theme.dark.css b/server/fishtest/static/css/theme.dark.css
@@ -138,6 +138,7 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"],
+input[type="file"],
 .uneditable-input,
 label.list-group-item {
   background: var(--bg-dark-4);
@@ -160,6 +161,7 @@ input[type="url"]:focus,
 input[type="search"]:focus,
 input[type="tel"]:focus,
 input[type="color"]:focus,
+input[type="file"]:focus,
 .uneditable-input:focus {
   color: var(--color-dark-1);
   background: var(--bg-dark-4);
@@ -183,6 +185,7 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"],
+input[type="file"],
 .uneditable-input,
 label.list-group-item {
   color: var(--color-dark-1);
@@ -201,6 +204,11 @@ input[type="checkbox"]:focus {
   border-color: rgba(255, 255, 255, 0.5);
 }
 
+.form-control::file-selector-button {
+  color: var(--color-dark-1) !important;
+  background-color: var(--bg-dark-3) !important;
+}
+
 /* Button groups */
 .btn {
   text-shadow: none;

diff --git a/server/fishtest/templates/base.mak b/server/fishtest/templates/base.mak
@@ -127,7 +127,7 @@ monitoring = request.rundb.conn["admin"].command("getFreeMonitoringStatus")
     </div>
 
     <div class="contentbase vh-100 w-100">
-      <div class="container-fluid pe-0">
+      <div class="container-fluid">
         <div class="row">
           <div class="flash-message mt-3">
             % if request.session.peek_flash('error'):

diff --git a/server/fishtest/templates/login.mak b/server/fishtest/templates/login.mak
@@ -9,7 +9,7 @@
   document.title = 'Login | Stockfish Testing';
 </script>
 
-<div id="login">
+<div class="col-limited-size">
   <header class="text-md-center py-2">
     <h2>Login</h2>
     <div class="alert alert-info">

diff --git a/server/fishtest/templates/nn_upload.mak b/server/fishtest/templates/nn_upload.mak
@@ -1,117 +1,38 @@
 <%inherit file="base.mak"/>
 
-<style>
-  .flex-row {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-  }
-
-  .field-label {
-    font-size: 12px;
-    margin: 0;
-    text-align: right;
-    padding-right: 15px;
-    width: 100px;
-  }
-
-  .field-label.leftmost {
-    width: 75px;
-    flex-shrink: 0;
-  }
-
-  .rightmost {
-    margin-left: auto;
-  }
-
-  .third-size {
-    width: 107px;
-    flex-shrink: 0;
-  }
-
-  input.quarter-size {
-    margin-right: 10px;
-    width: 70px;
-    flex-shrink: 0;
-  }
-
-  #upload-nn {
-    width: 700px;
-    margin: 7px auto;
-    padding-right: 30px;
-  }
-
-  #upload-nn input {
-    margin: 15px 0;
-  }
-
-  .quarter-size {
-    width: 80px;
-    flex-shrink: 0;
-  }
-
-  .choose-test-type .btn {
-    width: 75px;
-  }
-
-  #upload-nn label:hover {
-    cursor: text;
-  }
-
-  #upload-nn textarea {
-    width: 100%;
-    min-height: 40px;
-    margin: 0;
-  }
-
-  section.test-settings input {
-    width: 235px;
-  }
-</style>
+## Remove this when base.mak has the viewport meta tag
+<%block name="head">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</%block>
 
 <script>
   document.title = 'Neural Network Upload | Stockfish Testing';
 </script>
 
-<header style="text-align: center; padding-top: 7px">
-  <h2>Neural Network Upload</h2>
-  <section class="instructions" style="margin-bottom: 35px">
-    <p>
-    Please read the
-    <a href="https://github.com/glinscott/fishtest/wiki/Creating-my-first-test">Testing Guidelines</a>
-    before uploading your network.
-    </p>
-    <p>
-    By uploading you license your network under a
-    <a href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0</a> license.
-    </p>
-    <p>
-    <input type="checkbox" id="enable"/ onclick="doLicense()">
-    <b>You are the author of this network or have obtained the network with a CC0 license.</b>
-    </p>
-    <p>
-    Your uploaded network will be available for public download and listed on the
-    <a href="/nns">NN stats page</a>.
-    </p>
-  </section>
-</header>
+<div class="col-limited-size">
+  <header class="text-md-center py-2">
+    <h2>Neural Network Upload</h2>
+    <div class="alert alert-info">
+      <p class="mb-0">Please read the <a class="alert-link" href="https://github.com/glinscott/fishtest/wiki/Creating-my-first-test">Testing Guidelines</a> before uploading your network.</p>
+      <p class="mb-0">By uploading, you license your network under a <a class="alert-link" href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0</a> license.</p>
+      <p class="mb-0">Your uploaded network will be available for public download and listed on the <a class="alert-link" href="/nns">NN stats page</a>.</p>
+    </div>
+  </header>
 
-<form id="upload-nn" action="${request.url}" method="POST" enctype="multipart/form-data">
-  <section class="test-settings" style="margin-bottom: 35px">
-    <div class="control-group">
-      <label class="control-label">Select your Network file (nn-[SHA256 first 12 digits].nnue):</label>
-      <div class="controls">
-        <input id="network" name="network" type="file" accept=".nnue" value="" />
-      </div>
+  <form id="upload-nn" action="${request.url}" method="POST" enctype="multipart/form-data">
+    <div class="mb-3">
+      <label for="network" class="form-label">Select your Network file (nn-[SHA256 first 12 digits].nnue)</label>
+      <input class="form-control" id="network" name="network" type="file" accept=".nnue" value="" />
     </div>
 
-    <div class="control-group">
-      <div class="controls">
-        <button id="upload" type="submit" disabled="true" class="btn btn-primary">Agree to License & Upload</button>
-      </div>
+    <div class="mb-3 form-check">
+      <label for="enable">You are the author of this network or have obtained the network with a CC0 license.</label>
+      <input type="checkbox" class="form-check-input" id="enable" onclick="doLicense()">
     </div>
-  </section>
-</form>
+
+    <button id="upload" type="submit" disabled="true" class="btn btn-primary w-100">Upload</button>
+  </form>
+</div>
 
 <script>
   function doLicense() {

diff --git a/server/fishtest/templates/signup.mak b/server/fishtest/templates/signup.mak
@@ -10,7 +10,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </%block>
 
-<div id="register">
+<div class="col-limited-size">
   <header class="text-md-center py-2">
     <h2>Register</h2>
     <div class="alert alert-info">

diff --git a/server/fishtest/templates/tests_run.mak b/server/fishtest/templates/tests_run.mak
@@ -135,11 +135,22 @@ else:
       </button>
     </div>
 
+    <div class="flex-row">
+      <label class="field-label leftmost">Test repo</label>
+      <div class="input-group input-group-sm">
+        <input type="text" name="tests-repo" style="width: 100%;"
+              class="form-control"
+              value="${args.get('tests_repo', tests_repo)}" ${'readonly' if is_rerun else ''}
+              placeholder="https://github.com/username/Stockfish">
+      </div>
+    </div>
+
     <div class="flex-row input-group input-group-sm">
       <label class="field-label leftmost">Test branch</label>
       <input type="text" name="test-branch"
              id="test-branch" class="form-control"
-             value="${args.get('new_tag', '')}" ${'readonly' if is_rerun else ''}>
+             value="${args.get('new_tag', '')}" ${'readonly' if is_rerun else ''}
+             placeholder="Your test branch name">
 
       <label class="field-label">Base branch</label>
       <input type="text" name="base-branch"
@@ -180,15 +191,6 @@ else:
                   rows="3">${args.get('info', '')}</textarea>
       </div>
     </div>
-
-    <div class="flex-row">
-      <label class="field-label leftmost">Test repo</label>
-      <div class="input-group input-group-sm">
-        <input type="text" name="tests-repo" style="width: 100%;"
-              class="form-control"
-              value="${args.get('tests_repo', tests_repo)}" ${'readonly' if is_rerun else ''}>
-      </div>
-    </div>
   </section>
 
   <section id="stop-rule" style="min-height: 100px">

diff --git a/server/fishtest/templates/user.mak b/server/fishtest/templates/user.mak
@@ -9,7 +9,7 @@
   document.title = 'User Administration | Stockfish Testing';
 </script>
 
-<div id="user-administration">
+<div class="col-limited-size">
   <header class="text-md-center py-2">
     <h2>User Administration</h2>
     <div class="alert alert-info">