Journal Paper retouc

page-template/page-journal.php

@@ -40,457 +40,539 @@ get_header(); ?>
 
 ?>
     <main id="main" class="site-main" role="main">
-        <div class="">
-            <section class="container-fluid">
-                <div class="banner-img-holder">
-                    <div class="banner-overlay">
+
+        <section id="archive-hero">
+
+            <div class="container">
+
+                <!-- breadcrumb -->
+                <nav aria-label="breadcrumb">
+                    <ul>
+                        <li><a href="#"> Home </a></li>
+                        <li><a href="#">Research</a></li>
+                        <li>Journal Paper</li>
+                    </ul>
+                </nav>
+
+                <div class="content">
+
+                    <!-- left content -->
+                    <div class="left-content">
+
+                        <div class="main-title">Journal Paper</div>
+
+                        <div class="short-details">
+                            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor ducimus eius magni non.
+                        </div>
+
+                        <div class="links">
+
+                            <!-- message -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/envelope-solid.svg" alt="">
+                            </a>
+
+                            <!-- printer -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/print-solid.svg" alt="">
+                            </a>
+
+                            <!-- facebook -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/facebook-f.svg" alt="">
+                            </a>
+
+                            <!-- twitter -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/twitter.svg" alt="">
+                            </a>
+
+                            <!-- linkedin -->
+                            <a href="#">
+                                <img src="<?php echo (get_template_directory_uri()) ?>/img/linkedin-in.svg" alt="">
+                            </a>
+
+                        </div>
 
                     </div>
-                    <img class="banner-img" src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
-                    <div class="banner-title">
-                        <h1>
-                            Research at <br> Department of <br>
-                            Computer Science &amp; Engineering
-                        </h1>
+
+                    <!-- right content -->
+                    <div class="right-content">
+                        <img src="<?php echo (get_template_directory_uri()) ?>/img/journal-paper.jpg" alt="">
                     </div>
-                </div>
-            </section>
 
-            <section id="breadcrumb" class="container">
-                <div>
-                    <span class="crumbs">Department of CSE > Research > Journals</span>
                 </div>
-            </section>
+            </div>
 
-        </div>
 
-        <div class="row container">
-            <div class="col-md-3 col-sidebar">
 
-                <div class="generic-para sidebar-links">
-                    <h3>Research</h3>
-                    <ul>
-                        <li><a href="#">Conference Papers</a></li>
-                        <li class="active"><a href="#">Journals</a></li>
-                        <li><a href="#">Journals</a></li>
-                        <li><a href="#">Journals</a></li>
-                        <li><a href="#">Journals</a></li>
-                    </ul>
+        </section>
+
+
+
+
+        <div class="container">
+
+            <section id="resarch-paper-container">
+
+
+                <!-- side component -->
+                <div class="side-comp">
+
+                    <div class="filter">
+
+                        <!-- title -->
+                        <div class="filter-title">
+                            Refine Your Search
+                        </div>
+
+                        <div class="filter-criteria">
+
+                            <h6>Year :</h6>
+                            <form id="year-input" action="">
+
+                            </form>
+
+
+                            <h6>Author :</h6>
+                            <form id="author-input" action="">
+
+                            </form>
+                        </div>
+
+
+
+
+                    </div>
+
+
                 </div>
 
