zomg user forms

apps/games/forms.py

@@ -10,6 +10,7 @@
 
 
 class GameForm(forms.ModelForm):
+    accept = forms.BooleanField(required=True);
     class Meta(object):
         model = Game
         fields = ('name', 'description', 'url', 'source', 'resources')

apps/games/templates/games/create.html

@@ -12,7 +12,24 @@ <h1>Submit a Game</h1>
   <form method="post">
     {% csrf_token %}
     <ul>
-      {{ form.as_ul }}
+      <!-- {{ form.as_ul }} -->
+      <li>{{ form.name.errors }}{{ form.name.label_tag }}{{ form.name }}</li>
+      <li>{{ form.description.errors }}{{ form.description.label_tag }}{{ form.description }}</li>
+      <li>{{ form.url.errors }}<label for="id_url">URL of the game:</label>{{ form.url }}</li>
+      <li>
+        {{ form.source.errors }}
+        <label for="id_source" class="optional">
+          URL of the source code:
+        </label>{{ form.source }}
+      </li>
+      <li>
+        <label for="id_resources" class="optional">
+          Describe the tools, libraries and other resources you used in the
+          making of this game:
+        </label>{{ form.resources }}
+      </li>
+      {{ form.accept.errors }}
+      {{ form.accept }}<label>I accept the <a target="_blank" href="/rules#terms">Game On! 2010 Terms and Conditions</a></label>
     </ul>
     <input type="submit" value="Submit your game" />
   </form>

apps/games/templates/games/edit.html

@@ -2,6 +2,32 @@
 
 {% block content %}
   <h1>Details</h1>
+  <section class="screenshots">
+    <h2>Screenshots</h2>
+    <ul class="screenshots">
+    {% for screenshot in game.screenshot_set.all %}
+      <li>
+        <img src="{{ screenshot.get_absolute_url }}"/>
+        <a href="{% url games.screenshot_delete game.id,screenshot.id %}"
+          class="screenshot-delete">Delete</a>
+      </li>
+    {% empty %}
+      <li>No Screenshots Available</li>
+    {% endfor %}
+    </ul>
+
+    {% if room_for_more %}
+      <form method="post" action="{% url games.screenshots game.id %}" enctype="multipart/form-data">
+        {% csrf_token %}
+        <h3>Upload a new screenshot</h3>
+        <ul class="screenshot-form">
+          {{ screenshot_form.as_ul }}
+        </ul>
+        <input type="submit" value="Upload">
+      </form>
+    {% endif %}
+  </section>
+
   {% if form.errors %}
     <ul class="errorlist">
       <li>Please fix the errors and submit again.</li>
@@ -10,11 +36,24 @@ <h1>Details</h1>
   <form method="post">
     {% csrf_token %}
     <ul>
-      {{ form.as_ul }}
+      <!-- {{ form.as_ul }} -->
+      <li>{{ form.name.errors }}{{ form.name.label_tag }}{{ form.name }}</li>
+      <li>{{ form.description.errors }}{{ form.description.label_tag }}{{ form.description }}</li>
+      <li>{{ form.url.errors }}<label for="id_url">URL of the game:</label>{{ form.url }}</li>
+      <li>
+        {{ form.source.errors }}
+        <label for="id_source" class="optional">
+          URL of the source code:
+        </label>{{ form.source }}
+      </li>
+      <li>
+        <label for="id_resources" class="optional">
+          Describe the tools, libraries and other resources you used in the
+          making of this game:
+        </label>{{ form.resources }}
+      </li>
+      <input name="{{ form.accept.html_name }}" type="hidden" value="true">
     </ul>
-    <input type="submit" value="Edit game" />
+    <input type="submit" value="Save your changes" />
   </form>
-
-  <h2>Screenshots</h2>
-  <p><a href="{% url games.screenshots game.id %}">Edit screenshots</a></p>
 {% endblock %}

apps/games/templates/games/view.html

@@ -3,18 +3,21 @@
 {% block content %}
   <h1>{{ game.name }}</h1>
   <article class="game single">
-    {% if game.screenshot_set.all %}
     <section class="screenshots">
       <h2>Screenshots</h2>
       <ul class="screenshots">
       {% for screenshot in game.screenshot_set.all %}
         <li id="screenshot-{{ screenshot.id }}">
           <img src="{{ screenshot.get_absolute_url }}" height="{{ screenshot.file.height }}" width="{{ screenshot.file.width }}">
         </li>
+      {% empty %}
+        <li>No Screenshots Available</li>
+        {% if game.creator == request.user %}
+          <h3><a href="{% url games.edit game.id %}">Add Screenshots</a></h3>
+        {% endif %}
       {% endfor %}
       </ul>
     </section>
-    {% endif %}
 
     <section class="description">
       <ul class="links">

apps/games/urls.py

