Start work on artifacts page update

src/app.py

@@ -12,7 +12,6 @@ app = Flask(__name__)
 class ArtifactItem(DataClassJsonMixin):
     file: str
     description: str
-    width: int = 0
 
 
 @dataclass
@@ -48,10 +47,6 @@ class Project:
                 with open(info_file_path, "r", encoding="utf-8") as f:
                     artifact = Artifact.from_json(f.read())
                     artifact.date = artifact.date.strip()
-                    maxwidth = max((len(a.file)
-                                    for a in artifact.artifacts), default=0)
-                    for a in artifact.artifacts:
-                        a.width = maxwidth
 
                     result.append(artifact)
             except:

src/static/style/style.css

@@ -65,9 +65,43 @@ aside.menu {
 }
 
 main {
-    @apply p-8;
+    @apply py-8 mx-40;
     grid-area: main;
 }
 
+.content {
+    @apply prose max-w-full;
+}
+
+.content.big {
+    @apply prose-xl;
+}
+
+.artifacts-header {
+    @apply text-4xl font-bold mt-20;
+}
+
+.artifacts-list {
+    display: grid;
+    grid-template-columns: max-content auto;
+    gap: 0.5rem 0.5rem;
+}
+
+.artifacts-list .artifact-link {
+    @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal;
+    height: min-content;
+}
+
+.artifacts-list .artifact-link:hover {
+    @apply bg-blue-700;
+}
+
+.artifact-item {
+    @apply bg-gray-200 my-3;
+}
+
+.artifact-item .artifact-contents {
+    @apply p-4;
+}
 
 @tailwind utilities;

src/static/style/style.min.css

@@ -1979,10 +1979,641 @@ aside.menu {
 }
 
 main {
-  padding: 2rem;
+  margin-left: 10rem;
+  margin-right: 10rem;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
   grid-area: main;
 }
 
