Rumperuu/Omphaloskepsis
Archived
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases 1 Wiki Activity

Fix ‘Experience’ page styling #13

Merged
Rumperuu merged 2 commits from fix/experience-page-styling into master 2021-01-21 10:25:29 +00:00
Conversation 0 Commits 2 Files changed 4 +133 -127
3 changed files with 133 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit be5853376c - Show all commits

19
page-experience-by-companies.php
View file

@ -1,20 +1,17 @@
<?php <?php
/* /*
* Template Name: Experience by Companies * Template Name: Experience by Companies
*/ * /
/** /**
* The template for displaying all items, indexed by organisation.
* *
* * @package Omphaloskepsis
* The template for displaying all single posts and attachments * @since Omphaloskepsis 1.0
*
* @package WordPress
* @subpackage Twenty_Sixteen
* @since Twenty Sixteen 1.0
*/ */
get_header(); ?> get_header(); ?>
<div id="experience-wrapper" class="content-area col-10 col-m-12"> <main id="experience-wrapper" class="content-area col-10 col-m-12">
<!--Page Title & Details--> <!--Page Title & Details-->
<header class="post-header-title"> <header class="post-header-title">
<h1 style="margin-bottom: 20px;" id="page-title">Experience.</h1> <h1 style="margin-bottom: 20px;" id="page-title">Experience.</h1>
@ -26,7 +23,7 @@ get_header(); ?>
<?php the_content(); ?> <?php the_content(); ?>
</div> </div>
<div style="width: 70%; margin: auto; margin-top: 20px; border: 2px dashed #020202; padding: 20px; border-radius: 25px;" class="entry-content tile" id="settings"> <div class="entry-content tile" id="settings">
<h3 style="margin-bottom: 14px;" class="subheading">Settings</h3> <h3 style="margin-bottom: 14px;" class="subheading">Settings</h3>
<form action="/experience-by-companies" id="settings" method="GET"> <form action="/experience-by-companies" id="settings" method="GET">
<input class="checkbox" type="checkbox" id="toplevel" value="toplevel" checked="checked"> <input class="checkbox" type="checkbox" id="toplevel" value="toplevel" checked="checked">
@ -136,6 +133,6 @@ get_header(); ?>
} }
}); });
</script> </script>
</div> </main>
<?php get_footer(); ?> <?php get_footer(); ?>

229
page-experience-timeline.php
View file

