bootstrap5-ify the dashboard and participant-facing pages

except login

don't merge to master yet!

goathacks/__init__.py

@@ -5,6 +5,7 @@ from flask_login import LoginManager
 from flask_assets import Bundle, Environment
 from flask_cors import CORS
 from flask_mail import Mail, email_dispatched
+from flask_bootstrap import Bootstrap5
 
 
 db = SQLAlchemy()
@@ -13,6 +14,7 @@ login = LoginManager()
 environment = Environment()
 cors = CORS()
 mail = Mail()
+bootstrap = Bootstrap5()
 
 def create_app():
     app = Flask(__name__)
@@ -25,6 +27,7 @@ def create_app():
     environment.init_app(app)
     cors.init_app(app)
     mail.init_app(app)
+    bootstrap.init_app(app)
 
     scss = Bundle('css/style.scss', filters='scss',
     output='css/style.css')

goathacks/dashboard/forms.py

@@ -1,6 +1,6 @@
 from flask_wtf import FlaskForm
 from flask_wtf.file import FileField, FileRequired, FileAllowed
-from wtforms import RadioField, TextAreaField
+from wtforms import RadioField, TextAreaField, SubmitField
 from wtforms.validators import DataRequired
 
 class ShirtAndAccomForm(FlaskForm):
@@ -8,9 +8,12 @@ class ShirtAndAccomForm(FlaskForm):
                                                    "None"],
                             validators=[DataRequired()])
     accomodations = TextAreaField("Special needs and/or Accomodations")
+    submit = SubmitField("Save")
 
 class ResumeForm(FlaskForm):
     resume = FileField("Resume", validators=[FileRequired(),
                                              FileAllowed(['pdf', 'docx', 'doc',
                                                           'txt', 'rtf'],
                                                          "Documents only!")])
+
+    submit = SubmitField("Submit")

goathacks/static/css/style.scss

@@ -4,6 +4,7 @@ $color-section-bg: #974355;
 $color-accent: #26a69a;
 @font-face {font-family: "Krungthep"; src: url("//db.onlinewebfonts.com/t/736cf5b08b01082a3645e14038868e20.eot"); src: url("//db.onlinewebfonts.com/t/736cf5b08b01082a3645e14038868e20.eot?#iefix") format("embedded-opentype"), url("//db.onlinewebfonts.com/t/736cf5b08b01082a3645e14038868e20.woff2") format("woff2"), url("//db.onlinewebfonts.com/t/736cf5b08b01082a3645e14038868e20.woff") format("woff"), url("//db.onlinewebfonts.com/t/736cf5b08b01082a3645e14038868e20.ttf") format("truetype"), url("//db.onlinewebfonts.com/t/736cf5b08b01082a3645e14038868e20.svg#Krungthep") format("svg"); }
 
+
 html {
 	height: 100%;
 }

goathacks/templates/base.html

@@ -1,15 +1,9 @@
 {% include 'header.html' %}
+{% from 'bootstrap5/utils.html' import render_messages %}
 
 <div class="container">
-    {% with messages = get_flashed_messages() %}
+    {{ render_messages() }}
-    {% if messages %}
+
-    <ul class="flashed-content">
-        {% for m in messages %}
-        <li class="message">{{ m }}</li>
-        {% endfor %}
-    </ul>
-    {% endif %}
-    {% endwith %}
 {% block content %}
 
 This content block is still being worked on!

goathacks/templates/dashboard.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% from 'bootstrap5/form.html' import render_form %}
 
 {% block content %}
 <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
@@ -16,74 +17,62 @@
     }
 </script>
 
-<div class="contact-section" style="height: 100%;">
+<div class="d-flex flex-column p-2 mt-3 align-items-center">
-    <div class="container">
+   <div class="row">
-        <div class="row center justify-content-center" style="margin-top: 10%;">
+        
-            <h1>Hi {{ current_user.first_name }}!</h1>
+    <h1>Hi {{ current_user.first_name }}!</h1><br/>
-            {% if current_user.waitlisted %}
+
-            <h2>You are waitlisted, if space opens up we will let you know</h2>
+   </div>    <div class="row p-2">
-            {% else %}
+    {% if current_user.waitlisted %}
-            <h2>You are fully registered! We look forward to seeing you!</h2>
+    <h2>You're currently waitlisted, keep checking your email to see if space
-            Let us know if you have any questions by sending them to <a href="mailto:hack@wpi.edu">hack@wpi.edu</a>
+        opens up!</h2>
-            <br>
+    {% else %}
-            <br>
+    <h2>Your registration is confirmed! We're looking forward to seeing you at
-            Forgot to upload your resume while registering? No worries, submit it below.
+        GoatHacks!</h2>
+    <span>Let us know if you have any questions by sending them to <a
+                                                                           href="mailto:hack@wpi.edu">hack@wpi.edu</a></span>
+    </div>
+    <br/>
+    <div class="row">
+        <p>Make sure you join the Discord and add your shirt size as well as any
+        needed accomodations below</p>
+    </div>
+    <div class="row mb-3">
+        <button type="button" class="btn btn-secondary"><a
+                              href="https://discord.gg/gqYxndzY"
+                                    class="link-light">Discord</a></button>
+    </div>
+    
+    <div class="row mb-3">
+        <div class="card" style="width: 50rem; background-color: #974355;">
+            <div class="card-body">
+                <div class="card-text">
+                    {{ render_form(form) }}
+                </div>
+            </div>
         </div>
