Skip to content

Commit

Permalink
Added more field types to the dashboard page
Browse files Browse the repository at this point in the history 
Started work on the float labels
  • Loading branch information
@mmarcos
mmarcos committed Feb 1, 2018
1 parent f8a2a3a commit 0ecfa72
Show file tree
Hide file tree
Showing 8 changed files with 15,204 additions and 93 deletions.
1 change: 1 addition & 0 deletions arctic/static/arctic/config.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ PATHS:
# Paths to your own project code are here
- "src/assets/js/utils/helpers.js"
- "src/assets/js/components/conditional-field.js"
- "src/assets/js/components/float_label.js"
- "src/assets/js/components/form.js"
- "src/assets/js/components/reveal-iframe.js"
- "src/assets/js/components/toggle_form.js"
Expand Down
6 changes: 4 additions & 2 deletions arctic/static/arctic/dist/assets/css/arctic.css
View file

Large diffs are not rendered by default.

17 changes: 16 additions & 1 deletion arctic/static/arctic/dist/assets/img/arctic_logo.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15,050 changes: 15,049 additions & 1 deletion arctic/static/arctic/dist/assets/js/app.js
View file

Large diffs are not rendered by default.

22 changes: 0 additions & 22 deletions arctic/static/arctic/src/assets/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,31 +30,9 @@ $(function() {
$('[data-toggle="tooltip"]').tooltip();
});

$('.float-label input').keyup(function() {
// Check if float label input is not empty, if so then add some CSS
if ($(this).val().length > 0) {
$(this).css({
paddingTop: '1.2rem',
paddingBottom: '.4rem'
});

$(this).next('label').css({
top: '.3rem',
fontSize: '75%'
});
}
});

