updated comments
This commit is contained in:
@@ -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',
|
||||
|
||||
147
public/css/comments.css
Normal file
147
public/css/comments.css
Normal file
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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
|
||||
@@ -22,20 +22,36 @@
|
||||
'post_id' => get_the_ID(),
|
||||
'status' => 'approve',
|
||||
]);
|
||||
|
||||
|
||||
if ( ! empty( $comments ) ) {
|
||||
foreach ( $comments as $comment ) {
|
||||
?>
|
||||
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
|
||||
<?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' ),
|
||||
'title_reply' => __( 'Write a Reply or Comment', 'partnerexpo-core' ),
|
||||
'label_submit' => __( 'Küldés', '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 />
|
||||
<input type="text" id="company" name="company" aria-required="true"></textarea></p>
|
||||
<p class="comment-form-comment"><label for="comment">' . _x( 'Comment', 'partnerexpo_core' ) . '</label><br />
|
||||
<textarea id="comment" name="comment" aria-required="true"></textarea></p>
|
||||
<div class="pexpo-core-com-form-wrapper">
|
||||
<h2 class="pexpo-core-com-form-title">' . _x( 'Visszajelzés küldése', 'partnerexpo_core' ) . '</h2>
|
||||
<p class="pexpo-core-com-field"><label for="name">' . _x( 'Kitöltő neve', 'partnerexpo_core' ) . '</label><br />
|
||||
<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 );
|
||||
|
||||
Reference in New Issue
Block a user