-            </div>
-            <div class="col-md-9 col-content">
-
-                <div class="sections">
-                    <section id="conference-papers-section" class="container generic-content" data-theme="light">
-                        <div class="generic-para shadowed">
-                            <h3>Journal Papers</h3>
-                            <?php
-                            foreach ($response as $item) {
-                                // Access individual elements of each response
-                                echo "<div class='paper-details'>";
-                                echo "<span class='paper-year'>{$item['Year']}</span>";
-
-                                // Iterate over the JournalList array within each item
-                                foreach ($item['JournalList'] as $journal) {
-                                    // Access individual elements of each journal
-                                    echo "<a href='{$journal['JournalLink']}'>";
-                                    echo "<h2 class='paper-title'>{$journal['PaperTitle']}</h2>";
-                                    echo "</a>";
-                                    echo "<p class='paper-tags'>";
-                                    // $journalKeyword = explode(',', $journal['Keyword']);
-                                    foreach ($journal['KeyWords'] as $keyword) {
-                                        if ($keyword) {
-                                            echo "<span class='tag'>{$keyword}</span>";
-                                        }
-                                    }
-                                    echo "</p>";
-                                    echo "<p class='paper-event'><i>Publication: </i> {$journal['JournalTitle']}</p>";
-                                    echo "<p class='paper-contributors'>";
-                                    echo "<i>Authors: </i>";
-                                    // Iterate over the Author array within each journal
-                                    foreach ($journal['Author'] as $author) {
-                                        // Access individual elements of each author
-                                        $authorName = $author['AuthorName'];
-                                        // Process or output the values as needed
-                                        echo " $authorName,";
-                                    }
-                                    echo "</p>";
-                                }
-                                echo "</div>";
-                            }
-                            ?>
+
+                <!-- main component -->
+                <div class="main-comp">
+
+                    <article class="generic-para ">
+
+
+                        <h3>Conference Papers</h3>
+
+
+                        <div id="conference-paper">
+
+
+
                         </div>
-                    </section>
+
+
+                    </article>
+
+
                 </div>
-            </div>
+
+
+
+            </section>
+
         </div>
+
+
     </main>
     <!-- #main -->
 
 <?php endwhile; // end of the loop.
 ?>
 <style>
-    #fine-print {
-        text-align: center;
-        margin: 10px auto;
-        height: 50px;
-        border-top: 1px solid #F68B1F;
-    }
-
-    #fine-print p {
-        font-size: 12px;
-        display: inline-flex;
+    #archive-hero {
+        padding: 2rem 0;
+        background: #f3f0ec;
     }
 
-    #fine-print ul {
-        display: inline;
-    }
-
-    #fine-print ul>li {
-        display: inline;
-        padding: 10px;
-        font-size: 12px;
-        letter-spacing: 1px;
-    }
-
-    .banner-img-holder {
-        width: 100vw;
-        height: 400px;
-        margin-bottom: 60px !important;
-    }
-
-    .banner-overlay {
-        position: relative;
-        top: 0px;
-        bottom: 0px;
-        height: 400px;
-        width: 100vw;
-        background-color: rgba(50, 52, 63, 0.4588235294);
-        z-index: 1;
-    }
-
-    .banner-img {
-        position: relative;
-        top: -400px;
-        width: 100%;
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
-        filter: greyscale(80%) !important;
-    }
-
-    .banner-title {
-        position: relative;
-        top: -800px;
-        height: 400px;
-        width: 100vw;
-        z-index: 2;
+    #archive-hero .content {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
+        align-items: start;
     }
 
-    .banner-title h1 {
-        margin-top: 50px !important;
-        font-family: "Open Sans", sans-serif;
-        font-weight: 800;
-        line-height: 140%;
-        color: #fff;
-        text-align: center;
-    }
-
-    #breadcrumb {
-        padding-top: 20px;
+    #archive-hero .content .left-content {
+        padding: 1rem;
+        padding-left: 0 !important;
+        flex: 1;
     }
 
-    #breadcrumb div {
-        margin-left: 20px !important;
+    #archive-hero .content .left-content .main-title {
+        font-size: 2.2rem;
+        font-weight: 500;
+        color: #000000;
     }
 
-    .crumbs {
-        font-size: 14px;
+    #archive-hero .content .left-content .short-details {
+        margin-top: 1.5rem;
+        font-size: 1.1rem;
         font-weight: 400;
-        margin: 30px 0px;
-        padding-bottom: 5px;
-        letter-spacing: 2px;
-        color: #333 !important;
-        border-bottom: 1px solid #333;
-    }
-
-    .sidebar-links {
-        margin: 10px 0px !important;
-        border-radius: 4px;
-        border: 1px solid rgba(51, 51, 51, 0.1921568627);
-    }
-
-    .sidebar-links h3 {
-        font-size: 30px !important;
-        font-family: "Open Sans", sans-serif !important;
-        width: 100%;
-        text-align: center !important;
-        text-transform: uppercase;
-        padding-bottom: 15px !important;
-        border-bottom: 1px solid #117cf7 !important;
     }
 
