Major style change to dark

news/forms.py

@@ -8,12 +8,14 @@ from datetime import datetime, date, time, timedelta
 # from datetime import datetime
 
 class PostForm(forms.Form):
-    url = forms.CharField(label='URL', max_length=200)
-    title = forms.CharField(label='Title', max_length=200)
+    style = forms.ChoiceField(label='Style',choices=STYLE_CHOICES, required=True)
+
+    title = forms.CharField(label='Title', max_length=200, required=False)
     body = forms.CharField(label='Optional text', max_length=10000, required=False)
+
+    url = forms.CharField(label='URL', max_length=200, required=False)
     # date = forms.DateTimeField('date published')
     # state = forms.IntegerField(label='State', default=1)
-    style = forms.ChoiceField(label='Style',choices=STYLE_CHOICES, required=True)
 
     today = datetime.today() # + datetime.timedelta(days=1)
     today_formatted = today.strftime("%Y-%m-%d %H:%M:%S")

news/models.py

@@ -23,7 +23,7 @@ class Post(models.Model):
         return self.title
 
     def top_comments(self):
-        return self.comment_set.all()[:3]
+        return self.comment_set.order_by('-voters').all()[:1]
 
     def flat_comments(self, user):
         flat = []
@@ -46,6 +46,9 @@ class Comment(models.Model):
     def __str__(self):
         return self.body
 
+    def voters_count(self):
+        return voters.count
+
     def upvoted_by(User):
         return user in self.voters
 

news/static/news/css/app.css

@@ -7,27 +7,38 @@
     src: url("../LibreBaskerville-Bold.otf") format("opentype");
 }
 
+:root {
+  --main-bg-color: #FFD540;
+}
+
+a {
+  color: var(--main-bg-color);
+}
+a:hover {
+  color: #ddd;
+}
+
 body {
-	background-color: #333;
+  color: #eee;
+  background-color: #222;
 	font-size:18px;
   margin: 0px;
   padding: 0px;
 }
 
 header {
-  /* width: 100%; */
+  margin-bottom: 20px;
   margin-top: 10px;
   text-align: center;
 }
 
-header a {
+/* header a {
   text-decoration: none;
-  /* color: #fff; */
-}
+} */
 
 header h1 {
   margin-bottom: 0;
-  font-family: 'LibreBaskervilleBold';
+  /* font-family: 'LibreBaskervilleBold'; */
   font-size: 28px;
 }
 
