updated comments

includes/class-partnerexpo-core-user-fields.php

@@ -82,6 +82,22 @@ class Partnerexpo_Core_User_Fields extends Partnerexpo_Core {
         if ( empty( $_POST['company'] ) || ! empty( $_POST['company'] ) && trim( $_POST['company'] ) == '' ) {
             wp_delete_comment( $id, true );
             wp_die( sprintf('<strong>%s</strong>: %s',__( 'Error', 'partnerexpo-core' ),__( 'Cég megadása kötelező!', 'partnerexpo-core' ) ) );
-        }
+            return false;
+        }
+        add_comment_meta(
+            $id,
+            'company',
+            sanitize_text_field($_POST['company'])
+        );
+
+        if ( ! empty( $_POST['name'] ) && trim( $_POST['name'] ) != '' ) {
+            add_comment_meta(
+                $id,
+                'name',
+                sanitize_text_field($_POST['name'])
+            );
+        }
+        
+        return true;
     }
 }

public/class-partnerexpo-core-public.php

@@ -193,6 +193,14 @@ class Partnerexpo_Core_Public {
             'all' 
         );
 
+		wp_register_style( 
+            $this->plugin_name . '-comments-css', 
+            plugin_dir_url( __FILE__ ) . 'css/comments.css', 
+            [], 
+            $this->version, 
+            'all' 
+        );
+
 		wp_register_style( 
             $this->plugin_name . '-multiselect-css', 
             plugin_dir_url( __FILE__ ) . 'css/multiselect.css', 
@@ -216,6 +224,15 @@ class Partnerexpo_Core_Public {
             true
         );
 
+		wp_register_script( 
+            $this->plugin_name . '-comments-js', 
+            plugin_dir_url( __FILE__ ) . 'js/comments.js', 
+            [],
+            $this->version, 
+            true
+        );
+
+
 		wp_register_script( 
             $this->plugin_name . '-multiselect-js', 
             plugin_dir_url( __FILE__ ) . 'js/multiselect.js', 

public/css/comments.css

@@ -0,0 +1,147 @@
+.pexpo-core-comments-title {
+    text-align: center;
+    font-size: 2rem;
+    color: #333;
+    margin-top: 50px;
+}
+
+.pexpo-core-comments-body {
+    margin: 0 auto;
+    padding: 20px 0;
+    max-width: 1500px;
+    overflow: hidden;
+    -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 80px,
+    black calc(100% - 80px),
+    transparent
+);
+
+mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 80px,
+    black calc(100% - 80px),
+    transparent
+);
+
+    &:hover .pexpo-core-comment-groups-wrapper {
+        animation-play-state: paused;
+    }
+}
+
+.pexpo-core-comment-groups-wrapper {
+    display: flex;
+    width: max-content;
+    will-change: transform;
+    animation: scrolling 20s linear infinite;
+}
+
+
+.pexpo-core-comment-group {
+    display: flex;
+    gap: 20px;
+    padding-right: 20px;
+}
+
+.pexpo-core-comment {
+    position: relative;
+    flex: 0 0 auto;
+    width: 500px;
+    color: #333;
+    border-radius: 24px;
+    box-shadow: rgba(0,0,0,0.1) 5px 5px 20px 0;
+    padding: 20px 20px 50px 20px;
+    min-height: 200px;
+}
+
+.pexpo-core-comment-content {
+    font-style: italic;
+    font-size: 1.2rem;
+    max-height: 250px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin-bottom: 50px;
+}
+
+.pexpo-core-comment-said_by {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 1.2rem;
+    font-weight: bold;
+    color: #555;
+    padding-left: 30px;
+    max-height: 50px;
+
+    & p {
+        margin: 0;
+    }
+}
+
+
+.comment-form:has(> .pexpo-core-com-form-wrapper) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-top: 100px;
+
+    & .form-submit .submit {
+        border-radius: 10px;
+    }
+}
+
+.pexpo-core-com-form-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 500px;
+    box-shadow: #00000020 0px 5px 20px 0;
+    border-radius: 15px;
+    padding: 20px;
+    height: fit-content;
+
+    & .pexpo-core-com-form-title {
+        margin: 0 0 20px 0;
+        font-size: 1.5rem;
+        color: #333;
+        text-align: center;
+    }
+
+    & .pexpo-core-com-field {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+
+        & label {
+            font-weight: bold;
+            color: #555;
+        }
+
+        & input, & textarea {
+            padding: 10px;
+            border-radius: 10px;
+            border: none;
+            background-color: #00000010;
+            font-size: 1rem;
+            resize: vertical;
+
+            &:focus {
+                outline: none;
+                background-color: #00000020;
+            }
+        }
+    }
+}
+
+
+@keyframes scrolling {
+    to {
+        transform: translate3d(-50%,0,0);
+    }
+}