-    .sidebar-links ul li {
-        height: 30px !important;
-        padding: 5px 10px !important;
-        font-size: 14px;
-        list-style: none;
-        border-bottom: 1px solid rgba(51, 51, 51, 0.231372549);
+    #archive-hero .content .left-content .links {
+        margin-top: 2rem;
+        display: flex;
+        gap: 1.8rem;
     }
 
-    .sidebar-links ul li a:link,
-    .sidebar-links ul li a:visited {
-        color: #117cf7;
+    #archive-hero .content .left-content .links a {
+        height: 1.3rem;
     }
 
-    .sidebar-links ul li a:hover {
-        text-decoration: none;
-        color: #333;
+    #archive-hero .content .left-content .links a:hover {
+        transform: scale(1.1);
+        opacity: 1 !important;
     }
 
-    .sidebar-links ul li.active a:link,
-    .sidebar-links ul li.active a:visited {
-        color: #865994;
-        font-weight: 600;
+    #archive-hero .content .left-content .links a img {
+        height: 100%;
     }
 
-    .generic-content-block {
-        padding: 40px 10px !important;
+    #archive-hero .content .right-content {
+        padding: 0 0 1rem 2rem !important;
+        flex: 1;
+        align-self: end;
     }
 
-    .generic-header {
+    #archive-hero .content .right-content img {
         width: 100%;
-        margin: 30px auto !important;
     }
 
-    .generic-header h1 {
-        font-weight: 600;
-        text-align: center;
-        text-transform: uppercase;
-    }
-
-    .personnel-img {
-        width: 300px;
-        height: 300px;
-        margin: 30px auto;
+    #resarch-paper-container {
+        margin-top: 3rem;
+        display: flex;
+        gap: 1rem;
     }
 
-    .personnel-img img {
-        border-radius: 4px;
-        box-shadow: 4px 6px 18px 12px rgba(51, 51, 51, 0.1490196078);
-        width: 100%;
-        height: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
+    @media (max-width: 1000px) {
+        #resarch-paper-container {
+            flex-direction: column;
+        }
     }
 
-    .shadowed {
-        border-radius: 4px;
-        box-shadow: 4px 6px 18px 12px rgba(51, 51, 51, 0.1490196078);
+    #resarch-paper-container .main-comp {
+        flex: 7;
+        padding: 0 0.75rem 1rem 0;
     }
 
-    .generic-para {
-        text-align: left;
-        padding: 20px !important;
+    @media (max-width: 1000px) {
+        #resarch-paper-container .main-comp {
+            order: 0;
+            flex: 1;
+        }
     }
 
-    .generic-para ol {
-        margin: 10px 30px !important;
+    #resarch-paper-container .main-comp article {
+        margin: unset;
     }
 
-    .generic-para img {
-        border-radius: 4px;
-        height: 240px;
-        width: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
+    #resarch-paper-container .main-comp .generic-para {
+        text-align: left;
+        padding: 1rem 1.5rem !important;
     }
 
-    .generic-para h2 {
+    #resarch-paper-container .main-comp .generic-para h2 {
         text-align: center;
         letter-spacing: 1px;
     }
 
-    .generic-para h3 {
+    #resarch-paper-container .main-comp .generic-para h3 {
         font-family: "DM Serif Text", serif;
         margin: 20px 0px !important;
+        padding-bottom: 0.75rem;
         text-align: left;
-        border-bottom: 3px solid #117cf7;
+        border-bottom: 3px solid #F68B1F;
     }
 
