programs: a reasonable start for the program page (#93)

app/models/program.py

@@ -24,7 +24,7 @@ class Program(Post):
     # Event for which the program was posted
     event = db.Column(db.Integer, db.ForeignKey('event.id'), nullable=True)
 
-    # TODO: Number of views and downloads
+    # TODO: Number of downloads
 
     # Thread with the program description (top comment) and comments
     thread_id = db.Column(db.Integer,db.ForeignKey('thread.id'),nullable=False)

app/static/css/form.css

@@ -84,12 +84,6 @@
 .form progress.entropy.high::-webkit-progress-bar {
   background: var(--ok);
 }
-.form hr {
-  height: 3px;
-  border: var(--hr-border);
-  border-width: 1px 0;
-  margin: 24px 0;
-}
 .form .msgerror {
   color: var(--error);
   font-weight: 400;

app/static/css/global.css

@@ -48,6 +48,12 @@ a:focus {
 img.pixelated {
   image-rendering: pixelated;
 }
+hr {
+  height: 3px;
+  border: var(--hr-border);
+  border-width: 1px 0;
+  margin: 24px 0;
+}
 section p {
   line-height: 20px;
   word-wrap: anywhere;

app/static/css/programs.css

@@ -0,0 +1,22 @@
+#program-banner {
+  background: navy;
+  height: 144px;
+  margin: 0 0 32px 0;
+}
+section .program-infos {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+section .program-infos span.progrank {
+  border-width: 0 0 1px 0;
+  border-color: var(--color);
+  border-style: dotted;
+}
+section .program-infos > div {
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+section .program-infos div.program-tags {
+  flex-shrink: 1;
+}

app/static/less/form.less

@@ -95,13 +95,6 @@
         }
     }
 
-    hr {
-        height: 3px;
-        border: var(--hr-border);
-        border-width: 1px 0;
-        margin: 24px 0;
-    }
-
     .msgerror {
         color: var(--error);
         font-weight: 400;

app/static/less/global.less

@@ -44,6 +44,13 @@ img.pixelated {
     image-rendering: pixelated;
 }
 
+hr {
+    height: 3px;
+    border: var(--hr-border);
+    border-width: 1px 0;
+    margin: 24px 0;
+}
+
 section {
     p {
         line-height: 20px;

app/static/less/programs.less

@@ -0,0 +1,26 @@
+#program-banner {
+    background: navy; /* debugging */
+    height: 144px;
+    margin: 0 0 32px 0;
+}
+
+section .program-infos {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+
+    span.progrank {
+        border-width: 0 0 1px 0;
+        border-color: var(--color); /* use text color */
+        border-style: dotted;
+    }
+
+    & > div {
+        flex-shrink: 0;
+        margin: 0 8px;
+    }
+
+    div.program-tags {
+        flex-shrink: 1;
+    }
+}

app/templates/programs/program.html

@@ -11,19 +11,44 @@
 {% endblock %}
 
 {% block content %}
+<div id="program-banner">
+</div>
+
 <section>
     {% if p.thread.top_comment %}
         {% call widget_thread.thread_leader(p.thread.top_comment) %}
             <div class="info">
-                <div>Posté le {{ p.date_created | dyndate }}</div>
                 {{ widget_thread.post_actions(p) }}
             </div>
             <h1>{{ p.name }}</h1>
 
-            Infos infos infos
-
+            <div class="program-infos">
+                <div>
+                    <b>Posté :</b> {{ p.date_created | dyndate }}<br>
+                    <b>Modifié :</b> {{ p.date_modified | dyndate }}<br>
+                    <b>Version :</b> {{ p.version or "(non spécifié)" }}<br>
+                    <b>Taille :</b> {{ p.size or "(non spécifié)" }}
+                </div>
+                <div>
+                    Score au progrank: <span class="progrank" title="Dernière mise à jour : {{ p.progrank_date | dyndate }}">{{ p.progrank }}</span><br>
+                    Tests : TODO (si si ça vient)<br>
+                    [Lien pour soumettre un test]<br>
+                    [Lien pour proposer au label]<br>
+                    Total de téléchargements : TODO
+                </div>
+                <div class="program-tags">
+                    {%- for tag in p.tags %}
+                        <span class="tag tag-{{ tag.tag.category() }}">{{ tag.tag.pretty }}</span>
+                    {% endfor -%}
+                </div>
+            </div>
             <hr>
 
+            {% if p.event %}
+                Ce programme a participé à l'événement <b>{{ p.event.name }}</b>!
+                <hr>
+            {% endif %}
+
             {{ p.thread.top_comment.text | md }}
             {{ widget_attachments.attachments(p.thread.top_comment) }}
         {% endcall %}

app/utils/render.py

@@ -19,6 +19,7 @@ def render(*args, styles=[], scripts=[], **kwargs):
         'css/simplemde.min.css',
         'css/simplemde-override.css',
         'css/debugger.css',
+        'css/programs.css',
     ]
     scripts_ = [
         'scripts/trigger_menu.js',