mobile updates

This commit is contained in:
Joey Kimsey
2025-02-04 05:10:00 -05:00
parent b670c977cf
commit ff36d27c38
16 changed files with 416 additions and 387 deletions

View File

@ -46,12 +46,12 @@
<!-- Centered Logo (Now inside normal document flow) -->
<a href="/" class="align-items-center text-white text-decoration-none d-flex d-md-none">
<img src="{ROOT_URL}{LOGO}" width="40" height="32" alt="{SITENAME} Logo" class="bi">
<img src="{ROOT_URL}images/logo.png" width="40" height="32" alt="{SITENAME} Logo" class="bi">
</a>
<!-- Logo (Normal Position for Large Screens) -->
<a href="/" class="align-items-center text-white text-decoration-none d-none d-md-flex">
<img src="{ROOT_URL}{LOGO}" width="40" height="32" alt="{SITENAME} Logo" class="bi">
<img src="{ROOT_URL}{LOGO}" height="48" alt="{SITENAME} Logo" class="bi">
</a>
<div class="navbar-expand-md flex-grow-1">

View File

@ -1,28 +1,30 @@
<div class="card context-main context-main-bg col-8 offset-2 my-4 p-3">
<h2 class="text-center">Portfolio</h2>
<hr>
{LOOP}
<div class="card context-main context-third-bg py-2 my-2">
<div class="row g-0">
<div class="col-md-4 ps-2 d-flex justify-content-center align-items-center">
<a href="{url}">
<img class="img-fluid rounded" src="{image}" alt="{title} preview">
</a>
</div>
<div class="col-md-8">
<div class="card-body">
<h4 class="card-title">{title}</h4>
<p class="card-text">
{description}
</p>
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
<h2 class="text-center">Portfolio</h2>
<hr>
{LOOP}
<div class="card context-main context-third-bg py-2 my-2">
<div class="row g-0 p-lg-2">
<div class="col-md-4 ps-2 d-flex justify-content-center align-items-center">
<a href="{url}">
<img class="img-fluid rounded" src="{image}" alt="{title} preview">
</a>
</div>
<div class="col-md-8">
<div class="card-body">
<h4 class="card-title">{title}</h4>
<p class="card-text">
{description}
</p>
</div>
</div>
</div>
</div>
</div>
{/LOOP}
{ALT}
<div class="card context-main context-main-bg">
<p>None Found</p>
</div>
{/ALT}
{/LOOP}
{ALT}
<div class="card context-main context-main-bg">
<p>None Found</p>
</div>
{/ALT}
</div>
</div>

View File

@ -1,10 +1,10 @@
<div class="my-3 row" role="group" aria-label="Resume Downloads">
<!-- Adjusted the col-3 div -->
<div class="col-3 d-flex align-items-center justify-content-end">
<div class="col-4 col-md-3 d-flex align-items-center justify-content-end">
<h3>Download</h3>
</div>
<!-- Button group -->
<div class="btn-group btn-group-justified col-6" role="group" aria-label="Resume Downloads">
<div class="btn-group btn-group-justified col-8 col-md-6" role="group" aria-label="Resume Downloads">
<a href="/downloads/resume/docx" class="btn btn-primary" role="button" target="_blank" download>Word</a>
<a href="/downloads/resume/pdf" class="btn btn-primary" role="button" target="_blank" download>PDF</a>
<a href="/downloads/resume/md" class="btn btn-primary" role="button" target="_blank" download>Markdown</a>

View File

