Extract publication edition into a separated component.

2024-09-05 17:28:30 +02:00
parent 5610bd170a
commit 5804d8cc9f
12 changed files with 394 additions and 268 deletions
--- a/frontend/src/app/components/publication-edition/publication-edition.component.scss
+++ b/frontend/src/app/components/publication-edition/publication-edition.component.scss
@@ -0,0 +1,184 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    form {
+        margin: 1em;
+        max-width: 80em;
+        width: 90%;
+        border-radius: .5em;
+        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+
+        & > header {
+            padding: 2em;
+            background-color: #3f51b5;
+            color: white;
+            border-radius: .5em .5em 0 0;
+
+            h1 {
+                font-size: 2em;
+                margin-bottom: .5em;
+            }
+        }
+
+        footer {
+            padding: 2em;
+            display: flex;
+            flex-direction: row-reverse;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+}
+
+.form-content {
+    padding: 2em;
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    gap: .5em;
+
+    mat-form-field {
+        textarea {
+            height: 20em;
+        }
+    }
+
+    .first-part {
+        display: flex;
+        flex-direction: column-reverse;
+        gap: 1em;
+
+        @media screen and (min-width: 600px) {
+            flex-direction: row;
+
+            div {
+                flex: 1 0;
+
+                &.picture-container {
+                    max-width: 20em;
+
+                    img {
+                        max-height: 15em;
+                        max-width: 20em;
+                    }
+                }
+            }
+        }
+
+        div {
+            flex: 1 0 50%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            &.picture-container {
+                img {
+                    flex: 1;
+                    object-fit: cover;
+                    width: 100%;
+                    cursor: pointer;
+                    border-radius: 1em;
+                    opacity: .9;
+                    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+                    transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
+
+                    &:hover {
+                        cursor: pointer;
+                        opacity: 1;
+                        box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
+                    }
+                }
+            }
+        }
+    }
+
+    .actions {
+        display: flex;
+        flex-direction: row;
+        gap: .5em;
+
+        button {
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 3em;
+            height: 3em;
+            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
+            font-weight: bold;
+        }
+    }
+}
+
+button, a.button {
+    padding: .8em 1.2em;
+    border-radius: 10em;
+    border: none;
+    background-color: #3f51b5;
+    color: white;
+    transition: background-color .2s ease-in-out;
+
+    &:hover {
+        background-color: #5b6ed8;
+        cursor: pointer;
+    }
+
+    &:disabled {
+        background-color: #5f6aa6;
+        cursor: not-allowed;
+    }
+
+    &.secondary {
+        color: #3f51b5;
+        background-color: white;
+
+        &:hover {
+            background-color: #f2f4ff;
+            cursor: pointer;
+        }
+    }
+}
+
+.preview {
+    display: flex;
+    flex-direction: column;
+    max-height: 80vh;
+    overflow-y: auto;
+
+    .preview-loading {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .illustration {
+        flex: 1;
+        height: 12em;
+        object-fit: cover;
+        transition: height .2s ease-in-out;
+
+        @media screen and (min-width: 450px) {
+            height: 15em;
+        }
+
+        @media screen and (min-width: 600px) {
+            height: 20em;
+        }
+
+        @media screen and (min-width: 750px) {
+            height: 25em;
+        }
+    }
+
+    header {
+        padding: 2em;
+    }
+
+    main {
+        padding: 2em;
+        text-align: justify;
+    }
+}