revert back to bootstrap

.gitignore

@@ -1,2 +1,3 @@
 *.swp
 *.swo
+backup

cats.txt

@@ -0,0 +1,47 @@
+Audio
+	Lossless
+	Lossy
+	Audiobooks
+	Other
+
+Video
+	Movies 3D
+	Movies HD
+	Movies SD
+	Series HD
+	Series SD
+	Clips
+	Other
+
+Porn
+	Movies 3D
+	Movies HD
+	Movies SD
+	Series HD
+	Series SD
+	Clips
+	Pictures
+	Other
+
+Games
+	PC
+	MAC
+	iOS
+	Android
+	Consoles
+	Other
+
+Applications
+	Windows
+	Mac
+	*nix
+	iOS
+	Android
+	Other
+
+Other
+	E-Books
+	Comics
+	Pictures
+	Other
+

settings.json

@@ -0,0 +1,10 @@
+{
+	"categories": {
+		"audio" : [ "lossless", "lossy", "audiobooks", "other" ],
+		"video" : [ "movies_3d", "movies_4k", "movies_hd", "movies_sd", "series_hd", "series_sd", "clips", "other" ],
+		"porn" : [ "movies_3d", "movies_4k", "movies_hd", "movies_sd", "series_hd", "series_sd", "clips", "pictures", "other" ],
+		"games" : [ "pc", "mac", "ios", "android", "consoles", "other" ],
+		"applications" : [ "windows", "mac", "unix", "ios", "android", "other" ],
+		"other" : [ "ebooks", "comics", "pictures", "other" ]
+	}
+}

static/css/create.css

@@ -0,0 +1,140 @@
+
+/* Links */
+a,
+a:focus,
+a:hover {
+	color: #fff;
+}
+
+/* Custom default button */
+.btn-default,
+.btn-default:hover,
+.btn-default:focus {
+	color: #333;
+	text-shadow: none; /* Prevent inheritence from `body` */
+	border: 1px solid #fff;
+}
+
+
+/*
+ * Base structure
+ */
+
+html,
+body {
+	height: 100%;
+	background-color: #333;
+}
+body {
+	color: #fff;
+	text-align: center;
+	text-shadow: 0 1px 3px rgba(0,0,0,.5);
+}
+
+/* Extra markup and styles for table-esque vertical and horizontal centering */
+.site-wrapper {
+	display: table;
+	width: 100%;
+	height: 100%; /* For at least Firefox */
+	min-height: 100%;
+	-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+					box-shadow: inset 0 0 100px rgba(0,0,0,.5);
+}
+.site-wrapper-inner {
+	/*display: table-cell;*/
+	vertical-align: top;
+}
+.cover-container {
+	margin-right: auto;
+	margin-left: auto;
+}
+
+/* Padding for spacing */
+.inner  {
+	padding: 30px;
+	text-align: center;
+}
+
+.cover {
+	text-align: left;
+	vertical-align: inherit;
+}
+
+.createTable {
+	width: 100%;
+	table-layout: fixed;
+	border-collapse: separate; 
+	border-spacing: 10px;
+}
+
+.createTable .labelColumn {
+	width: 200px;
+}
+
+.labelColumn {
+	vertical-align: center;
+}
+
+.labelColumn strong:after {
+	content: ":";
+}
+
+.row {
+	margin-bottom: 10px;
+}
+
+.dropdown {
+	width: 100%;
+}
+
+.btn, .btn-group  {
+	width: 100%;
+}
+
+.btn-group  .btn  {
+	width: auto;
+}
+
+.btn.active  {
+	background-color: #D1FED9;
+	border-color: #8FFFA3;
+}
+
+h2.headline {
+	width: 100%;
+	text-align: center;
+}
+
+button .text {
+	margin-right: 5px;
+}
+
+.btn {
+	text-align: center;
+}
+
+/*
+ * Cover
+ */
+
+.cover {
+	padding: 0 20px;
+}
+.cover .btn-lg {
+	padding: 10px 20px;
+	font-weight: bold;
+}
+
+
+/*
+ * Footer
+ */
+
+.mastfoot {
+	color: #999; /* IE8 proofing */
+	color: rgba(255,255,255,.5);
+}
+
+.dropdown {
+	display: inline-block;
+}

static/css/style.css

@@ -58,6 +58,14 @@ body {
   padding: 30px;
 }
 
