approve and team create

Arkadius-WD · Oct 27, 2023 · 65460c8 · 65460c8
1 parent a56a831
commit 65460c8
Show file tree

Hide file tree

Showing 24 changed files with 258 additions and 27 deletions.
diff --git a/dist/approvals.html b/dist/approvals.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>
@@ -145,7 +145,66 @@
             <h2>Approvals</h2>
           </div>
         </header>
-        <div class="calendar-window window"></div>
+        <div class="approval window">
+          <div class="approvals">
+            <h3>Project #0015</h3>
+            <ul class="approvals__container">
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 1</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Olivia Braun</p>
+                  <img src="./assets/4-4c5bd68c.jpeg" alt="avatar" />
+                </div>
+              </li>
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 2</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Emma Smith</p>
+                  <img src="./assets/5-01d5527f.jpeg" alt="avatar" />
+                </div>
+              </li>
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 3</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Liam Johnson</p>
+                  <img src="./assets/6-b7d0e6de.jpg" alt="avatar" />
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="approvals">
+            <h3>Project #0016</h3>
+            <ul class="approvals__container">
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 1</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Emma Smith</p>
+                  <img src="./assets/5-01d5527f.jpeg" alt="avatar" />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
       </section>
       <section class="comunicator">
         <div class="talks talks-hidden">

diff --git a/dist/assets/1-f461cdf1.jpg b/dist/assets/1-f461cdf1.jpg
diff --git a/dist/assets/2-912f0f8a.jpg b/dist/assets/2-912f0f8a.jpg
diff --git a/dist/assets/3-33d58c6f.jpg b/dist/assets/3-33d58c6f.jpg
diff --git a/dist/assets/4-4c5bd68c.jpeg b/dist/assets/4-4c5bd68c.jpeg
diff --git a/dist/assets/5-01d5527f.jpeg b/dist/assets/5-01d5527f.jpeg
diff --git a/dist/assets/6-b7d0e6de.jpg b/dist/assets/6-b7d0e6de.jpg
diff --git a/dist/assets/index-21b70a9a.css → dist/assets/index-bc30aaf2.css b/dist/assets/index-21b70a9a.css → dist/assets/index-bc30aaf2.css
diff --git a/dist/assets/main-64d467c2.js → dist/assets/main-7700b10d.js b/dist/assets/main-64d467c2.js → dist/assets/main-7700b10d.js
diff --git a/dist/budget.html b/dist/budget.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/dist/calendar.html b/dist/calendar.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/dist/files.html b/dist/files.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/dist/git.html b/dist/git.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/dist/history.html b/dist/history.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/dist/home.html b/dist/home.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/dist/index.html b/dist/index.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
   <body>
     <section class="start">

diff --git a/dist/portfolio.html b/dist/portfolio.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/dist/teams.html b/dist/teams.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>
@@ -145,7 +145,32 @@
             <h2>Teams</h2>
           </div>
         </header>
-        <div class="calendar-window window"></div>
+        <div class="teams-window window">
+          <div class="avatar">
+            <img src="./assets/1-f461cdf1.jpg" alt="avatar" />
+            <p>Memeber 1</p>
+          </div>
+          <div class="avatar">
+            <img src="./assets/2-912f0f8a.jpg" alt="avatar" />
+            <p>Memeber 2</p>
+          </div>
+          <div class="avatar">
+            <img src="./assets/3-33d58c6f.jpg" alt="avatar" />
+            <p>Memeber 3</p>
+          </div>
+          <div class="avatar">
+            <img src="./assets/4-4c5bd68c.jpeg" alt="avatar" />
+            <p>Memeber 4</p>
+          </div>
+          <div class="avatar">
+            <img src="./assets/5-01d5527f.jpeg" alt="avatar" />
+            <p>Memeber 5</p>
+          </div>
+          <div class="avatar">
+            <img src="./assets/6-b7d0e6de.jpg" alt="avatar" />
+            <p>Memeber 6</p>
+          </div>
+        </div>
       </section>
       <section class="comunicator">
         <div class="talks talks-hidden">

diff --git a/dist/todo.html b/dist/todo.html
@@ -14,8 +14,8 @@
       crossorigin="anonymous"
       defer
     ></script>
-    <script type="module" crossorigin src="./assets/main-64d467c2.js"></script>
-    <link rel="stylesheet" href="./assets/index-21b70a9a.css">
+    <script type="module" crossorigin src="./assets/main-7700b10d.js"></script>
+    <link rel="stylesheet" href="./assets/index-bc30aaf2.css">
   </head>
 
   <body>