+.content {
+  color: #374151;
+  max-width: 65ch;
+}
+
+.content [class~="lead"] {
+  color: #4b5563;
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content a {
+  color: #111827;
+  text-decoration: underline;
+  font-weight: 500;
+}
+
+.content strong {
+  color: #111827;
+  font-weight: 600;
+}
+
+.content ol {
+  counter-reset: list-counter;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.content ol > li {
+  position: relative;
+  counter-increment: list-counter;
+  padding-left: 1.75em;
+}
+
+.content ol > li::before {
+  content: counter(list-counter) ".";
+  position: absolute;
+  font-weight: 400;
+  color: #6b7280;
+  left: 0;
+}
+
+.content ul > li {
+  position: relative;
+  padding-left: 1.75em;
+}
+
+.content ul > li::before {
+  content: "";
+  position: absolute;
+  background-color: #d1d5db;
+  border-radius: 50%;
+  width: 0.375em;
+  height: 0.375em;
+  top: calc(0.875em - 0.1875em);
+  left: 0.25em;
+}
+
+.content hr {
+  border-color: #e5e7eb;
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+
+.content blockquote {
+  font-weight: 500;
+  font-style: italic;
+  color: #111827;
+  border-left-width: 0.25rem;
+  border-left-color: #e5e7eb;
+  quotes: "\201C""\201D""\2018""\2019";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+
+.content blockquote p:first-of-type::before {
+  content: open-quote;
+}
+
+.content blockquote p:last-of-type::after {
+  content: close-quote;
+}
+
+.content h1 {
+  color: #111827;
+  font-weight: 800;
+  font-size: 2.25em;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+
+.content h2 {
+  color: #111827;
+  font-weight: 700;
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3333333;
+}
+
+.content h3 {
+  color: #111827;
+  font-weight: 600;
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.content h4 {
+  color: #111827;
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+
+.content figure figcaption {
+  color: #6b7280;
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+
+.content code {
+  color: #111827;
+  font-weight: 600;
+  font-size: 0.875em;
+}
+
+.content code::before {
+  content: "`";
+}
+
+.content code::after {
+  content: "`";
+}
+
+.content a code {
+  color: #111827;
+}
+
+.content pre {
+  color: #e5e7eb;
+  background-color: #1f2937;
+  overflow-x: auto;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding-top: 0.8571429em;
+  padding-right: 1.1428571em;
+  padding-bottom: 0.8571429em;
+  padding-left: 1.1428571em;
+}
+
+.content pre code {
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: 400;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+
+.content pre code::before {
+  content: "";
+}
+
+.content pre code::after {
+  content: "";
+}
+
+.content table {
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+
+.content thead {
+  color: #111827;
+  font-weight: 600;
+  border-bottom-width: 1px;
+  border-bottom-color: #d1d5db;
+}
+
+.content thead th {
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.content tbody tr {
+  border-bottom-width: 1px;
+  border-bottom-color: #e5e7eb;
+}
+
+.content tbody tr:last-child {
+  border-bottom-width: 0;
+}
+
+.content tbody td {
+  vertical-align: top;
+  padding-top: 0.5714286em;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+
+.content {
+  font-size: 1rem;
+  line-height: 1.75;
+}
+
+.content p {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.content img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content video {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content figure {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.content h2 code {
+  font-size: 0.875em;
+}
+
+.content h3 code {
+  font-size: 0.9em;
+}
+
+.content ul {
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+
+.content li {
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.content > ul > li p {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.content > ul > li > *:first-child {
+  margin-top: 1.25em;
+}
+
+.content > ul > li > *:last-child {
+  margin-bottom: 1.25em;
+}
+
+.content > ol > li > *:first-child {
+  margin-top: 1.25em;
+}
+
+.content > ol > li > *:last-child {
+  margin-bottom: 1.25em;
+}
+
+.content ul ul, .content ul ol, .content ol ul, .content ol ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol {
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+
+.content hr + * {
+  margin-top: 0;
+}
+
+.content h2 + * {
+  margin-top: 0;
+}
+
+.content h3 + * {
+  margin-top: 0;
+}
+
+.content h4 + * {
+  margin-top: 0;
+}
+
+.content thead th:first-child {
+  padding-left: 0;
+}
+
+.content thead th:last-child {
+  padding-right: 0;
+}
+
+.content tbody td:first-child {
+  padding-left: 0;
+}
+
+.content tbody td:last-child {
+  padding-right: 0;
+}
+
+.content > :first-child {
+  margin-top: 0;
+}
+
+.content > :last-child {
+  margin-bottom: 0;
+}
+
+.content {
+  max-width: 100%;
+}
+
+.content.big {
+  font-size: 1.25rem;
+  line-height: 1.8;
+}
+
+.content.big p {
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content.big [class~="lead"] {
+  font-size: 1.2em;
+  line-height: 1.5;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.content.big blockquote {
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1.0666667em;
+}
+
+.content.big h1 {
+  font-size: 2.8em;
+  margin-top: 0;
+  margin-bottom: 0.8571429em;
+  line-height: 1;
+}
+
+.content.big h2 {
+  font-size: 1.8em;
+  margin-top: 1.5555556em;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+
+.content.big h3 {
+  font-size: 1.5em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6666667em;
+  line-height: 1.3333333;
+}
+
+.content.big h4 {
+  margin-top: 1.8em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+
+.content.big img {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content.big video {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content.big figure {
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+
+.content.big figure > * {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+.content.big figure figcaption {
+  font-size: 0.9em;
+  line-height: 1.5555556;
+  margin-top: 1em;
+}
+
+.content.big code {
+  font-size: 0.9em;
+}
+
+.content.big h2 code {
+  font-size: 0.8611111em;
+}
+
+.content.big h3 code {
+  font-size: 0.9em;
+}
+
+.content.big pre {
+  font-size: 0.9em;
+  line-height: 1.7777778;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  border-radius: 0.5rem;
+  padding-top: 1.1111111em;
+  padding-right: 1.3333333em;
+  padding-bottom: 1.1111111em;
+  padding-left: 1.3333333em;
+}
+
+.content.big ol {
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content.big ul {
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+
+.content.big li {
+  margin-top: 0.6em;
+  margin-bottom: 0.6em;
+}
+
+.content.big ol > li {
+  padding-left: 1.8em;
+}
+
+.content.big ol > li::before {
+  left: 0;
+}
+
+.content.big ul > li {
+  padding-left: 1.8em;
+}
+
+.content.big ul > li::before {
+  width: 0.35em;
+  height: 0.35em;
+  top: calc(0.9em - 0.175em);
+  left: 0.25em;
+}
+
+.content.big > ul > li p {
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+}
+
+.content.big > ul > li > *:first-child {
+  margin-top: 1.2em;
+}
+
+.content.big > ul > li > *:last-child {
+  margin-bottom: 1.2em;
+}
+
+.content.big > ol > li > *:first-child {
+  margin-top: 1.2em;
+}
+
+.content.big > ol > li > *:last-child {
+  margin-bottom: 1.2em;
+}
+
+.content.big ul ul, .content.big ul ol, .content.big ol ul, .content.big ol ol {
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+}
+
+.prose-xl ul ul, .prose-xl ul ol, .prose-xl ol ul, .prose-xl ol ol {
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+  margin-top: 0.8em;
+  margin-bottom: 0.8em;
+}
+
+.content.big hr {
+  margin-top: 2.8em;
+  margin-bottom: 2.8em;
+}
+
+.content.big hr + * {
+  margin-top: 0;
+}
+
+.content.big h2 + * {
+  margin-top: 0;
+}
+
+.content.big h3 + * {
+  margin-top: 0;
+}
+
+.content.big h4 + * {
+  margin-top: 0;
+}
+
+.content.big table {
+  font-size: 0.9em;
+  line-height: 1.5555556;
+}
+
+.content.big thead th {
+  padding-right: 0.6666667em;
+  padding-bottom: 0.8888889em;
+  padding-left: 0.6666667em;
+}
+
+.content.big thead th:first-child {
+  padding-left: 0;
+}
+
+.content.big thead th:last-child {
+  padding-right: 0;
+}
+
+.content.big tbody td {
+  padding-top: 0.8888889em;
+  padding-right: 0.6666667em;
+  padding-bottom: 0.8888889em;
+  padding-left: 0.6666667em;
+}
+
+.content.big tbody td:first-child {
+  padding-left: 0;
+}
+
+.content.big tbody td:last-child {
+  padding-right: 0;
+}
+
+.content.big > :first-child {
+  margin-top: 0;
+}
+
+.content.big > :last-child {
+  margin-bottom: 0;
+}
+
+.artifacts-header {
+  font-weight: 700;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  margin-top: 5rem;
+}
+
+.artifacts-list {
+  display: grid;
+  grid-template-columns: -webkit-max-content auto;
+  grid-template-columns: max-content auto;
+  gap: 0.5rem 0.5rem;
+}
+
+.artifacts-list .artifact-link {
+  --tw-bg-opacity: 1;
+  background-color: rgba(37, 99, 235, var(--tw-bg-opacity));
+  border-radius: 0.125rem;
+  font-weight: 400;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  text-decoration: none;
+  height: -webkit-min-content;
+  height: -moz-min-content;
+  height: min-content;
+}
+
+.artifacts-list .artifact-link:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(29, 78, 216, var(--tw-bg-opacity));
+}
+
+.artifact-item {
+  --tw-bg-opacity: 1;
+  background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.artifact-item .artifact-contents {
+  padding: 1rem;
+}
+
 .space-y-0 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));

src/templates/main.html

@@ -4,7 +4,7 @@
 
 {%block content%}
 
-<div class="content is-medium">
+<div class="content big">
     <h1>BepisBuilds</h1>
     <p>
         Welcome to BepisBuilds! <br/>

src/templates/nav.html

@@ -4,11 +4,6 @@
             Available projects
         </p>
         <ul class="menu-list">
-            <li><a class="is-active" href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
-            <li><a href="#">wew</a></li>
             {%for project in projects%}
             <li><a {%if selected_project and project.id == selected_project.id -%} class="is-active" {%- endif %}
                     href="{{ url_for('display_project', project_id=project.id) }}">{{project.info.name}}</a></li>

src/templates/project_view.html

@@ -10,73 +10,48 @@
 {%block content%}
 
 <div class="content">
-    <div class="readme">
-        {%- if readme %}
-        {{readme|safe}}
-        {%-else%}
-        <h1>{{selected_project.info.name}}</h1>
-        <p>
-            Here you can find artifacts for project &quot;{{selected_project.info.name}}&quot;
-        </p>
-        {%-endif%}
-    </div>
+    {%- if readme %}
+    {{readme|safe}}
+    {%-else%}
+    <h1>{{selected_project.info.name}}</h1>
+    <p>
+        Here you can find artifacts for project &quot;{{selected_project.info.name}}&quot;
+    </p>
+    {%-endif%}
 </div>
 
 
-<h1 class="is-size-2">Artifacts</h1>
-<hr class="content-divider" />
+<h1 class="artifacts-header">Artifacts</h1>
+<hr />
 {%-for artifact in artifacts %}
 <div class="artifact-item">
     <div class="artifact-details">
-        <div class="artifact-id">
-            <p class="is-size-5">#{{artifact.id}}</p>
-        </div>
-        <div class="artifact-info">
-            <div class="artifact-info-content" style="align-items: center">
-                <p>
-                    {%-if artifact.hash%}
-                    <a class="hash-button" href="{{selected_project.info.commit_url}}/{{artifact.hash}}">{{artifact.hash[:8]}}</a>
-                    {%-endif%}
-                    Build date: <span class="build-date">{{artifact.date}}</span>
-                </p>
-                <div class="dropdown-button">
-                    <span class="icon-down-open"></span>
-                </div>
-            </div>
-        </div>
+        <span class="artifact-id">#{{artifact.id}}</span>
+        {%-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>
     </div>
-    <div class="artifact-contents">
-        <div class="column content">
-            <h2>Downloads</h2>
+    <div class="artifact-contents content">
+        <h2>Downloads</h2>
 
-            <div>
-                <table class="table is-hoverable is-striped is-bordered is-narrow">
-                    <thead>
-                        <tr>
-                            <th>Artifact</th>
-                            <th>Description</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        {%-for download_item in artifact.artifacts%}
-                        <tr>
-                            <td class="min-size"><a class="button is-link button-scale"
-                                    style="width: {{download_item.width * 0.5}}em;"
-                                    href="{{ url_for('download_item', project_id=selected_project.id, artifact_id=artifact.id, download_item=download_item.file)}}">{{download_item.file}}</a>
-                            </td>
-                            <td>{{download_item.description}}</td>
-                        </tr>
-                        {%-endfor%}
-                    </tbody>
-                </table>
-            </div>
-            {%- if artifact.changelog %}
-            <h2>Changelog</h2>
-            <p>
-                {{artifact.changelog|safe}}
-            </p>
-            {%- endif %}
+        <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>
+            
+            <span class="artifact-desc">{{download_item.description}}</span>
+            {%-endfor%}
         </div>
+        {%- if artifact.changelog %}
+        <h2>Changelog</h2>
+        <p>
+            {{artifact.changelog|safe}}
+        </p>
+        {%- endif %}
     </div>
 
 </div>