Improve statement details page

Fix #29

nummi/main/static/main/css/main.css

@@ -423,13 +423,14 @@ ul.statements {
 }
 
 .statement-details {
-  overflow-x: auto;
   display: grid;
-  grid-template-columns: repeat(4, min-content);
+  @media (width > 720px) {
+    grid-template-columns: repeat(3, min-content);
+  }
   gap: var(--gap);
   align-items: center;
 
-  > span:nth-child(2) {
+  > span.evolution {
     display: grid;
     grid-auto-rows: min-content;
     > span[class^="ri-"] {
@@ -439,12 +440,49 @@ ul.statements {
       text-align: right;
     }
   }
-  > span:first-child,
-  > span:nth-child(3) {
+  > span.start,
+  > span.end,
+  > span.file,
+  > span.incons {
     display: grid;
     border: var(--gray) 1px solid;
     padding: var(--gap);
 
+    &.file,
+    &.incons {
+      grid-column: 1 / -1;
+    }
+    &.incons {
+      border-color: var(--red);
+      grid-template-columns: min-content 1fr;
+      grid-auto-flow: column;
+      align-items: center;
+      gap: 0.5rem;
+
+      > .ds {
+        display: grid;
+        grid-auto-rows: min-content;
+      }
+      .value {
+        text-align: right;
+      }
+      .diff {
+        font-weight: 650;
+      }
+      .sum {
+        text-decoration: line-through;
+      }
+      .links {
+        grid-column: 1 / -1;
+        grid-row: 2;
+        display: grid;
+        gap: inherit;
+        a {
+          color: var(--red);
+        }
+      }
+    }
+
     > .date {
       text-align: right;
     }

nummi/statement/templates/statement/statement_detail.html

@@ -19,22 +19,39 @@
     <a href="{% url "edit_statement" statement.id %}">{{ "file-edit"|remix }}{% translate "Edit statement" %}</a>
   </p>
   <div class="statement-details">
-    <span>
+    {% if statement.sum != statement.diff %}
+      <span class="incons">
+        {{ statement.sum|check:statement.diff }}
+        <span class="ds">
+          <span class="diff value">{{ statement.diff|pmvalue }}</span>
+          <span class="sum value">{{ statement.sum|pmvalue }}</span>
+        </span>
+        <span class="links">
+          <a class="edit" href="{% url "edit_statement" statement.id %}">{{ "file-edit"|remix }}{% translate "Edit statement" %}</a>
+          <a href="{% url "new_transaction" statement=statement.id %}">{{ "add-circle"|remix }}{% translate "Add transaction" %}</a>
+        </span>
+      </span>
+    {% endif %}
+    {% if statement.file %}
+      <span class="file">
+        <a class="title" href="{{ statement.file.url }}">{{ "file"|remix }}{{ statement }} [{{ statement.file|extension }}]</a>
+      </span>
+    {% endif %}
+    <span class="start">
       <span class="date">{{ statement.start_date|date:"Y-m-d" }}</span>
       <span class="value">{{ statement.start_value|value }}</span>
     </span>
-    <span>
+    <span class="evolution">
       <span class="value">{{ statement.sum|pmvalue }}</span>
-      {{ "arrow-right"|remix }}
+      {{ "funds"|remix }}
       {% if statement.diff != statement.sum %}
         <span class="value">{{ statement.diff|pmvalue }}</span>
       {% endif %}
     </span>
-    <span>
+    <span class="end">
       <span class="date">{{ statement.date|date:"Y-m-d" }}</span>
       <span class="value">{{ statement.value|value }}</span>
     </span>
-    {{ statement.sum|check:statement.diff }}
   </div>
   <section>
     <h3>{% translate "Transactions" %}</h3>