feat(front): factorise la typographie des titres/paragraphes

EcrituresNumeriques · Dec 17, 2024 · cd1a6b0 · cd1a6b0
1 parent 28c7b0a
commit cd1a6b0
Show file tree

Hide file tree

Showing 18 changed files with 100 additions and 174 deletions.
diff --git a/front/src/components/Write/articleEditorMetadata.module.scss b/front/src/components/Write/articleEditorMetadata.module.scss
@@ -190,14 +190,6 @@
 
         #modalWrapper {
           > main {
-            h1 {
-              margin-bottom: 1rem;
-            }
-
-            p {
-              margin-bottom: 1rem;
-            }
-
             textarea {
               width: 100%;
               padding: 0.5rem 1rem;

diff --git a/front/src/components/Write/menu.module.scss b/front/src/components/Write/menu.module.scss
@@ -3,9 +3,7 @@
 
 .section {
   > h1 {
-    font-size: 1.2rem;
     @extend .clickable;
-    padding: 0.5rem;
 
     display: flex;
     align-items: center;

diff --git a/front/src/components/Write/providers/monaco/CompareSelect.module.scss b/front/src/components/Write/providers/monaco/CompareSelect.module.scss
@@ -1,14 +1,6 @@
 @use '../../../../styles/defaults' as *;
 @use '../../../../styles/variables' as *;
 
-.compareVersions {
-  > h2 {
-    padding-top: 0.5em;
-    text-align: center;
-    font-size: 1.15em;
-  }
-}
-
 .modifiedVersion {
   > div {
     margin: 0;

diff --git a/front/src/components/Write/sommaire.module.scss b/front/src/components/Write/sommaire.module.scss
@@ -3,11 +3,9 @@
 
 #section {
   > h1 {
-    font-size: 1.2rem;
     @extend .clickable;
     border-top: 1px solid $main-border-color;
     border-bottom: 1px solid $main-border-color;
-    padding: 0.5rem 1rem;
     background-color: $main-background-color;
 
     display: flex;

diff --git a/front/src/components/article.module.scss b/front/src/components/article.module.scss
@@ -21,81 +21,43 @@
 }
 
 .article {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  column-gap: 2em;
-  row-gap: 0.15em;
-
-  padding: 1rem;
+  display: grid;
+  grid-template-columns: 2rem 3fr 2fr;
+  grid-template-areas: "toggle title actions"
+                       ". metadata metadata"
+                       ". details details";
+  gap: 0;
+  padding: .5rem;
+  margin-bottom: .5rem;
   position: relative;
 
-  .title,
-  .renamingForm {
-    cursor: pointer;
-    flex: 250px 1;
-  }
-
   .inlineField {
     flex: 1;
   }
 
-  .title {
-    display: inline-flex;
-    align-items: center;
-    text-wrap: balance;
-  }
-
-  .renamingForm {
-    display: flex;
-  }
-
-  .actionButtons {
-    flex-shrink: 1;
-    text-align: right;
-  }
-
-  .metadata,
   .deleteArticle {
     width: 100%;
     margin-left: 0.5em;
   }
 
-  .metadata {
-    h4 {
-      margin-bottom: 0.25rem;
-    }
-
-    > p:not(:last-child) {
-      margin-bottom: 1rem;
-    }
-  }
-
   .metadataAuthoring {
+    display: flex;
+    gap: .5rem;
     font-size: 0.9em;
+
+    > * {
+      flex-shrink: 0;
+    }
   }
 
   .versions {
     margin-bottom: 1.5rem;
   }
 
-  .tagChip {
-    font-size: 0.6rem;
-    display: inline-block;
-    padding: 0.25rem;
-    margin-right: 0.5rem;
-    border-radius: 100% 100%;
-  }
-
   .author {
     font-style: italic;
   }
 
-  .contributors {
-    padding-left: 0.5em;
-  }
-
   .editTags {
     > ul {
       display: flex;
@@ -111,6 +73,38 @@
   }
 }
 
+.areaTitle {
+  grid-area: title;
+  display: flex;
+  align-items: center;
+
+  .title {
+    cursor: pointer;
+    margin: 0;
+    padding: 0;
+    text-wrap: balance;
+
+  }
+}
+
+.areaActions {
+  grid-area: actions;
+  display: flex;
+  flex-wrap: nowrap;
+  padding: 0;
+  text-align: right;
+}
+
+.areaMetadata {
+  grid-area: metadata;
+  padding: .5rem 1rem .5rem 0;
+}
+
+.areaDetails {
+  grid-area: details;
+  padding: .5rem 1rem .5rem 0;
+}
+
 .sendText,
 .sendIcon {
   vertical-align: middle;
@@ -121,18 +115,19 @@
   width: 1em;
 }
 
-.icon {
-  display: flex;
+.toggleButton {
+  grid-area: toggle;
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
 }
 
 .contributorNames {
   display: inline-flex;
 }
 
-.author {
-  margin-right: 0.5em;
-}
-
 .momentsAgo {
   opacity: 0.5;
 }

diff --git a/front/src/components/articleContributors.module.scss b/front/src/components/articleContributors.module.scss
@@ -2,11 +2,6 @@
 @use '../styles/variables' as *;
 
 .acquintances {
-  h1 {
-    font-size: 1.4rem;
-    margin-bottom: 1rem;
-  }
-
   form {
     margin-bottom: 1rem;
   }

diff --git a/front/src/components/articleSendCopy.module.scss b/front/src/components/articleSendCopy.module.scss
@@ -2,11 +2,6 @@
 @use '../styles/variables' as *;
 
 .acquintances {
-  h1 {
-    font-size: 1.4rem;
-    margin-bottom: 1rem;
-  }
-
   form {
     margin-bottom: 1rem;
   }

diff --git a/front/src/components/articles.module.scss b/front/src/components/articles.module.scss
@@ -16,14 +16,6 @@
   border: 1px solid $main-border-color;
   background-color: $extra-background-color;
 
-  > h1 {
-    margin-bottom: 1rem;
-  }
-
-  > p {
-    margin-bottom: 1rem;
-  }
-
   > article:nth-of-type(2n + 1) {
     background-color: $alternate-row-color;
   }
@@ -33,25 +25,14 @@
   display: flex;
   column-gap: 1rem;
   align-items: center;
-}
 
-.filtersContainer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 1rem;
-}
-
-.filtersTags {
-  flex-grow: 1;
+  h1 {
+    margin: 0;
+  }
 }
 
-.button {
-  @extend .clickable;
-  display: inline-block;
-  padding: 0.5rem 1rem;
-  margin-right: 0.5rem;
-  background-color: $button-primary-background !important;
-  color: $button-primary-color !important;
+.filtersContainer {
+  margin: 0 0 3rem;
 }
 
 .searchField {

diff --git a/front/src/components/corpus/corpus.module.scss b/front/src/components/corpus/corpus.module.scss
@@ -7,14 +7,6 @@
   border: 1px solid $main-border-color;
   background-color: $extra-background-color;
 
-  > h1 {
-    margin-bottom: 1rem;
-  }
-
-  > p {
-    margin-bottom: 1rem;
-  }
-
   > article:nth-of-type(2n + 1) {
     background-color: $alternate-row-color;
   }

diff --git a/front/src/components/credentials.module.scss b/front/src/components/credentials.module.scss
@@ -7,14 +7,6 @@
   border: 1px solid $main-border-color;
   background-color: $extra-background-color;
   margin-bottom: 1rem;
-
-  > p {
-    margin-bottom: 0.5rem;
-  }
-
-  > h2 {
-    margin-bottom: 1rem;
-  }
 }
 
 .form {

diff --git a/front/src/components/export.module.scss b/front/src/components/export.module.scss
@@ -1,13 +1,6 @@
 @use '../styles/defaults' as *;
 @use '../styles/variables' as *;
 
-.export {
-  > h1 {
-    font-size: 1.4rem;
-    margin-bottom: 1rem;
-  }
-}
-
 .bibliographyPreview {
   background-color: $main-background-color;
   margin-bottom: 1em;

diff --git a/front/src/components/header.module.scss b/front/src/components/header.module.scss
@@ -71,6 +71,8 @@
 }
 
 .logo {
+  margin: 0;
+
   a {
     text-decoration: none;
 

diff --git a/front/src/components/header/UserMenu.module.scss b/front/src/components/header/UserMenu.module.scss
@@ -1,12 +1,3 @@
-.workspaces {
-  > h4 {
-    text-transform: uppercase;
-    font-size: 0.95em;
-    font-weight: 600;
-    padding-bottom: 0.65em;
-  }
-}
-
 .workspacesLink {
   padding-left: 1em;
   padding-top: 0.75em;

diff --git a/front/src/components/login.module.scss b/front/src/components/login.module.scss
@@ -17,11 +17,6 @@
     margin-bottom: 0;
   }
 
-  h1 {
-    margin: 0 0 0.75em;
-    text-align: center;
-  }
-
   form > fieldset {
     display: flex;
     flex-direction: column;

diff --git a/front/src/components/userInfos.module.scss b/front/src/components/userInfos.module.scss
@@ -5,8 +5,4 @@
   &:not(:last-child) {
     margin-bottom: 2rem;
   }
-
-  h2 {
-    margin: 1rem 0 0.5rem;
-  }
 }
diff --git a/front/src/components/workspace/workspaces.module.scss b/front/src/components/workspace/workspaces.module.scss
@@ -7,14 +7,6 @@
   border: 1px solid $main-border-color;
   background-color: $extra-background-color;
 
-  > h1 {
-    margin-bottom: 1rem;
-  }
-
-  > p {
-    margin-bottom: 1rem;
-  }
-
   > article:nth-of-type(2n + 1) {
     background-color: $alternate-row-color;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,6 +71,8 @@ @@
     }
     .logo {
+      margin: 0;
       a {
         text-decoration: none;
@@ Expand Down @@