@ -1,9 +1,9 @@
<div class="mb-3 row" role="group" aria-label="Resume View Type">
<div class="btn-group btn-group-justified col-6 offset-3" role="group" aria-label="Resume View Type">
<div class="btn-group btn-group-justified col-6 offset-lg-3" role="group" aria-label="Resume View Type">
<a href="?view=tiimeline" class="btn btn-primary" role="button">Timeline</a>
<a href="?" class="btn btn-primary" role="button">Standard</a>
</div>
<div class="form-check form-switch col-3 d-flex align-items-center">
<div class="form-check form-switch col-6 col-lg-3 d-flex align-items-center justify-content-center justify-content-lg-start">
<input class="form-check-input" type="checkbox" role="switch" name="hidebs" id="hidebs" value="true">
<label class="form-check-label ps-2" for="hidebs">Hide the Fluff</label>
</div>

View File

@ -1,34 +1,36 @@
<div class="card context-main context-main-bg col-8 offset-2 my-4 p-3">
<h2 class="text-center">Resume</h2>
<hr>
{RESUME_NAV}
{LOOP}
<div class="card context-main context-third-bg py-2 my-2 rounded">
<div class="row g-0 px-3">
<div class="col-md-4 d-flex justify-content-center align-items-center">
<img class="img-fluid rounded" src="{image}" alt="{name}">
</div>
<div class="col-md-8">
<div class="card-body">
<h4 class="card-title">{name}</h4>
<p class="card-text">
<b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i>
</p>
<div class="details card-text">
{details}
</div>
<div class="details_nobs card-text d-none">
{details_nobs}
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
<h2 class="text-center">Resume</h2>
<hr>
{RESUME_NAV}
{LOOP}
<div class="card context-main context-third-bg py-2 my-2 rounded">
<div class="row g-0 px-3">
<div class="col-md-4 d-flex justify-content-center align-items-center p-2">
<img class="img-fluid" src="{image}" alt="{name}">
</div>
<div class="col-md-8">
<div class="card-body">
<h4 class="card-title">{name}</h4>
<p class="card-text">
<b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i>
</p>
<div class="details card-text">
{details}
</div>
<div class="details_nobs card-text d-none">
{details_nobs}
</div>
</div>
</div>
</div>
</div>
{/LOOP}
{ALT}
<div class="resume-position">
<p>None Found</p>
</div>
{/ALT}
{RESUME_DOWNLOADS}
</div>
{/LOOP}
{ALT}
<div class="resume-position">
<p>None Found</p>
</div>
{/ALT}
{RESUME_DOWNLOADS}
</div>

View File

@ -1,33 +1,35 @@
<div class="card context-main context-main-bg col-8 offset-2 my-4 p-3">
<h2 class="text-center">Resume</h2>
<hr>
{RESUME_NAV}
<div class="details_nobs card-text d-none text-center col-6 offset-3">
<p>
Honestly, I really wanted to do something fun and interactive here.
Unfortunately I didn't have a specific idea in mind and this was abandoned in favor of spending my time somewhere with a bigger impact.
</p>
</div>
{LOOP}
<div class="resume-timeline">
<div class="timeline-container {side}">
<div class="timeline-content context-third-bg">
<h3 class="resume-position-title">{name}</h3>
<p><b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i></p>
<div class="details card-text">
{details}
</div>
<div class="details_nobs card-text d-none">
{details_nobs}
<div class="col-12 col-md-10 col-lg-8 offset-lg-2 offset-md-1 offset-0 mb-3 mb-lg-5 mt-2 mt-lg-4">
<div class="p-2 p-lg-4 mb-lg-4 m-2 rounded-3 context-main context-main-bg">
<h2 class="text-center">Resume</h2>
<hr>
{RESUME_NAV}
<div class="details_nobs card-text d-none text-center col-6 offset-3">
<p>
Honestly, I really wanted to do something fun and interactive here.
Unfortunately I didn't have a specific idea in mind and this was abandoned in favor of spending my time somewhere with a bigger impact.
</p>
</div>
{LOOP}
<div class="resume-timeline">
<div class="timeline-container {side}">
<div class="timeline-content context-third-bg">
<h3 class="resume-position-title">{name}</h3>
<p><b>{position}</b> from <i>{prettyStart}</i> to <i>{prettyEnd}</i></p>
<div class="details card-text">
{details}
</div>
<div class="details_nobs card-text d-none">
{details_nobs}
</div>
</div>
</div>
</div>
</div>
{/LOOP}
{ALT}
<div class="resume-timeline">
<p>None Found</p>
</div>
{/ALT}
{RESUME_DOWNLOADS}
{/LOOP}
{ALT}
<div class="resume-timeline">
<p>None Found</p>
</div>
{/ALT}
{RESUME_DOWNLOADS}
</div>
</div>

