Added a crude rom detail view

design/mockup/gulasch_bulma.sass

@@ -13,3 +13,9 @@ $primary: #e60000
     background-position: center
 	.categorie
 		margin: 0.5vw
+
+.less-margin
+    margin-top: -2.5rem
+
+.tab-body
+	padding-left: 1vw

roms/templates/roms/details.html

@@ -0,0 +1,54 @@
+{% extends "base.html" %}
+
+{% load static %}
+
+
+{% block title %}{{rom.name}}{% endblock %}
+{% block nav_rom_class %}is-active{% endblock %}
+
+
+{% block content %}
+<div class="rom-overview">
+	<div class="columns">
+		<div class="column">
+			<div class="box">
+				<h1 class="title is-2">{{rom.name}}</h1>
+
+				<div class="columns less-margin">
+					<div class="column">
+						{% for tag in rom.tags.all %}
+						<a href="{% url 'romlist' tag=tag.slug %}"><span class="tag is-medium categorie is-primary">{{tag.name}}</span></a>
+						{% endfor %}
+						<br/><br/>
+						{{rom.description|linebreaks}}
+						<br/><br/>
+						<div class="tabs is-boxed">
+						  <ul>
+						    <li class="is-active">
+						      <a>
+						        <span class="icon is-small"><i class="fa fa-wifi"></i></span>
+						        <span>Flashen per Wifi</span>
+						      </a>
+						    </li>
+						    <li>
+						      <a>
+						        <span class="icon is-small"><i class="fa fa-usb"></i></span>
+						        <span>Manuell flashen</span>
+						      </a>
+						    </li>
+						</ul>
+						</div>
+						<div class="tab-body">
+							Hier könnte eine Anleitung stehen.
+						</div>
+
+					</div>
+					<div class="column  is-one-third">
+						<img src="{% get_media_prefix %}/{{rom.cover.large}}"/>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+{% endblock %}

roms/templates/roms/list.html

@@ -24,7 +24,7 @@
 	<div class="columns">
 	{% for rom in roms %}
 			<div class="column is-one-quarter">
-				<a class="box has-text-centered">
+				<a class="box has-text-centered" href="{% url 'romdetails' id=rom.pk %}">
 					<img src="{% get_media_prefix %}/{{rom.cover.small}}" />
 					<h1 class="title is-4">{{ rom.name }}</h1>
 				</a>

roms/urls.py

@@ -1,12 +1,13 @@
 from django.conf.urls import include, url
 
-from roms.views import RomListJson, RomDetailViewJson, RomList
+from roms.views import RomListJson, RomDetailViewJson, RomList, RomDetailView
 
 urlpatterns = [
     url(r'^json/list/$', RomListJson.as_view()),
     url(r'^json/list/(?P<tag>[a-zA-Z0-9-]+)/$', RomListJson.as_view()),
     url(r'^json/details/(?P<id>[0-9]+)/$', RomDetailViewJson.as_view()),
 
-    url(r'^list/$', RomList.as_view(), name='romlist'),
-    url(r'^list/(?P<tag>[a-zA-Z0-9-]+)/$', RomList.as_view(), name='romlist')
+    url(r'^list/$', RomList.as_view(), name = 'romlist'),
+    url(r'^list/(?P<tag>[a-zA-Z0-9-]+)/$', RomList.as_view(), name = 'romlist'),
+    url(r'^details/(?P<id>[0-9]+)/$', RomDetailView.as_view(), name = 'romdetails')
 ]

roms/views.py

@@ -31,6 +31,16 @@ class RomList(ListView):
         return context
 
 
+class RomDetailView(DetailView):
+    pk_url_kwarg = 'id'
+    template_name = 'roms/details.html'
+    context_object_name = 'rom'
+
+    def get_queryset(self):
+        queryset = Rom.objects.all().filter(approved = True)
+        return queryset
+
+
 class RomListJson(ListView):
 
     def get_queryset(self):
@@ -63,9 +73,12 @@ class RomListJson(ListView):
 
 
 class RomDetailViewJson(DetailView):
-    model = Rom
     pk_url_kwarg = 'id'
 
+    def get_queryset(self):
+        queryset = Rom.objects.all().filter(approved = True)
+        return queryset
+
     def render_to_response(self, context, **response_kwargs):
         rom = self.get_object()
         return JsonResponse(rom.to_json(), **response_kwargs, safe=False)

static/css/gulasch_bulma.css

@@ -4282,3 +4282,9 @@ label.panel-block {
     background-repeat-background-position: center; }
   .rom-overview .categorie {
     margin: 0.5vw; }
+.less-margin {
+    margin-top: -2.5rem;
+}
+.tab-body {
+    padding-left: 1vw;
+}