public/partials/partnerexpo-core-public-comments.php

@@ -14,7 +14,7 @@
 <div class="pexpo-core-root pexpo-core-shell" id="pexpo-core-comments-shell">
     <div class="pexpo-core-comments" id="pexpo-core-comments">
         <div class="pexpo-core-comments-header">
-            <h2 class="pexpo-core-comments-title"><?php echo esc_html__('Hozzászólások', 'partnerexpo-core'); ?></h2>
+            <h2 class="pexpo-core-comments-title"><?php echo esc_html__('Visszajelzések', 'partnerexpo-core'); ?></h2>
         </div>
         <div class="pexpo-core-comments-body" id="pexpo-core-comments-body">
             <?php
@@ -24,18 +24,34 @@
                 ]);
                 
                 if ( ! empty( $comments ) ) {
+                    echo '<div class="pexpo-core-comment-groups-wrapper">';
+                    for ($i = 0; $i < 2; $i++) {
+                        echo '<div class="pexpo-core-comment-group"'.($i ? ' aria-hidden="true"' : '').'>';
+
                         foreach ($comments as $comment) {
                             ?>
                             <div class="pexpo-core-comment">
-                                <div class="pexpo-core-comment-author">
-                                    <?php echo get_comment_meta( $comment, 'company', true ); ?>
-                                </div>
                                 <div class="pexpo-core-comment-content">
                                     <?php echo get_comment_text( $comment ); ?>
                                 </div>
+                                <div class="pexpo-core-comment-said_by">
+                                    <?php if ( get_comment_meta( $comment->comment_ID, 'name', true ) ): ?>
+                                    <div class="pexpo-core-comment-author">
+                                        <p><?php echo get_comment_meta( $comment->comment_ID, 'name', true ); ?></p>
+                                    </div>
+                                    <p>-</p>
+                                    <?php endif; ?>
+                                    <div class="pexpo-core-comment-business">
+                                        <p><?php echo get_comment_meta( $comment->comment_ID, 'company', true ); ?></p>
+                                    </div>
+                                </div>
                             </div>
                             <?php
                         }
+
+                        echo '</div>';
+                    }
+                    echo '</div>';
                 } else {
                     ?>  
                         <p class="pexpo-core-no-comments"><?php echo esc_html__('Még nincsenek hozzászólások.', 'partnerexpo-core'); ?></p>
@@ -45,16 +61,21 @@
         </div> 
         <?php 
         $comments_args = array(
-            'label_submit' => __( 'Send', 'partnerexpo-core' ),
+            'label_submit' => __( 'Küldés', 'partnerexpo-core' ),
-            'title_reply' => __( 'Write a Reply or Comment', 'partnerexpo-core' ),
+            'title_reply' => '',
             'comment_notes_after' => '',
             'must_log_in' => '',
             'logged_in_as' => '',
             'comment_field' => '
-            <p class="comment-form-comment"><label for="company">' . _x( 'Company', 'partnerexpo_core' ) . '</label><br />
+            <div class="pexpo-core-com-form-wrapper">
-            <input type="text" id="company" name="company" aria-required="true"></textarea></p>
+                <h2 class="pexpo-core-com-form-title">' . _x( 'Visszajelzés küldése', 'partnerexpo_core' ) . '</h2>
-            <p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'partnerexpo_core' ) . '</label><br />
+                <p class="pexpo-core-com-field"><label for="name">' . _x( 'Kitöltő neve', 'partnerexpo_core' ) . '</label><br />
-            <textarea id="comment" name="comment" aria-required="true"></textarea></p>
+                <input type="text" id="name" name="name" aria-required="true"></p>
+                <p class="pexpo-core-com-field"><label for="company">' . _x( 'Cég név', 'partnerexpo_core' ) . '</label><br />
+                <input type="text" id="company" name="company" aria-required="true"></p>
+                <p class="pexpo-core-com-field"><label for="comment">' . _x( 'Hozzászólás', 'partnerexpo_core' ) . '</label><br />
+                <textarea id="comment" name="comment" aria-required="true" maxlength="600"></textarea></p>
+            </div>
             ',
         );
         comment_form( $comments_args );