Many layout improvements

6 years ago · 11a8820298
parent 14dee885de
commit 11a8820298
7 changed files with 146 additions and 57 deletions
--- a/db.sqlite3
+++ b/db.sqlite3
--- a/news/pycache/models.cpython-37.pyc
+++ b/news/pycache/models.cpython-37.pyc
--- a/news/models.py
+++ b/news/models.py
@ -7,7 +7,7 @@ from enum import Enum
 class PostState(Enum):
    DRAFT = 0
    PUBLISHED = 1
-    PROGRAMMED = 2
+    WAITING_LIST = 2
    USER_SUBMITTED = 3

 class Post(models.Model):
--- a/news/static/news/css/app.css
+++ b/news/static/news/css/app.css
@ -7,6 +7,35 @@
    src: url("../LibreBaskerville-Bold.otf") format("opentype");
 }

+
+header {
+  /* width: 100%; */
+  margin-top: 10px;
+  text-align: center;
+}
+
+header a {
+  text-decoration: none;
+  /* color: #fff; */
+}
+
+header h1 {
+  margin-bottom: 0;
+  font-family: 'LibreBaskervilleBold';
+  font-size: 28px;
+}
+
+header h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 18px;
+}
+
+nav {
+  font-size: 14px;
+  margin-bottom: 24px;
+}
+
 body {
 	background-color:#fff;
 	font-size:20px;
@ -33,6 +62,25 @@ article h1 {
  }
 }