-    .generic-para p {
+    #resarch-paper-container .main-comp .generic-para p {
         text-align: justify;
         margin: 30px 0px !important;
         font-size: 16px !important;
         line-height: 22px;
     }
 
-    .prof-name {
+    #resarch-paper-container .main-comp .generic-para .prof-name {
         color: #485680;
         font-weight: 700;
         font-size: 18px;
     }
 
-    .prof-deg {
+    #resarch-paper-container .main-comp .generic-para .prof-deg {
         font-style: italic;
         font-weight: 400;
     }
 
-    .prof-des {
+    #resarch-paper-container .main-comp .generic-para .prof-des {
         font-size: 18px;
         font-weight: 700;
     }
 
-    .area {
-        margin: 10px 0px;
-        border: 1px solid rgba(51, 51, 51, 0.3803921569);
-        border-radius: 8px;
-        height: 120px;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
+    #resarch-paper-container .main-comp .generic-para .paper-details {
+        padding: 30px 0px;
+        border-bottom: 1px solid rgba(51, 51, 51, 0.1764705882);
     }
 
-    .alignnone {
-        width: 150px !important;
-        height: auto !important;
-        margin: 20px auto !important;
+    #resarch-paper-container .main-comp .generic-para .paper-title {
+        font-size: 18px !important;
+        text-align: left !important;
+        margin: 10px 0px !important;
+        font-weight: 400 !important;
+        text-decoration: underline;
     }
 
-    #all-faculties h2,
-    #all-events h2,
-    #all-news h2 {
-        color: #000 !important;
-        margin-top: 40px;
-        margin-bottom: 20px;
-        font-weight: 800;
+    #resarch-paper-container .main-comp .generic-para .paper-year {
+        font-size: 14px;
+        display: block;
+        color: rgba(51, 51, 51, 0.4509803922);
     }
 
-    #all-faculties hr,
-    #all-events hr,
-    #all-news hr {
-        border: 1px solid rgba(51, 51, 51, 0.3882352941);
+    #resarch-paper-container .main-comp .generic-para p {
+        margin: 5px !important;
+        font-size: 14px !important;
     }
 
-    #all-faculties .faculty-stub,
-    #all-events .faculty-stub,
-    #all-news .faculty-stub {
-        width: 100%;
-        padding: 5px;
-        box-shadow: 2px 2px 10px 6px rgba(0, 0, 0, 0.137254902);
-        margin: 30px auto !important;
+    #resarch-paper-container .main-comp .generic-para .paper-contributors {
+        color: #222222 !important;
     }
 
-    #all-faculties .stub-img-holder,
-    #all-events .stub-img-holder,
-    #all-news .stub-img-holder {
-        border-radius: 4px !important;
-        height: 160px;
-        overflow: hidden;
+    #resarch-paper-container .main-comp .generic-para .paper-tags {
+        margin: 20px 0px !important;
     }
 
-    #all-faculties .stub-img-holder img,
-    #all-events .stub-img-holder img,
-    #all-news .stub-img-holder img {
-        border-radius: 0px !important;
-        height: 100%;
+    #resarch-paper-container .main-comp .generic-para .paper-tags .tag {
+        font-size: 14px;
+        border: 1px solid #F68B1F;
+        padding: 3px 8px !important;
+        border-radius: 10px;
+    }
+
+    #resarch-paper-container .side-comp {
+        flex: 2;
+        padding: 0 0.25rem 1rem 0 !important;
+    }
+
+    @media (max-width: 1000px) {
+        #resarch-paper-container .side-comp {
+            order: 1;
+            flex: 1;
+        }
+    }
+
+    #resarch-paper-container .side-comp .filter {
+        margin-bottom: 2rem;
+        padding: 0;
+        background-color: aliceblue;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.15), 0 3px 3px rgba(0, 0, 0, 0.15);
+    }
+
+    #resarch-paper-container .side-comp .filter-title {
+        padding: 1rem 0;
+        text-align: center;
+        background-color: #2c5d73;
+        border-bottom: 3px solid #ff860d;
+        color: #fff;
+        font-weight: 400;
+        font-size: 1rem;
+    }
+
+    #resarch-paper-container .side-comp .filter-criteria {
+        padding: 1rem;
+        margin-bottom: 1.25rem;
+    }
+
+    #resarch-paper-container .side-comp .filter-criteria h6 {
+        font-weight: 500;
+        margin-bottom: 0.25rem !important;
+    }
+
+    #resarch-paper-container .side-comp .filter-criteria form {
+        padding: 0.25rem;
         width: 100%;