-        <div class="row center justify-content-center">
+    </div>
-            <h5>Make sure to join the Discord and enter your shirt size below!</h5>
+    <div class="row">
-            <p>(Please note that due to COVID-19 constraints, we can't guarantee that all participants will receive Hack@WPI t-shirts this year but we are trying to find a way!)</p>
-            <a href="https://discord.gg/G3pseHPRNv" style="margin: 5px;"
-                class="btn btn-lg btn-primary btn-invert">Discord</a>
-        </div>
-	    <div class="row center justify-content-center" style="background-color: #974355; padding: 20; margin-left: 20; margin-right: 20; border-radius: 5px;">
-            <form method="post">
-                {{ form.csrf_token }}
-                <br>
-                <p><b>Optional Info:</b></p>
-                    <div>
-                            <p>Shirt Size (Currently selected: {{current_user.shirt_size}})</p>
-                            {% for subfield in form.shirt_size %}
-                            {{subfield}}{{subfield.label}} 
-                            {% endfor %}
-                            <p>Special Needs/Accommodations:</p>
-                            <input type="text" name="accomodations"
-                            id="special_needs" value="{{ current_user.accomodations }}">
-                    </div>
-                    <br><br>
-                    <input name="save" class="btn btn-lg btn-primary btn-invert" type="submit" value="Save"/>
-                    <br><br><br>
-                </form>
-        </div>
-        <div class="row center justify-content-center">
             <form method="post" action="{{url_for('dashboard.resume')}}" enctype="multipart/form-data">
                 {{ resform.csrf_token }}
                 <p><b>If you'd like, add your resume to send to sponsors... </b></p>
                 <div class="file-field input-field">
                     <div class="btn">
-                        <span>File</span>
+                        <label for="resume">File</span>
-                        <input id="resume" name="resume" type="file" oninput="resumeChange()"/>
+                        <input class="form-control" id="resume" name="resume" type="file" oninput="resumeChange()"/>
                         
                     </div>
-                    <div class="file-path-wrapper white-text">
-                        <input disabled id="filename" class="file-path validate white-text" type="text">
-                    </div>
                 </div>
                 <input name="submit" class="btn btn-lg btn-primary btn-invert" type="submit" value="Submit"/>
             </form>
-            {% endif %}
-            <br>
-        </div>
-        {% if current_user.is_admin %}
-        <br>
-        <div class="row justify-content-center">
-                <a href="/admin"><p class="btn">Admin Dashboard</p></a>
-        </div>
-        {% endif %}
-        <br>
     </div>
-    <br>
+    {% endif %}
-    <br>
+    {% if current_user.is_admin %}
-    <center><a onclick="drop('{{current_user.id}}')" id="drop-link"><p class="btn">Drop Application if you can't make it :(</p></a></center>
+    <div class="row">
+        <button type="button" class="btn btn-primary"><a href="{{
+                             url_for('admin.home') }}" class="link-light">Admin Dashboard</a></button>
+    </div>
+    {% endif %}
 </div>
 
 <script>

goathacks/templates/footer.html

@@ -11,6 +11,6 @@
           </ul>
         </div>
       </nav>
-
+    {{ bootstrap.load_js() }}
     </body>
 </html>

goathacks/templates/header.html

@@ -3,11 +3,13 @@
 <html>
 
     <head>
-      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+        {{ bootstrap.load_css() }}
-      <link href="../static/css/materialize.min.css" rel="stylesheet">
+
         {% assets 'scss' %}
         <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}">
         {% endassets %}
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
     </head>
 
     <style>

goathacks/templates/login.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% from 'bootstrap5/form.html' import render_form %}
 
 {% block content %}
 <div style="height: 100%;">
@@ -10,18 +11,7 @@
 </div>
 <div class="container">
     <div class="section" style="background-color: #974355; padding: 20px;">
-        <form method="post">
+        {{ render_form(form) }}
-            {{ form.csrf_token }}
-            <div>
-                {{form.email}}<br/>{{ form.email.label}}
-            </div>
-            <div>
-                {{form.password}}<br/>{{form.password.label}}
-            </div>
-            <div>
-                {{form.submit}}
-            </div>
-        </form>
         <span><p><em>Don't have an account? <a
                                                     href="{{url_for('registration.register')}}">Register
                                                     here</a>.</em></p></span>

goathacks/templates/register.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% from 'bootstrap5/form.html' import render_form %}
 
 {% block content %}
 <div style="height: 100%;">
@@ -10,6 +11,7 @@
 </div>
 <div class="container">
 <div class="section" style="background-color: #974355; padding: 20px;">
+    <!--
     <form method="post">
         {{ form.csrf_token }}
         <div>
@@ -48,6 +50,8 @@
             {{form.submit}}
         </div>
     </form>
+    -->
+    {{ render_form(form) }}
 
     <span><p><em>You may also want to <a
                                               href="{{url_for('registration.login')}}">

requirements.txt

@@ -22,3 +22,4 @@ uWSGI==2.0.21
 Werkzeug==2.2.2
 WTForms==3.0.1
 ulid
+bootstrap-flask