[Application] Improved application form styles and form inputs

This commit is contained in:
henu
2017-01-17 16:47:25 +02:00
parent 5474dc5942
commit 38299d56cf
2 changed files with 64 additions and 32 deletions
+9
View File
@@ -0,0 +1,9 @@
body {
background-color: rgb(10, 90, 100);
}
h2 {
text-align: center;
color: #100;
font-family: sans-serif;
font-weight: bold;
}
+55 -32
View File
@@ -7,7 +7,7 @@
<meta name="author" content="veedeeämkoo">
<title>Jäseneksi Aalto-yliopiston Sähköinsinöörikiltaan</title>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel = "stylesheet">
@@ -18,26 +18,34 @@
{%load staticfiles %}
<script src="/static/js/jquery.noty.packaged.js"></script>
<script src="/static/js/application_controllers.js"></script>
<!-- reCaptcha -->
<link rel="stylesheet" href="/static/css/application.css">
<!-- reCaptcha -->
<script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
<script src="/static/js/angular-recaptcha.js"></script>
</head>
<body>
<h2>Killan jäseneksi liittyminen on helppoa ja hauskaa. Täytä vain alla oleva lomake.</h2>
<h2>Killan jäseneksi liittyminen on helppoa ja hauskaa.</h2>
<h2>Täytä vain alla oleva lomake.</h2>
<h2>Muista myös maksaa jäsenmaksusi!</h2>
<div id="input_form">
<form name="applicationForm">
<div class="form-group">
<label>Etunimi: </label>
<input id="firstNameField" required type="text" placeholder="Sähkö" class="form-control" ng-model="member.first_name"></input>
</div>
<div class="form-group">
<label>Sukunimi: </label>
<input id="lastNameField" required type="text" placeholder="Insinööri" class="form-control" ng-model="member.last_name"></input>
</div>
<div class="form-group">
<label>Sähköposti: </label>
<input id="emailField" required type="text" placeholder="sahko.insinoori@aalto.fi" class="form-control" ng-model="member.email"></input>
<div class="col-xs-10 col-xs-offset-1">
<div class="form-group">
<label for="firstNameField">Etunimi: </label>
<input id="firstNameField" required type="text" placeholder="Sähkö" class="form-control" ng-model="member.first_name"></input>
</div>
</div>
<div class="col-xs-10 col-xs-offset-1">
<div class="form-group">
<label for="lastNameField">Sukunimi: </label>
<input id="lastNameField" required type="text" placeholder="Insinööri" class="form-control" ng-model="member.last_name"></input>
</div>
</div>
<div class="col-xs-10 col-xs-offset-1">
<div class="form-group">
<label>Sähköposti: </label>
<input id="emailField" required type="text" placeholder="sahko.insinoori@aalto.fi" class="form-control" ng-model="member.email"></input>
</div>
</div>
<!--<div class="form-group">
<label>Vuosikurssi: </label>
@@ -49,27 +57,42 @@
<option value="n">N</option>
</select>
</div>-->
<div class="form-group">
<label>Olen AYY:n jäsen: </label>
<input type="checkbox" id="AYY" value="0" ng-model="member.AYY"></input>
<div class="col-xs-10 col-xs-offset-1">
<div class="form-group">
<label>Olen AYY:n jäsen: </label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off" id="AYY" value="0" ng-model="member.AYY">
</label>
</div>
</div>
<div class="form-group">
<label>Haluan saada viikottaisia jäsenmaileja: </label>
<input type="checkbox" id="JAS" value="0" ng-model="member.jas"></input>
<div class="col-xs-10 col-xs-offset-1">
<div class="form-group">
<label>Haluan saada viikottaisia jäsenmaileja: </label>
<label class="btn btn-success">
<input type="checkbox" autocomplete="off" id="JAS" value="0" ng-model="member.jas">
</label>
</div>
</div>
<div class="form-group">
<label>Asuinkunta: </label>
<input id="PORField" required type="text" placeholder="Otaniemi" class="form-control" ng-model="member.POR"></input>
</div>
<div
vc-recaptcha
theme="'light'"
key="'6LevHAcUAAAAAA45B7c-7qja-2aSwHztr9xb4K2Z'"
on-create="setWidgetId(widgetId)"
on-success="setResponse(response)"
on-expire="cbExpiration()"
></div>
<button ng-click="applicationForm.$valid && send()" type="submit" class="btn btn-success" id="sendmember">Tallenna</button>
<div class="col-xs-10 col-xs-offset-1">
<div class="form-group">
<label>Asuinkunta: </label>
<input id="PORField" required type="text" placeholder="Otaniemi" class="form-control" ng-model="member.POR"></input>
</div>
</div>
<div class="col-xs-10 col-xs-offset-1">
<div
vc-recaptcha
theme="'light'"
key="'6LevHAcUAAAAAA45B7c-7qja-2aSwHztr9xb4K2Z'"
on-create="setWidgetId(widgetId)"
on-success="setResponse(response)"
on-expire="cbExpiration()"
></div>
</div>
<div class="col-xs-10 col-xs-offset-1">
<button ng-click="applicationForm.$valid && send()" type="submit" class="btn btn-success" id="sendmember">Tallenna</button>
</div>
</form>
</div>
</body>