Merge branch 'warmfix-article' into 'staging'

Warmfix article

See merge request !124

backend/main/models.py

@@ -93,6 +93,8 @@ class Profile(models.Model):
 
     @property
     def age(self):
+        if self.birthdate is None:
+            return 0
         born = self.birthdate
         today = date.today()
         return today.year - born.year - ((today.month, today.day) < (born.month, born.day))

frontend/src/pages/article.css

@@ -10,7 +10,6 @@
 .article .column div {
   position: relative;
   float: left;
-  width: 300px;
   margin: 0 0 0 25px;
   padding: 0;
 }
@@ -21,7 +20,6 @@
   position: relative;
   left: 0;
   display: block;
-  width: 300px;
   margin-top: 10px;
   padding: 0;
   color: var(--red);
@@ -33,7 +31,8 @@
   opacity: 0.3;
 }
 .article figure {
-  width: 300px;
+  max-width: 100%;
+  height: auto;
   margin: 0;
   padding: 0;
   border-radius: 0.25rem;
@@ -51,5 +50,20 @@
 
 #one-article-title {
   text-align: center;
-  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.three-articles-span {
+  display: block;
+  text-align: center;
+  word-wrap: break-word;
+}
+
+a:hover {
+  text-decoration: none;
+  font-weight: bold;
+}
+a:focus {
+  text-decoration: none;
+  font-weight: bold;
 }

frontend/src/pages/article.js

@@ -78,8 +78,8 @@ const Content = props => {
               ) : (
                 dataList.data.results.slice(0, 3).map(newArticle => (
                   <Link to={"/article/" + newArticle.id} key={newArticle.id}>
-                    <Row className="my-3">
-                      <div className="column">
+                    <Row className="my-3 d-flex flex-column align-items-center">
+                      <div className="col-sm-12">
                         <div>
                           <figure>
                             <img
@@ -88,7 +88,9 @@ const Content = props => {
                               className="img-fluid rounded mx-auto d-block"
                             />
                           </figure>
-                          <span>{newArticle.title}</span>
+                          <span className="three-articles-span">
+                            {newArticle.title}
+                          </span>
                         </div>
                       </div>
                     </Row>