start

assets/app.js

@@ -0,0 +1,11 @@
+/*
+ * Welcome to your app's main JavaScript file!
+ *
+ * We recommend including the built version of this JavaScript file
+ * (and its CSS file) in your base layout (base.html.twig).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+
+// start the Stimulus application
+import './bootstrap';

assets/bootstrap.js

@@ -0,0 +1,11 @@
+import { startStimulusApp } from '@symfony/stimulus-bridge';
+
+// Registers Stimulus controllers from controllers.json and in the controllers/ directory
+export const app = startStimulusApp(require.context(
+    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
+    true,
+    /\.[jt]sx?$/
+));
+
+// register any custom, 3rd party controllers here
+// app.register('some_controller_name', SomeImportedController);

assets/controllers.json

@@ -0,0 +1,4 @@
+{
+    "controllers": [],
+    "entrypoints": []
+}

assets/controllers/hello_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+
+/*
+ * This is an example Stimulus controller!
+ *
+ * Any element with a data-controller="hello" attribute will cause
+ * this controller to be executed. The name "hello" comes from the filename:
+ * hello_controller.js -> "hello"
+ *
+ * Delete this file or adapt it for your use!
+ */
+export default class extends Controller {
+    connect() {
+        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
+    }
+}

assets/styles/_add-flash.scss

@@ -0,0 +1,24 @@
+.add-flash{
+  &-form-warning{
+    width: 100%;
+    background-color: indianred;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 65px !important;
+    border-radius: 5px;
+    font-size: 25px;
+  }
+  &-success{
+    width: 100%;
+    background-color: lightgreen;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 65px !important;
+    border-radius: 5px;
+    font-size: 25px;
+  }
+}

assets/styles/_footer.scss

@@ -0,0 +1,7 @@
+.footer{
+  min-height: 5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: grey;
+}

assets/styles/_global.scss

@@ -0,0 +1,21 @@
+.crud{
+  &-bool-form{
+    label{
+      &:hover{
+        cursor: pointer;
+      }
+    }
+  }
+  &-collection{
+    display: flex;
+    flex-wrap: wrap;
+    &-item{
+      background-color: #333;
+      color: white;
+      border-radius: 3px;
+      padding: 3px;
+      border: 1px double #333;
+      margin: 1px;
+    }
+  }
+}

assets/styles/_header.scss

@@ -0,0 +1,43 @@
+.header{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: rgb(51, 0, 61);
+  color:white;
+  min-height : 7rem;
+
+  &-logo{
+    margin:1rem;
+    a{
+      img {
+        width: 200px;
+        height: 100%;
+        object-fit: contain;
+      }
+    }
+    &-nav{
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-content: center;
+    }
+  }
+  &-deconnexion{
+    float: right;
+    border-radius: 10px;
+    border: 2px solid white;
+
+    margin-right: 1rem;
+    &:hover{
+      background-color: white;
+    }
+    a{
+      color: white;
+      padding: 0 1rem;
+      &:hover{
+        text-decoration: none;
+        color: steelblue;
+      }
+    }
+  }
+}

assets/styles/_sidebar.scss

@@ -0,0 +1,73 @@
+.sidebar{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 0 0 12%;
+  min-height:100vh;
+  box-shadow: 5px 0 10px grey;
+  background-color: #333;
+  .divider{
+    height: 2px;
+    width: 100%;
+    background-color: dimgray;
+    margin: 12px 0 ;
+  }
+  &-logo{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  &-header{
+    img{
+      width: 100%;
+    }
+  }
+  a{
+    text-decoration: none;
+    &.active{
+      background-color: white;
+      border-radius: 5px;
+      color: dimgray;
+      box-shadow: 3px 3px 3px grey;
+    }
+  }
+  &-content{
+    width: 90%;
+    p{
+      color: #313131;
+      font-weight: 800;
+      font-size: 1.2em;
+      width: 100%;
+      text-align: center;
+      background-color: white;
+      border-radius: 0 6px;
+    }
+    & ul{
+      padding-left: 0;
+      & li {
+        list-style: none;
+        &.active{
+          background-color: rgba(255,255,255,0.5);
+          border-radius: 3px;
+          a{
+            color: #313131;
+            font-weight: 500;
+          }
+
+        }
+        & a{
+          padding:0.5rem 1.5rem;
+          font-size: 1.1em;
+          display: block;
+          color:white;
+          &:hover{
+            color: #313131;
+            background-color: rgba(255,255,255,0.5);
+            border-radius: 3px;
+          }
+        }
+      }
+    }
+  }
+}

assets/styles/common/_fonts.scss

@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Helvetica:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap');

assets/styles/common/_login.scss

@@ -0,0 +1,13 @@
+.login-wrapper{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 600px;
+}
+
+.login{
+  border: 1px solid grey;
+  border-radius: 5px;
+  box-shadow: 2px 2px 2px grey;
+  padding: 30px;
+}

assets/styles/main.scss

@@ -0,0 +1,45 @@
+@import './header', './footer', './sidebar', 'common/login', 'add-flash';
+@import './global';
+@import '~bootstrap/scss/bootstrap';
+@import '~bootstrap/scss/bootstrap-utilities';
+@import 'tom-select/dist/scss/tom-select.bootstrap5';
+
+
+.special{
+  font-size: 50px;
+}
+.page-container {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  a:hover{
+    text-decoration: none;
+  }
+  &-content{
+    width: 100%;
+    margin:2rem;
+  }
+}
+
+label.custom-file-label{
+  &:after{
+    content: "Parcourir";
+  }
+}
+.breadcrumb{
+  justify-content: space-between;
+  align-items: center;
+
+  &-first{
+    &-title{
+      font-size: 1.4rem;
+      font-weight: 600;
+      color: steelblue;
+    }
+  }
+  &-second{
+    ol{
+      margin-bottom: 0;
+    }
+  }
+}

assets/styles/utils/utils.scss

@@ -0,0 +1,6 @@
+@import "~fontawesome-free/webfonts/fa-solid-900.eot";
+@import "~fontawesome-free/webfonts/fa-solid-900.woff2";
+@import "~fontawesome-free/webfonts/fa-solid-900.woff";
+@import "~fontawesome-free/webfonts/fa-solid-900.ttf";
+@import "~fontawesome-free/webfonts/fa-solid-900.svg";
+@import "~fontawesome-free/scss/solid.scss";