// jquery stuff goes here
$(document).ready(function() {
// Check if float label input has items, if so then add some CSS
if ($('.float-label .selectize-input').find('.item').length > 0) {
$('.selectize-input').parent().next('label').css({
top: '.3rem',
fontSize: '75%'
});
}

var dirty_check = $('form.dirty-check');
if (dirty_check.length && !window.parent != window) {
dirty_check.areYouSure();
Expand Down
21 changes: 21 additions & 0 deletions arctic/static/arctic/src/assets/js/components/float_label.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
$(document).ready(function() {
$('.float-label input, .float-label textarea').blur(function() {
// Check if float label input is not empty, if so then add some CSS
if (($(this).val().length > 0) || ($(this).text() > 0)) {
$(this).removeClass('empty');
alert('not empty');
}
else {
$(this).addClass('empty');
alert('empty');
}
});

// Check if float label input has items, if so then add some CSS
if ($('.float-label .selectize-input').find('.item').length > 0) {
$('.selectize-input').parent().next('label').css({
top: '.3rem',
fontSize: '75%'
});
}
});
178 changes: 112 additions & 66 deletions arctic/templates/arctic/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,94 +1,140 @@
{% extends "arctic/base.html" %}

{% block content %}
<h4 id="form" data-magellan-target="form">Form with validation</h4>
<h4 id="form" data-magellan-target="form">Form with HTML5 input types</h4>
<form class="content-block__flex-wrap float-label" data-abide novalidate>
<fieldset type="get" class="fieldset-default arctic-card">
<div class="form-size">
<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" id="name" type="text" required />
</div>
<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<input class="form-control" id="text" type="text" required />
<label for="text">Text Input</label>
</div>
</div>

<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<label for="surname">Surname</label>
<input class="form-control" id="surname" type="text" value="Smith" required disabled />
<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<input class="form-control" id="text_disabled" type="text" value="Some Value" required disabled />
<label for="text_disabled">Text Input Disabled</label>
</div>
</div>
</div>

<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" id="password" type="password" required />
<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<input class="form-control" id="password" type="password" required />
<label for="password">Password Input</label>
</div>
</div>
</div>

<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<label for="repeat-password">Repeat Password</label>
<input class="form-control" id="repeat-password" type="password" required />
<div class="col-sm-12 col-md-6 col-lg-3 col">
<div class="form-group">
<input class="form-control" id="email" type="email" required />
<label for="email">Email Input</label>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-12 col-md-6 col">
<div class="form-group">
<label for="street">Street</label>
<input class="form-control" id="street" type="text" required />
<div class="row">
<div class="col-sm-12 col-md-6 col">
<div class="form-group">
<input class="form-control" id="datetime_local" type="datetime-local" js-datetimepicker />
<label for="datetime_local">DateTime-Local Input</label>
</div>
</div>
<div class="col-sm-6 col-md-3 col">
<div class="form-group">
<input class="form-control" id="date" type="date" js-datepicker />
<label for="date">Date Input</label>
</div>
</div>
<div class="col-sm-6 col-md-3 col">
<div class="form-group">
<input class="form-control" id="time" type="time" js-timepicker />
<label for="time">Time Input</label>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3 col">
<div class="form-group">
<label for="house-number">House Number</label>
<input class="form-control" id="house-number" type="number" required />
<div class="row">
<div class="col">
<div class="form-group">
<textarea name="description" cols="40" rows="3" id="textarea"></textarea>
<label for="textarea">Textarea</label>
</div>
</div>
</div>

<div class="col-sm-6 col-md-3 col">
<div class="form-group">
<label for="extension">House Number Extension</label>
<input class="form-control" id="extension" type="text" required />
<div class="row">
<div class="col-sm-4 col">
<div class="form-group">
<input class="form-control" id="number" type="number" required />
<label for="number">Number Input</label>
</div>
</div>
<div class="col-sm-4 col">
<div class="form-group">
<input class="form-control" id="range" type="range" required />
<label for="range">Range Input</label>
</div>
</div>
<div class="col-sm-4 col">
<div class="form-group">
<input class="form-control" id="color" type="color" required />
<label for="color">Color Input</label>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 col">
<div class="form-group styled-select">
<label for="styled-select">Option groups</label>
<select id="styled-select">
<option value="">Select gear...</option>
<optgroup label="Climbing">
<option value="pitons">Pitons</option>
<option value="cams">Cams</option>
<option value="nuts">Nuts</option>
<option value="bolts">Bolts</option>
<option value="stoppers">Stoppers</option>
<option value="sling">Sling</option>
</optgroup>
<optgroup label="Skiing">
<option value="skis">Skis</option>
<option value="skins">Skins</option>
<option value="poles">Poles</option>
</optgroup>
</select>
<div class="row">
<div class="col-sm-6 col">
<div class="form-group">
<input class="form-control" id="url" type="url" required />
<label for="url">Url Input</label>
</div>
</div>
<div class="col-sm-6 col">
<div class="form-group">
<input class="form-control" id="file" type="file" required />
<label for="range">File Input</label>
</div>
</div>
</div>


<div class="row">
<div class="col-sm-6 col-md-3 col">
<div class="form-group styled-select">
<label for="styled-select">Option groups</label>
<select id="styled-select">
<option value="">Select gear...</option>
<optgroup label="Climbing">
<option value="pitons">Pitons</option>
<option value="cams">Cams</option>
<option value="nuts">Nuts</option>
<option value="bolts">Bolts</option>
<option value="stoppers">Stoppers</option>
<option value="sling">Sling</option>
</optgroup>
<optgroup label="Skiing">
<option value="skis">Skis</option>
<option value="skins">Skins</option>
<option value="poles">Poles</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>

<div class="row button-group">
<div class="col-sm-12 col">
<button class="btn btn-primary" type="submit" value="Submit">Submit</button>
<button class="btn btn-secondary" type="reset" value="Reset">Reset</button>
<div class="row button-group">
<div class="col-sm-6">
<button class="btn btn-secondary" type="reset" value="Reset">Reset</button>
</div>
<div class="col-sm-6 text-right">
<button class="btn btn-primary" type="submit" value="Submit">Submit</button>
</div>
</div>
</div>
</div>
</div>
</fieldset>
</form>

Expand Down
2 changes: 1 addition & 1 deletion arctic/templates/arctic/partials/base_data_table.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ <h5 class="modal-title">Confirm your action</h5>
{% endblock %}
</div>
{% else %}
<h3 class="col text-center">No result...</h3>
<h3 class="col text-center">{% trans 'No result...' %}</h3>
{% endif %}
</div>
{% endblock %}
Expand Down

0 comments on commit 0ecfa72

Please sign in to comment.