@@ -39,19 +50,27 @@ header h2 {
 
 nav {
   font-size: 14px;
-  margin-bottom: 24px;
 }
 
-.content {
-  background-color: #fff;
+footer {
+  margin-top: 50px;
+}
+
+article {
+  margin-bottom: 20px;
+}
+@media print, screen and (min-width: 40em) {
+  article {
+    padding: 16px;
+  }
 }
 
-article h1 {
+a h1 {
   font-family: 'LibreBaskervilleBold';
   font-size: 18px;
 }
 @media print, screen and (min-width: 40em) {
-  article h1 {
+  a h1 {
     font-size: 28px;
   }
 }
@@ -74,15 +93,18 @@ article h1 {
   }
 }
 
-.lat_padding {
-  padding: 0px 8px;
+/* .post_padding h1 {
+  line-height: 100%;
 }
-/* @media print, screen and (min-width: 40em) {
-  .lat_padding {
-    padding: 0px 12px;
+@media print, screen and (min-width: 40em) {
+  .post_padding h1 {
+    line-height: 70%;
   }
 } */
 
+.lat_padding {
+  padding: 0px 8px;
+}
 
 .inside_image_top {
   position: absolute;
@@ -97,150 +119,68 @@ article h1 {
 }
 
 .postintro {
-  /* font-family: 'LibreBaskerville'; */
   font-size: 14px;
   color: #999;
 }
 
-/* @media print, screen and (min-width: 40em) {
-  .inside_image {
-      bottom: 8px;
-      top: auto;
-    }
-} */
-
-.postcontainer {
-
-}
-
-.even {
-  background-color: #fff;
-  padding: 20px 0px;
-}
-
-.odd {
-  background-color: #eee;
-  padding: 20px 0px;
+.quote {
+  padding: 20px;
+  background-color: #333;
 }
-
-.header {
-  text-align: center;
-  /* background-color: #aaa; */
-}
-
-/* @media print, screen and (min-width: 40em) {
-  .imgcontainer {
-    position: relative;
-    color: white;
+@media print, screen and (min-width: 40em) {
+  .quote {
+    padding: 30px;
+    border-radius: 20px;
   }
-} */
-
-/* .crop {
-  width: 1000px;
-    height: 200px;
-    overflow: hidden;
-} */
-
-/* @media print, screen and (min-width: 40em) {
- .crop {
-   border-radius: 20px;
- }
 }
 
-.crop img {
-    width: 1000px;
-    height: 200px;
-    margin: -100px 0 0 -200px;
-} */
-
-.header h1 {
-  font-size: 36px;
-  line-height: 90%;
-  margin-top: 20px;
+.quote h1 a {
+  line-height: 70%;
 }
 
-/* .content {
-  padding: 0px;
-} */
-
-article {
-  margin-bottom: 20px;
-}
-@media print, screen and (min-width: 40em) {
-  article {
-    padding: 16px;
-  }
-}
+/* .postcontainer {
 
-.content h1 {
-  font-family: 'LibreBaskervilleBold';
-  font-size: 28px;
-}
+} */
 
 .imgcontainer {
   position: relative;
   color: white;
+  border-bottom: 10px solid #333;
+  border-top: 10px solid #333;
 }
 @media print, screen and (min-width: 40em) {
   .imgcontainer {
     width: 500px;
+    border-bottom: 10px solid #111;
+    border-top: 10px solid #111;
   }
 }
 
-.imgcontainer a {
-  color: #FFD540;
-}
-
-.imgcontainer a:hover {
-  color: #ccc;
-}
-
-.body {
-  padding: 0px 12px;
-}
-.body p {
-  font-family: 'LibreBaskerville';
-}
-
 .post {
   padding: 10px 0px;
   margin-bottom: 10px;
 }
 
-/*
-.bottom-left {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-}
-@media print, screen and (min-width: 32em) {
-  .bottom-left {
-    width: 24em;
-  }
-} */
-
-
 .padded {
   padding: 8px;
 }
 
+.large_padded {
+  padding: 16px;
+}
+
 .comments {
   font-size: 14px;
   color: #ccc;
-  /* padding: 0px 10px; */
-  /* background-color: #efe; */
-  /* border-radius: 16px; */
 }
 
 .info {
   width: 100%;
   font-size: 14px;
-  /* border-bottom: 1px solid #ccc; */
-  /* margin-bottom: 6px; */
 }
 @media print, screen and (min-width: 40em) {
   .info {
-    width: 500px;
+    width: 600px;
   }
 }
 
@@ -248,35 +188,82 @@ article {
   font-size: 14px;
 }
 
-li a {
-    color: red;
-}
-
 .inline {
   display: inline-block;
 }
 
 input[type=text] {
-  padding:5px;
+  padding:0px 5px;
   border:2px solid #ccc;
   -webkit-border-radius: 5px;
   border-radius: 5px;
 }
 
-/* input[type=submit] {
+form textarea {
+  background: #333;
+  color: #fff;
+  padding:0px 5px;
+  border:2px solid #111;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+form textarea:active, form textarea:hover, form textarea:visited {
+  background: #444;
+  color: #fff;
+  padding:0px 5px;
+  border:2px solid #111;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+/* form textarea:hover {
+  background: #444;
+  color: #fff;
+  padding:0px 5px;
+  border:2px solid #111;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+} */
+
+input[type=password] {
+  padding:0px 5px;
+  border:2px solid #ccc;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+input[type=email] {
+  padding:0px 5px;
+  border:2px solid #ccc;
+  -webkit-border-radius: 5px;
+  border-radius: 5px;
+}
+
+input[type=file] {
   font-size: 14px;
-  padding:5px 15px;
-  background:#FFD540;
+  padding:10px 15px;
+  background:#e8e8e8;
   border:0 none;
   cursor:pointer;
   -webkit-border-radius: 8px;
   border-radius: 8px;
-} */
+}
+
+input[type=file]:hover {
+  font-size: 14px;
+  padding:10px 15px;
+  background:#fcf;
+  border:0 none;
+  cursor:pointer;
+  -webkit-border-radius: 8px;
+  border-radius: 8px;
+}
 
 form .primary_button {
   font-size: 14px;
   padding:5px 15px;
-  background:#FFD540;
+  background:var(--main-bg-color);
   border:0 none;
   cursor:pointer;
   -webkit-border-radius: 8px;
@@ -291,7 +278,8 @@ form .secondary_button {
 .secondary_button {
   font-size: 14px;
   padding:5px 15px;
-  background:#e8e8e8;
+  color: #e8e8e8;
+  background:#333;
   border:0 none;
   cursor:pointer;
   -webkit-border-radius: 8px;

news/templates/base.html

@@ -38,7 +38,7 @@
        {% endif %}
        <a href="{% url 'news:logout_view' %}">Log out</a>
        {% else %}
-       <a href="{% url 'news:signin' %}">Log in</a>
+       <a href="{% url 'news:signin' %}">Log in</a> |
        <!-- <br/> -->
        <a href="{% url 'news:register' %}">Create account</a>
        {% endif %}

news/templates/news/index.html

@@ -50,30 +50,24 @@
        <!-- Quote -->
       {% elif post.style == 1 %}
 
-<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 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>
-  </div>
-  <!-- Some comments -->
-  <div class="comments">
-    {% for comment in post.top_comments %}
-      <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
-    {% endfor %}
-  </div>
+      <div class="post">
 
+        <div class="quote">
+          <a href="{{ post.url }}"><h1>{{ post.title }}</h1></a>
+        </div>
 
-</div>
+        <div class="post_padding">
+          <div class="info">
+            <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">
+            {% for comment in post.top_comments %}
+              <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
+            {% endfor %}
+          </div>
+        </div>
+      </div>
 
       <!-- Picture no title no link -->
       {% elif post.style == 2 %}
@@ -82,14 +76,16 @@
           <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
         </div>
 
-        <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>
-        </div>
-        <!-- Some comments -->
-        <div class="comments">
-          {% for comment in post.top_comments %}
-            <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
-          {% endfor %}
+        <div class="post_padding">
+          <div class="info">
+            <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">
+            {% for comment in post.top_comments %}
+              <span>{{ comment.body }} - {{ comment.author.username }}</span><br/>
+            {% endfor %}
+          </div>
         </div>
 
 
@@ -112,7 +108,7 @@
       <li><a href="#0" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
     </ul> -->
 
-    <div class="pagination">
+    <div class="pagination large_padded">
         <span class="step-links">
             {% if latest_post_list.has_previous %}
                 <a href="?page=1">&laquo; first</a>

news/templates/news/post.html

@@ -7,27 +7,40 @@
 {% block content %}
 
 <div class="post_padding">
-  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
+
+  {% if post.style == 1 %}
+  <div class="quote">
+  {% endif %}
+  {% if post.style != 2 %}
+    <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
+  {% endif %}
+  {% if post.style == 1 %}
+  </div>
+  {% endif %}
+
   <div class="postintro">
     {{ post.date }} - {{ post.author.username }}
   </div>
 </div>
 
+{% if post.style != 1 %}
 <img src="{% static 'media/' %}{{ post.image_url }}"/>
+{% endif %}
 
 <div class="post_padding">
 
+{% if post.style == 0 %}
   <p class="contentbody">
     {{ post.body }}
   </p>
-
+{% endif %}
   <br/>
 
   <form action="{% url 'news:comment' post.id %}" method="post">
     {% csrf_token %}
     <p>Add comment</p>
     <p>
-      <textarea name="body" rows="8" cols="80"></textarea>
+      <textarea name="body" rows="3" cols="50"></textarea>
     </p>
     <button class="primary_button" type="submit">Submit</button>
   </form>
@@ -49,7 +62,7 @@
   {% for comment in comments %}
     {% for n in comment.level %}<ul>{% endfor %}
 
-      <span class="info">{{ comment.author.username }} - {{ comment.date }} - score = {{ comment.score }}</span>
+      <span class="info">{{ comment.author.username }} - {{ comment.date }} - score: {{ comment.score }}</span>
       <br/>
       {{ comment.body }}
 
@@ -73,7 +86,7 @@
         <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="3" cols="22"></textarea>
+            <textarea name="body" rows="3" cols="50"></textarea>
             <button class="primary_button" type="submit">Submit</button>
           </form>
         </div>

news/templates/news/submission.html

@@ -18,7 +18,7 @@
 <form action="{% url 'news:submission' %}" method="post" enctype="multipart/form-data">
   {% csrf_token %}
   {{ form }}
-  <input type="submit" value="Submit">
+  <button class="primary_button" type="submit">Submit</button>
 </form>
 
 {% else %}

news/templates/news/user/register.html

@@ -21,10 +21,10 @@
          <form method="post" >
              {% csrf_token %}
              <table>
-                {{ form.as_table }}
+                {{ form.as_p }}
                  <tr>
                     <td></td>
-                    <td><input type="submit" name="submit" value="Register" /></td>
+                    <td><button class="primary_button" type="submit" name="submit">Register</button></td>
                 </tr>
              </table>
          </form>

news/templates/news/user/signin.html

@@ -21,10 +21,10 @@
          <form method="post" >
              {% csrf_token %}
              <table>
-                {{ form.as_table }}
+                {{ form.as_p }}
                  <tr>
                     <td></td>
-                    <td><input type="submit" name="submit" value="Signin" /></td>
+                    <td><button class="primary_button" type="submit" name="submit">Signin</button></td>
                 </tr>
              </table>
          </form>

news/views.py

@@ -103,6 +103,7 @@ def submission(request):
             post.title = form.cleaned_data['title']
             post.body = form.cleaned_data['body']
             post.url = form.cleaned_data['url']
+            post.style = form.cleaned_data['style']
 
             filename = str(uuid.uuid4())
             handle_uploaded_file(filename, request.FILES['image'])