Layout update

news/choices.py

@@ -1,4 +1,5 @@
 STYLE_CHOICES = (
     (0, "Standard"),
-    (1, "Quote")
+    (1, "Quote"),
+    (2, "Image Only")
 )

news/static/news/css/app.css

@@ -14,6 +14,44 @@ body {
   padding: 0px;
 }
 
+article h1 {
+  font-family: 'LibreBaskervilleBold';
+  font-size: 18px;
+}
+@media print, screen and (min-width: 40em) {
+  article h1 {
+    font-size: 28px;
+  }
+}
+
+.padding {
+  padding: 8px;
+}
+@media print, screen and (min-width: 40em) {
+  .padding {
+    padding: 12px;
+  }
+}
+
+.inside_image_top {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+}
+
+.inside_image_bottom {
+  position: absolute;
+  bottom: 12px;
+  left: 12px;
+}
+
+/* @media print, screen and (min-width: 40em) {
+  .inside_image {
+      bottom: 8px;
+      top: auto;
+    }
+} */
+
 .postcontainer {
 
 }
@@ -33,11 +71,6 @@ body {
   /* background-color: #aaa; */
 }
 
-.imgcontainer {
-  position: relative;
-  color: white;
-}
-
 /* @media print, screen and (min-width: 40em) {
   .imgcontainer {
     position: relative;
@@ -45,15 +78,13 @@ body {
   }
 } */
 
-.crop {
+/* .crop {
   width: 1000px;
-    /* width: 1000px; */
     height: 200px;
     overflow: hidden;
-    border-radius: 0px;/*0px 20px 20px 0px;*/
-}
+} */
 
-@media print, screen and (min-width: 40em) {
+/* @media print, screen and (min-width: 40em) {
  .crop {
    border-radius: 20px;
  }
@@ -63,7 +94,7 @@ body {
     width: 1000px;
     height: 200px;
     margin: -100px 0 0 -200px;
-}
+} */
 
 .header h1 {
   font-size: 36px;
@@ -78,7 +109,6 @@ body {
 article {
   margin-bottom: 20px;
 }
-
 @media print, screen and (min-width: 40em) {
   article {
     padding: 16px;
@@ -92,26 +122,31 @@ article {
   padding: 0px;
 } */
 
+.imgcontainer {
+  position: relative;
+  color: white;
+}
+@media print, screen and (min-width: 40em) {
+  .imgcontainer {
+    width: 500px;
+  }
+}
+
 .imgcontainer a {
-  color: #fff;
+  color: #FFD540;
 }
 
 .imgcontainer a:hover {
-  color: #aaa;
+  color: #ccc;
 }
 
-/* .content {
-  padding: 12px 12px 0px 12px;
+.content {
+  /* background-color: #eee; */
 }
 
-.content p {
-  font-family: 'LibreBaskerville';
-} */
-
 .body {
   padding: 0px 12px;
 }
-
 .body p {
   font-family: 'LibreBaskerville';
 }
@@ -133,21 +168,6 @@ article {
   }
 } */
 
-article h1 {
-  font-family: 'LibreBaskervilleBold';
-  font-size: 18px;
-  position: absolute;
-  top: 12px;
-  left: 12px;
-}
-@media print, screen and (min-width: 40em) {
-  article h1 {
-      font-size: 28px;
-      width: 24em;
-      bottom: 8px;
-      top: auto;
-    }
-}
 
 .padded {
   padding: 8px;
@@ -155,7 +175,7 @@ article h1 {
 
 .comments {
   font-size: 14px;
-  color: #666;
+  color: #ccc;
   /* padding: 0px 10px; */
   /* background-color: #efe; */
   /* border-radius: 16px; */

news/templates/news/index.html

@@ -16,21 +16,22 @@
 
       <article>
 
+        {{ post.date }} - {{ post.author.username }}
         <div class="imgcontainer">
-           <a href="{{ post.url }}">
           <img class="crop" src="{% static 'media/' %}{{ post.image_url }}"/>
-           <div>
+          <div class="inside_image_top">
+            {% if post.url %}<a href="{{ post.url }}">{% endif %}
               <h1>{{ post.title }}</h1>
-           </div>
-           </a>
-        </div>
-
-        <div class="body">
+            {% if post.url %}</a>{% endif %}
             <p>
               {{ post.body }}
             </p>
+          </div>
+
+          <div class="inside_image_bottom">
+
             <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>
+               <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">
@@ -39,38 +40,13 @@
               {% endfor %}
             </div>
           </div>
-      </article>
 
-
-          <!-- <div class="grid-x post">
-              <div class="cell large-2 large-offset-2 info">
-                <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">
-                    <img src="{% static 'media/' %}{{ post.image_url }}"/>
-                    <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
-                    {{ post.body }}
-                  </div>
-                  <div class="cell large-4 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>
-              </div>
-          </div> -->
+       </article>
 
-      {% else %}
+       <!-- Quote -->
+      {% elif post.style == 1 %}
 
 <div class="post">
   <div class="grid-x">
@@ -97,6 +73,28 @@
 
 </div>
 
+      <!-- Picture no title no link -->
+      {% elif post.style == 2 %}
+
+            <article>
+
+              {{ post.date }} - {{ post.author.username }}
+              <div class="imgcontainer">
+                <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>
+
+             </article>
+
       {% endif %}
 
 <!-- </div> -->

news/templates/news/post.html

@@ -8,25 +8,27 @@
 
 <img src="{% static 'media/' %}{{ post.image_url }}"/>
 
-<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
-<p class="contentbody">
+<div class="padding">
+
+  <h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
+  <p class="contentbody">
     {{ post.body }}
-</p>
-<div class="info">
+  </p>
+  <div class="info">
     {{ post.date }} - {{ post.author.username }}
-</div>
-<br/>
+  </div>
+  <br/>
 
-<form action="{% url 'news:comment' post.id %}" method="post">
+  <form action="{% url 'news:comment' post.id %}" method="post">
     {% csrf_token %}
     <p>Add comment</p>
     <p>
       <textarea name="body" rows="8" cols="80"></textarea>
     </p>
     <input type="submit" value="Submit">
-</form>
+  </form>
 
-<script type="text/javascript">
+  <script type="text/javascript">
     function myFunction(divID) {
     var x = document.getElementById(divID);
     if (x.style.display === "none") {
@@ -34,12 +36,11 @@
     } else {
       x.style.display = "none";
     }
-}
-</script>
+  }
+  </script>
 
-<br/>
-<p>----Comments----</p>
-{% for comment in comments %}
+  <br/>
+  {% for comment in comments %}
     <p>
     {% for n in comment.level %}<ul>{% endfor %}
 
@@ -75,7 +76,9 @@
       </p>
 
     {% for n in comment.level %}</ul>{% endfor %}
-</p>
+  </p>
+
+</div>
 
 {% endfor %}