improved layout

6 years ago · 2454fa1303
parent 759b23e6b1
commit 2454fa1303
13 changed files with 211 additions and 72 deletions
--- a/db.sqlite3
+++ b/db.sqlite3
--- a/news/pycache/models.cpython-37.pyc
+++ b/news/pycache/models.cpython-37.pyc
--- a/news/pycache/views.cpython-37.pyc
+++ b/news/pycache/views.cpython-37.pyc
--- a/news/static/media/74d7e72e-e415-462e-8978-5ef942ff96a4
+++ b/news/static/media/74d7e72e-e415-462e-8978-5ef942ff96a4
--- a/news/static/media/74d7e72e-e415-462e-8978-5ef942ff96a4.png
+++ b/news/static/media/74d7e72e-e415-462e-8978-5ef942ff96a4.png
--- a/news/static/media/a1f5bf0d-2dbb-4cd7-8cc0-dc39b93935d4
+++ b/news/static/media/a1f5bf0d-2dbb-4cd7-8cc0-dc39b93935d4
--- a/news/static/media/a1f5bf0d-2dbb-4cd7-8cc0-dc39b93935d4.png
+++ b/news/static/media/a1f5bf0d-2dbb-4cd7-8cc0-dc39b93935d4.png
--- a/news/static/news/LibreBaskerville-Bold.otf
+++ b/news/static/news/LibreBaskerville-Bold.otf
--- a/news/static/news/css/app.css
+++ b/news/static/news/css/app.css
@ -1,6 +1,10 @@
@font-face {
    font-family: LibreBaskerville;
-    src: url("LibreBaskerville-Regular.otf") format("opentype");
+    src: url("../LibreBaskerville-Regular.otf") format("opentype");
+}
+@font-face {
+    font-family: LibreBaskervilleBold;
+    src: url("../LibreBaskerville-Bold.otf") format("opentype");
 }

 body {
@ -10,32 +14,108 @@ body {
  padding: 0px;
 }

+.postcontainer {
+
+}
+
+.even {
+  background-color: #fff;
+  padding: 20px 0px;
+}
+
+.odd {
+  background-color: #eee;
+  padding: 20px 0px;
+}
+
+.header {
+  text-align: center;
+  /* background-color: #aaa; */
+}
+
+.imgcontainer {
+  position: relative;
+  /* text-align: center; */
+  color: white;
+}
+
+/* Bottom left text */
+.bottom-left {
+  width: 800px;
+  position: absolute;
+  bottom: 8px;
+  left: 16px;
+}
+
+.crop {
+  width: 1000px;
+    /* width: 1000px; */
+    height: 200px;
+    overflow: hidden;
+    border-radius: 20px;/*0px 20px 20px 0px;*/
+}
+
+.crop img {
+    width: 1000px;
+    height: 200px;
+    margin: -100px 0 0 -200px;
+}
+
+.header h1 {
+  font-size: 36px;
+  line-height: 90%;
+  margin-top: 20px;
+}
+
 .content {
+  /* background-color: #eee; */
  padding: 16px;
 }

 .content h1 {
-  font-family: 'LibreBaskerville';
+  font-family: 'LibreBaskervilleBold';
  font-size: 28px;
-  margin: 0px;
+  margin: 10px 0px 0px 0px;
  padding: 0px;
 }

+.imgcontainer a {
+  color: #fff;
+}
+
+.imgcontainer a:hover {
+  color: #aaa;
+}
+
+.contentbody {
+  font-family: 'LibreBaskerville';
+  padding: 12px 12px 0px 12px;
+}
+
 .post {
-  margin-bottom: 20px;
+  padding: 10px 0px;
+  margin-bottom: 10px;
+}
+
+.padded {
+  padding: 8px;
 }

 .comments {
+  font-size: 14px;
  color: #666;
-  padding: 0px 10px;
-  background-color: #efe;
-  border-radius: 16px;
+  /* padding: 0px 10px; */
+  /* background-color: #efe; */
+  /* border-radius: 16px; */
 }

 .info {
-  text-align: right;
-  padding: 0px 20px;
-  margin-top: 10px;
+  font-size: 14px;
+  border-bottom: 1px solid #ccc;
+  /* margin-bottom: 6px; */
+}
+
+.current {
  font-size: 14px;
 }

--- a/news/templates/base.html
+++ b/news/templates/base.html
@ -12,23 +12,31 @@
 <body>

  <!-- Header -->
-  <header>
-      <h1><a href="{% url 'news:index' %}">Poker CC</a></h1>
-
-          <p>
-            {% if user.is_authenticated %}
-            <a href="{% url 'news:submission' %}">Submit</a>
-            {% else %}
-            <a href="{% url 'news:createaccount' %}">Create account</a>
-            {% endif %}
-          </p>
-
-  </header>
-
-  <!-- Body -->
-  <div class="content">
-    {% block content %}{% endblock %}
-  </div>
+  <!-- <header>
+
+
+  </header> -->
+
+ <div class="grid-x">
+   <!-- Header -->
+   <div class="cell large-2 header">
+     <h1><a href="{% url 'news:index' %}">poker<br/>downtown</a></h1>
+     <span>hardcore newsing</span>
+
+     <p>
+       <br/>
+       {% if user.is_authenticated %}
+       <a href="{% url 'news:submission' %}">Submit</a>
+       {% else %}
+       <a href="{% url 'news:createaccount' %}">Create account</a>
+       {% endif %}
+     </p>
+   </div>
+   <!-- Body -->
+   <div class="cell large-8 content">
+     {% block content %}{% endblock %}
+   </div>
+ </div>

  <!-- Footer -->
  <footer>
--- a/news/templates/news/index.html
+++ b/news/templates/news/index.html
@ -9,10 +9,36 @@

    {% for post in latest_post_list %}

+<!-- <div class="{% if forloop.counter|divisibleby:2 %}even{% else %}odd{% endif %}"> -->
+
    <!-- A post -->
      {% if post.style == 0 %}

-          <div class="grid-x post">
+      <div class="post">
+
+        <div class="imgcontainer">
+           <a href="{{ post.url }}">
+             <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
+           <div class="bottom-left">
+             <h1>{{ post.title }}</h1>
+           </div>
+           </a>
+        </div>
+        <p class="contentbody">
+          {{ post.body }}
+        </p>
+        <div class="info">
+          {{ post.date }} - {{ post.author.username }} - <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comments{% else %}write comment{% endif %}</a>
+        </div>
+        <!-- Some comments -->
+        <div class="comments">
+          {% for comment in post.top_comments %}
+            <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
+          {% endfor %}
+        </div>
+      </div>
+
+          <!-- <div class="grid-x post">
              <div class="cell large-2 large-offset-2 info">
                <br/>
                {{ post.date }}
@ -29,7 +55,6 @@
                    {{ post.body }}
                  </div>
                  <div class="cell large-4 comments">
-                    <!-- Some comments -->
                    {% for comment in post.top_comments %}
                      <div class="grid-x">
                        <div class="cell small-2 large-2">{{ comment.body }}</div>
@ -39,43 +64,60 @@

                </div>
              </div>
-          </div>
+          </div> -->

      {% else %}

-          <div class="grid-x post">
-              <div class="cell large-2 large-offset-2 info">
-                <img src="{% static 'media/' %}{{ post.image_url }}" width="100" height="100"/>
-                <br/>
-                {{ post.date }}
-                <br/>
-                {{ post.author.username }}
-                <br/>
-                <a href="{% url 'news:post' post.id %}">comments</a>
-              </div>
-              <div class="cell large-4">
-                <div class="grid-y">
-                  <div class="cell large-4">
-                    <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
-                    {{ post.body }}
-                  </div>
-                  <div class="cell large-4 comments">
-                    <!-- Some comments -->
-                    {% for comment in post.top_comments %}
-                      <div class="grid-x">
-                        <div class="cell small-2 large-2">{{ comment.body }}</div>
-                      </div>
-                    {% endfor %}
-                  </div>
+<div class="post">
+  <div class="grid-x">
+      <div class="cell large-2">
+        <img src="{% static 'media/' %}{{ post.image_url }}" width="150" height="150"/>
+      </div>
+      <div class="cell large-8">
+        <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
+        <p class="contentbody">{{ post.body }}</p>
+    </div>

-                </div>
-              </div>
-          </div>
+  </div>
+  
+  <div class="info">
+    {{ post.date }} - {{ post.author.username }} - <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comments{% else %}write comment{% endif %}</a>
+  </div>
+  <!-- Some comments -->
+  <div class="comments">
+    {% for comment in post.top_comments %}
+      <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
+    {% endfor %}
+  </div>
+
+
+</div>

      {% endif %}

+<!-- </div> -->
    {% endfor %}

+    <!-- Pagination -->
+    <div class="pagination">
+        <span class="step-links">
+            {% if latest_post_list.has_previous %}
+                <a href="?page=1">&laquo; first</a>
+                <a href="?page={{ latest_post_list.previous_page_number }}">previous</a>
+            {% endif %}
+
+            <span class="current">
+                Page {{ latest_post_list.number }} of {{ latest_post_list.paginator.num_pages }}
+            </span>
+
+            {% if latest_post_list.has_next %}
+                <a href="?page={{ latest_post_list.next_page_number }}">next</a>
+                <a href="?page={{ latest_post_list.paginator.num_pages }}">last &raquo;</a>
+            {% endif %}
+        </span>
+    </div>
+
+
 {% else %}
    <p>No posts are available.</p>
 {% endif %}
--- a/news/templates/news/post.html
+++ b/news/templates/news/post.html
@ -8,11 +8,14 @@

 <img src="{% static 'media/' %}{{ post.image_url }}"/>

-<a href="{{ post.url }}"><h1>{{ post.title }}</h1></a>
-<p>submitted by {{ post.author.username }}</p>
-<p>----Body----</p>
-<p>{{ post.content }}</p>
-<p>----Comments----</p>
+<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
+<p class="contentbody">
+  {{ post.body }}
+</p>
+<div class="info">
+  {{ post.date }} - {{ post.author.username }}
+</div>
+<br/>

 <form action="{% url 'news:comment' post.id  %}" method="post">
  {% csrf_token %}
@ -25,10 +28,14 @@
  <input type="submit" value="Submit">
 </form>

-<ul>
+<br/>
+<p>----Comments----</p>
 {% for comment in post.comment_set.all %}
-    <li>{{ comment.body }}</li>
+    <p>
+      <span class="info">{{ comment.author.username }} - {{ comment.date }}</span>
+      <br/>
+      {{ comment.body }}
+    </p>
 {% endfor %}
-</ul>

 {% endblock content %}
--- a/news/views.py
+++ b/news/views.py
@ -2,26 +2,28 @@ from django.shortcuts import render, get_object_or_404
 from django.http import HttpResponse, Http404, HttpResponseRedirect
 from django.template import loader
 from django.urls import reverse
+from django.core.paginator import Paginator
+from django.conf import settings
 from .models import Post, Comment
 from .forms import PostForm
 from datetime import datetime
 import logging
-from django.conf import settings
 import uuid
-# Create your views here.

 def index(request):
-    latest_post_list = Post.objects.filter(state=1).order_by('-date')[:25]
-    context = { 'latest_post_list' : latest_post_list }
+    latest_post_list = Post.objects.filter(state=1).order_by('-date')
+    paginator = Paginator(latest_post_list, 25)
+
+    page = request.GET.get('page')
+    posts = paginator.get_page(page)
+
+    context = { 'latest_post_list' : posts }
    return render(request, 'news/index.html', context)

 def post(request, post_id):
    post = get_object_or_404(Post, pk=post_id)
    return render(request, 'news/post.html', {'post': post})

-# def submission(request):
-#     return render(request, 'news/submission.html', {})
-
 def createaccount(request):
    return render(request, 'news/createaccount.html', {})