@@ -1,7 +1,8 @@
 from django.conf.urls.defaults import patterns, url, include
 
 urlpatterns = patterns('games.views',
-    url(r'^$', 'view_list', name='games.view_list'),
+    # no gallery yet!
+    # url(r'^$', 'view_list', name='games.view_list'),
     url(r'^(?P<game_id>\d+)/(?P<slug>[\w-]+)?', 'view', name='games.view'),
     url(r'^mine$', 'mine', name='games.mine'),
     url(r'^create', 'create', name='games.create'),

apps/games/views.py

@@ -34,7 +34,14 @@ def edit(request, game_id):
     """Edit an existing game."""
     game = get_object_or_404(Game, creator=request.user, pk=game_id)
     form = GameForm(instance=game)
-    c = {'game': game, 'form': form}
+    room_for_more = game.screenshot_set.count() < settings.SCREENSHOTS_MAX
+    screenshot_form = ScreenshotForm()
+
+    c = {'game': game,
+         'form': form,
+         'room_for_more': room_for_more,
+         'screenshot_form': screenshot_form,
+        }
 
     if request.POST:
         form = GameForm(request.POST, instance=game)
@@ -94,19 +101,28 @@ def screenshots(request, game_id):
     room_for_more = game.screenshot_set.count() < settings.SCREENSHOTS_MAX
     form = ScreenshotForm()
 
+    game = get_object_or_404(Game, creator=request.user, pk=game_id)
+    form = GameForm(instance=game)
+    room_for_more = game.screenshot_set.count() < settings.SCREENSHOTS_MAX
+    screenshot_form = ScreenshotForm()
+
+
     if request.POST and room_for_more:
-        form = ScreenshotForm(request.POST, request.FILES)
-        if form.is_valid():
-            new_screenshot = form.save(commit=False)
+        screenshot_form = ScreenshotForm(request.POST, request.FILES)
+        if screenshot_form.is_valid():
+            new_screenshot = screenshot_form.save(commit=False)
             new_screenshot.game = game
             new_screenshot.save()
 
             messages.success(request, "Your screenshot has been uploaded!")
-            return HttpResponseRedirect(reverse('games.screenshots',
+            return HttpResponseRedirect(reverse('games.edit',
                                                 args=[game.id]))
-
-    c = {'game': game, 'form': form, 'room_for_more': room_for_more}
-    return render(request, 'games/screenshots.html', c)
+    c = {'game': game,
+         'form': form,
+         'room_for_more': room_for_more,
+         'screenshot_form': screenshot_form,
+    }
+    return render(request, 'games/edit.html', c)
 
 
 @login_required

media/css/forms.css

@@ -13,14 +13,19 @@ form li {
 form label {
     display: inline-block;
     font-weight: bold;
-    width: 200px;
-    margin-right: 8px;
+    width: 192px;
+    margin-right: 16px;
     vertical-align: top;
 }
+
+form textarea {
+    width: 310px;
+}
+
 form input[type=submit] {
     cursor: pointer;
     min-width: 10em;
-    margin: 0 0 0 212px;
+    margin: 0 0 0 208px;
     border: 0;
     font-family: Matiz, Helvetica, Arial, sans-serif;
     color: #fff;
@@ -58,3 +63,32 @@ ul.errorlist li {
     text-shadow: 0px 0px 2rpx #000;
     margin: 4px 0;
 }
+
+input[type=checkbox] {
+    margin: 0 8px 0 208px;
+}
+input[type=checkbox] + label {
+    display:inline;
+}
+
+label.optional:after {
+    content: "(optional)";
+    font-size: .9em;
+}
+
+.screenshots form {
+    margin: 3em 0 1em 0;
+}
+.screenshots form h3,
+.screenshots form li,
+.screenshots form ul {
+    margin: 8px 0;
+}
+.screenshots label {
+    display: inline;
+    width: auto;
+}
+.screenshots input[type=submit] {
+    margin: 4px 0;
+}
+

media/css/games.css

@@ -7,17 +7,26 @@
     height: 200px;
     margin-bottom: 1em;
     background: rgba(0,0,0,.2);
-    -moz-box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
-
+            box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
+       -moz-box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
+    -webkit-box-shadow: inset 0 8px 4px rgba(0,0,0,.2);
             border-radius: 1em;
        -moz-border-radius: 1em;
     -webkit-border-radius: 1em;
 }
 
+.games section.screenshots {
+    height: auto;
+}
+
 .games .tile-list .game:nth-child(2n+1) {
     margin-right: 2%;
 }
 
+.games .game p {
+    width: auto;
+}
+
 body.games h1 {
     clear: both;
     margin: 1em 0 1em 0;
@@ -64,6 +73,7 @@ body.games ul.links li a {
 .games section.screenshots {
     float: right;
     width: 300px;
+    margin-top: -1em;
 }
 
 body.games ul.screenshots {
@@ -73,18 +83,19 @@ body.games ul.screenshots {
 
 body.games ul.screenshots li {
     text-align:center;
-    margin: 1em;
     padding: 0;
 }
 
 body.games ul.screenshots li img {
     max-width: 300px;
+    max-height: 240px;
+    margin-top: 1em;
 }
 
 body.games a.screenshot-delete {
     display: block;
 }
 
 .games .game.single p {
-    width: 60%;
+    width: 500px;
 }

media/css/screen.css

@@ -243,21 +243,23 @@ header {
 
 #messages {
     background: none;
-    color: #444;
+    color: #fff;
     font-weight: bold;
     list-style-type: none;
     margin: 1em;
     padding: 0;
 }
 
 #messages li {
-    background-color: #FFF997;
+    background-color: #cc0;
+    background-color: rgba(192, 192, 0, 0.5);
     margin: 0;
     padding: .3em 1em;
 }
 
 #messages li.success {
-    background-color: #67ED87;
+    background-color: #0c0;
+    background-color: rgba(0, 192, 0, 0.5);
 }
 
 header nav {
@@ -394,13 +396,13 @@ nav a:hover {color: rgba(255, 255, 255, 1); text-decoration: none;}
 }
 
 .judges div p {
-    padding-left: 160px;
+    padding-left: 170px;
     width: 340px;
 }
 
 .judges div img {
     float:left;
-    margin-right: 1em;
+    margin-right: 1.2em;
 }
 
 .prize {}