+.cover * {
+  text-align: left;
+}
+
+.dropdown {
+  display: inline-block;
+}
+
 
 /*
  * Header

static/js/create.js

@@ -0,0 +1,109 @@
+window.onload = function () {
+	$('.dropdown li > a').click(function(e){
+		setDropdownButtonText(this.innerHTML, this.parentElement.parentElement.parentElement) //set the display-text to the selected value
+		fillDropdownByValue(this.innerHTML, $(".dropdown")["1"])
+	});
+	
+	customizeUploadButton()
+}
+
+function fillDropdownByValue(value, dropdownToFill) {
+	dropdownToFill.getElementsByClassName("text")[0].innerHTML = "Subcategory"
+	var dropdownToFillUl = dropdownToFill.getElementsByClassName("dropdown-menu")[0]
+	dropdownToFillUl.innerHTML = ""
+
+	subCategory = getDescriptorByLocalString("english", value)
+	catList = document.getElementById("subcategory_list")
+	catList.innerHTML = ""
+	categories = global_categories[subCategory].sort()
+	for(var key in categories) {
+		var newEntry = document.createElement("li")
+		var newEntryLink = document.createElement("a")
+		newEntry.setAttribute("role", "presentation")
+		newEntryLink.setAttribute("role", "menuitem")
+		newEntryLink.tabIndex = -1
+		newEntryLink.href = "#"
+		newEntryLink.innerHTML = getLocalString("english", categories[key])
+		newEntryLink.onclick = function(){ setDropdownButtonText(this.innerHTML, this.parentElement.parentElement.parentElement) }
+		newEntry.appendChild(newEntryLink)
+		dropdownToFillUl.appendChild(newEntry)
+	}
+}
+
+function setDropdownButtonText(text, dropdownButton) {
+	var dropdownTextSpan = dropdownButton.getElementsByClassName("text")[0]
+	dropdownTextSpan.innerHTML = text
+}
+
+function sortCategories(categories) {
+	var sortedCategories = []
+	for(var key in categories) {
+		sortedCategories.push(key)
+	}
+	sortedCategories.sort()
+	return sortedCategories
+}
+
+function fillDropdownByValue(value, dropdownToFill) {
+	dropdownToFill.getElementsByTagName("button")[0].disabled = false
+	dropdownToFill.getElementsByClassName("text")[0].innerHTML = "Subcategorie"
+	var dropdownToFillUl = dropdownToFill.getElementsByClassName("dropdown-menu")[0]
+	dropdownToFillUl.innerHTML = ""
+	switch(value) {
+		case "Action":
+			for(i = 0; i < 10; i++) {
+				// <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+				var newEntry = document.createElement("li")
+				var newEntryLink = document.createElement("a")
+				newEntry.setAttribute("role", "presentation")
+				newEntryLink.setAttribute("role", "menuitem")
+				newEntryLink.tabIndex = -1
+				newEntryLink.href = "#"
+				newEntryLink.innerHTML = "foo" + i
+				newEntryLink.onclick = function(){ setDropdownButtonText(this.innerHTML, this.parentElement.parentElement.parentElement) }
+				newEntry.appendChild(newEntryLink)
+				dropdownToFillUl.appendChild(newEntry)
+			}
+			break;
+		case "Another action":
+			for(i = 0; i < 10; i++) {
+				// <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+				var newEntry = document.createElement("li")
+				var newEntryLink = document.createElement("a")
+				newEntry.setAttribute("role", "presentation")
+				newEntryLink.setAttribute("role", "menuitem")
+				newEntryLink.tabIndex = -1
+				newEntryLink.href = "#"
+				newEntryLink.innerHTML = "bar" + i
+				newEntryLink.onclick = function(){ setDropdownButtonText(this.innerHTML, this.parentElement.parentElement.parentElement) }
+				newEntry.appendChild(newEntryLink)
+				dropdownToFillUl.appendChild(newEntry)
+			}
+			break;
+	}
+}
+
+function customizeUploadButton() {
+	$(".tfile").before('<button id="button-file" type="button" class="btn btn-default"><span class="text">Upload...</span><span class="glyphicon glyphicon-open-file" aria-hidden="true"></span></button>');
+	$(".tfile").hide();
+	$('body').on('click', '#button-file', function() {
+			$(".tfile").trigger('click');
+	});
+}
+
+function setButtonToFilename(event) {
+	$("input[name='Datei']").each(function() {
+		var fileName = $(this).val().split('/').pop().split('\\').pop();
+		console.log(event["target"]);
+		targetInput = event["target"]
+		button = targetInput.previousSibling.getElementsByClassName("text")[0]
+		button.innerHTML = fileName
+	});
+}
+
+function setDropdownButtonText(text, dropdownButton) {
+	var dropdownTextSpan = dropdownButton.getElementsByClassName("text")[0]
+	dropdownTextSpan.innerHTML = text
+}
+
+customizeUploadButton()

static/js/main.js

@@ -0,0 +1,16 @@
+function getLocalString(language, descriptor){
+	if(global_strings[language]){
+		return global_strings[language][descriptor] || global_strings["english"][descriptor] || descriptor
+	} else {
+		return descriptor
+	}
+}
+
+function getDescriptorByLocalString(language, localString){
+	for(string in global_strings[language]){
+		if(global_strings[language][string] == localString){
+			return string
+		}
+	}
+	return localString
+}

strings.json

@@ -0,0 +1,40 @@
+{
+	"english" : {
+		"audio" : "Audio",
+		"lossless" : "Lossless",
+		"lossy" : "Lossy",
+		"audiobooks" : "Audiobooks",
+		"other" : "Other",
+		"video" : "Video",
+		"movies_3d" : "Movies 3D",
+		"movies_4k" : "Movies 4K",
+		"movies_hd" : "Movies HD",
+		"movies_sd" : "Movies SD",
+		"series_hd" : "Series HD",
+		"series_sd" : "Series SD",
+		"clips" : "Clips",
+		"other" : "Other",
+		"porn" : "Porn",
+		"pictures" : "Pictures",
+		"games" : "Games",
+		"pc" : "PC",
+		"mac" : "Mac",
+		"ios" : "iOS",
+		"android" : "Android",
+		"consoles" : "Consoles",
+		"applications" : "Applications",
+		"windows" : "Windows",
+		"unix" : "*nix",
+		"ebooks" : "E-Books",
+		"comics" : "Comics",
+		"please_choose" : "Please choose…",
+		"search" : "Search",
+		"categories" : "Categories",
+		"category" : "Category",
+		"subcategory" : "Subcategory",
+		"create" : "Create",
+		"torrent_file" : "Torrent file",
+		"name" : "Name",
+		"create_new_torrent" : "Create new torrent"
+	}
+}

templates/create.html

@@ -5,5 +5,88 @@ vim: ts=2 noexpandtab
 {% block title %}{{ super() }} - Create{% endblock%}
 {% set active_page = "create" %}
 {% block content %}
-<p>CREATE</p>
+<link href="{{ url_for("static", filename="css/create.css") }}" rel="stylesheet">
+<script src="{{ url_for("static", filename="js/create.js") }}"></script>
+	<div>
+		<h2 class="headline">Create new</h2>
+		<div class="alert alert-danger alert-dismissible" role="alert">
+			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+			<strong>Warning!</strong> Better check yourself, you're not looking too good.
+		</div>
+		
+		<div class="row">
+			<div class="col-md-4 labelColumn">
+				<strong>Torrent file</strong>
+			</div>
+			<div class="col-md-8">
+				<input name="Datei" class="tfile" type="file" size="50" maxlength="100000" accept="text/*" onchange="setButtonToFilename(event)">
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-4 labelColumn">
+				<strong>Name</strong>
+			</div>
+			<div class="col-md-8">
+				<input type="text" class="form-control" placeholder="e.g. Attack of the Killer Tomatoes" aria-describedby="basic-addon1">
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-4 labelColumn">
+				<strong>Categorie</strong>
+			</div>
+			<div class="col-md-8">
+				<div class="row">
+					<div class="col-md-6">
+						<div class="dropdown">
+							<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
+								<span class="text">Categorie</span>
+								<span class="caret"></span>
+							</button>
+							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
+								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
+								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
+								<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
+							</ul>
+						</div>
+					</div>
+					<div class="col-md-6">
+						<div class="dropdown">
+							<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true" disabled>
+								<span class="text">Subcategorie</span>
+								<span class="caret"></span>
+							</button>
+							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
+							</ul>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="row">
+			<div class="col-md-4 labelColumn">
+				<strong>Audio-Quality</strong>
+			</div>
+			<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>
+		<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Create!</button>
+	</div>
 {% endblock content%}