From 6b9841bf827792ee54538a61b15b76de8006edce Mon Sep 17 00:00:00 2001
From: sudoer777 <78781902+sudoer777@users.noreply.github.com>
Date: Mon, 4 Oct 2021 13:31:22 -0600
Subject: [PATCH] Add simple styling to submit page

---
 public/stylesheets/style.css  |  2 +-
 public/stylesheets/submit.css | 37 +++++++++++++++++++++++++++
 views/index.pug               | 48 ++++++++++++++++++++---------------
 views/layout.pug              |  2 +-
 4 files changed, 66 insertions(+), 23 deletions(-)

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 4f3025f..6a727df 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -1,5 +1,5 @@
 body {
-  padding: 50px;
+  padding: 1em;
   font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 }
 
diff --git a/public/stylesheets/submit.css b/public/stylesheets/submit.css
index df8ee7a..89dd41c 100644
--- a/public/stylesheets/submit.css
+++ b/public/stylesheets/submit.css
@@ -1,4 +1,41 @@
+h1 {
+    text-align: center;
+}
+
 form {
   display: flex;
   flex-direction: column;
+  max-width: 20em;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+span {
+    display: flex;
+  flex-direction: column;
+}
+
+
+#sport-dropdown {
+    width: 100%;
+}
+
+.form-section {
+    margin-bottom: 0.75em;
+}
+
+.form-section-input {
+    flex-direction: row;
+}
+
+input {
+    width: 100%;
+}
+
+.score-input{
+    width: 35%;
+}
+
+button {
+    margin-top: 1.5em;
 }
\ No newline at end of file
diff --git a/views/index.pug b/views/index.pug
index 9cc4f1b..7f6baf1 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -6,29 +6,35 @@ block stylesheets
 block content
   h1 Submit Score
   form(action='/submit', method='POST')
-    span
+    span(class='form-section')
       label Sport
-      select(name="sport") 
-        option(value="Football" selected) Football
-      select(name="gender")
-        option(value="Male" selected) Male 
-        option(value="Female") Female
-      select(name="division")
-        option(value="Varsity") Varsity 
-        option(value="JV-A") JV-A 
-        option(value="JV-B") JV-B
-    span
+      span(class='form-section-input')
+        select#sport-dropdown(name="sport") 
+          option(value="Football" selected) Football
+        select#gender-dropdown(name="gender")
+          option(value="Male" selected) Male 
+          option(value="Female") Female
+        select#division-dropdown(name="division")
+          option(value="Varsity") Varsity 
+          option(value="JV-A") JV-A 
+          option(value="JV-B") JV-B
+    span(class='form-section')
       label Home Team
-      input(type="text", name="home-team")
-      input(type="number", name="home-team-score", value="0")
-    span 
-      label Visiting Team 
-      input(type="text", name="visiting-team")
-      input(type="number", name="visiting-team-score", value="0")
-    span
+      span(class='form-section-input')
+        input(type="text", name="home-team")
+        input(class="score-input", type="number", name="home-team-score", value="0")
+    span(class='form-section')
+      label Visiting Team
+      span(class='form-section-input')
+        input(type="text", name="visiting-team")
+        input(class="score-input", type="number", name="visiting-team-score", value="0")
+    span(class='form-section')
       label Submitter
-      input(type="text", name="submitter")
-    span 
+      span(class='form-section-input')
+        input(type="text", name="submitter")
+    span(class='form-section')
       label Send info to
-      input(type="email", name="email", placeholder="email@example.com")
+      span(class='form-section-input')
+        input(type="email", name="email", placeholder="email@example.com")
+    span(class='form-section')
       button(type="submit") Submit
diff --git a/views/layout.pug b/views/layout.pug
index f91cc8c..2125107 100644
--- a/views/layout.pug
+++ b/views/layout.pug
@@ -2,7 +2,7 @@ doctype html
 html
   head
     title= title
+    link(rel='stylesheet', href='/stylesheets/style.css')
     block stylesheets
-      link(rel='stylesheet', href='/stylesheets/style.css')
   body
     block content