Add styles for project view

src/static/style/style.css

@@ -101,7 +101,43 @@ main {
 }
 
 .artifact-item .artifact-contents {
-    @apply p-4;
+    @apply p-4 hidden;
+}
+
+.artifact-item .artifact-contents.contents-visible {
+    @apply block;
+}
+
+.artifact-details {
+    @apply flex items-center bg-gray-300 select-none;
+}
+
+.artifact-details .icon-downup {
+    @apply ml-auto mr-2 text-gray-500;
+}
+
+.artifact-details:hover {
+    @apply cursor-pointer bg-gray-200;
+}
+
+.artifact-details .artifact-id {
+    @apply p-4 bg-blue-500 font-bold text-white text-lg;
+}
+
+.artifact-details:hover .artifact-id {
+    @apply bg-blue-400;
+}
+
+.artifact-details .hash-button {
+    @apply mx-4 py-1 px-3 border-blue-600 rounded border font-mono text-blue-600;
+}
+
+.artifact-details .hash-button:hover {
+    @apply bg-blue-600 text-white;
+}
+
+.artifact-details .build-date-text {
+    @apply text-gray-600 text-lg;
 }
 
 @tailwind utilities;

src/static/style/style.min.css

@@ -2611,7 +2611,82 @@ main {
 }
 
 .artifact-item .artifact-contents {
+  display: none;
+  padding: 1rem;
+}
+
+.artifact-item .artifact-contents.contents-visible {
+  display: block;
+}
+
+.artifact-details {
+  --tw-bg-opacity: 1;
+  background-color: rgba(209, 213, 219, var(--tw-bg-opacity));
+  display: flex;
+  align-items: center;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.artifact-details .icon-downup {
+  margin-right: 0.5rem;
+  margin-left: auto;
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.artifact-details:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+  cursor: pointer;
+}
+
+.artifact-details .artifact-id {
+  --tw-bg-opacity: 1;
+  background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
   padding: 1rem;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.artifact-details:hover .artifact-id {
+  --tw-bg-opacity: 1;
+  background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
+}
+
+.artifact-details .hash-button {
+  --tw-border-opacity: 1;
+  border-color: rgba(37, 99, 235, var(--tw-border-opacity));
+  border-radius: 0.25rem;
+  border-width: 1px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  margin-left: 1rem;
+  margin-right: 1rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgba(37, 99, 235, var(--tw-text-opacity));
+}
+
+.artifact-details .hash-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.artifact-details .build-date-text {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  --tw-text-opacity: 1;
+  color: rgba(75, 85, 99, var(--tw-text-opacity));
 }
 
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {

src/templates/project_view.html

@@ -1,8 +1,7 @@
 {% extends "base.html" %}
 
 {%block head%}
-<link rel="stylesheet" href="{{ url_for('static', filename='style/fontello/css/fontello.css') }}"" />
-</script>
+<link rel="stylesheet" href="{{ url_for('static', filename='style/fontello.css') }}">
 {%endblock%}
 
 {%block title%}{{selected_project.info.name}}{%endblock%}
@@ -30,15 +29,13 @@
         {%-if artifact.hash%}
         <a class="hash-button" href="{{selected_project.info.commit_url}}/{{artifact.hash}}">{{artifact.hash[:8]}}</a>
         {%-endif%}
-        <span>Build date: <span class="build-date">{{artifact.date}}</span></span>
-        <span class="icon-down-open"></span>
+        <span class="build-date-text">Build date: <span class="build-date">{{artifact.date}}</span></span>
+        <span class="icon-downup icon-down-open"></span>
     </div>
     <div class="artifact-contents content">
         <h2>Downloads</h2>
 
         <div class="artifacts-list">
-            <span class="artifacts-head">Artifact</span>
-            <span class="artifacts-desc">Description</span>
             {%-for download_item in artifact.artifacts%}
             <a class="artifact-link"
                             href="{{ url_for('download_item', project_id=selected_project.id, artifact_id=artifact.id, download_item=download_item.file)}}">{{download_item.file}}</a>
@@ -48,7 +45,7 @@
         </div>
         {%- if artifact.changelog %}
         <h2>Changelog</h2>
-        <p>
+        <p class="changelog">
             {{artifact.changelog|safe}}
         </p>
         {%- endif %}
@@ -69,16 +66,23 @@
         for (let artifact of artifacts) {
             let contents = artifact.querySelector(".artifact-contents");
             let details = artifact.querySelector(".artifact-details");
+            let icon = details.querySelector(".icon-downup");
             if (!contents || !(contents instanceof HTMLElement))
                 continue;
             details.addEventListener("click", e => {
                 if(e.target instanceof HTMLElement && e.target.nodeName.toUpperCase() == "A")
                     return;
                 e.preventDefault();
-                if (contents.classList.contains("contents-visible"))
+                if (contents.classList.contains("contents-visible")) {
                     contents.classList.remove("contents-visible");
-                else
+                    icon.classList.remove("icon-up-open");
+                    icon.classList.add("icon-down-open");
+                }
+                else {
                     contents.classList.add("contents-visible");
+                    icon.classList.remove("icon-down-open");
+                    icon.classList.add("icon-up-open");
+                }
             });
         }
     }