More UI fixes

This commit is contained in:
Sarah Akbar 2020-01-09 01:59:45 -05:00
parent 42d75a85e9
commit 4c7685c42e
8 changed files with 205 additions and 68 deletions

View file

@ -568,3 +568,4 @@ def allowed_file(filename):
if __name__ == '__main__':
app.run(host=SERVER_LISTEN_ADDR, port=SERVER_PORT, threaded=True)

16
static/css/materialize.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View file

@ -6,74 +6,100 @@ body {
color: #eee;
}
nav {
background-color: #E7E4C6;
border-color: #E7E4C6;
color: white;
p {
line-height: 2rem;
}
hr {
margin-top: 2rem;
margin-bottom: 2rem;
width: 70%;
border-width: 10px;
border-color: #F5665B;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
h5 {
text-align: center;
}
h6 {
text-align: center;
margin-right: 100px;
margin-left: 100px;
#logo-container {
display: flex;
justify-content: center;
flex-direction: row;
padding-top: 5px;
padding-bottom: 5px;
height: 100%;
width: 100%;
}
div.main-logo {
margin-top: 16px;
#goat {
height: 100%;
}
.sponsors {
text-align: center;
display: block;
padding: 20px;
}
.sponsors > div {
margin-bottom: 40px;
}
.sponsors > div:last-child {
margin-bottom: 0;
.button-collapse {
color: #26a69a;
}
.sponsors img {
display: inline-block;
margin-right: 40px;
/* Hack to fix overflow of bose logo*/
max-width: calc(100% - 10px);
.parallax-container {
min-height: 380px;
line-height: 0;
height: auto;
color: rgba(255,255,255,.9);
}
.parallax-container .section {
width: 100%;
}
.title-sponsors img{
max-height: 90px;
@media only screen and (max-width : 992px) {
.parallax-container .section {
top: 40%;
}
#index-banner .section {
top: 10%;
}
}
.silver-sponsors img {
max-height: 25px;
@media only screen and (max-width : 600px) {
.parallax-container .section {
height: auto;
overflow: auto;
}
.container {
height: auto;
}
#index-banner .section {
top: 0;
}
}
a {
color: black;
#tagline {
font-weight: 600;
}
#event-info {
font-weight: 400;
}
#registration-banner {
min-height: 100px;
max-height: 150px;
}
#registration-banner .section{
top: auto;
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
.parallax img {
display: inherit;
max-width: 200%;
}
#mlh-trust-badge {
display: block;
max-width: 100px;
min-width: 60px;
position: fixed;
right: 50px;
top: 0;
width: 10%;
z-index: 10000;
}

View file

@ -1,6 +1,6 @@
{% include 'header.html' %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<link href="../static/css/materialize.min.css" rel="stylesheet">
<div class="contact-section" style="height: 100%;">
<div class="container">
@ -29,15 +29,18 @@
</form>
{% endif %}
<br>
<a href="#" id="drop-link"><p class="sub-button btn waves-effect waves-light grey darken-1">Drop Application if you can't make it :(</p></a>
{% if admin %}
<br>
<a href="/admin"><p class="btn">Admin Dashboard</p></a>
{% endif %}
<br>
Please sit tight, while we improve the UI of this page :P (Or we'll do it next year)
</div>
</div>
<br>
<br>
<center><a href="#" id="drop-link"><p class="btn">Drop Application if you can't make it :(</p></a></center>
</div>
<script>

View file

@ -1,4 +1,4 @@
<nav class="navbar navbar-inverse ">
<nav class="navbar navbar-inverse " style= "margin-top: 30px">
<div class="container-fluid">
<div class="navbar-header">
</div>

View file

@ -6,6 +6,15 @@
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="../static/css/style.css" rel="stylesheet">
</head>
<style>
nav {
background-color: #F5665B;
border-color: #E7E4C6;
color: white;
}
</style>
<body>
<nav class="navbar navbar-inverse sticky-top navbar-expand">
<div class="container-fluid">

View file

@ -1,6 +1,82 @@
{% include 'header.html' %}
<div>
<style>
hr {
margin-top: 2rem;
margin-bottom: 2rem;
width: 70%;
border-width: 10px;
border-color: #F5665B;
}
h2 {
text-align: center;
}
h3 {
text-align: center;
}
h4 {
text-align: center;
}
h5 {
text-align: center;
}
h6 {
text-align: center;
margin-right: 100px;
margin-left: 100px;
}
div.main-logo {
margin-top: 16px;
}
.sponsors {
text-align: center;
display: block;
padding: 20px;
}
.sponsors > div {
margin-bottom: 40px;
}
.sponsors > div:last-child {
margin-bottom: 0;
}
.sponsors img {
display: inline-block;
margin-right: 40px;
/* Hack to fix overflow of bose logo*/
max-width: calc(100% - 10px);
}
.title-sponsors img{
max-height: 90px;
}
.silver-sponsors img {
max-height: 25px;
}
a {
color: black;
}
.x{
background-color: #E7E4C6;
margin-right: 100px;
margin-left: 100px;
color: black;
border-radius: 50px 50px 50px 50px;
padding-bottom: 10px;
padding-top:10px;
}
</style>
<!--Logo + Date+ Hosted By -->
<div class="container">
<div class="row center main-logo">
@ -56,6 +132,7 @@
<!--FAQs -->
<hr/>
<div class = "x">
<h2> FAQs </h2>
<div class = "FAQ">
@ -101,7 +178,7 @@
<h4>What is the schedule?</h4>
<h6><a href = 'https://docs.google.com/spreadsheets/d/1FSh2UfZwoMwXlgrKnKjnQg2okEcLDVCP30khnPdM1H0/edit?usp=sharing' style= "color: blue">Here it is!</a> Keep in mind that this is tentative. </h6>
</div>
</div>
</div>

View file

@ -1,15 +1,20 @@
{% include 'header.html' %}
<link href="../static/css/materialize.min.css" rel="stylesheet">
<style>
a{
color:darkblue;
}
</style>
<div style="height: 100%;">
<div id="registration-banner" class="parallax-container valign-wrapper">
<div class="section">
<h2 class="header center red-text text-darken-2">Registration</h2>
<h2 class="header center black-text text-darken-2">Registration</h2>
</div>
<div class="parallax"><img src="../static/img/background1.jpg" alt="background"></div>
</div>
<div class="container">
<div class="container">
<h1>Hi {{ name }}, just a few more steps!</h1>
<Center><h1>Hi {{ name }}, just a few more steps!</h1></Center>
<div class="section">
<form method="post" action="/register" enctype="multipart/form-data">
<div>
@ -26,25 +31,25 @@
</div>
<p>By registering & attending, you agree to the following policies:</p>
<p>
<a href="/tos">Hack@WPI's Terms and Conditions</a>
<center><a href="/tos">Hack@WPI's Terms and Conditions</a></center>
</p>
<p>
<a href="https://github.com/MLH/mlh-policies/blob/master/data-sharing.md">MLH's Data Sharing Notice</a>
<center><a href="https://github.com/MLH/mlh-policies/blob/master/data-sharing.md">MLH's Data Sharing Notice</a></center>
</p>
<p>
<a href="https://mlh.io/privacy">MLH's Privacy Policy</a>
<center><a href="https://mlh.io/privacy">MLH's Privacy Policy</a></center>
</p>
<p>
<a href="https://github.com/MLH/mlh-policies/blob/master/prize-terms-and-conditions/contest-terms.md">MLH's
Contest Terms and Conditions</a>
<center><a href="https://github.com/MLH/mlh-policies/blob/master/prize-terms-and-conditions/contest-terms.md">MLH's
Contest Terms and Conditions</a></center>
</p>
<p>
<a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH's Code of Conduct</a>
<center><a href="https://static.mlh.io/docs/mlh-code-of-conduct.pdf">MLH's Code of Conduct</a></center>
</p>
<br>
<input type="checkbox" name="tos" id="checkboxid" required><label for="checkboxid"><b style="color:black;">Do you agree with these Rules?</b></label>
<input type="checkbox" name="tos" id="checkboxid" required><label for="checkboxid"><b style="color:white;">Do you agree with these Rules?</b></label>
<br><br>
<input name="submit" class="btn btn-lg btn-primary btn-invert" type="submit" value="Submit"/>
<center><input name="submit" class="btn btn-lg btn-primary btn-invert" type="submit" value="Submit"/></center>
</form>
</div>
</div>