Luke's work

src/scss/groupsList.css

@@ -0,0 +1,30 @@
+#groupsList {
+    display: flex;
+    flex-direction: column;
+}
+
+#groupsList>ldp-display {
+    display: flex;
+    flex-direction: row;
+}
+
+#groupsList ul {
+    display: inline-flex;
+}
+
+#groupsList>ldp-display .title {
+    font-family:
+}
+
+
+/* TEST */
+#groupsList>ldp-display {
+    border: 1px dashed royalblue;
+
+}
+#groupsList ul {
+    border: 3px solid green;
+}
+#groupsList .title {
+    border: 3px solid blueviolet;
+}

src/scss/home.css

@@ -0,0 +1,19 @@
+#home {
+  height: 100%;
+}
+
+#logoContainer {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+#logoContainer>img {
+  transition: transform .4s;
+}
+
+#logoContainer>img:hover {
+  transform: scale(1.5);
+}
+/* MEDIA QUERY Pour centrer sur un petit écran */

src/scss/members.css

@@ -0,0 +1,77 @@
+#profilesList {
+  display: flex; 
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  max-width: fit-content;
+}
+
+.miniature {
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  background-color: #eee;
+  margin: 10px;
+  border: 1px solid #ddd;
+  border-radius: 3px 3px 15px 15px;
+  /* border-radius: 15px 15px 3px 3px; */
+  transition: all .3s;
+}
+
+.miniature:hover {
+  box-shadow: 0 0 12px rgba(51, 51, 51, .2);
+  cursor: pointer;
+}
+
+.miniature .picture {
+  width: 150px;
+  display: block;
+  /* border-radius: 50%; */
+}
+
+.miniature .name {
+  padding-top: 15px;
+  text-align: center;
+  font-size: 20px;
+}
+
+
+/* Profil Modal */
+#profileDiv {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(51, 51, 51, 0.8);
+  display: none;
+  justify-content: center;
+  align-items: center;
+  z-index: 1100;
+}
+
+#profileDetail {
+  background-color: white;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 3px 3px 15px 15px;
+}
+
+.profile-content {
+  padding: 10px;
+  text-align: center;
+}
+
+.profile-content ldp-display-div {
+  display: flex;
+  flex-direction: column;
+}
+
+#profileDetail .picture {
+  width: 300px;
+  height: 300px;
+  border-radius: 50%;
+}
+
+#profileDetail .name {
+  font-size: 24px;
+  color: aqua;
+}

src/scss/menu.css

@@ -0,0 +1,100 @@
+.menu ldp-route {
+    display: block;
+    font-size: 1.2em;
+    text-decoration: none;
+    line-height: 2.5em;
+    color: #666;
+    padding: 0.5em;
+    margin: auto;
+    padding-left: 20px;
+    transition: background-color 0.3s;
+    position: relative;
+}
+
+/* Fait office de border-bottom */
+
+.menu ldp-route::after {
+    content: "";
+    background: #f1f1f1;
+    position: absolute;
+    bottom: -1px;
+    left: 10px;
+    width: 80%;
+    height: 1px;
+}
+
+.menu ldp-route:hover {
+    cursor: pointer;
+    color: #000;
+    background-color: darkgrey;
+}
+.menu ldp-route[active] {
+    cursor: pointer;
+    /* color: #000; */
+    background-color: aliceblue;
+}
+
+.menu ldp-route:hover {
+    cursor: pointer;
+    color: #000;
+    background-color: darkgrey;
+}
+
+.menu {
+    border-right: 0.5px solid #ccc;
+    max-width: 275px;
+    min-width: 125px;
+    padding: 0;
+}
+
+.menu ldp-router {
+    padding: 10px 0;
+}
+
+#menu-title {
+    font-size: 2em;
+    /* margin-left: 10px; */
+    /* pas top centrer sur peite largeur, comment faire sans margin-left ? */
+    margin-right: 2px;
+    font-weight: bold;
+    font-family: 'Righteous', cursive;
+    display: flex;
+    justify-content: center;
+}
+
+#menu-placeholder {
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    margin: 25px 10px 0 10px;
+    background-color: #666666;
+}
+
+@media only screen and (max-width: 767px) {
+    #menu-placeholder {
+        display: none;
+    }
+    .menu {
+        border-right: none;
+        max-width: none;
+    }
+    .menu ldp-router {
+        display: flex;
+        flex-wrap: wrap;
+        padding: 0;
+    }
+    .menu ldp-route {
+        padding-left: 0.5em;
+    }
+    ldp-route:hover,
+    .used {
+        background: transparent;
+    }
+}
+
+@media only screen and (max-height: 800px) and (min-width: 767px) {
+    .menu ldp-route {
+        padding: 0;
+        padding-left: 20px;
+    }
+}

