Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit e3f5a7c1 authored by peter_rabbit's avatar peter_rabbit
Browse files

feat:article software

parent 1d5d612f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 233 additions and 124 deletions
public/education/education.js
+ 5
− 22
View file @ e3f5a7c1
......@@ -648,30 +648,13 @@ class EducationPage {
contents: [
{
tag: "div",
class: "page-header logo-left",
class: "page-header",
contents: [
{ tag: "h1", contents: "Pédagogie" },
{
tag: "div",
class: "page-contents-center grid-wrapper",
contents: [
{
tag: "div",
class: "logo",
contents: [
{
tag: "img",
alt: "image brain",
src: `${images_url}/brain.svg`,
},
],
},
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
contents: `La pédagogie est une arme puissante pour faire tomber les barrières
entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
},
],
tag: "p",
contents: `La pédagogie est une arme puissante pour faire tomber les barrières
entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
},
],
},
......
public/games/games.js
+ 1
− 1
View file @ e3f5a7c1
......@@ -29,7 +29,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
this.run();
this.props.images.length > 1 && this.run();
}
run() {
......
public/main.js
+ 3
− 3
View file @ e3f5a7c1
......@@ -29,7 +29,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
this.run();
this.props.images.length > 1 && this.run();
}
run() {
......@@ -332,8 +332,8 @@ class HomePage {
{
tag: "p",
class: "page-contents-center",
contents: `Nous sommes engagés dans une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
<br /><br />Nous travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
contents: `Nous avons à cœur une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
<br /><br />Nous travaillons pour le plaisir de créer, de maîtriser et de comprendre.`,
},
],
},
......
public/software-articles/watergun/watergun.json
+ 2
− 2
View file @ e3f5a7c1
{
"title": "Watergun",
"date": "2021/01/23",
"tags": ["web", "desktop", "light-weight", "offline", "editor"],
"status": "Work in progress",
"subtitle": "Un éditeur de site web ultra-light",
"body": "<file>watergun.txt",
"technical": {
"stack": ["Javascript", "Node.js", "Electron"],
"license": "Gnu gpl v3",
"repository": "https://gitlab.com/peter_rabbit/watergun-web-editor"
"repository": "https://gitlab.com/peter_rabbit/watergun-web-editor",
"version": "0.0.1"
},
"images": ["watergun-overview-light.jpg"]
}
public/software-development/software-development.js
+ 29
− 20
View file @ e3f5a7c1
......@@ -29,7 +29,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
this.run();
this.props.images.length > 1 && this.run();
}
run() {
......@@ -284,7 +284,7 @@ class SoftwareArticle {
}
render() {
const { title, date, status, tags, body, subtitle, images, path, technical } = this.props;
const { title, date, status, body, subtitle, images, path, technical } = this.props;
return {
tag: "article",
class: "software-article",
......@@ -294,28 +294,27 @@ class SoftwareArticle {
class: "software-title",
contents: title,
},
{
tag: "span",
class: "software-date",
contents: getArticleDate(date),
},
{
tag: "span",
class: "software-status",
contents: status,
},
{
tag: "div",
class: "software-tags",
contents: tags.map(tag => {
return { tag: "span", contents: tag };
}),
},
{
tag: "h3",
class: "software-subtitle",
contents: subtitle,
},
{
tag: "div",
class: "software-infos",
contents: [
{
tag: "span",
class: "software-date",
contents: getArticleDate(date),
},
{
tag: "span",
class: "software-status",
contents: status,
},
],
},
{
tag: "div",
class: "software-description",
......@@ -328,7 +327,7 @@ class SoftwareArticle {
contents: [
{
tag: "h2",
contents: "Details techniques",
contents: "Details",
},
{
tag: "table",
......@@ -350,6 +349,16 @@ class SoftwareArticle {
},
],
},
{
tag: "tr",
contents: [
{ tag: "td", contents: "Version actuelle" },
{
tag: "td",
contents: technical.version,
},
],
},
{
tag: "tr",
contents: [
......
public/style/pages/software-development/software-development.css
+ 4
− 4
View file @ e3f5a7c1
/* Error: Undefined variable.
* ,
* 9 | background-color: $light_0;
* | ^^^^^^^^
* 8 | background-color: $dark_2;
* | ^^^^^^^
* '
* src/pages/software-development/software-development.scss 9:35 root stylesheet */
* src/pages/software-development/software-development.scss 8:31 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
......@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
content: "Error: Undefined variable.\a \2577 \a 9 \2502 background-color: $light_0;\a \2502 ^^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 9:35 root stylesheet";
content: "Error: Undefined variable.\a \2577 \a 8 \2502 background-color: $dark_2;\a \2502 ^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 8:31 root stylesheet";
}
public/style/style.css
+ 80
− 10
View file @ e3f5a7c1
......@@ -5,6 +5,7 @@ body {
body * {
box-sizing: border-box;
color: #35393c;
line-height: 1.3em;
}
body ul {
margin: 0;
......@@ -325,13 +326,13 @@ main #page-container .page-philo p {
width: 100%;
max-width: 600px;
font-size: 18px;
color: #6b7880;
color: #aabbc8;
text-align: center;
font-style: italic;
font-weight: bold;
}
main #page-container .page-philo p * {
color: #6b7880;
color: #aabbc8;
}
main #page-container .page-contents-center {
width: 1300px;
......@@ -888,8 +889,8 @@ main #page-container #games-page .game-articles article.game-article .game-team
grid-column: 1/span 2;
}
main #page-container #games-page .game-articles article.game-article .game-team h2 {
background-color: #d4d9dd;
color: #6b7880;
background-color: #96a5ae;
color: #3c4144;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
......@@ -967,8 +968,13 @@ main #page-container #games-page .game-articles article.placeholder * {
}
main #page-container #software-page .software-articles article.software-article {
display: grid;
grid-template-columns: 1fr 0.7fr;
grid-template-columns: 1fr 1fr;
margin: 30px 0;
gap: 0 30px;
background-color: #3c4144;
}
main #page-container #software-page .software-articles article.software-article > * {
color: #d4d9dd;
}
main #page-container #software-page .software-articles article.software-article .software-title {
grid-column: 1/span 2;
......@@ -977,27 +983,91 @@ main #page-container #software-page .software-articles article.software-article
margin: 0;
padding: 20px;
}
main #page-container #software-page .software-articles article.software-article .software-status {
main #page-container #software-page .software-articles article.software-article .software-infos {
grid-column: 1;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
}
main #page-container #software-page .software-articles article.software-article .software-date {
grid-column: 1;
main #page-container #software-page .software-articles article.software-article .software-infos .software-date {
margin: 0 20px;
color: #96a5ae;
font-style: italic;
}
main #page-container #software-page .software-articles article.software-article .software-tags {
grid-column: 1;
main #page-container #software-page .software-articles article.software-article .software-infos .software-status {
margin: 0 20px;
background-color: #e5a002;
color: #3c4144;
padding: 10px 20px;
font-weight: bold;
border-radius: 20px;
}
main #page-container #software-page .software-articles article.software-article .software-subtitle {
grid-column: 1;
margin: 20px;
}
main #page-container #software-page .software-articles article.software-article .software-description {
grid-column: 1;
text-align: justify;
margin: 20px;
}
main #page-container #software-page .software-articles article.software-article .image-carousel {
grid-column: 2;
grid-row: 2/span 5;
min-height: 400px;
}
main #page-container #software-page .software-articles article.software-article .software-technical {
grid-column: 1/span 2;
}
main #page-container #software-page .software-articles article.software-article .software-technical h2 {
background-color: #96a5ae;
color: #3c4144;
margin: 0;
padding: 10px 20px;
font-size: 20px;
font-style: italic;
}
main #page-container #software-page .software-articles article.software-article .software-technical table {
border: 1px solid #96a5ae;
border-collapse: collapse;
margin: 10px 20px;
}
main #page-container #software-page .software-articles article.software-article .software-technical table tr td {
border: 1px solid #96a5ae;
color: #d4d9dd;
padding: 10px 20px;
}
main #page-container #software-page .software-articles article.software-article .software-technical table tr td *:not(a) {
color: #d4d9dd;
}
main #page-container #software-page .software-articles article.software-article .software-technical table tr td:first-child {
font-weight: bold;
}
main #page-container #software-page .software-articles article.software-article .software-technical table tr td:last-child ul {
display: flex;
gap: 10px;
}
@media screen and (max-width: 1300px) {
main #page-container #software-page .software-articles article.software-article {
margin: 30px 20px;
}
}
@media screen and (max-width: 900px) {
main #page-container #software-page .software-articles article.software-article {
grid-template-columns: 1fr;
}
main #page-container #software-page .software-articles article.software-article .software-title {
grid-column: 1;
}
main #page-container #software-page .software-articles article.software-article .image-carousel {
grid-column: 1;
grid-row: 2;
}
main #page-container #software-page .software-articles article.software-article .software-technical {
grid-column: 1;
}
}
main footer {
display: flex;
justify-content: center;
......
src/generic-components/image-carousel.js
+ 1
− 1
View file @ e3f5a7c1
......@@ -10,7 +10,7 @@ class ImageCarousel {
showImageIndex: 0,
};
this.RUN_INTERVAL = 5000;
this.run();
this.props.images.length > 1 && this.run();
}
run() {
......
src/homepage.js
+ 2
− 2
View file @ e3f5a7c1
......@@ -61,8 +61,8 @@ class HomePage {
{
tag: "p",
class: "page-contents-center",
contents: `Nous sommes engagés dans une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
<br /><br />Nous travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
contents: `Nous avons à cœur une démarche de légèreté et de simplicité dans nos créations qu'elle soient artistiques ou logicielles.
<br /><br />Nous travaillons pour le plaisir de créer, de maîtriser et de comprendre.`,
},
],
},
......
src/pages/education/education.js
+ 5
− 22
View file @ e3f5a7c1
......@@ -16,30 +16,13 @@ class EducationPage {
contents: [
{
tag: "div",
class: "page-header logo-left",
class: "page-header",
contents: [
{ tag: "h1", contents: "Pédagogie" },
{
tag: "div",
class: "page-contents-center grid-wrapper",
contents: [
{
tag: "div",
class: "logo",
contents: [
{
tag: "img",
alt: "image brain",
src: `${images_url}/brain.svg`,
},
],
},
{ tag: "h1", contents: "Pédagogie" },
{
tag: "p",
contents: `La pédagogie est une arme puissante pour faire tomber les barrières
entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
},
],
tag: "p",
contents: `La pédagogie est une arme puissante pour faire tomber les barrières
entre les gens et la technologie, et nous sommes bien décidés à en faire usage !`,
},
],
},
......
src/pages/games/games.scss
+ 2
− 2
View file @ e3f5a7c1
......@@ -53,8 +53,8 @@
.game-team {
grid-column: 1 / span 2;
h2 {
background-color: $light_0;
color: $medium_grey;
background-color: $light_1;
color: $dark_2;
padding: 10px 20px;
font-style: italic;
font-size: 20px;
......
src/pages/software-development/components/software-articles.js
+ 28
− 19
View file @ e3f5a7c1
......@@ -11,7 +11,7 @@ class SoftwareArticle {
}
render() {
const { title, date, status, tags, body, subtitle, images, path, technical } = this.props;
const { title, date, status, body, subtitle, images, path, technical } = this.props;
return {
tag: "article",
class: "software-article",
......@@ -21,28 +21,27 @@ class SoftwareArticle {
class: "software-title",
contents: title,
},
{
tag: "span",
class: "software-date",
contents: getArticleDate(date),
},
{
tag: "span",
class: "software-status",
contents: status,
},
{
tag: "div",
class: "software-tags",
contents: tags.map(tag => {
return { tag: "span", contents: tag };
}),
},
{
tag: "h3",
class: "software-subtitle",
contents: subtitle,
},
{
tag: "div",
class: "software-infos",
contents: [
{
tag: "span",
class: "software-date",
contents: getArticleDate(date),
},
{
tag: "span",
class: "software-status",
contents: status,
},
],
},
{
tag: "div",
class: "software-description",
......@@ -55,7 +54,7 @@ class SoftwareArticle {
contents: [
{
tag: "h2",
contents: "Details techniques",
contents: "Details",
},
{
tag: "table",
......@@ -77,6 +76,16 @@ class SoftwareArticle {
},
],
},
{
tag: "tr",
contents: [
{ tag: "td", contents: "Version actuelle" },
{
tag: "td",
contents: technical.version,
},
],
},
{
tag: "tr",
contents: [
......
src/pages/software-development/software-development.scss
+ 68
− 14
View file @ e3f5a7c1
......@@ -2,8 +2,13 @@
.software-articles {
article.software-article {
display: grid;
grid-template-columns: 1fr 0.7fr;
grid-template-columns: 1fr 1fr;
margin: 30px 0;
gap: 0 30px;
background-color: $dark_2;
& > * {
color: $light_0;
}
.software-title {
grid-column: 1 / span 2;
background-color: $light_0;
......@@ -11,44 +16,93 @@
margin: 0;
padding: 20px;
}
.software-status {
grid-column: 1;
}
.software-date {
grid-column: 1;
}
.software-tags {
.software-infos {
grid-column: 1;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
.software-date {
margin: 0 20px;
color: $light_1;
font-style: italic;
}
.software-status {
margin: 0 20px;
background-color: $yellow_1;
color: $dark_2;
padding: 10px 20px;
font-weight: bold;
border-radius: 20px;
}
}
.software-subtitle {
grid-column: 1;
margin: 20px;
}
.software-description {
grid-column: 1;
text-align: justify;
margin: 20px;
}
.image-carousel {
grid-column: 2;
grid-row: 2 / span 5;
min-height: 400px;
}
.software-technical {
grid-column: 1 / span 2;
h2 {
background-color: $light_1;
color: $dark_2;
margin: 0;
padding: 10px 20px;
font-size: 20px;
font-style: italic;
}
table {
border: 1px solid $light_1;
border-collapse: collapse;
margin: 10px 20px;
tr {
td:first-child {
}
td:last-child {
ul {
li {
td {
border: 1px solid $light_1;
color: $light_0;
padding: 10px 20px;
*:not(a) {
color: $light_0;
}
&:first-child {
font-weight: bold;
}
&:last-child {
ul {
display: flex;
gap: 10px;
}
}
}
}
}
}
@media screen and (max-width: $page_contents_center_width) {
margin: 30px 20px;
}
@media screen and (max-width: $screen_l) {
grid-template-columns: 1fr;
.software-title {
grid-column: 1;
}
.image-carousel {
grid-column: 1;
grid-row: 2;
}
.software-technical {
grid-column: 1;
}
}
}
}
}
src/style.scss
+ 1
− 0
View file @ e3f5a7c1
......@@ -4,6 +4,7 @@ body {
* {
box-sizing: border-box;
color: $dark_1;
line-height: 1.3em;;
}
font-family: Arial, Helvetica, sans-serif;
margin: 0;
......
src/theme.scss
+ 2
− 2
View file @ e3f5a7c1
......@@ -125,9 +125,9 @@ $page_contents_center_width: 1300px;
width: 100%;
max-width: 600px;
font-size: 18px;
color: $medium_grey;
color: $light_2;
* {
color: $medium_grey;
color: $light_2;
}
text-align: center;
font-style: italic;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service