Many layout improvements

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):

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 {
+li a {
-  /* width: 100%; */
+    color: red;
-  text-align: center;
 }
 
-header a {
+.inline {
-  text-decoration: none;
+  display: inline-block;
-  color: #fff;
 }
 
-header h1 {
+input[type=text] {
-  margin-bottom: 0;
+  padding:5px;
+  border:2px solid #ccc;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
 }
 
-header {
+/* input[type=submit] {
-  padding: 8px;
+  font-size: 14px;
-  background-color: #333;
+  padding:5px 15px;
-  color: #fff;
+  background:#FFD540;
-  /* font-size: 16px; */
+  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 {
+form .secondary_button {
-    color: red;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
 }
 
-.inline {
+.secondary_button {
-  display: inline-block;
+  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;
 }

news/templates/base.html

@@ -18,30 +18,35 @@
   </header> -->
 
  <div class="grid-x">
-   <!-- Header -->
+   <!-- <div class="cell large-2 header">
-   <div class="cell large-2 header">
-     <h1><a href="{% url 'news:index' %}">poker<br/>rumble</a></h1>
-     <span>hardcore news</span>
 
-     <p>
+   </div> -->
-       <br/>
+   <div class="cell large-8 large-offset-2 content">
+
+     <!-- Header -->
+    <header>
+     <h1><a href="{% url 'news:index' %}">poker rumble</a></h1>
+     <h2>REAL NEWS</h2>
+
+     <nav>
        {% if user.is_authenticated %}
-       <a href="{% url 'news:account' %}">[ {{ user.username }} ]</a>
+       <a href="{% url 'news:account' %}">{{ user.username }}</a> |
-       <br/>
+       <!-- <br/> -->
        {% if user.is_staff %}
-       <a href="{% url 'news:submission' %}">Submit</a>
+       <a href="{% url 'news:submission' %}">Submit</a> |
-       <br/>
+       <!-- <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>
+     </nav>
-   </div>
+
-   <!-- Body -->
+   </header>
-   <div class="cell large-8 content">
+
+     <!-- Body -->
      {% block content %}{% endblock %}
    </div>
  </div>

news/templates/news/index.html

@@ -16,7 +16,9 @@
 
       <article>
 
-        {{ post.date }} - {{ post.author.username }}
+        <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">

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>
+            <textarea name="body" rows="3" cols="22"></textarea>
-            <input type="submit" value="Submit">
+            <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 %}