Modification of post cards, font, alignment

oelgazzar · Jun 9, 2018 · 281a773 · 281a773
1 parent 2089a58
commit 281a773
Show file tree

Hide file tree

Showing 9 changed files with 49 additions and 9 deletions.
diff --git a/__pycache__/blog.cpython-36.pyc b/__pycache__/blog.cpython-36.pyc
diff --git a/app/__pycache__/models.cpython-36.pyc b/app/__pycache__/models.cpython-36.pyc
diff --git a/app/models.py b/app/models.py
@@ -9,7 +9,7 @@ class Post(db.Model):
  pub_date = db.Column(db.DateTime, nullable=False, default=datetime.utcnow)
 
  def date(self):
- return self.pub_date.strftime('%d %B - %H:%M:%S (UTC)')
+ return self.pub_date.strftime('%d %B - %H:%M')
 
  def __repr__(self):
  return '<Post %r>' % self.title

diff --git a/app/static/css/style.css b/app/static/css/style.css
@@ -1,3 +1,7 @@
+body {
+ font-family: Cairo, sans-serif;
+}
+
 footer .container {
  margin-top: 100px;
 }
@@ -16,3 +20,20 @@ footer .container {
 .login li {
  color: red;
 }
+
+.title, .date, .body , textarea{
+ text-align: right;
+ direction: rtl;
+ font-family: inherit;
+}
+
+.date {
+ font-size: .7em;
+ direction: ltr;
+}
+
+pre {
+ font-family: inherit;
+ white-space: pre-wrap;
+}
+
diff --git a/app/templates/base.html b/app/templates/base.html
@@ -1,8 +1,9 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ar">
 <head>
  {% block head %}
  <title>{% block title %}{% endblock %}</title>
+ <link href="https://fonts.googleapis.com/css?family=Cairo" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">

diff --git a/app/templates/detail.html b/app/templates/detail.html
@@ -2,9 +2,9 @@
 
 {% block title %}{{ post.title }}{% endblock %}
 {% block content %}
- <a href="{{ url_for('index')}}" class="waves-effect waves-light right">All posts<i class="material-icons right">chevron_right</i></a>
- <h1>{{ post.title }}</h1>
- <h4>{{ post.date() }}</h4>
- <p>{{ post.body }}</p>
- <a href="{{ url_for('edit', post_id=post.id) }}" class="waves-effect waves-light btn">Edit</a>
+ <a href="{{ url_for('index')}}" class="waves-effect waves-light left">All posts<i class="material-icons left">chevron_left</i></a>
+ <h1 class="title">{{ post.title }}</h1>
+ <p class="date">{{ post.date() }}</p>
+ <p><pre class="body">{{ post.body }}</pre></p>
+ <a href="{{ url_for('edit', post_id=post.id) }}" class="waves-effect waves-light btn right">Edit</a>
 {% endblock %}
diff --git a/app/templates/index.html b/app/templates/index.html
@@ -4,11 +4,29 @@
 {% block content %}
  <a href="{{ url_for('new') }}" class="waves-effect waves-light btn">New Post</a>
  {% if posts %}
+ <div class="row">
+ {% for post in posts %}
+ <div class="col s12 m6">
+ <div class="card blue-grey darken-1">
+ <div class="card-content white-text">
+ <span class="card-title title">{{ post.title }}</span>
+ <p class="date">{{ post.date() }}</p>
+ <p class="truncate body">{{ post.body }}</p>
+ </div>
+ <div class="card-action">
+ <a href="{{ url_for('detail', post_id=post.id) }}">Read</a>
+ </div>
+ </div>
+ </div>
+ {% endfor %}
+ </div>
+<!--
  <div class="collection">
  {% for post in posts %}
  <a href="{{ url_for('detail', post_id=post.id) }}" class="collection-item">{{ post.title }}<span class="right">{{ post.date() }}</span></a>
  {% endfor %}
  </div>
+-->
  {% else %}
  <h3>No posts.</h3>
  {% endif %}

diff --git a/app/templates/new.html b/app/templates/new.html
@@ -5,13 +5,13 @@
  <form method="POST">
  <div class="row">
  <div class="input-field col s4">
- <input id="title" type="text" name="title" value="{% block post_title%}{% endblock %}">
+ <input id="title" type="text" name="title" value="{% block post_title%}{% endblock %}" class="title">
  <label for="title">Title</label>
  </div>
  </div>
  <div class="row">
  <div class="input-field col s12">
- <textarea id="body" name="body" class="materialize-textarea">{% block post_body%}{% endblock %}</textarea>
+ <textarea id="body" name="body" class="materialize-textarea body">{% block post_body%}{% endblock %}</textarea>
  <label for="body">Body</label>
  </div>
  </div>

diff --git a/blog.db b/blog.db