@ -2,24 +2,23 @@
/* /*
* Template Name: Experience Timeline * Template Name: Experience Timeline
* / * /
/** /**
* The template for displaying all single posts and attachments * The template for displaying all roles in a timeline.
* *
* @package WordPress * @package Omphaloskepsis
* @subpackage Twenty_Sixteen * @since Omphaloskepsis 1.0
* @since Twenty Sixteen 1.0
*/ */
get_header(); ?> get_header(); ?>
<?php <?php
function withinDates( $jSDate, $jEDate ) { function withinDates( $jSDate, $jEDate ) {
$endYear = date( 'Y' ); $endYear = date( 'Y' );
$endDate = $endYear . '-12-31'; $endDate = $endYear . '-12-31';
$startDate = ( $endYear - 2 ) . '-01-01'; $startDate = ( $endYear - 2 ) . '-01-01';
$jEDate = ( ! $jEDate ) ? date( 'Y-m-d' ) : ( ( $jEDate > $endDate ) ? $endDate : $jEDate ); $jEDate = ( ! $jEDate ) ? date( 'Y-m-d' ) : ( ( $jEDate > $endDate ) ? $endDate : $jEDate );
return ( ( ( strtotime( $jSDate ) < strtotime( $endDate ) ) && ( strtotime( $jSDate ) > strtotime( $startDate ) ) ) && ( strtotime( $jEDate ) > strtotime( $startDate ) ) ); return ( ( ( strtotime( $jSDate ) < strtotime( $endDate ) ) && ( strtotime( $jSDate ) > strtotime( $startDate ) ) ) && ( strtotime( $jEDate ) > strtotime( $startDate ) ) );
} }
$args = array( $args = array(
'post_type' => array( 'post_type' => array(
'job', 'job',
@ -27,119 +26,119 @@ function withinDates( $jSDate, $jEDate ) {
'posts_per_page' => -1, 'posts_per_page' => -1,
); );
$loop = new WP_Query( $args ); $loop = new WP_Query( $args );
?> ?>
<div id="experience-wrapper" class="content-area col-10 col-m-12"> <main id="experience-wrapper" class="content-area col-10 col-m-12">
<header class="post-header-title"> <header class="post-header-title">
<h1 id="page-title">Experience</h1> <h1 id="page-title">Experience</h1>
<h2 id="page-subtitle">or, a brief history of Ben</h2> <h2 id="page-subtitle">or, a brief history of Ben</h2>
<?php <?php
while ( have_posts() ) : while ( have_posts() ) :
the_post(); the_post();
?> ?>
<div class="entry-content tile" id="taxonomy-description"> <div class="entry-content tile" id="taxonomy-description">
<?php the_content(); ?> <?php the_content(); ?>
</div> </div>
<div style="width: 70%; margin: auto; margin-top: 20px; border: 2px dashed #020202; padding: 20px; border-radius: 25px;" class="entry-content tile" id="settings"> <div class="entry-content tile" id="settings">
<h3 style="margin-bottom: 14px;" class="subheading">Settings</h3> <h3 style="margin-bottom: 14px;" class="subheading">Settings</h3>
<form action="/experience-timeline" id="settings" method="GET"> <form action="/experience-timeline" id="settings" method="GET">
<input class="checkbox" type="checkbox" id="separate" value="separate" checked="checked"> <input class="checkbox" type="checkbox" id="separate" value="separate" checked="checked">
<label for="separate">Separate past and current roles</label> <label for="separate">Separate past and current roles</label>
<input class="ui-button ui-widget ui-corner-all" id="refresh" type="submit" value="Refresh"> <input class="ui-button ui-widget ui-corner-all" id="refresh" type="submit" value="Refresh">
</form> </form>
</div> </div>
<?php endwhile; ?> <?php endwhile; ?>
</header> </header>
<div id="primary" class="content-area"> <div id="primary" class="content-area">
<main id="company-main" class="site-main" role="main"> <main id="company-main" class="site-main" role="main">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> <script type="text/javascript">
jQuery(document).ready(function($) { jQuery(document).ready(function($) {
$('input:checkbox').checkboxradio(); $('input:checkbox').checkboxradio();
$('.refresh').button(); $('.refresh').button();
google.charts.load('current', {'packages':['timeline']}); google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart); google.charts.setOnLoadCallback(drawChart);
$('input[type="checkbox"]').change(function() { $('input[type="checkbox"]').change(function() {
alert("Feature in progress"); alert("Feature in progress");
$('#refresh').css('border-width', '5px'); $('#refresh').css('border-width', '5px');
}); });
$('#refresh').click(function(event) { $('#refresh').click(function(event) {
$(this).css('border-width', '1px'); $(this).css('border-width', '1px');
event.preventDefault(); event.preventDefault();
drawChart(); drawChart();
}); });
}); });
function drawChart() { function drawChart() {
var container = document.getElementById('timeline'); var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container); var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable(); var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Type' }); dataTable.addColumn({ type: 'string', id: 'Type' });
dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true} }); dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': {'html': true} });
dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([ dataTable.addRows([
<?php <?php
while ( $loop->have_posts() ) : while ( $loop->have_posts() ) :
$loop->the_post(); $loop->the_post();
?> ?>
<?php <?php
$isCurrent = ( get_post_meta( get_the_ID(), 'end-date', true ) ) ? false : true; $isCurrent = ( get_post_meta( get_the_ID(), 'end-date', true ) ) ? false : true;
$company = wp_get_object_terms( $company = wp_get_object_terms(
get_the_ID(), get_the_ID(),
'company', 'company',
array( array(
'fields' => 'names', 'fields' => 'names',
) )
); );
$title = html_entity_decode( get_the_title() ); $title = html_entity_decode( get_the_title() );
$start = get_the_date(); $start = get_the_date();
$end = ( ! get_post_meta( get_the_ID(), 'end-date', true ) ) ? date( 'c' ) : get_post_meta( get_the_ID(), 'end-date', true ); $end = ( ! get_post_meta( get_the_ID(), 'end-date', true ) ) ? date( 'c' ) : get_post_meta( get_the_ID(), 'end-date', true );
?> ?>
[ [
'<?php echo ( $isCurrent ) ? 'Current' : 'Past'; ?>', '<?php echo ( $isCurrent ) ? 'Current' : 'Past'; ?>',
'<?php echo $title . ', ' . html_entity_decode( $company[0] ); ?>', '<?php echo $title . ', ' . html_entity_decode( $company[0] ); ?>',
'<div style="padding: 20px"><h1 class="timeline-entry-title"><?php echo $title; ?></h1><h2><?php echo html_entity_decode( $company[0] ); ?></h2><ul><li><?php echo $start; ?>&mdash;<?php echo ( $isCurrent ) ? 'present' : $end; ?></li></ul></div>', '<div style="padding: 20px"><h1 class="timeline-entry-title"><?php echo $title; ?></h1><h2><?php echo html_entity_decode( $company[0] ); ?></h2><ul><li><?php echo $start; ?>&mdash;<?php echo ( $isCurrent ) ? 'present' : $end; ?></li></ul></div>',
new Date('<?php echo $start; ?>'), new Date('<?php echo $start; ?>'),
new Date('<?php echo $end; ?>') new Date('<?php echo $end; ?>')
], ],
<?php endwhile; ?> <?php endwhile; ?>
]); ]);
var rowHeight = 15; var rowHeight = 15;
var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50; var chartHeight = dataTable.getNumberOfRows() * rowHeight + 50;
var options = { var options = {
tooltip: {isHtml: true}, tooltip: {isHtml: true},
timeline: { timeline: {
showRowLabels: true, showRowLabels: true,
}, },
height: chartHeight, height: chartHeight,
width: window.innerWidth - 200, width: window.innerWidth - 200,
}; };
chart.draw(dataTable, options); chart.draw(dataTable, options);
} }
</script> </script>
<div id="slider-range"></div> <div id="slider-range"></div>
<section id="timeline"> <section id="timeline">
<div class="row"> <div class="row">
<div id="timeline" class="col-12"> <div id="timeline" class="col-12">
<img class="loading" src="/wp-content/uploads/2016/12/ajax-loader.gif"> <img class="loading" src="/wp-content/uploads/2016/12/ajax-loader.gif">
</div> </div>
</div> </div>
</section> </section>
</main> </main>
</div> </div>
</div> </main>
<?php // get_sidebar(); ?> <?php // get_sidebar(); ?>
<?php get_footer(); ?> <?php get_footer(); ?>

12
style.css
View file

@ -1167,11 +1167,21 @@ a:hover, a:focus {
#experience-wrapper { #experience-wrapper {
grid-area: page-container; grid-area: page-container;
width: 100%;
}
.entry-content.tile#settings {
width: 70%;
margin: auto;
margin-top: 1em;
border: 2px dashed #020202;
padding: 1em;
border-radius: 25px;
margin-bottom: 1em;
} }
#organisations-grid { #organisations-grid {
border-spacing: 1em; border-spacing: 1em;
margin-top: 1em;
margin-bottom: 1em; margin-bottom: 1em;
border-radius: 10px; border-radius: 10px;
} }