From 6a937ec92386bc7c97576136ee6af45845a06ae4 Mon Sep 17 00:00:00 2001
From: Muhammad Khatri <muhammad@weareasterisk.com>
Date: Mon, 7 Oct 2019 20:02:54 -0500
Subject: [PATCH] fix: fix styling

---
 gavel/static/css/style.scss                   | 35 +++++++++++++++----
 gavel/static/js/admin/admin_live.js           |  6 ++--
 gavel/templates/vote.html                     | 17 +--------
 .../vote_components/report_modal.html         |  6 ++--
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/gavel/static/css/style.scss b/gavel/static/css/style.scss
index 14cbe8c..6e1b38e 100644
--- a/gavel/static/css/style.scss
+++ b/gavel/static/css/style.scss
@@ -731,18 +731,19 @@ dl.instructions dt p {
   left: 0;
   top: 0;
   width: 100%;
-  height: 100%;
+  height: 100vh;
+  position: absolute;
   overflow: auto;
-  background: rgba(0, 0, 0, 0.25);
+  background: rgba(0, 0, 0, .2);
   backdrop-filter: blur(6px);
   -webkit-animation-name: fadeIn;
   -moz-animation-name: fadeIn;
   -o-animation-name: fadeIn;
   animation-name: fadeIn;
-  -webkit-animation-duration: 0.2s;
-  -moz-animation-duration: 0.2s;
-  -o-animation-duration: 0.2s;
-  animation-duration: 0.2s;
+  -webkit-animation-duration: 0.1s;
+  -moz-animation-duration: 0.1s;
+  -o-animation-duration: 0.1s;
+  animation-duration: 0.1s;
 }
 
 .modal-content {
@@ -962,6 +963,7 @@ dl.instructions dt p {
   -moz-border-radius: 50%;
   border-radius: 50%;
   border: 1px solid #5F4BB6;
+  margin-right: 1rem;
 }
 
 .skipActive {
@@ -1149,6 +1151,12 @@ dl.instructions dt p {
 //  border-radius: 4px 4px 0px 0px !important;
 }
 
+.admin-table-body {
+  tr {
+    border-bottom: 1px solid #B7B7B7!important;
+  }
+}
+
 //.admin-table > table {
 //  border-collapse: separate!important;
 //  border-spacing: 0!important;
@@ -1210,7 +1218,7 @@ dl.instructions dt p {
   line-height: normal;
   font-size: 14px;
   text-transform: uppercase;
-
+  https://cdn-images-1.medium.com/max/2400/1*byfWm5iCC87TdvlngixvfQ.png
   color: #000000;
 }
 
@@ -1222,6 +1230,7 @@ dl.instructions dt p {
 
 .admin-table > table > tbody > tr {
   border: 0;
+  border-bottom: 1px solid #B7B7B7;
   height: 48px;
   max-height: 48px;
 }
@@ -1894,3 +1903,15 @@ border-radius: 4px;
     width: 1px;
   }
 }
+
+.p-l-1rem {
+  padding-left: 1rem;
+}
+
+.p-r-1rem {
+  padding-right: 1rem;
+}
+
+.bb {
+  border-bottom: 1px solid #b7b7b7!important;
+}
diff --git a/gavel/static/js/admin/admin_live.js b/gavel/static/js/admin/admin_live.js
index fae950c..5055682 100644
--- a/gavel/static/js/admin/admin_live.js
+++ b/gavel/static/js/admin/admin_live.js
@@ -117,7 +117,7 @@ async function populateItems(data) {
           continue;
 
         const item_template = `
-        <tr class="${(item.active ? item.prioritized ? 'prioritized' : '' : 'disabled')}">
+        <tr class="bb ${(item.active ? item.prioritized ? 'prioritized' : '' : 'disabled')}">
           <td id="project-check-container"><input id="${item.id}" type="checkbox" name="item" value="${item.id}" class="admin-check"/></td>
           <td><a onclick="openProject(${item.id})" class="colored">${item.id}</a></td>
           <td>${item.name}</td>
@@ -188,7 +188,7 @@ async function populateAnnotators(data) {
         const annotator = annotators[i];
 
         const annotator_template = `
-        <tr class=${annotator.active ? '' : 'disabled'}>
+        <tr class="bb ${annotator.active ? '' : 'disabled'}">
           <td id="judge-check-container"><input id="${annotator.id}" type="checkbox" name="annotator" value="${annotator.id}" class="admin-check"/></td>
           <td><a onclick="openJudge(${annotator.id})" class="colored">${annotator.id}</a></td>
           <td>${annotator.name}</td>
@@ -254,7 +254,7 @@ async function populateFlags(data) {
         const flag = flags[i];
 
         const flag_template = `
-          <tr class="${flag.resolved ? "open" : "resolve"}">
+          <tr class="bb ${flag.resolved ? "open" : "resolve"}">
             <td><input id="${flag.id}" type="checkbox" name="item" value="${flag.item_id}" class="admin-check"/></td>
             <td>${flag.id}</td>
             <td><a onclick="openJudge(${flag.annotator_id})" href="#" class="colored">${flag.annotator_name}</a></td>
diff --git a/gavel/templates/vote.html b/gavel/templates/vote.html
index 9ca56af..af40b0d 100644
--- a/gavel/templates/vote.html
+++ b/gavel/templates/vote.html
@@ -32,22 +32,7 @@ <h2 class="projectScreenTitle">Evaluate the following project.</h2>
       </div>
     </div>
   </div>
-  {#  <div class="item">
-    <div class="banner" id="vote-header">
-      <h1>Vote</h1>
-    </div>
-    <div class="info">
-      <form action="/vote" method="post">
-        <p class="center">Which one is better?</p>
-        <input type="submit" name="action" value="Previous" id="vote-previous" class="button-left">
-        <input type="submit" name="action" value="Current" id="vote-current" class="button-right">
-        <input type="submit" name="action" value="Skip" id="vote-skip" class="button-full button-gap">
-        <input type="hidden" name="prev_id" value="{{ prev.id }}">
-        <input type="hidden" name="next_id" value="{{ next.id }}">
-        <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
-      </form>
-    </div>
-  </div>#}
+
   <div class="bottomPanel">
     <button class="flagButton" type="button" id="reportbutton" onclick="toggleReport()"></button>
     <button class="skipButton" type="button" id="skipButton" onclick="toggleSkip()"></button>
diff --git a/gavel/templates/vote_components/report_modal.html b/gavel/templates/vote_components/report_modal.html
index 9b6d2bb..08e80b2 100644
--- a/gavel/templates/vote_components/report_modal.html
+++ b/gavel/templates/vote_components/report_modal.html
@@ -48,7 +48,7 @@ <h2 class="skipTitle" style="padding-bottom: 0; margin-bottom: 16px;">The <span
         <form id="checkboxForm">
           <table style="width: 100%" class="borderless report-table" rules="none">
             <tr>
-              <td>
+              <td class="p-r-1rem">
                 <input type="checkbox" class="reportCheck" id="reportCheckOne" value="NoDemo" name="checkbox[]" onclick="setChecks()"/>
               </td>
               <td>
@@ -57,7 +57,7 @@ <h2 class="skipTitle" style="padding-bottom: 0; margin-bottom: 16px;">The <span
             </tr>
             <tr style="height: 16px;"></tr>
             <tr>
-              <td>
+              <td class="p-r-1rem">
                 <input type="checkbox" class="reportCheck" id="reportCheckTwo" value="TooComplex" name="checkbox[]" onclick="setChecks()"/>
               </td>
               <td>
@@ -66,7 +66,7 @@ <h2 class="skipTitle" style="padding-bottom: 0; margin-bottom: 16px;">The <span
             </tr>
             <tr style="height: 16px;"></tr>
             <tr>
-              <td>
+              <td class="p-r-1rem">
                 <input type="checkbox" class="reportCheck" id="reportCheckThree" value="Offensive" name="checkbox[]" onclick="setChecks()"/>
               </td>
               <td>