sqozz
/
TorrentIndexer
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

implemented the right bootstrap form add made some more JS-form-validation

This commit is contained in:
sqozz 2015-02-17 23:03:19 +01:00
parent 13ce1a8c81
commit 8da224ddf9
4 changed files with 2402 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2306
static/bootstrap.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

13
static/css/create.css
View File

@ -15,6 +15,15 @@
padding-left: 20px; padding-left: 20px;
} }
.quality-box {
display: flex;
}
.quality-box label.btn {
width: 100%;
flex-grow: 1;
}
/* Links */ /* Links */
a, a,
a:focus, a:focus,
@ -95,6 +104,10 @@ body {
content: ":"; content: ":";
} }
.form-group .control-label:after {
content: ":";
}
.row { .row {
margin-bottom: 10px; margin-bottom: 10px;
} }

52
static/js/create.js
View File

@ -82,7 +82,6 @@ function customizeUploadButton() {
function setButtonToFilename(event) { function setButtonToFilename(event) {
$("input[name='torrentFile']").each(function() { $("input[name='torrentFile']").each(function() {
var fileName = $(this).val().split('/').pop().split('\\').pop(); var fileName = $(this).val().split('/').pop().split('\\').pop();
console.log(event["target"]);
targetInput = event["target"] targetInput = event["target"]
button = targetInput.previousSibling.getElementsByClassName("text")[0] button = targetInput.previousSibling.getElementsByClassName("text")[0]
button.innerHTML = chunk(fileName, 40) button.innerHTML = chunk(fileName, 40)
@ -104,13 +103,52 @@ function validateForm() {
subcategory = document.querySelectorAll("input.subcategory")[0] subcategory = document.querySelectorAll("input.subcategory")[0]
torrentname = document.querySelectorAll("input.name")[0] torrentname = document.querySelectorAll("input.name")[0]
description = document.querySelectorAll("textarea.description")[0] description = document.querySelectorAll("textarea.description")[0]
if(file.value.length <= 0) { valid = false } if(file.value.length <= 0) {
if(category.value.length <= 0) { valid = false } valid = false
if(subcategory.value.length <= 0) { valid = false } file.parentElement.parentElement.classList.add("has-error")
if(torrentname.value.length <= 0) { valid = false } file.parentElement.parentElement.classList.remove("has-success")
if(description.value.length <= 0) { valid = false } } else {
file.parentElement.parentElement.classList.add("has-success")
file.parentElement.parentElement.classList.remove("has-error")
}
return false; if(category.value.length <= 0) {
valid = false
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error")
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
} else {
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
}
if(subcategory.value.length <= 0) {
valid = false
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-error")
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-success")
} else {
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.add("has-success")
category.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.classList.remove("has-error")
}
if(torrentname.value.length <= 0) {
valid = false
torrentname.parentElement.parentElement.classList.add("has-error")
torrentname.parentElement.parentElement.classList.remove("has-success")
} else {
torrentname.parentElement.parentElement.classList.add("has-success")
torrentname.parentElement.parentElement.classList.remove("has-error")
}
if(description.value.length <= 0) {
valid = false
description.parentElement.parentElement.classList.add("has-error")
description.parentElement.parentElement.classList.remove("has-success")
} else {
description.parentElement.parentElement.classList.add("has-success")
description.parentElement.parentElement.classList.remove("has-error")
}
return valid;
} }
function chunk(string, n) { function chunk(string, n) {

85
templates/create.html
View File

@ -17,21 +17,16 @@ vim: ts=2 noexpandtab
</div> </div>
{% endfor %} {% endfor %}
{% endif %} {% endif %}
<form class="form-horizontal" action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
<form action="/create" method="post" enctype="multipart/form-data" onsubmit="return validateForm()"> <div class="form-group">
<div class="row"> <label for="inputTorrentFile" class="col-sm-3 control-label">{{ getLocalString(language, "torrent_file") }}</label>
<div class="col-md-4 labelColumn"> <div class="col-sm-9">
<strong>{{ getLocalString(language, "torrent_file") }}</strong>
</div>
<div class="col-md-8">
<input name="torrentFile" class="file" type="file" size="50" maxlength="100000" accept="text/*" onchange="setButtonToFilename(event)"> <input name="torrentFile" class="file" type="file" size="50" maxlength="100000" accept="text/*" onchange="setButtonToFilename(event)">
</div> </div>
</div> </div>
<div class="row"> <div class="form-group">
<div class="col-md-4 labelColumn"> <label for="inputCategory" class="col-sm-3 control-label">{{ getLocalString(language, "category") }}</label>
<strong>{{ getLocalString(language, "category") }}</strong> <div class="col-sm-9">
</div>
<div class="col-md-8">
<div class="row row-container"> <div class="row row-container">
<div class="col-md-6 category-column"> <div class="col-md-6 category-column">
<div class="dropdown"> <div class="dropdown">
@ -61,48 +56,44 @@ vim: ts=2 noexpandtab
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="form-group">
<div class="col-md-4 labelColumn"> <label for="inputName" class="col-sm-3 control-label">{{ getLocalString(language, "name") }}</label>
<strong>Audio-Quality</strong> <div class="col-sm-9">
</div> <input type="text" name="name" class="form-control name" placeholder="e.g. Attack of the Killer Tomatoes" aria-describedby="basic-addon1">
<div class="col-md-8">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-subtitles" aria-hidden="true"></span> Subs</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-stereo" aria-hidden="true"></span> Stereo</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 5.1</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 6.1</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-7-1" aria-hidden="true"></span> 7.1</input>
</label>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="form-group">
<div class="col-md-4 labelColumn"> <label for="inputName" class="col-sm-3 control-label">Audio-Quality</label>
<strong>{{ getLocalString(language, "name") }}</strong> <div class="col-sm-9">
</div> <div class="btn-group quality-box" data-toggle="buttons">
<div class="col-md-8"> <label class="btn btn-default">
<input type="text" name="name" class="form-control name has-success" placeholder="e.g. Attack of the Killer Tomatoes" aria-describedby="basic-addon1"> <input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-subtitles" aria-hidden="true"></span> Subs</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-stereo" aria-hidden="true"></span> Stereo</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 5.1</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-5-1" aria-hidden="true"></span> 6.1</input>
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"><span class="glyphicon glyphicon-sound-7-1" aria-hidden="true"></span> 7.1</input>
</label>
</div>
</div> </div>
</div> </div>
<div class="row"> <div class="form-group">
<div class="col-md-4 labelColumn"> <label for="inputName" class="col-sm-3 control-label">{{ getLocalString(language, "description") }}</label>
<strong>{{ getLocalString(language, "description") }}</strong> <div class="col-sm-9">
</div>
<div class="col-md-8">
<textarea name="description" class="form-control description" rows="10"></textarea> <textarea name="description" class="form-control description" rows="10"></textarea>
</div> </div>
</div> </div>
<div class="button-container"> <div class="form-group">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {{ getLocalString(language, "create") }}!</button> <div class="col-sm-offset-3 col-sm-9">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> {{ getLocalString(language, "create") }}!</button>
</div>
</div> </div>
</form> </form>
</div> </div>