diff --git a/src/approvals.html b/src/approvals.html
@@ -143,7 +143,66 @@
             <h2>Approvals</h2>
           </div>
         </header>
-        <div class="calendar-window window"></div>
+        <div class="approval window">
+          <div class="approvals">
+            <h3>Project #0015</h3>
+            <ul class="approvals__container">
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 1</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Olivia Braun</p>
+                  <img src="./img/avatars/4.jpeg" alt="avatar" />
+                </div>
+              </li>
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 2</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Emma Smith</p>
+                  <img src="./img/avatars/5.jpeg" alt="avatar" />
+                </div>
+              </li>
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 3</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Liam Johnson</p>
+                  <img src="./img/avatars/6.jpg" alt="avatar" />
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="approvals">
+            <h3>Project #0016</h3>
+            <ul class="approvals__container">
+              <li class="approvals__approval">
+                <div class="approvals__approval-icon">
+                  <i class="fa-regular fa-thumbs-up"></i>
+                </div>
+                <div class="approvals__approval-title">
+                  <p>Approval 1</p>
+                </div>
+                <div class="approvals__approval-project">
+                  <p>Emma Smith</p>
+                  <img src="./img/avatars/5.jpeg" alt="avatar" />
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
       </section>
       <section class="comunicator">
         <div class="talks talks-hidden">

diff --git a/src/style/components/_approvals.scss b/src/style/components/_approvals.scss
@@ -0,0 +1,25 @@
+@use '../variables/colors' as *;
+
+.approval {
+  display: flex;
+  flex-wrap: wrap;
+  padding-bottom: 10rem;
+  overflow-y: scroll;
+
+  h3 {
+    width: 16rem;
+  }
+
+  img {
+    width: 4rem;
+    border: 1px solid $second;
+    border-radius: 1rem;
+  }
+
+  .approvals__container {
+    background-color: #fff;
+    margin: 2rem;
+    border-radius: 1rem;
+    border: 1px solid $second;
+  }
+}
diff --git a/src/style/components/_index.scss b/src/style/components/_index.scss
@@ -6,5 +6,7 @@
 @forward 'calendar';
 @forward 'todo';
 @forward 'portfolio';
+@forward 'approvals';
 @forward 'budget';
 @forward 'files';
+@forward 'teams';
diff --git a/src/style/components/_teams.scss b/src/style/components/_teams.scss
@@ -0,0 +1,36 @@
+@use '../variables/colors' as *;
+
+.teams-window {
+  margin-left: 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+
+  .avatar {
+    width: 14rem;
+    height: 14rem;
+    border: 1px solid $second;
+    border-radius: 2rem;
+    transition: all 0.3s;
+    &:hover {
+      border: 1px solid rgba($color: $second, $alpha: 0.5);
+    }
+  }
+
+  img {
+    width: 12rem;
+    height: 12rem;
+    border-radius: 2rem;
+    margin-left: 1rem;
+    padding: 0.5rem;
+    transition: all 0.3s;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+  p {
+    text-align: center;
+    color: $fifth;
+  }
+}
diff --git a/src/teams.html b/src/teams.html
@@ -143,7 +143,32 @@
             <h2>Teams</h2>
           </div>
         </header>
-        <div class="calendar-window window"></div>
+        <div class="teams-window window">
+          <div class="avatar">
+            <img src="./img/avatars/1.jpg" alt="avatar" />
+            <p>Memeber 1</p>
+          </div>
+          <div class="avatar">
+            <img src="./img/avatars/2.jpg" alt="avatar" />
+            <p>Memeber 2</p>
+          </div>
+          <div class="avatar">
+            <img src="./img/avatars/3.jpg" alt="avatar" />
+            <p>Memeber 3</p>
+          </div>
+          <div class="avatar">
+            <img src="./img/avatars/4.jpeg" alt="avatar" />
+            <p>Memeber 4</p>
+          </div>
+          <div class="avatar">
+            <img src="./img/avatars/5.jpeg" alt="avatar" />
+            <p>Memeber 5</p>
+          </div>
+          <div class="avatar">
+            <img src="./img/avatars/6.jpg" alt="avatar" />
+            <p>Memeber 6</p>
+          </div>
+        </div>
       </section>
       <section class="comunicator">
         <div class="talks talks-hidden">