src/scss/project.css

@@ -0,0 +1,68 @@
+#projectLeftCol, #projectRightCol {
+    display: flex;
+}
+
+#projectLeftCol {
+    /* float: left; */
+    padding-left: 0;
+}
+
+#projectRightCol {
+    /* float: right; */
+    /* padding: 0; */
+    border: 1px solid;
+}
+
+#projectTitle {
+    display: block;
+    max-width: fit-content;
+    /* pourquoi de la marge à droite ? */
+}
+
+#projectTitle>ldp-display-div {
+    font-size: 2.5rem;
+    line-height: 1.1;
+    font-weight: 400;
+    margin-bottom: 20px;
+    font-family: 'Righteous', cursive;
+    display: inline-block;
+    position: relative
+}
+
+/* Fait office de "text-decoration-line: underline" */
+/* #projectTitle>.title::after { */
+#projectTitle>ldp-display-div::after {
+    content: "";
+    background: #292A2B;
+    position: absolute;
+    bottom: 2px;
+    width: 100%;
+    height: 4px;
+}
+
+#projectDetail .income-div, #projectDetail .quotation-div {
+    display: flex;
+}
+
+.chat-box {
+    border: 1px solid #FCC721;
+    width: inherit;
+    /* max-width: 1000px; */
+    display: flex;
+    overflow: hidden;
+}
+
+#projectDivBackButton {
+    height: fit-content;
+}
+
+
+/* TEST */
+
+/* #projectDetail .project-title {
+    background-color: plum;
+}
+
+#projectDetail .right-panel {
+    background-color: chartreuse;
+} */

src/scss/projectsList.css

@@ -0,0 +1,83 @@
+/* For smaller overall projects list */
+#projectsTable {
+  max-width: 1222px;
+}
+
+#projectsTable ol, #projectsList>ldp-display {
+  display: flex;
+  justify-content: space-around;
+  border-width: 0px 2px 2px 2px; /* no border-top, except for "ol" */
+  border-style: solid;
+  border-color: black;
+}
+
+#projectsTable ol {
+  border-width: 2px;
+  background-color: darkgrey;
+  margin-bottom: 0 !important;
+}
+
+#projectsTable ol li , #projectsList>ldp-display>ldp-display-div {
+  display: flex;
+  border-right: 2px solid black;
+  /* border-left: 1px solid red; */
+}
+
+#projectsList .income-div {
+    border-right: 2px solid black;
+}
+
+#projectsList ldp-display>.income-div>ldp-display-div {
+    display: inline-block;
+}
+
+/* Acceptable, mais j'aimerais écrire autrement les sélecteurs. écrire en une fois les 2 "projectList..." */
+#projectsTable ol li, #projectsList ldp-display>ldp-display-div, #projectsList ldp-display>.income-div {
+    padding-left: 0.5vw;
+}
+
+#projectsTable #categorieNumber, #projectsTable #categorieNumberAlt, #projectsList .number {
+  width: 10%;
+}
+#projectsTable #categorieTitle, #projectsList .title {
+  width: 40%;
+}
+#projectsTable #categorieAssociate, #projectsList .associate {
+  width: 20%;
+}
+#projectsTable #categorieIncome, #projectsList .income-div {
+  width: 15%;
+}
+#projectsTable #categorieState, #projectsList .state {
+  width: 15%;
+  border-right: none;
+}
+
+/* Interaction et tout */
+
+#projectsList>ldp-display:nth-child(odd) {
+  background-color: aliceblue;
+}
+
+#projectsList>ldp-display:hover {
+  cursor: pointer;
+  /* background-color: #0080FF; */
+  background-color: #FFF700;
+}
+
+#projectsList>ldp-display {
+  transition: background-color 0.3s;
+}
+
+#projectsTable [id*="Alt"] {
+  display: none;
+}
+
+@media only screen and (max-width: 767px) {
+  #projectsTable #categorieNumber {
+    display: none;
+  }
+  #projectsTable #categorieNumberAlt {
+    display: flex;
+  }
+}

src/scss/styles.scss

@@ -0,0 +1,20 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #mainContainer {
+  height: 100%;
+}
+
+.page-title {
+  font-size: 2.5rem;
+  margin-bottom: 20px;
+  font-family: 'Righteous', cursive;
+  text-decoration-line: underline;
+}
+
+#ldp-root {
+  padding-right: 0;
+}