-        -o-object-fit: cover;
-        object-fit: cover;
-        -o-object-position: center;
-        object-position: center;
+        padding-top: 0.25rem;
+        padding: 0.5rem;
     }
 
-    #all-faculties .archive-faculty-details,
-    #all-events .archive-faculty-details,
-    #all-news .archive-faculty-details {
-        height: 100px;
-        padding: 0px 10px;
+    #resarch-paper-container .side-comp .filter-criteria form .input-group {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 0.25rem;
     }
 
-    #all-faculties .archive-faculty-details .faculty-degree,
-    #all-events .archive-faculty-details .faculty-degree,
-    #all-news .archive-faculty-details .faculty-degree {
-        display: inline-block;
-        color: rgba(89, 107, 161, 0.5647058824);
-        font-weight: 800;
-        font-size: 14px;
+    #resarch-paper-container .side-comp .filter-criteria form .input-group label {
+        font-size: 0.8rem;
+        font-weight: 500;
     }
 
-    #all-faculties .archive-faculty-details .faculty-designation,
-    #all-events .archive-faculty-details .faculty-designation,
-    #all-news .archive-faculty-details .faculty-designation {
-        display: block;
-        color: rgba(0, 0, 0, 0.5647058824);
-        font-weight: 800;
-        font-size: 14px;
+    #resarch-paper-container .side-comp .filter-criteria form .input-group input {
+        font-size: 0.8rem;
     }
 
-    #all-faculties .archive-faculty-details h3,
-    #all-events .archive-faculty-details h3,
-    #all-news .archive-faculty-details h3 {
-        font-size: 18px;
-        line-height: 22px;
-        font-family: "Open Sans", sans-serif;
-        color: #2F4858 !important;
-        margin: 10px auto;
+    #resarch-paper-container .side-comp .filter-criteria form ul {
+        margin-bottom: unset;
     }
 
-    .faculty-grp-img {
-        height: auto !important;
-        width: 100% !important;
-        margin: 0px auto !important;
+    #resarch-paper-container .side-comp .filter-criteria form ul li {
+        list-style: none;
     }
 
-    .paper-details {
-        padding: 30px 0px;
-        border-bottom: 1px solid rgba(51, 51, 51, 0.1764705882);
+    #resarch-paper-container .side-comp .filter-criteria form a {
+        display: block;
+        color: #333;
+        font-size: 0.8rem;
+        font-weight: 500;
+        padding: 0.5rem 0;
+        border-bottom: 1px solid #c5c5c5;
     }
 
-    .paper-details .paper-title {
-        font-size: 18px !important;
-        text-align: left !important;
-        margin: 10px 0px !important;
-        text-decoration: underline;
+    #resarch-paper-container .side-comp .filter-criteria form a:hover {
+        opacity: 1 !important;
+        color: #ff860d;
     }
 
