fix : recorded class page

RCSS-IR · Feb 20, 2024 · e3560d2 · e3560d2
1 parent db1e43c
commit e3560d2
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 66 deletions.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -12,10 +12,15 @@
       name: "طرح درس",
       url: "/outline",
     },
+    {
+      name: "کلاس های ضبط شده",
+      url: "/recorded-class", 
+    },
     {
       name: "درباره‌ی ما",
       url: "/about",
     },
+
   ];
 
   let leftLinks = [

diff --git a/src/lib/components/Register.svelte b/src/lib/components/Register.svelte
@@ -473,15 +473,14 @@
   }
 
   .main-container {
-    @apply relative flex flex-col items-center rounded-none md:rounded-3xl p-2 md:p-5 drop-shadow-md;
-    background-image: url("/img/morteza-bg.jpg");
+    @apply relative flex bg-gray-600 flex-col items-center rounded-none md:rounded-3xl p-2 md:p-5 drop-shadow-md;
     height: 500px;
     width: 100%;
     transition: height 200ms ease-in-out;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    background-color: rgba(255, 255, 255, 0.5);
+    background-color: rgba(113, 112, 112, 0.5);
 
     .form-container {
       @apply bg-white bg-opacity-50 rounded-3xl p-5 text-gray-700 shadow-2xl;
@@ -540,9 +539,8 @@
     top: 0;
     left: 0;
     z-index: 100;
-    background-image: url("/img/morteza-bg-blur.jpg");
     border-radius: 0;
-    @apply flex flex-col gap-4 justify-center items-center;
+    @apply flex flex-col bg-gray-600 gap-4 justify-center items-center;
 
     .form-container {
       @apply bg-gray-200 bg-opacity-90 rounded-md p-5 text-gray-700 shadow-2xl;

diff --git a/src/lib/icons/YoutubeIcon.svelte b/src/lib/icons/YoutubeIcon.svelte
@@ -1,3 +1,12 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
-    <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"/>
-  </svg>
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="25"
+  height="25"
+  fill="currentColor"
+  class="bi bi-youtube"
+  viewBox="0 0 16 16"
+>
+  <path
+    d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z"
+  />
+</svg>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,7 +10,7 @@
   import Faq from "$lib/components/Faq.svelte";
   import Footer from "$lib/components/Footer.svelte";
   import IntroVideo from "$lib/components/IntroVideo.svelte";
-  import ClassVideoLink from "$lib/components/ClassVideoLink.svelte";
+  import ClassVideoLink from "./recorded-class/+page.svelte";
   import When from "$lib/components/When.svelte";
 </script>
 
@@ -27,7 +27,6 @@
   <Features />
   <Path />
   <Register />
-  <ClassVideoLink />
   <Organizer />
   <Faq />
   <Footer />

diff --git a/src/lib/components/ClassVideoLink.svelte → src/routes/recorded-class/+page.svelte b/src/lib/components/ClassVideoLink.svelte → src/routes/recorded-class/+page.svelte
@@ -1,13 +1,20 @@
 <script>
   import YoutubeIcon from "$lib/icons/YoutubeIcon.svelte";
+  import SectionTitle from "$lib/components/SectionTitle.svelte";
+  import Header from "$lib/components/Header.svelte";
+  import Footer from "$lib/components/Footer.svelte";
   export let sessions = [
     {
       title: " جلسه اول",
       sessiontitle: "مقدمه و آشنایی",
       description: "در این جلسه به آشنایی با دوره می پردازیم",
       youtubeLink: "https://youtu.be/y89kXYZeXJ4?si=H_4m-ssvMjXMiff0",
       members: [
-        { name: "نادر زارع ", role: "عضو کمیته جهانی ربوکاپ", image: "/img/people/nader-zare.jpg" },
+        {
+          name: "نادر زارع ",
+          role: "عضو کمیته جهانی ربوکاپ",
+          image: "/img/people/nader-zare.jpg",
+        },
         {
           name: "اشکان کشاورزی",
           role: "مسئول کمیته فنی ایران",
@@ -68,81 +75,112 @@
         },
       ],
     },
+    {
+      title: " جلسه پنجم الی شانزدهم",
+      sessiontitle: "هنوز ادامه داره ",
+      youtubeLink: "https://www.youtube.com/@RCSS2D",
+      members: [
+
+      ],
+    },
   ];
 </script>
-
+<Header></Header>
+<SectionTitle title="کلاس ها"></SectionTitle>
 {#each sessions as session (session.title)}
-  <div class="container" dir="rtl">
-    <div class="flex" style="float: left;">
-      <div class="session-members">
-        {#each session.members as member}
-          <div class="member d-flex flex-column align-items-center position-relative">
-            <div class="image" style="transform: scale(1);">
-              <div class="overlay"></div>
-              <img src={member.image} class="img-fluid d-block" alt="{member.name}'s image" />
-            </div>
-            <h6 class="name">
-              {member.name}
-            </h6>
-            <p class="role">
-              {member.role}
-            </p>
-          </div>
-        {/each}
-      </div>
-    </div>
-
+  <div class="container">
     <div class="content">
-      <div class="title">{session.title}</div>
-      <div class="sessiontitle" style="position:relative;  top:10px">{session.sessiontitle}</div>
+      <div class="title">
+        {session.title}
+        <div class="sessiontitle" style="position:relative;  top:10px">
+          {session.sessiontitle}
+        </div>
+      </div>
 
-      <div class="youtube-link" style="position:relative;  top:100px">
-        <div class="icon"><svelte:component this={YoutubeIcon} /></div>
-        <div class="big" style="position:relative;  right:20px">
-          <a href={session.youtubeLink}>مشاهده در یوتیوب</a>
+      <div class="explain-content">
+        <div class="youtube-link">
+          <div class="icon">
+            <svelte:component this={YoutubeIcon} />
+          </div>
+          <div class="big" style="position:relative;  right:20px">
+            <a href={session.youtubeLink}>مشاهده در یوتیوب</a>
+          </div>
         </div>
       </div>
+
+    </div>
+    <div class="session-members" dir="ltr">
+      {#each session.members as member}
+        <div
+          class="member d-flex flex-column align-items-center position-relative"
+        >
+          <div class="image" style="transform: scale(1);">
+            <div class="overlay"></div>
+            <img
+              src={member.image}
+              class="img-fluid d-block"
+              alt="{member.name}'s image"
+            />
+          </div>
+          <h6 class="name">
+            {member.name}
+          </h6>
+          <p class="role">
+            {member.role}
+          </p>
+        </div>
+      {/each}
     </div>
   </div>
 {/each}
 
+<Footer></Footer>
+
 <style lang="scss">
   .container {
-    @apply bg-white p-7 rounded-lg shadow-lg  mb-4;
+    @apply flex bg-white p-7 rounded-lg shadow-lg  mb-4;
+    justify-content: space-between;
   }
 
   .session-members {
     @apply flex items-start mb-4;
+    direction: rtl;
   }
-
   .session-member {
-    @apply inline-block w-32 h-40 rounded-lg overflow-hidden m-2; // Increase size to 20x20
+    @apply flex inline-block w-32 h-40 rounded-lg overflow-hidden m-2;
+    flex-direction: row;
+    // Set the session-members direction to LTR
+    // Increase size to 20x20
   }
 
   .content {
-    @apply ml-4;
-  }
-
-  .title {
-    @apply text-2xl font-bold text-green-700 mb-2;
-  }
-
-  .sessiontitle {
-    @apply text-xl text-gray-600 mb-4;
-  }
-
-  .youtube-link {
-    @apply flex flex-row  gap-2;
-    .icon {
-      text-align: right;
-      color: rgb(180, 9, 9);
-      width: 5px;
-      height: 5 px;
+    @apply flex ml-4;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .explain-content {
+      @apply flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .youtube-link {
+        @apply flex flex-row  gap-0;
+        .icon {
+          display: flex;
+          color: rgb(180, 9, 9);
+        }
+
+        .big {
+          @apply flex text-sm underline;
+        }
+      }
     }
-
-    .big {
-      text-align: left;
-      @apply text-sm underline;
+    .title {
+      @apply flex text-2xl font-bold text-green-700 mb-2;
+      flex-direction: column;
+      .sessiontitle {
+        @apply flex text-xl text-gray-600 mb-4;
+      }
     }
   }
 
@@ -154,9 +192,7 @@
   }
 
   .member .image {
-    position: relative;
-    top: 0;
-    left: 0;
+    display: flex;
     padding-top: 125%;
     width: 100%;
     overflow: hidden;