added textbutton and viewcontrol styles. updated templates

k4ever/buyable/templates/buyables/showItem.html

@@ -3,7 +3,7 @@
 
 
 {% block "content" %}
-	<a href="/store/">Zur Liste aller Items</a>
+	<a class="button" href="/store/">Zur Liste aller Items</a>
 	{% if item %}
 		<div class="singleItem" >
 			<div class="productImage">

k4ever/buyable/templates/buyables/showItems.html

@@ -1,7 +1,13 @@
 {% extends "base.html" %}
 
 {% block "content" %}
-	Sortieren nach <a href="/store/">Letzte Änderung</a> | <a href="?order=alphabet">Alphabet</a> | <a href="?order=price">Preis</a><br/>
+	<div class="viewControl">
+		<h3>Sortieren nach</h2>
+		<a class="button" href="/store/">Letzte Änderung</a>
+		<a class="button" href="?order=alphabet">Alphabet</a>
+		<a class="button" href="?order=price">Preis</a><br/>
+	</div>
+
 	<div style="width:800px">
 		{% include "buyables/product_list.html" with buyables=items %}
 	</div>

k4ever/media/css/style.css

@@ -147,16 +147,16 @@ h3 {
   clear: both;
   display: block;
 }
-.content {
+a {
-  padding: 5px;
-}
-.content a {
   color: #3398cc;
 }
-.content a:hover {
+a:hover {
   color: white;
   background-color: #3398cc;
 }
+.content {
+  padding: 5px;
+}
 input {
   padding: 2px 5px;
   border: 1px solid #E5E5E5;
@@ -311,6 +311,7 @@ p {
   vertical-align: middle;
   padding: 10px 15px;
   margin: 3px 0;
+  color: white;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
@@ -451,7 +452,6 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
   padding: 5px 10px;
   margin: 10px 10px 15px 0;
   position: relative;
-  height: 32px;
   text-align: center;
   border-radius: 6px;
   float: left;
@@ -490,6 +490,7 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
   display: block;
   height: 100%;
   min-width: 32px;
+  height: 32px;
   background: url("img/payment.png") no-repeat center center transparent;
 }
 .button.buy > span > span {
@@ -536,3 +537,20 @@ table.itemListContainer > tbody > tr:first-child ~ tr > td {
   -webkit-box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
   box-shadow: 0 1px 3px 0 black, 0 1px 3px 0 black inset;
 }
+.viewControl {
+  border-bottom: 1px solid #007bba;
+  margin-bottom: 18px;
+  padding-bottom: 7px;
+}
+.viewControl h2:after,
+.viewControl h3:after,
+.viewControl h4:after,
+.viewControl h5:after {
+  content: ": ";
+}
+.viewControl > * {
+  display: inline-block;
+  float: none;
+  vertical-align: middle;
+  margin: 0 10px 0 0;
+}

k4ever/media/css/style.less

@@ -151,19 +151,19 @@ h3 {
 	display: block;
 }
 
-.content {
+a {
-	padding: 5px;
+	color: @clrMediumBlue;
-
-	a {
-		color: @clrMediumBlue;
 
-		&:hover {
+	&:hover {
-			color: white;
+		color: white;
-			background-color: @clrMediumBlue;
+		background-color: @clrMediumBlue;
-		}
 	}
 }
 
+.content {
+	padding: 5px;
+}
+
 input {
 	padding: 2px 5px;
 	border: 1px solid #E5E5E5;
@@ -331,6 +331,7 @@ p {
 				vertical-align: middle;
 				padding: 10px 15px;
 				margin: 3px 0;
+				color: white;
 				.border-radius(20px);
 				.transition(~"background .2s, box-shadow .2s");
 	
@@ -483,7 +484,6 @@ table.itemListContainer {
 	padding: 5px 10px;
 	margin: 10px 10px 15px 0;
 	position: relative;
-	height: 32px;
 	text-align: center;
 	border-radius: 6px;
 	float: left;
@@ -503,6 +503,7 @@ table.itemListContainer {
 			display: block;
 			height: 100%;
 			min-width: 32px;
+			height: 32px;
 			background: url("img/payment.png") no-repeat center center transparent;
 
 			> span {
@@ -540,4 +541,23 @@ table.itemListContainer {
 	&:active {
 		.box-shadow(~"0 1px 3px 0 black, 0 1px 3px 0 black inset");
 	}
+}
+
+.viewControl {
+	border-bottom: 1px solid @clrDarkBlue;
+	margin-bottom: 18px;
+	padding-bottom: 7px;
+
+	h2, h3, h4, h5 {
+		&:after {
+			content: ": ";
+		}
+	}
+
+	> * {
+		display: inline-block;
+		float: none;
+		vertical-align: middle;
+		margin: 0 10px 0 0;
+	}
 }