-    .paper-details .paper-year {
-        font-size: 14px;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item {
         display: block;
-        color: rgba(51, 51, 51, 0.4509803922);
+        margin-bottom: 0.75rem;
+        padding-bottom: 2rem;
+        border-bottom: 1px solid #2c5d73;
+        transition: all 0.25s ease-in-out;
     }
 
-    .paper-details p {
-        margin: 5px !important;
-        font-size: 14px !important;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item:last-child {
+        border-bottom: none;
+        margin-bottom: 0rem;
+        padding-bottom: 0.25rem;
     }
 
-    .paper-details .paper-contributors {
-        color: #222222 !important;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date {
+        font-size: 0.8rem;
+        font-weight: 500;
+        color: #c66f17;
     }
 
-    .paper-details .paper-tags {
-        margin: 20px 0px !important;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .single-item-title {
+        font-size: 0.8rem;
+        font-weight: 700;
+        color: #2c5d73;
     }
 
-    .paper-details .paper-tags .tag {
-        font-size: 14px;
-        border: 1px solid rgba(17, 124, 247, 0.431372549);
-        padding: 3px 8px !important;
-        border-radius: 10px;
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container {
+        display: flex;
+        align-items: center;
+        gap: 0.7rem;
+    }
+
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .date {
+        font-size: 0.75rem;
+    }
+
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .icon {
+        width: 0.75rem;
+        color: #ffffff;
+    }
+
+    #resarch-paper-container .side-comp .filter-criteria form .single-item .date-container .icon img {
+        width: 100%;
     }
 
-    /*# sourceMappingURL=journal-cse.css.map */
+    /*# sourceMappingURL=cse-journal-paper.css.map */
 </style>
+<script>
+    const payload = {
+        "user_login_id": "api_user",
+        "auth_token": "api_user20230419045143"
+    }
+
+    const fetchJournalPaper = async () => {
+
+        try {
+            const res = await fetch("https://ucamapi.uiu.ac.bd/api/EmployeeJournal", {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(payload)
+            });
+            const data = await res.json();
+            return data
+        } catch (error) {
+            console.log(`Error: ${error}`)
+        }
+    }
+
+    fetchJournalPaper()
+        .then(data => {
+            // adding menu data into html
+            addDataToPage(data)
+        })
+
+    function addDataToPage(data) {
+        const conferencePaper = document.getElementById('conference-paper');
+        const authorFilterContainer = document.getElementById('author-input');
+        const yearFilterContainer = document.getElementById('year-input');
+
+        if (data) {
+
+            let allYears = [];
+            data.map(data => {
+                const publishYear = data.Year;
+                allYears.push(publishYear);
+                // year add in filter
+                const allYear = `<div class="input-group">
+                                        <span>
+                                          <label for=${publishYear}>${publishYear}</label>
+                                        </span>
+                                        <span>
+                                          <input type="radio" id=${publishYear} name="author" value=${publishYear}>
+                                        </span>
+                                    </div>`
+
+                yearFilterContainer.insertAdjacentHTML("beforeend", allYear)
+                // year add in filter end
+
+                // author add in filter
+                const allAuthor = `<div class="input-group">
+                                        <span>
+                                          <label for=${data.TeacherCode}>${data.TeacherCode}</label>
+                                        </span>
+                                        <span>
+                                          <input type="radio" id=${data.TeacherCode} name="author" value=${data.TeacherCode}>
+                                        </span>
+                                    </div>`
+
+                authorFilterContainer.insertAdjacentHTML("beforeend", allAuthor)
+                // author add in filter end
+
+                // journallist adding
+                data.JournalList.map(journal => {
+                    const journalData = `<div class="paper-details">
+                                            <span class="paper-year">${publishYear}</span>
+                                            <h2 class="paper-title">${journal.PaperTitle}</h2>
+                                            <p class="paper-tags">
+                                                ${
+                                                    journal.KeyWords.map(KeyWord => {
+                                                        return `<span class="tag">${KeyWord}</span>`
+                                                    })
+                                                }
+                                            </p>
+                                            <p class="paper-event">
+                                                <i>Publication: </i> ${journal.JournalTitle}
+                                            </p>
+                                            <p class="paper-contributors">
+                                                <i>Authors: </i> ${
+                                                    journal.Author.map(author => {
+                                                        return "  " + author.AuthorName
+                                                    })
+                                                }
+                                            </p>
+                                        </div>`
+                    conferencePaper.insertAdjacentHTML("beforeend", journalData)
+                })
+            })
+            console.log(allYears)
+        }
+    }
+</script>
 <?php get_footer(); ?>