+.post_padding {
+  padding: 8px;
+}
+@media print, screen and (min-width: 40em) {
+  .post_padding {
+    padding: 0px;
+  }
+}
+
+.lat_padding {
+  padding: 0px 8px;
+}
+/* @media print, screen and (min-width: 40em) {
+  .lat_padding {
+    padding: 0px 12px;
+  }
+} */
+
+
 .inside_image_top {
  position: absolute;
  top: 12px;
@ -45,6 +93,12 @@ article h1 {
  left: 12px;
 }

+.postintro {
+  /* font-family: 'LibreBaskerville'; */
+  font-size: 14px;
+  color: #999;
+}
+
 /* @media print, screen and (min-width: 40em) {
  .inside_image {
      bottom: 8px;
@ -115,12 +169,10 @@ article {
  }
 }

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

 .imgcontainer {
  position: relative;
@ -182,6 +234,7 @@ article {
 }

 .info {
+  width: 100%;
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  /* margin-bottom: 6px; */
@ -191,31 +244,56 @@ article {
  font-size: 14px;
 }

-header {
-  /* width: 100%; */
-  text-align: center;
+li a {
+    color: red;
 }

-header a {
-  text-decoration: none;
-  color: #fff;
+.inline {
+  display: inline-block;
 }

-header h1 {
-  margin-bottom: 0;
+input[type=text] {
+  padding:5px;
+  border:2px solid #ccc;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
 }

-header {
-  padding: 8px;
-  background-color: #333;
-  color: #fff;
-  /* font-size: 16px; */
+/* input[type=submit] {
+  font-size: 14px;
+  padding:5px 15px;
+  background:#FFD540;
+  border:0 none;
+  cursor:pointer;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+} */
+
+form .primary_button {
+  font-size: 14px;
+  padding:5px 15px;
+  background:#FFD540;
+  border:0 none;
+  cursor:pointer;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
 }

-li a {
-    color: red;
+form .secondary_button {
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
 }

-.inline {
-  display: inline-block;
+.secondary_button {
+  font-size: 14px;
+  padding:5px 15px;
+  background:#e8e8e8;
+  border:0 none;
+  cursor:pointer;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+}
+
+.reply_form {
+  margin-top: 8px;
 }
--- a/news/templates/base.html
+++ b/news/templates/base.html
@ -18,30 +18,35 @@
  </header> -->

 <div class="grid-x">
+   <!-- <div class="cell large-2 header">
+
+   </div> -->
+   <div class="cell large-8 large-offset-2 content">
+
     <!-- Header -->
-   <div class="cell large-2 header">
-     <h1><a href="{% url 'news:index' %}">poker<br/>rumble</a></h1>
-     <span>hardcore news</span>
+    <header>
+     <h1><a href="{% url 'news:index' %}">poker rumble</a></h1>
+     <h2>REAL NEWS</h2>

-     <p>
-       <br/>
+     <nav>
       {% if user.is_authenticated %}
-       <a href="{% url 'news:account' %}">[ {{ user.username }} ]</a>
-       <br/>
+       <a href="{% url 'news:account' %}">{{ user.username }}</a> |
+       <!-- <br/> -->
       {% if user.is_staff %}
-       <a href="{% url 'news:submission' %}">Submit</a>
-       <br/>
+       <a href="{% url 'news:submission' %}">Submit</a> |
+       <!-- <br/> -->
       {% endif %}
       <a href="{% url 'news:logout_view' %}">Log out</a>
       {% else %}
       <a href="{% url 'news:signin' %}">Log in</a>
-       <br/>
+       <!-- <br/> -->
       <a href="{% url 'news:register' %}">Create account</a>
       {% endif %}
-     </p>
-   </div>
+     </nav>
+
+   </header>
+
     <!-- Body -->
-   <div class="cell large-8 content">
     {% block content %}{% endblock %}
   </div>
 </div>
--- a/news/templates/news/index.html
+++ b/news/templates/news/index.html
@ -16,7 +16,9 @@

      <article>

+        <div class="postintro lat_padding">
          {{ post.date }} - {{ post.author.username }}
+        </div>
        <div class="imgcontainer">
          <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
          <div class="inside_image_top">
@ -31,7 +33,7 @@
          <div class="inside_image_bottom">

            <div class="info">
-               <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comments{% else %}write comment{% endif %}</a>
+               <a href="{% url 'news:post' post.id %}">{% if post.comment_set.count > 0 %}{{ post.comment_set.count }} comment{% if post.comment_set.count > 1 %}s{% endif %}{% else %}write comment{% endif %}</a>
            </div>
            <!-- Some comments -->
            <div class="comments">
--- a/news/templates/news/post.html
+++ b/news/templates/news/post.html
@ -6,17 +6,21 @@

 {% block content %}

+<div class="post_padding">
+  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
+  <div class="postintro">
+    {{ post.date }} - {{ post.author.username }}
+  </div>
+</div>
+
 <img src="{% static 'media/' %}{{ post.image_url }}"/>

-<div class="padding">
+<div class="post_padding">

-  <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">
@ -25,7 +29,7 @@
    <p>
      <textarea name="body" rows="8" cols="80"></textarea>
    </p>
-    <input type="submit" value="Submit">
+    <button class="primary_button" type="submit">Submit</button>
  </form>

  <script type="text/javascript">
@ -40,46 +44,46 @@
  </script>

  <br/>
+
+  <!-- Comments -->
  {% for comment in comments %}
-    <p>
    {% for n in comment.level %}<ul>{% endfor %}

      <span class="info">{{ comment.author.username }} - {{ comment.date }} - score = {{ comment.score }}</span>
      <br/>
      {{ comment.body }}

-      <p>
+      <div>
        {% if comment.upvoted == False %}
        <form action="{% url 'news:upvote' comment.id %}" method="post" class="inline">
          {% csrf_token %}
-          <input type="submit" value="+1">
+          <button class="primary_button" type="submit">+1</button>
        </form>
        {% endif %}

        {% if comment.is_deletable %}
        <form action="{% url 'news:delete_comment' comment.id %}" method="post" class="inline">
          {% csrf_token %}
-          <input type="submit" value="delete">
+          <button class="secondary_button" type="submit">delete</button>
        </form>
        {% endif %}

-        <button onclick="myFunction('div_{{ comment.id }}')" class="inline">reply</button>
+        <button class="secondary_button inline" onclick="myFunction('div_{{ comment.id }}')">reply</button>

-        <div id="div_{{ comment.id }}" class="inline" style="display:none">
+        <div id="div_{{ comment.id }}" class="inline reply_form" style="display:none">
          <form action="{% url 'news:comment_with_parent' post.id comment.id %}" method="post">
            {% csrf_token %}
-            <textarea name="body" rows="8" cols="80"></textarea>
-            <input type="submit" value="Submit">
+            <textarea name="body" rows="3" cols="22"></textarea>
+            <button class="primary_button" type="submit">Submit</button>
          </form>
        </div>

-      </p>
+      </div>

    {% for n in comment.level %}</ul>{% endfor %}
-  </p>
-
-</div>

 {% endfor %}

+</div>
+
 {% endblock content %}