View File

@ -17,6 +17,7 @@ use TheTempusProject\Bedrock\Functions\Check;
use TheTempusProject\Canary\Bin\Canary as Debug;
use TheTempusProject\Classes\DatabaseModel;
use TheTempusProject\Plugins\Wip as Plugin;
use DateTime;
class Projects extends DatabaseModel {
public $tableName = 'projects';
@ -25,6 +26,7 @@ class Projects extends DatabaseModel {
[ 'description', 'text', '' ],
[ 'progress', 'int', '3' ],
[ 'startDate', 'varchar', '32' ],
[ 'endDate', 'varchar', '32' ],
];
public $plugin;
@ -73,7 +75,20 @@ class Projects extends DatabaseModel {
$instance = $postArray;
$end = true;
}
$instance->prettyStart = $instance->startDate;
if ( ! empty( $instance->startDate ) ) {
$startDate = DateTime::createFromFormat( 'Y-m', $instance->startDate );
$startDateFormatted = $startDate->format('F Y');
$instance->prettyStart = $startDateFormatted;
} else {
$instance->prettyStart = 'TBD';
}
if ( ! empty( $instance->endDate ) ) {
$endDate = DateTime::createFromFormat( 'Y-m', $instance->endDate );
$endDateFormatted = $endDate->format('F Y');
$instance->prettyEnd = $endDateFormatted;
} else {
$instance->prettyEnd = 'TBD';
}
$out[] = $instance;
if ( !empty( $end ) ) {
$out = $out[0];
@ -82,4 +97,4 @@ class Projects extends DatabaseModel {
}
return $out;
}
}
}

View File

@ -1,24 +1,29 @@
<div class="col-8 mx-auto p-3 rounded shadow-sm my-4 context-main-bg">
<h1 class="text-center">Work in Progress</h1>
<hr>
{LOOP}
<div class="wip-project">
<h3 class="wip-project-title atb-green">{title}</h3>
<small class=""><b>Started: </b><i>{prettyStart}</i></small>
<div class="progress mt-2">
<div class="progress-bar atb-green-bg" role="progressbar" style="width: {progress}%" aria-valuenow="{progress}" aria-valuemin="0" aria-valuemax="100"></div>
<div class="m-2 m-lg-4">
<div class="col-12 mx-5 col-sm-10 col-lg-8 mx-auto p-4 rounded shadow-sm context-main-bg">
<h1 class="text-center">Work in Progress</h1>
<hr>
{LOOP}
<div class="wip-project">
<h3 class="wip-project-title text-center text-md-start text-primary">{title}</h3>
<div class="d-flex justify-content-between">
<small><span class="text-muted">Started: </span><i class="">{prettyStart}</i></small>
<small><span class="text-muted">Finished: </span><i class="">{prettyEnd}</i></small>
</div>
<div class="progress mt-2">
<div class="progress-bar" role="progressbar" style="width: {progress}%" aria-valuenow="{progress}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="well my-3">
{description}
</div>
</div>
<div class="well my-3">
{description}
<div class="col-6 offset-3 my-2">
<hr>
</div>
</div>
<div class="col-6 offset-3 my-2">
<hr>
</div>
{/LOOP}
{ALT}
<div class="wip-project">
<p>None Found</p>
</div>
{/ALT}
{/LOOP}
{ALT}
<div class="wip-project">
<p>None Found</p>
</div>
{/ALT}
</div>
</div>