From f18e43309fba4b1e09c0366286a6997cde13adc6 Mon Sep 17 00:00:00 2001
From: Pijar <pierre.jarriges@tutanota.com>
Date: Thu, 2 Jun 2022 11:49:13 +0200
Subject: [PATCH] software article view
---
.../src/components/articles-list.js | 13 +-
.../src/components/update-article-form.js | 4 +-
.../software-article.js | 48 +++--
website/src/article-view.scss | 170 ++++++++++++++++++
.../software-development.scss | 2 +-
5 files changed, 219 insertions(+), 18 deletions(-)
diff --git a/admin-frontend/src/components/articles-list.js b/admin-frontend/src/components/articles-list.js
index 6417955..439e8c5 100644
--- a/admin-frontend/src/components/articles-list.js
+++ b/admin-frontend/src/components/articles-list.js
@@ -28,12 +28,21 @@ class ArticleList {
return {
tag: "ul",
id: "browse-articles-results",
+ style_rules: {
+ maxHeight: "300px",
+ overflowY: "scroll",
+ },
contents: this.state.articles.map(art => {
return {
tag: "li",
- style_rules: { display: "grid", gridTemplateColumns: "auto auto 100px 100px", gap: "10px", alignItems: "center" },
+ style_rules: {
+ display: "grid",
+ gridTemplateColumns: "auto auto 100px 100px",
+ gap: "10px",
+ alignItems: "center"
+ },
contents: [
- { tag: "span", contents: `[${art.locale}] <b>${art.title}</b> - ${art._id.$oid}` },
+ { tag: "span", contents: `[${art.locale}] [${art.category}] <b>${art.title}</b> - ${art._id.$oid}` },
art.with_static_view ? {
tag: "a",
href: art.metadata.view_uri,
diff --git a/admin-frontend/src/components/update-article-form.js b/admin-frontend/src/components/update-article-form.js
index 17c8960..fb79156 100644
--- a/admin-frontend/src/components/update-article-form.js
+++ b/admin-frontend/src/components/update-article-form.js
@@ -40,6 +40,7 @@ class UpdateArticleForm {
alert(res);
this.reset();
this.refresh();
+ this.articles_list.fetch_list(); // bof..
})
.catch(err => alert(err))
}
@@ -61,7 +62,7 @@ class UpdateArticleForm {
data: this.state.article_to_update,
on_article_sent: () => {
this.reset();
- this.articles_list.refresh_list();
+ this.articles_list.fetch_list();
}
}).render()]
: []
@@ -80,7 +81,6 @@ class UpdateArticleForm {
display: "flex",
flexDirection: "column",
gap: "20px",
- maxWidth: "1200px",
},
contents: [
this.articles_list.render(),
diff --git a/website/src/article-vew-components/software-article.js b/website/src/article-vew-components/software-article.js
index 9779647..dab32ac 100644
--- a/website/src/article-vew-components/software-article.js
+++ b/website/src/article-vew-components/software-article.js
@@ -32,22 +32,34 @@ class SoftwareArticle {
class: "software-article page-contents-center",
contents: [
{
- tag: "img",
- src: `${images_url}/${logo}`
- },
- {
- tag: "h1",
- contents: title,
- class: "header-text h1",
+ tag: "div",
+ class: "article-image",
+ contents: [
+ {
+ tag: "img",
+ src: `${images_url}/${logo}`
+ },
+ ]
},
{
- tag: "h2",
- contents: subtitle,
- class: "header-text h2",
+ tag: "div",
+ class: "article-titles",
+ contents: [
+ {
+ tag: "h1",
+ contents: title,
+ class: "article-title",
+ },
+ {
+ tag: "h2",
+ contents: subtitle,
+ class: "article-subtitle",
+ },
+ ]
},
{
tag: "div",
- id: "article-contents",
+ class: "article-body",
contents: [
{
tag: "div",
@@ -59,11 +71,22 @@ class SoftwareArticle {
}
],
},
+
+ ]
+ },
+ {
+ tag: "div",
+ class: "article-more",
+ contents: [
trad_ready && screens.length > 0 && new ImageCarousel({ images: screens.map(img => `${images_url}/${img}`) }).render(),
details.length > 0 && {
tag: "div",
class: "article-details",
contents: [
+ {
+ tag: "h3",
+ contents: t("Details")
+ },
{
tag: "ul",
class: "details-list",
@@ -85,8 +108,7 @@ class SoftwareArticle {
],
},
]
- },
-
+ }
],
};
diff --git a/website/src/article-view.scss b/website/src/article-view.scss
index 73fc23d..e370599 100644
--- a/website/src/article-view.scss
+++ b/website/src/article-view.scss
@@ -216,6 +216,176 @@
}
}
}
+
+ &.software-article {
+ display: grid;
+ grid-template-columns: 400px auto;
+ padding: 20px;
+ grid-auto-rows: minmax(min-content, max-content);
+
+ .article-image {
+ width: 350px;
+ height: 350px;
+ @include flex-center;
+ background-color: black;
+ border-radius: 100%;
+ overflow: hidden;
+ grid-row: 1 / span 2;
+
+ img {
+ padding: 40px;
+ max-height: 350px;
+ }
+ }
+
+ .article-titles {
+ grid-row: 1;
+ grid-column: 2;
+
+ .article-title {
+ font-size: 40px;
+ margin: 20px 0;
+ font-weight: 900;
+ color: $medium_grey;
+ }
+
+ .article-subtitle {
+ font-size: 20px;
+ color: $medium_grey;
+ }
+ }
+
+
+
+ .article-body {
+ grid-row: 2;
+ grid-column: 2;
+ font-size: 17px;
+
+ p {
+ text-align: justify;
+ max-width: 600px;
+ }
+ }
+
+ .article-more {
+ grid-row: 3;
+ grid-column: 1/span 2;
+ margin: 40px 0;
+ display: grid;
+ grid-template-columns: 600px auto;
+ gap: 20px;
+
+ .image-carousel {
+ height: 400px;
+ }
+
+ .article-details {
+ h3 {
+ margin: 0;
+ color: $medium_grey;
+ }
+
+ .details-list {
+ margin: 20px 0;
+
+ .detail {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ gap: 15px;
+ padding: 10px 0;
+ border-bottom: 1px solid #ddd;
+
+ .detail-value {
+ text-align: right;
+ }
+ }
+ }
+
+ }
+ }
+
+ @media screen and (max-width: 1100px) {
+ grid-template-columns: 300px auto;
+
+ .article-image {
+ width: 250px;
+ height: 250px;
+
+ img {
+ padding: 40px;
+ max-height: 250px;
+ }
+ }
+
+ .article-body {
+ grid-row: 2;
+ grid-column: 2;
+ font-size: 17px;
+
+ p {
+ max-width: 100%;
+ }
+ }
+
+ .article-more {
+ grid-template-columns: 1fr;
+
+ .image-carousel {
+ grid-row: 1;
+ height: 400px;
+ }
+ }
+ }
+
+ @media screen and (max-width: $screen_l) {
+ grid-template-columns: 300px auto;
+ gap: 20px;
+
+ .article-image {
+ grid-row: 1;
+ }
+
+ .article-titles {
+ .article-title {
+ font-size: 30px;
+ }
+
+ .article-subtitle {
+ font-size: 18px;
+ }
+ }
+
+
+ .article-body {
+ grid-column: 1/span 2;
+
+ p {
+ width: 100%;
+ }
+ }
+ }
+
+ @media screen and (max-width: $screen_m) {
+ grid-template-columns: 120px auto;
+
+ .article-image {
+ width: 120px;
+ height: 120px;
+
+ img {
+ padding: 10px;
+ max-height: 150px;
+ }
+ }
+
+ .article-more {
+ .image-carousel {
+ height: 300px;
+ }
+ }
+ }
+ }
}
}
\ No newline at end of file
diff --git a/website/src/pages/software-development/software-development.scss b/website/src/pages/software-development/software-development.scss
index 1f2ba1b..678078e 100644
--- a/website/src/pages/software-development/software-development.scss
+++ b/website/src/pages/software-development/software-development.scss
@@ -17,7 +17,7 @@
grid-template-columns: auto 1fr;
gap: 20px;
padding: 20px;
- border: 1px solid #eee;
+ border: 1px solid #ddd;
.software-title {
grid-column: 2;
--
GitLab