Add MDL-Ext and selectfields.

This commit is contained in:
2016-05-24 22:07:25 +02:00
parent 88584c1994
commit 83e3425690
7 changed files with 713 additions and 12 deletions

View File

@@ -1,2 +1,4 @@
<script src="vendor/google/material-design-lite/material.min.js" charset="utf-8"></script>
<script src="vendor/leifoolsen/mdl-ext/lib/mdl-ext.js" charset="utf-8"></script>
</body>
</html>
</html>

View File

@@ -3,10 +3,10 @@
<head>
<meta charset="utf-8"/>
<title>Fake Reservation System</title>
<link rel="stylesheet" href="vendor/google/material-design-lite/material.min.css"/>
<script src="vendor/google/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en"/>
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"/>
<link rel="stylesheet" href="vendor/google/material-design-lite/material.min.css"/>
<link rel="stylesheet" href="vendor/leifoolsen/mdl-ext/lib/mdl-ext.css"/>
<link rel="stylesheet" href="css/frs.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

View File

@@ -1,6 +1,11 @@
<select name="{{field_id}}" size="1">
<!-- https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 -->
<div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
<!-- https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 -->
<select id="{{field_id}}" name="{{field_id}}" {{#required}}required{{/required}} size="1" class="mdlext-selectfield__select">
<option value=""></option>
<option value="DE">Germany</option>
<option value="UK">United Kingdom</option>
<option value="US">United States of America</option>
</select>
<label for="{{field_id}}" class="mdlext-selectfield__label">{{title}}</label>
<span class="mdlext-selectfield__error">Please select a country!</span>
</div>

View File

@@ -1,5 +1,12 @@
<select name="{{field_id}}" size="1">
<div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
<!-- https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 -->
<select id="{{field_id}}" name="{{field_id}}" {{#required}}required{{/required}} size="1" class="mdlext-selectfield__select">
<option value=""></option>
<option value="EUR">Euro - €</option>
<option value="USD">US Dollar - $</option>
<option value="GBP">British Pound - £</option>
</select>
<label for="{{field_id}}" class="mdlext-selectfield__label">{{title}}</label>
<span class="mdlext-selectfield__error">Please select a currency!</span>
</div>

View File

@@ -1,7 +1,13 @@
Select your status:
<select name="{{field_id}}" size="1">
<div class="mdlext-selectfield mdlext-js-selectfield mdlext-selectfield--floating-label">
<!-- https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2 -->
<select id="{{field_id}}" name="{{field_id}}" {{#required}}required{{/required}} size="1" class="mdlext-selectfield__select">
<option value=""></option>
<option value="http://schema.org/Confirmed">Confirmed</option>
<option value="http://schema.org/Cancelled">Cancelled</option>
<option value="http://schema.org/Pending">Pending</option>
<option value="http://schema.org/Hold">Hold</option>
</select>
<label for="{{field_id}}" class="mdlext-selectfield__label">{{title}}</label>
<span class="mdlext-selectfield__error">Please select a status!</span>
</div>