style improvement

src/App.vue

@@ -106,19 +106,22 @@ export default defineComponent({
         .then((response) => response.json())
         .then(this.updatePlanningWithNewPairing)
         .catch((error) => {
-          toast({ html: "Pas de réponse du serveur", classes: "error" });
+          toast({ html: "Pas de réponse du serveur<br>" + error.toString(), classes: "error" });
           this.optimisationInProgress = false;
         });
     },
     updatePlanningWithNewPairing(data: SolverOutput) {
       this.optimisationInProgress = false;
       // Display message from the solver
+      toast({
+        html: "Le planning a été mis à jour <br>Score : " + data.score,
+        classes: "success",
+        displayLength: 10000,
+      });
       data.message
         .split("\n")
-        .filter((s) => !s)
-        .forEach((s) => toast({ html: s, classes: "error" }));
-      toast({ html: "Le planning a été mis à jour", classes: "error" });
-      console.log("Solver Score :", data.score);
+        .filter((s) => s != "")
+        .forEach((s) => toast({ html: s, classes: "warning", displayLength: 10000 }));
       // Remove previous timeslot assignement
       this.$store.commit(MutationTypes.clearBenevole2Creneau, undefined);
       // Add new timeslot assignement

src/assets/css/button.css

@@ -13,21 +13,21 @@
   min-height: 1.5rem;
   text-align: center;
   -webkit-box-align: center;
-          align-items: center;
+  align-items: center;
   font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
   font-weight: 700;
   line-height: 1.5rem;
   -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
   white-space: nowrap;
   border-radius: 3px;
   text-transform: none;
   vertical-align: middle;
   -moz-appearance: none;
   -webkit-box-pack: center;
-          justify-content: center;
+  justify-content: center;
   text-decoration: none;
   background-color: transparent;
   -webkit-appearance: none;
@@ -37,7 +37,8 @@
   opacity: 0.5;
   pointer-events: none;
 }
-.btn svg, .btn:not(.icon) .material-icons {
+.btn svg,
+.btn:not(.icon) .material-icons {
   fill: currentColor;
   width: 1rem;
   height: 1rem;
@@ -54,15 +55,15 @@
 }
 
 .btn.small {
-  padding: calc(0.125rem + 1px) .7rem;
+  padding: calc(0.125rem + 1px) 0.7rem;
   font-size: 0.875rem;
   min-width: 2rem;
   line-height: 1.5rem;
 }
-.btn.icon.small{
-  padding: calc(0.25rem + 1px) ;
+.btn.icon.small {
+  padding: calc(0.25rem + 1px);
 }
-.btn.icon.small .material-icons{
+.btn.icon.small .material-icons {
   font-size: 1.25rem;
 }
 .btn.large {
@@ -71,7 +72,8 @@
   min-width: 3rem;
   line-height: 1.5rem;
 }
-.btn.large svg, .btn.large .material-icons {
+.btn.large svg,
+.btn.large .material-icons {
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.5rem;
@@ -82,7 +84,8 @@
   min-width: 4rem;
   line-height: 1.875rem;
 }
-.btn.xlarge svg, .btn.xlarge .material-icons {
+.btn.xlarge svg,
+.btn.xlarge .material-icons {
   width: 1.5rem;
   height: 1.5rem;
   font-size: 1.5rem;
@@ -115,7 +118,7 @@
   background-color: var(--color-neutral-200);
 }
 .btn.primary:active {
-  background-color:var(--color-neutral-200);
+  background-color: var(--color-neutral-200);
 }
 .btn.primary::-moz-focus-inner {
   border-style: none;
@@ -245,4 +248,4 @@
   content: "";
   position: absolute;
   border-radius: 6px;
-}
+}

src/assets/css/chip.css

@@ -1,145 +1,141 @@
 .chip {
-    all: initial;
-    color: var(--color-neutral-100);
-    border: none;
-    cursor: default;
-    height: 1.5rem;
-    display: -webkit-inline-box;
-    display: inline-flex;
-    outline: 0;
-    padding: 0;
-    font-size: 0.875rem;
-    box-sizing: border-box;
-    -webkit-box-align: center;
-            align-items: center;
-    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
-    font-weight: 500;
-    white-space: nowrap;
-    border-radius: 0.75rem;
-    vertical-align: middle;
-    -webkit-box-pack: center;
-            justify-content: center;
-    background-color: var(--color-accent-800);
-  }
-  .chip +.chip {
-    margin-left:4px
-  }
-  .chip-label {
-    overflow: hidden;
-    line-height: 1.5rem;
-    white-space: nowrap;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    text-overflow: ellipsis;
-  }
-  .chip-remove-btn {
-    width: 18px;
-    height: 18px;
-    border: 1px solid transparent;
-    cursor: pointer;
-    margin: 0 0.25rem 0 -0.25rem;
-    display: -webkit-inline-box;
-    display: inline-flex;
-    outline: 0;
-    position: relative;
-    box-sizing: border-box;
-    text-align: center;
-    -webkit-box-align: center;
-            align-items: center;
-    font-family: inherit;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    white-space: nowrap;
-    border-radius: 50%;
-    vertical-align: middle;
-    -moz-appearance: none;
-    -webkit-box-pack: center;
-            justify-content: center;
-    text-decoration: none;
-    background-color: var(--color-accent-600);      
-    color:var(--color-accent-200);
-    -webkit-appearance: none;
-    -webkit-tap-highlight-color: transparent;
-
-  }
-  .chip-remove-btn:before{
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 15px;
-    content:'clear';
-  }
-  .chip-remove-btn::-moz-focus-inner {
-    border-style: none;
-  }
-  .chip-remove-btn:focus {
-    outline: none;
-  }
-  .chip-remove-btn:focus:after {
-    top: -5px;
-    left: -5px;
-    right: -5px;
-    border: 2px solid var(--color-accent-400);
-    bottom: -5px;
-    content: "";
-    position: absolute;
-    border-radius: 50%;
-  }
-  .chip-remove-btn:hover {
-    background-color: var(--color-accent-500);
-  }
-  .chip-remove-btn:active {
-    background-color: var(--color-accent-600);
-  }
-  .chip-icon.material-icons {
-    width: 1rem;
-    height: 1rem;
-    margin: 0 -0.25rem 0 0.25rem;
-    padding: 1px 0.25rem;
-    font-size: 0.875rem;
-  }
-  .chip-icon svg {
-    font-size: 0.875rem;
-  }
-  .chip--clickable {
-    color: var(--color-accent-200);
-    border: 2px solid transparent;
-    cursor: pointer;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .chip--clickable::-moz-focus-inner {
-    border-style: none;
-  }
-  .chip--clickable:focus {
-    border: 2px solid var(--color-accent-400); 
-    outline: none;
-  }
-  .chip--clickable:hover {
-    background-color: var(--color-accent-600);   
-  }
-  .chip--clickable:active {
-    color: #ffffff;
-    background-color: var(--color-accent-500); 
-  }
-  .chip--info {
-    color: #282e3a;
-    background-color: #a3d4f0;
-  }
-  .chip--success {
-    color: #282e3a;
-    background-color: #a5f2d8;
-  }
-  .chip--warning {
-    color: #282e3a;
-    background-color: #ffe3cc;
-  }
-  .chip--error {
-    color: #282e3a;
-    background-color: #f9ccd4;
-  }
+  all: initial;
+  color: var(--color-neutral-100);
+  border: none;
+  cursor: default;
+  height: 1.5rem;
+  display: -webkit-inline-box;
+  display: inline-flex;
+  outline: 0;
+  padding: 0;
+  font-size: 0.875rem;
+  box-sizing: border-box;
+  -webkit-box-align: center;
+  align-items: center;
+  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  white-space: nowrap;
+  border-radius: 0.75rem;
+  vertical-align: middle;
+  -webkit-box-pack: center;
+  justify-content: center;
+  background-color: var(--color-accent-800);
+}
+.chip-label {
+  overflow: hidden;
+  line-height: 1.5rem;
+  white-space: nowrap;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  text-overflow: ellipsis;
+}
+.chip-remove-btn {
+  width: 18px;
+  height: 18px;
+  border: 1px solid transparent;
+  cursor: pointer;
+  margin: 0 0.25rem 0 -0.25rem;
+  display: -webkit-inline-box;
+  display: inline-flex;
+  outline: 0;
+  position: relative;
+  box-sizing: border-box;
+  text-align: center;
+  -webkit-box-align: center;
+  align-items: center;
+  font-family: inherit;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 50%;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-box-pack: center;
+  justify-content: center;
+  text-decoration: none;
+  background-color: var(--color-accent-600);
+  color: var(--color-accent-200);
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.chip-remove-btn:before {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 15px;
+  content: "clear";
+}
+.chip-remove-btn::-moz-focus-inner {
+  border-style: none;
+}
+.chip-remove-btn:focus {
+  outline: none;
+}
+.chip-remove-btn:focus:after {
+  top: -5px;
+  left: -5px;
+  right: -5px;
+  border: 2px solid var(--color-accent-400);
+  bottom: -5px;
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+}
+.chip-remove-btn:hover {
+  background-color: var(--color-accent-500);
+}
+.chip-remove-btn:active {
+  background-color: var(--color-accent-600);
+}
+.chip-icon.material-icons {
+  width: 1rem;
+  height: 1rem;
+  margin: 0 -0.25rem 0 0.25rem;
+  padding: 1px 0.25rem;
+  font-size: 0.875rem;
+}
+.chip-icon svg {
+  font-size: 0.875rem;
+}
+.chip--clickable {
+  color: var(--color-accent-200);
+  border: 2px solid transparent;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+.chip--clickable::-moz-focus-inner {
+  border-style: none;
+}
+.chip--clickable:focus {
+  border: 2px solid var(--color-accent-400);
+  outline: none;
+}
+.chip--clickable:hover {
+  background-color: var(--color-accent-600);
+}
+.chip--clickable:active {
+  color: #ffffff;
+  background-color: var(--color-accent-500);
+}
+.chip--info {
+  color: #282e3a;
+  background-color: #a3d4f0;
+}
+.chip--success {
+  color: #282e3a;
+  background-color: #a5f2d8;
+}
+.chip--warning {
+  color: #282e3a;
+  background-color: #ffe3cc;
+}
+.chip--error {
+  color: #282e3a;
+  background-color: #f9ccd4;
+}

src/assets/css/editor-panel.css

@@ -1,40 +1,42 @@
 .editor-panel {
-    margin-top: 8px;
-    padding: 12px;
-    max-width: 400px;
-    width: 400px;
-    box-shadow: 0 0 2px 2px var(--color-neutral-600);
-    height: 100%;
-  }
+  margin-top: 8px;
+  padding: 12px;
+  max-width: 400px;
+  width: 400px;
+  box-shadow: 0 0 2px 2px var(--color-neutral-600);
+  height: 100%;
+}
 .editor-panel > .actions {
-    display: flex;
-    justify-content: center;
-    margin-bottom:12px;
-  }
-  .editor-panel > .actions > * {
-    margin: 4px 8px;
-  }
-  .editor-panel .s3 {
-    max-width: calc(25% - 8px);
-  }
-  .editor-panel .s6 {
-    max-width: calc(50% - 8px);
-  }
-  .editor-panel .s9 {
-    max-width: calc(75% - 8px);
-  }
-  .editor-panel > form > * {
-    width: 100%;
-  }
-  .editor-panel > form {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-  }
-  .editor-panel > h3 {
-    margin-top: 0px;
-    margin-bottom: 8px;
-  }
-  .editor-panel .empty{
-    text-align: center;
-  }
+  display: flex;
+  justify-content: center;
+  margin-bottom: 12px;
+}
+.editor-panel > .actions > * {
+  margin: 4px 8px;
+}
+.editor-panel > h3 {
+  margin-top: 0px;
+  margin-bottom: 8px;
+}
+.editor-panel .empty {
+  text-align: center;
+}
+
+.editor-body {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.editor-body > *,
+.editor-body > .formcontrol {
+  width: 100%;
+}
+.editor-panel .s3 {
+  max-width: calc(25% - 8px);
+}
+.editor-panel .s6 {
+  max-width: calc(50% - 8px);
+}
+.editor-panel .s9 {
+  max-width: calc(75% - 8px);
+}

src/assets/css/main.css

@@ -1,119 +1,119 @@
-
 *,
 ::before,
 ::after {
   box-sizing: border-box;
 }
-:root{
-    --color-primary-100:hsl(10, 59%, 25%);
-    --color-primary-200:hsl(10, 59%, 45%);
-    --color-primary-400:hsl(37, 100%, 45%);
-    --color-primary-600:hsl(37, 100%, 65%);    
-    --color-primary-800:hsl(37, 100%, 85%);
+:root {
+  --color-primary-100: hsl(10, 59%, 25%);
+  --color-primary-200: hsl(10, 59%, 45%);
+  --color-primary-400: hsl(37, 100%, 45%);
+  --color-primary-600: hsl(37, 100%, 65%);
+  --color-primary-800: hsl(37, 100%, 85%);
 
-    --color-accent-100:hsl(179, 52%, 15%);
-    --color-accent-200:hsl(179, 52%, 25%);
-    --color-accent-400:hsl(172, 58%, 40%);    
-    --color-accent-500:hsl(172, 58%, 53%);
-    --color-accent-600:hsl(172, 58%, 66%);
-    --color-accent-700:hsl(172, 60%, 70%);
-    --color-accent-800:hsl(172, 60%, 80%);
-    --color-accent-850:hsl(172, 70%, 90%);
-    --color-accent-900:hsl(172, 85%, 95%);
-    --color-accent-950:hsl(172, 96%, 98%);
+  --color-accent-100: hsl(179, 52%, 15%);
+  --color-accent-200: hsl(179, 52%, 25%);
+  --color-accent-400: hsl(172, 58%, 40%);
+  --color-accent-500: hsl(172, 58%, 53%);
+  --color-accent-600: hsl(172, 58%, 66%);
+  --color-accent-700: hsl(172, 60%, 70%);
+  --color-accent-800: hsl(172, 60%, 80%);
+  --color-accent-850: hsl(172, 70%, 90%);
+  --color-accent-900: hsl(172, 85%, 95%);
+  --color-accent-950: hsl(172, 96%, 98%);
 
-    --color-neutral-100:hsl(37, 5%, 15%);
-    --color-neutral-200:hsl(37, 5%, 25%);
-    --color-neutral-300:hsl(37, 5%, 35%);
-    --color-neutral-400:hsl(37, 5%, 45%);
-    --color-neutral-600:hsl(37, 5%, 60%);
-    --color-neutral-800:hsl(37, 5%, 80%);
+  --color-neutral-100: hsl(37, 5%, 15%);
+  --color-neutral-200: hsl(37, 5%, 25%);
+  --color-neutral-300: hsl(37, 5%, 35%);
+  --color-neutral-400: hsl(37, 5%, 45%);
+  --color-neutral-600: hsl(37, 5%, 60%);
+  --color-neutral-800: hsl(37, 5%, 80%);
 }
 
-body{
-    color: #282e3a;
-    margin: 0;
-    font-size: 1rem;
-    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
-    background-color: #ffffff;
+body {
+  color: #282e3a;
+  margin: 0;
+  font-size: 1rem;
+  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+  background-color: #ffffff;
 }
 .header {
-    --bg-color:var(--color-neutral-100);
-    --color:var(--color-accent-600);
-    top: 0;
-    left: auto;
-    right: 0;
-    width: 100%;
-    display: -webkit-box;
-    display: flex;
-    padding: 0;
-    padding-right: 0px;
-    z-index: 1200;
-    position: -webkit-sticky;
-    position: sticky;
-    background-color: var(--bg-color);
-    color: var(--color);;
-    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
-    box-sizing: border-box;
-    min-height: 3.5rem;
-    overflow-x: hidden;
-    -webkit-box-align: center;
-    align-items: center;
-    flex-shrink: 0;
-    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
-    padding-right: 1rem;
-  }
-  .header > :not(:first-child) {
-    margin-right: 0.5rem;
-}
-  .logo {
-    width: 32px;
-    height: 32px;
-    margin: 0 1rem 0 1rem;
-    flex-shrink: 0;
-    background: url(../bdlg.min.svg);
-    background-size: contain;
-    background-repeat: no-repeat;
-  }
-  .appname {
-    -webkit-box-flex: 1;
-    flex: 1;
-    color: inherit;
-    font-size: 1rem;
-    text-align: left;
-    border-left: 1px solid var(--color);;
-    font-weight: 400;
-    line-height: 1.5rem;
-    white-space: nowrap;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-  
-  @font-face {
-    font-family: 'Material Icons';
-    font-style: normal;
-    font-weight: 400;
-    src: url(https://fonts.gstatic.com/s/materialicons/v85/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
-  }
-  
-  .material-icons {
-    font-family: 'Material Icons';
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    font-feature-settings: 'liga';
-    -moz-font-feature-settings: 'liga';
-    -moz-osx-font-smoothing: grayscale;
-  }  
+  --bg-color: var(--color-neutral-100);
+  --color: var(--color-accent-600);
+  top: 0;
+  left: auto;
+  right: 0;
+  width: 100%;
+  display: -webkit-box;
+  display: flex;
+  padding: 0;
+  padding-right: 0px;
+  z-index: 1200;
+  position: -webkit-sticky;
+  position: sticky;
+  background-color: var(--bg-color);
+  color: var(--color);
+  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
+  box-sizing: border-box;
+  min-height: 3.5rem;
+  overflow-x: hidden;
+  -webkit-box-align: center;
+  align-items: center;
+  flex-shrink: 0;
+  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+  padding-right: 1rem;
+}
+.header > :not(:first-child) {
+  margin-right: 0.5rem;
+}
+.logo {
+  width: 32px;
+  height: 32px;
+  margin: 0 1rem 0 1rem;
+  flex-shrink: 0;
+  background: url(../bdlg.min.svg);
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.appname {
+  -webkit-box-flex: 1;
+  flex: 1;
+  color: inherit;
+  font-size: 1rem;
+  text-align: left;
+  border-left: 1px solid var(--color);
+  font-weight: 400;
+  line-height: 1.5rem;
+  white-space: nowrap;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 
-.bubble{
+@font-face {
+  font-family: "Material Icons";
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v85/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
+    format("woff2");
+}
+
+.material-icons {
+  font-family: "Material Icons";
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga";
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.bubble {
   height: 20px;
   width: 20px;
   display: flex;
@@ -124,7 +124,7 @@ body{
   bottom: -4px;
   border-radius: 50%;
   font-size: 12px;
-  background: red;
+  background: #e4002b;;
   font-weight: bold;
 }
 .formcontrol {
@@ -182,4 +182,4 @@ body{
 }
 .formcontrol--success .formcontrol-help {
   color: #08875b;
-}
+}

src/assets/css/multiple-select.css

@@ -119,8 +119,9 @@ content: "expand_more";
 cursor: pointer;
 background-color: var(--color-accent-850);
 }
-.select-multiple-value > .chip + .chip{
-  margin-left:4px;
+.select-multiple-value > .chip {
+  margin-right:4px;
+  margin-bottom:4px;
 }
 .select-multiple-input {
 border: 0;

src/assets/css/tabs.css

@@ -1,122 +1,125 @@
 .tabs {
-    margin: 0;
-    display: inline-block;
-    padding: 0;
-    box-shadow: 0px 2px 0px 0px var(--color, var(--color-primary-200));
-    box-sizing: border-box;
-    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
-    white-space: nowrap;
-    margin-bottom: 1px;
-    list-style-type: none;
-  }
-  .tabs.floating {
-    align-self: stretch;
-    box-shadow: none;
-    margin-bottom: 0;
-  }
-  .tab {
-    color: var(--color,var(--color-primary-200));
-    border: 2px solid transparent;
-    cursor: pointer;
-    height: 100%;
-    margin: 0;
-    display: -webkit-inline-box;
-    display: inline-flex;
-    outline: 0;
-    padding: calc(0.5rem - 1px) 1rem;
-    font-size: 0.875rem;
-    min-width: 2rem;
-    box-sizing: border-box;
-    min-height: 1.5rem;
-    text-align: center;
-    -webkit-box-align: center;
-            align-items: center;
-    font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
-    font-weight: 500;
-    line-height: 1.5rem;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-    white-space: nowrap;
-    border-radius: 3px;
-    text-transform: none;
-    vertical-align: middle;
-    -moz-appearance: none;
-    -webkit-box-pack: center;
-            justify-content: center;
-    text-decoration: none;
-    background-color: rgba(0, 0, 0, 0);
-    -webkit-appearance: none;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    -webkit-tap-highlight-color: transparent;
-  }
-  .tab:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-  .tab svg, .tab .material-icons {
-    fill: currentColor;
-    width: 1rem;
-    height: 1rem;
-    font-size: 1rem;
-    margin-left: calc(-0.125rem);
-    margin-right: 0.5rem;
-  }
-  .tab:hover {
-    color:var(--bg-color,white);
-    background-color: var(--color,var(--color-primary-200));
-  }
-  .tab:active {
-    background-color: #e2e9ed;
-  }
-  .tab::-moz-focus-inner {
-    border-style: none;
-  }
-  .tab:focus {
-    border: 2px solid var(--color,--color-primary-200);
-    outline: none;
-  }
-  .tab.large {
-    padding: calc(0.75rem - 1px) 1.5rem;
-    font-size: 1rem;
-    min-width: 3rem;
-    line-height: 1.5rem;
-  }
-  .tab.large svg, .tab.large .material-icons {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 1.5rem;
-  }
-  .tab.xlarge {
-    padding: 0.75rem 2rem;
-    font-size: 1.125rem;
-    min-width: 4rem;
-    line-height: 1.875rem;
-  }
-  .tab.xlarge svg, .tab.xlarge .material-icons {
-    width: 1.5rem;
-    height: 1.5rem;
-    font-size: 1.5rem;
-  }
-  .tab.selected {
-    position: relative;
-    font-weight: 700;
-  }
-  .tab.selected:after {
-    left: 1rem;
-    right: 1rem;
-    border: 3px solid var(--color,var(--color-primary-200));
-    bottom: -2px;
-    content: "";
-    position: absolute;
-    border-radius: 3px 3px 0 0;
-  }
-  .tab.selected:hover:after{
-    border: 3px solid var(--bg-color,white);
-  }
-  .tab.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-  }
+  margin: 0;
+  display: inline-block;
+  padding: 0;
+  box-shadow: 0px 2px 0px 0px var(--color, var(--color-primary-200));
+  box-sizing: border-box;
+  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+  white-space: nowrap;
+  margin-bottom: 1px;
+  list-style-type: none;
+}
+.tabs.floating {
+  align-self: stretch;
+  box-shadow: none;
+  margin-bottom: 0;
+}
+.tab {
+  color: var(--color, var(--color-primary-200));
+  border: 2px solid transparent;
+  cursor: pointer;
+  height: 100%;
+  margin: 0;
+  display: -webkit-inline-box;
+  display: inline-flex;
+  outline: 0;
+  padding: calc(0.5rem - 1px) 1rem;
+  font-size: 0.875rem;
+  min-width: 2rem;
+  box-sizing: border-box;
+  min-height: 1.5rem;
+  text-align: center;
+  -webkit-box-align: center;
+  align-items: center;
+  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+  font-weight: 500;
+  line-height: 1.5rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 3px;
+  text-transform: none;
+  vertical-align: middle;
+  -moz-appearance: none;
+  -webkit-box-pack: center;
+  justify-content: center;
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0);
+  -webkit-appearance: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+.tab:disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.tab svg,
+.tab .material-icons {
+  fill: currentColor;
+  width: 1rem;
+  height: 1rem;
+  font-size: 1rem;
+  margin-left: calc(-0.125rem);
+  margin-right: 0.5rem;
+}
+.tab:hover {
+  color: var(--bg-color, white);
+  background-color: var(--color, var(--color-primary-200));
+}
+.tab:active {
+  background-color: #e2e9ed;
+}
+.tab::-moz-focus-inner {
+  border-style: none;
+}
+.tab:focus {
+  border: 2px solid var(--color, --color-primary-200);
+  outline: none;
+}
+.tab.large {
+  padding: calc(0.75rem - 1px) 1.5rem;
+  font-size: 1rem;
+  min-width: 3rem;
+  line-height: 1.5rem;
+}
+.tab.large svg,
+.tab.large .material-icons {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+.tab.xlarge {
+  padding: 0.75rem 2rem;
+  font-size: 1.125rem;
+  min-width: 4rem;
+  line-height: 1.875rem;
+}
+.tab.xlarge svg,
+.tab.xlarge .material-icons {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 1.5rem;
+}
+.tab.selected {
+  position: relative;
+  font-weight: 700;
+}
+.tab.selected:after {
+  left: 1rem;
+  right: 1rem;
+  border: 3px solid var(--color, var(--color-primary-200));
+  bottom: -2px;
+  content: "";
+  position: absolute;
+  border-radius: 3px 3px 0 0;
+}
+.tab.selected:hover:after {
+  border: 3px solid var(--bg-color, white);
+}
+.tab.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}

src/components/EditeurBenevole.vue

@@ -16,7 +16,7 @@
     <div class="empty" v-if="benevole === undefined">
       Veuillez selectioner une ligne du tableau.
     </div>
-    <form v-else>
+    <div class="editor-body" v-else>
       <styled-input
         class="s3"
         label="Identifiant"
@@ -66,7 +66,7 @@
         :strict-autocomplete="true"
         v-model="competenceIdList"
       ></chips-input>
-    </form>
+    </div>
   </div>
 </template>
 

src/components/EditeurCompetence.vue

@@ -16,7 +16,7 @@
     <div class="empty" v-if="competence === undefined">
       Veuillez selectioner une ligne du tableau.
     </div>
-    <form v-else>
+    <div class="editor-body" v-else>
       <styled-input
         class="s3"
         label="Identifiant"
@@ -53,7 +53,7 @@
         :modelValue="competence.isTeachable"
         @input="checkboxListener($event, 'isTeachable')"
       />
-    </form>
+    </div>
   </div>
 </template>
 

src/components/EditeurCreneau.vue

@@ -21,7 +21,7 @@
       </button>
     </div>
     <div class="empty" v-if="creneau === undefined">Veuillez selectioner un creneau.</div>
-    <form v-else>
+    <div class="editor-body" v-else>
       <styled-input
         label="Titre"
         id="last_name"
@@ -106,6 +106,13 @@
         v-model="benevoleStrIdList"
       ></chips-input>
 
+      <div class="s6 checkbox">
+        <checkbox
+          label="Créneau repas"
+          :modelValue="creneau.isMeal"
+          @input="checkboxListener($event, 'isMeal')"
+        />
+      </div>
       <styled-input
         label="Pénibilité"
         id="penibility"
@@ -114,13 +121,7 @@
         :modelValue="creneau.penibility"
         @input="inputListener($event, 'penibility')"
       />
-      <checkbox
-        class="s6"
-        label="Créneau repas"
-        :modelValue="creneau.isMeal"
-        @input="checkboxListener($event, 'isMeal')"
-      />
-    </form>
+    </div>
   </div>
 </template>
 
@@ -230,7 +231,11 @@ export default defineComponent({
     },
     autocompleteBenevolesList(): Array<AutocompleteOptions> {
       return this.$store.state.benevoleList.map((benevole) => {
-        return { id: benevole.id + "", name: benevole.fullname, img: "benevole" };
+        return {
+          id: benevole.id + "",
+          name: benevole.fullname,
+          img: "benevole",
+        };
       });
     },
     autocompleteCompetencesList(): Array<AutocompleteOptions> {
@@ -310,4 +315,10 @@ export default defineComponent({
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.checkbox {
+  align-items: end;
+  display: flex;
+  padding: 8px;
+}
+</style>

src/components/EditeurCreneauGroup.vue

@@ -14,7 +14,7 @@
       </button>
     </div>
 
-    <form v-if="creneauGroup">
+    <div class="editor-body" v-if="creneauGroup">
       <styled-input
         label="Identifiant"
         id="row_id"
@@ -46,7 +46,7 @@
         placeholder="Selectionner un parent"
       >
       </auto-complete-input>
-    </form>
+    </div>
     <div class="empty" v-else>Veuillez selectioner un ligne de creneau.</div>
   </div>
 </template>

src/components/SelectChipInput.vue

@@ -1,15 +1,19 @@
 <template>
   <div class="formcontrol">
-    <label class="formcontrol-label" for="" v-if="optional || label"
-      >{{ label }}
-      <div class="formcontrol-optional" v-if="optional">Optional</div></label
-    >
+    <label class="formcontrol-label" for="" v-if="optional || label">
+      {{ label }}
+      <div class="formcontrol-optional" v-if="optional">Optional</div>
+    </label>
     <div ref="container" class="select-multiple" :class="{ 'select-multiple--expanded': expanded }">
       <div class="select-multiple-value" @click="openDropDown">
         <span v-if="checkedItems.length === 0"></span>
         <div v-for="item of displayedItems" class="chip" :key="item.id">
           <span class="chip-label">{{ item.text }}</span>
-          <button aria-label="Clear" class="chip-remove-btn" @click="toggle(item.index, $event)" />
+          <button
+            aria-label="Clear"
+            class="chip-remove-btn"
+            @click="toggle(item.index, $event)"
+          ></button>
         </div>
         <div v-if="checkedItems.length > maxItemDisplayed" class="chip">
           <div class="chip-label">+{{ checkedItems.length - maxItemDisplayed }}</div>
@@ -90,17 +94,22 @@ export default defineComponent({
     };
   },
   watch: {
-    modelValue: function (val) {
+    modelValue: function () {
       this.updateItems();
     },
   },
   emit: ["update:modelValue"],
   methods: {
+    focus() {
+      if (this.input) {
+        this.input.focus();
+      }
+    },
     toggle(idx: number, e: MouseEvent): void {
       e.stopPropagation();
       this.items[idx].isChecked = !this.items[idx].isChecked;
       this.emitValue();
-      setTimeout(this.input.focus, 100);
+      this.focus();
     },
     emitValue() {
       const values = this.items.filter((o) => o.isChecked).map((o) => o.value);
@@ -128,7 +137,7 @@ export default defineComponent({
     },
     openDropDown: function (e: MouseEvent) {
       this.expanded = true;
-      this.input.focus();
+      this.focus();
       window.addEventListener("click", this.closeDropDown);
       e.stopPropagation();
     },

src/components/date-picker.vue

@@ -190,4 +190,152 @@ export default defineComponent({
   },
 });
 </script>
-<style src="../ds-date-picker/datepicker.css"></style>
+<style>
+.ds-date-input-control {
+  width: 8rem;
+  margin-right: 4px;
+  position: relative;
+}
+.ds-date-input-title {
+  color: #505d74;
+  font-weight: bold;
+  padding-bottom: 4px;
+}
+
+.ds-date-input[type="text"] {
+  all: initial;
+  color: #282e3a;
+  width: 100%;
+  border: none;
+  height: 2.5rem;
+  margin: 0;
+  outline: 0;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  -webkit-transition: 0.1s ease-in-out;
+  transition: 0.1s ease-in-out;
+  font-family: Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
+  line-height: 1.25rem;
+  border-radius: 3px 3px 0 0;
+  background-color: #f7f9fa;
+  -webkit-transition-property: box-shadow, border;
+  transition-property: box-shadow, border;
+  border: none;
+  border-bottom: solid 2px grey;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzE4Mzc4MiI+PHBhdGggZD0iTTIwIDNoLTFWMWgtMnYySDdWMUg1djJINGMtMS4xIDAtMiAuOS0yIDJ2MTZjMCAxLjEuOSAyIDIgMmgxNmMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yem0wIDE4SDRWOGgxNnYxM3oiLz48L3N2Zz4=");
+  background-repeat: no-repeat;
+  background-position: right 8px top 45%;
+  background-size: 20px;
+}
+
+.ds-date-input[type="text"]:focus {
+  border-bottom: solid 2px #255fcc;
+}
+.ds-date-input[type="text"]:focus + .ds-datepicker-container,
+.ds-date-input[type="text"]:hover + .ds-datepicker-container {
+  display: block;
+}
+.ds-datepicker-container {
+  position: absolute;
+  width: 315px;
+  height: 360px;
+  display: none;
+  z-index: 10;
+}
+.ds-datepicker-container.show {
+  display: block;
+}
+.ds-datepicker-container.same-size {
+  width: 100%;
+  height: auto;
+  padding-top: 114%;
+}
+.ds-datepicker-container.right {
+  right: 0px;
+}
+.ds-datepicker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: white;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-template-rows: repeat(8, 1fr);
+  column-gap: 4px;
+  row-gap: 4px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.14);
+  padding: 8px;
+  z-index: 10;
+}
+.ds-datepicker > div {
+  text-align: center;
+  color: #505d74;
+  border-radius: 3px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ds-datepicker-prev:before,
+.ds-datepicker-next:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 35px;
+}
+.ds-datepicker-prev:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTE0LjcxIDYuNzFhLjk5Ni45OTYgMCAwMC0xLjQxIDBMOC43MSAxMS4zYS45OTYuOTk2IDAgMDAwIDEuNDFsNC41OSA0LjU5YS45OTYuOTk2IDAgMTAxLjQxLTEuNDFMMTAuODMgMTJsMy44OC0zLjg4Yy4zOS0uMzkuMzgtMS4wMyAwLTEuNDF6IiBmaWxsPSIjMTgzNzgyIi8+PC9zdmc+");
+}
+.ds-datepicker-next:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHdpZHRoPSIyNCI+PHBhdGggZD0iTTkuMjkgNi43MWEuOTk2Ljk5NiAwIDAwMCAxLjQxTDEzLjE3IDEybC0zLjg4IDMuODhhLjk5Ni45OTYgMCAxMDEuNDEgMS40MWw0LjU5LTQuNTlhLjk5Ni45OTYgMCAwMDAtMS40MUwxMC43IDYuN2MtLjM4LS4zOC0xLjAyLS4zOC0xLjQxLjAxeiIgZmlsbD0iIzE4Mzc4MiIvPjwvc3ZnPg==");
+}
+.ds-datepicker > div:not(.ds-datepicker-weekday):not(.ds-disable) {
+  cursor: pointer;
+}
+.ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):hover {
+  background: #f0f4f6;
+  color: #505d74;
+}
+.ds-datepicker > div:not(.ds-disable):not(.ds-datepicker-weekday):focus {
+  border: solid 2px #255fcc;
+  border-radius: 0px;
+}
+.ds-datepicker > div.ds-selected:not(.ds-disable):not(.ds-datepicker-weekday) {
+  background: #063b9e;
+  color: #fff;
+  font-weight: bold;
+}
+.ds-datepicker-current {
+  grid-column: 2 / 7;
+  font-weight: bold;
+}
+div.ds-datepicker-weekday {
+  grid-column: 1 / 8;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  cursor: initial;
+}
+.ds-datepicker-weekday > div {
+  text-align: center;
+  color: #c1c7d3;
+}
+.ds-datepicker > .ds-today {
+  border: solid 2px #063b9e;
+  font-weight: bold;
+  color: #063b9e;
+}
+.ds-datepicker .ds-disable,
+.ds-datepicker .ds-out {
+  color: #c1c7d3;
+}
+.ds-datepicker > .ds-disable {
+  cursor: not-allowed;
+}
+</style>

src/utils/toast.css

@@ -68,4 +68,20 @@
 }
 .toast.error::after{
   background-color: #b60022;
+}
+
+.toast.warning{
+  color: #282e3a;
+  background-color: #fbca32;
+}
+.toast.warning::after{
+  background-color: #fabd00;
+}
+
+.toast.success{
+  color: #282e3a;
+  background-color: #08875b;
+}
+.toast.success::after{
+  background-color: #097350;
 }

src/views/Home.vue

@@ -14,7 +14,7 @@
         :modelValue="evenement.start"
         @input="dateListener($event, 'start')"
       />
-
+      <datepicker />
       <styled-input label="Fin" :modelValue="evenement.end" @input="dateListener($event, 'end')" />
 
       <div class="actions" style="text-align: center">
@@ -50,8 +50,9 @@ import { MutationTypes } from "@/store/Mutations";
 import dayjs from "dayjs";
 import { defineComponent } from "vue";
 import styledInput from "../components/input.vue";
+import datepicker from "../components/date-picker.vue";
 export default defineComponent({
-  components: { styledInput },
+  components: { styledInput, datepicker },
   computed: {
     evenement(): Evenement {
       return this.$store.state.evenement;

src/views/Planning.vue

@@ -304,25 +304,25 @@ export default defineComponent({
     this.timeline.addEvents(this.eventList);
     this.timeline.setLegendUnitFormat("d", "dddd D MMMM");
     this.timeline.customStyle = `.bubble{
-    height: 20px;
-    width: 20px;
+    height: 19px;
+    width: 19px;
     display: flex;
     justify-content: center;
     align-items: center;
     position: absolute;
-    right: -4px;
-    bottom: -4px;
+    right: -5px;
+    bottom: -5px;
     border-radius: 50%;
     font-size: 12px;
     font-weight: bold;
     z-index:10;
-    background: green;
+    background: #08875b;
 }
 .bubble.red{
-    background: red;
+    background: #e4002b;
 }
 .bubble.orange{
-    background: orange;
+    background: #fbca32;
 }`;
     this.timeline.clearSelectedItems();
   },