Ticker HTML and CSS classes harmonized

This commit is contained in:
Stefan Kalscheuer 2017-12-09 10:31:16 +01:00
parent a5144f9f17
commit c42dd6c8d2
4 changed files with 58 additions and 50 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.9 KiB

View File

@ -60,7 +60,7 @@ class WPLiveticker2_Widget extends WP_Widget {
}
?>
<ul class="wplt_widget">
<ul class="wplt2-widget">
<?php
$args = array(
'post_type' => 'wplt2_tick',
@ -79,7 +79,7 @@ class WPLiveticker2_Widget extends WP_Widget {
$wp_query->the_post();
?>
<li>
<span class="wplt_widget_time"><?php echo esc_html( get_the_time( 'd.m.Y - H.i' ) ); ?></span><span class="wplt_widget_content<?php if ( '1' === $highlight && get_the_time( 'U' ) > ( time() - $highlight_time ) ) {
<span class="wplt2-widget-time"><?php echo esc_html( get_the_time( 'd.m.Y - H.i' ) ); ?></span><span class="wplt-widget-content<?php if ( '1' === $highlight && get_the_time( 'U' ) > ( time() - $highlight_time ) ) {
echo '_new';
} ?>"><br /><?php echo the_title(); ?></span></li>
<?php
@ -92,7 +92,7 @@ class WPLiveticker2_Widget extends WP_Widget {
<?php
if ( $link ) {
print '<p class="wplt_widget_link"><a href="' . esc_attr( $link ) . '">' . esc_html__( 'show all', 'wplt2' ) . '...</a></p>';
print '<p class="wplt2-widget-link"><a href="' . esc_attr( $link ) . '">' . esc_html__( 'show all', 'wplt2' ) . '...</a></p>';
}
// @codingStandardsIgnoreLine
echo $after_widget;

View File

@ -200,10 +200,7 @@ class WPLiveticker2 {
while ( $wp_query->have_posts() ) {
$wp_query->the_post();
$output .= '<li class="wplt2_tick">
<p><span class="wplt2_tick_time">' . get_the_time( 'd.m.Y H.i' ) . '</span>
<span class="wplt2_tick_title">' . get_the_title() . '</span></p>
<p class="wplt2_tick_content">' . get_the_content() . '</p></li>';
$output .= self::tick_html( get_the_time( 'd.m.Y H.i' ), get_the_title(), get_the_content() );
}
$output .= '</ul>';
@ -266,48 +263,45 @@ class WPLiveticker2 {
// Extract update requests.
if ( isset( $_POST['update'] ) && is_array( $_POST['update'] ) ) {
$res = array();
foreach ( $_POST['update'] as $updateReq ) {
if ( isset ( $updateReq['s'] ) ) {
$slug = $updateReq['s'];
$limit = ( isset ( $updateReq['l'] ) ) ? intval( $updateReq['l'] ) : - 1;
$lastPoll = ( isset ( $updateReq['t'] ) ) ? intval( $updateReq['t'] ) : 0;
// TODO: fetch updates, render and add to result.
// Query new ticks from DB.
$queryArgs = array(
'post_type' => 'wplt2_tick',
'posts_per_page' => $limit,
'tax_query' => array(
array(
'taxonomy' => 'wplt2_ticker',
'field' => 'slug',
'terms' => $slug,
)
)
);
$query = new WP_Query( $queryArgs );
$out = '';
while ( $query->have_posts() ) {
$query->the_post();
$out .= self::tick_html( get_the_time( 'd.m.Y H.i' ), get_the_title(), get_the_content() );
}
$res[] = array(
's' => $slug,
'h' => $out,
't' => time(),
);
}
}
// Echo JSON encoded result set.
echo json_encode( $res );
}
exit;
// if ( $slug ) {
// // get new ticks from database
// $args = array(
// 'post_type' => 'wplt_tick',
// 'posts_per_page' => '-1',
// 'tax_query' => array(
// array(
// 'taxonomy' => 'wplt_ticker',
// 'field' => 'slug',
// 'terms' => $slug
// )
// )
// );
//
// $wp_query = new WP_Query( $args );
// $output = '';
//
// while ( $wp_query->have_posts() ) {
// $wp_query->the_post();
// $output .= '<li class="wplt2-tick">'
// . '<p><span class="wplt2-tick_time">' . get_the_time( 'd.m.Y H.i' ) . '</span>'
// . '<span class="wplt2-tick-title">' . get_the_title() . '</span></p>'
// . '<p class="wplt2-tick-content">' . get_the_content() . '</p></li>';
// }
//
// // Echo success response
// echo $output;
// }
// die();
}
/**
@ -336,4 +330,18 @@ class WPLiveticker2 {
'reset_settings' => 0,
);
}
/**
* Generate HTML code for a tick element.
*
* @param string $time Tick time (readable).
* @param string $title Tick title.
* @param string $content Tick content.
*/
private static function tick_html( $time, $title, $content ) {
return '<li class="wplt2-tick">'
. '<p><span class="wplt2-tick_time">' . esc_html( $time ) . '</span>'
. '<span class="wplt2-tick-title">' . esc_html( $title ) . '</span></p>'
. '<p class="wplt2-tick-content">' . $content . '</p></li>';
}
}

View File

@ -1,58 +1,58 @@
ul.wplt2_ticker {
ul.wplt2-ticker {
list-style-type: none;
}
li.wplt2_tick {
li.wplt2-tick {
background-color: #F5F5F5;
margin: 0.1em;
padding: 0.1em 0.3em;
}
li.wplt2_tick p {
li.wplt2-tick p {
margin: 0.3em;
}
span.wplt2_tick_time {
span.wplt2-tick-time {
color: #002C58;
font-size: 0.7em;
font-style: italic;
}
span.wplt2_tick_title {
span.wplt2-tick-title {
color: #002C58;
font-weight: bold;
margin-left: 0.5em;
}
p.wplt2_tick_content {
p.wplt2-tick-content {
margin-top: -0.7em;
text-indent: 0.5em;
}
ul.wplt_2widget {
ul.wplt2-widget {
list-style-type: none;
margin-top: -0.5em;
}
ul.wplt2_widget li {
ul.wplt2-widget li {
text-align: left;
}
span.wplt2_widget_time {
span.wplt2-widget-time {
font-size: 0.7em;
font-style: italic;
}
span.wplt2_widget_content {
span.wplt2-widget-content {
color: #002C58;
text-indent: 0.2em;
}
span.wplt2_widget_content_new {
span.wplt2-widget-content-new {
color: #800000;
text-indent: 0.2em;
}
p.wplt2_widget_link {
p.wplt2-widget-link {
text-align: right;
}