Skip to content

Commit

Permalink
feat: improved cards for bodies, companies, and jobs
Browse files Browse the repository at this point in the history 
Started out as a rewrite for the broken cards used to display BM and GMM bodies.
I believe I broke their spacing many years ago when refactoring something else,
but I never had the need to fix it (as people stopped complaining).

The cards for companies always worked but looking back at the Sass code, they
were just interfering with each other in which the body overview lost.

Cards are now unified and follow the newer Boostrap styling more closely.

---

Intention was to fix the styling for BM/GMM bodies where the abbreviation of the
body was not visible due to the usage of picture with a white(-ish) background.
This has been resolved by moving all text back into the body of the card instead
of on top of the cover image. Sizing and grid layout are handled through CSS.

If there is no cover image, the GEWIS logo is now shown (similar to how this is
done in the Photo module).
  • Loading branch information
@tomudding
tomudding committed Dec 7, 2024
1 parent 8d93db8 commit 2c13fd4
Show file tree
Hide file tree
Showing 12 changed files with 254 additions and 348 deletions.
77 changes: 36 additions & 41 deletions module/Company/view/company/company/job-list.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,49 +112,44 @@ $this->headScript()
</div>
</div>
<?php else: ?>
<div class="row">
<div class="col-md-12">
<div class="card-grid">
<?php foreach ($jobList as $index => $job): ?>
<?php
$company = $job->getPackage()->getCompany();
<div class="card-grid">
<?php foreach ($jobList as $index => $job): ?>
<?php
$company = $job->getPackage()->getCompany();

$jobUrl = $this->url('company/companyItem/joblist/job_item', [
'companySlugName' => $company->getSlugName(),
'jobSlugName' => $job->getSlugName(),
'category' => $this->localiseText($jobCategory->getSlug()),
]);
?>
<a href="<?= $jobUrl ?>" class="card job-card" data-index="<?= $index ?>"
data-posted="<?= $job->getCreatedAt()->format(DateTime::ATOM) ?>">
<div class="card-img">
<img
src="<?= $this->fileUrl($company->getLogo()) ?>"
alt="<?= $this->escapeHtmlAttr($company->getName()) ?>"/>
</div>
<h2 class="card-title">
<?= $this->escapeHtml($this->localiseText($job->getName())) ?>
</h2>
<p class="card-subtitle text-muted"><?= $this->escapeHtml($company->getName()) ?></p>
<?php if ('' !== ($location = $this->localiseText($job->getLocation()))): ?>
<p class="job-location">
<?= $this->escapeHtml($location) ?>
</p>
<?php endif; ?>
<div>
<?php foreach ($job->getLabels() as $label): ?>
<span class="label label-default job-label" data-label="<?= $escaper->escapeHtmlAttr($this->localiseText($label->getAbbreviation())) ?>"
data-toggle="tooltip"
title="<?= $escaper->escapeHtmlAttr($this->localiseText($label->getName())) ?>"><?= $escaper->escapeHtmlAttr($this->localiseText($label->getAbbreviation())) ?></span>
<?php endforeach; ?>
</div>
<div class="card-footer">
<button class="btn btn-link"><?= $this->translate('View') ?></button>
</div>
</a>
<?php endforeach; ?>
$jobUrl = $this->url('company/companyItem/joblist/job_item', [
'companySlugName' => $company->getSlugName(),
'jobSlugName' => $job->getSlugName(),
'category' => $this->localiseText($jobCategory->getSlug()),
]);
?>
<div class="card job-card" data-index="<?= $index ?>" data-posted="<?= $job->getCreatedAt()->format(DateTimeInterface::ATOM) ?>">
<a href="<?= $jobUrl ?>" class="stretched-link"></a>
<img src="<?= $this->fileUrl($company->getLogo()) ?>" class="card-image"
alt="<?= $this->escapeHtmlAttr($company->getName()) ?>"/>
<div class="card-body">
<h5 class="card-title">
<?= $this->escapeHtml($this->localiseText($job->getName())) ?>
</h5>
<h6 class="card-subtitle text-muted"><?= $this->escapeHtml($company->getName()) ?></h6>
<div>
<?php foreach ($job->getLabels() as $label): ?>
<span class="label label-default job-label" data-label="<?= $escaper->escapeHtmlAttr($this->localiseText($label->getAbbreviation())) ?>"
data-toggle="tooltip"
title="<?= $escaper->escapeHtmlAttr($this->localiseText($label->getName())) ?>"><?= $escaper->escapeHtmlAttr($this->localiseText($label->getAbbreviation())) ?></span>
<?php endforeach; ?>
</div>
<?php if ('' !== ($location = $this->localiseText($job->getLocation()))): ?>
<p class="card-text">
<?= $this->escapeHtml($location) ?>
</p>
<?php endif; ?>
</div>
<div class="card-footer">
<button class="btn btn-link"><?= $this->translate('View') ?></button>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php
Expand Down
2 changes: 1 addition & 1 deletion module/Company/view/company/company/list.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ $this->headTitle($this->translate('Companies'));
</div>

<div class="col-md-9">
<div class="company-grid row">
<div class="card-grid company-grid">
<?php
// Randomize the order of companies
shuffle($companyList);
Expand Down
68 changes: 32 additions & 36 deletions module/Company/view/partial/company/company/grid/company.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,41 +25,37 @@ $companyURL = $this->url(
true // Reuse matched parameters
);
?>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="company-grid-item grid-item col-md-12" id="company-<?= $escaper->escapeHtmlAttr(strval($company->getId())) ?>">
<div class="company-grid-content">
<a href="<?= $companyURL ?>" class="company-grid-logo">
<img alt="<?= $this->translate('Logo of') ?> <?= $escaper->escapeHtmlAttr($company->getName()) ?>"
class="company-logo img-responsive"
src="<?= $this->fileUrl($company->getLogo()) ?>"/>
</a>
<div class="company-grid-text">
<h4 class="company-name">
<a href="<?= $companyURL ?>">
<?= $this->escapeHtml($company->getName()) ?>
</a>
</h4>
<p class="company-slogan">
<em><?= $this->escapeHtml($this->localiseText($company->getSlogan())) ?></em>
</p>
<ul>
<?php foreach ($jobCategories as $category): ?>
<?php if (0 < ($activeJobsInCategory = $company->getNumberOfActiveJobs($category))): ?>
<li>
<a href="<?= $this->url(
'company/companyItem/joblist',
[
'companySlugName' => $company->getSlugName(),
'category' => $this->localiseText($category->getSlug()),
],
) ?>">
<?= $activeJobsInCategory ?> <?= $this->escapeHtml($this->localiseText(1 === $activeJobsInCategory ? $category->getName() : $category->getPluralName())) ?>
</a>
</li>
<?php endif ?>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="card company-card">
<a href="<?= $companyURL ?>">
<img src="<?= $this->fileUrl($company->getLogo()) ?>" class="card-image"
alt="<?= $this->translate('Logo of') ?> <?= $escaper->escapeHtmlAttr($company->getName()) ?>" />
</a>
<div class="card-body">
<a href="<?= $companyURL ?>">
<h5 class="card-title"><?= $this->escapeHtml($company->getName()) ?></h5>
</a>
<h6 class="card-subtitle text-muted"><?= $this->escapeHtml($this->localiseText($company->getSlogan())) ?></h6>
<ul>
<?php $allEmpty = true; ?>
<?php foreach ($jobCategories as $category): ?>
<?php if (0 < ($activeJobsInCategory = $company->getNumberOfActiveJobs($category))): ?>
<?php $allEmpty = false; ?>
<li>
<a href="<?= $this->url(
'company/companyItem/joblist',
[
'companySlugName' => $company->getSlugName(),
'category' => $this->localiseText($category->getSlug()),
],
) ?>">
<?= $activeJobsInCategory ?> <?= $this->escapeHtml($this->localiseText(1 === $activeJobsInCategory ? $category->getName() : $category->getPluralName())) ?>
</a>
</li>
<?php endif ?>
<?php endforeach; ?>
<?php if ($allEmpty): ?>
<a href="<?= $companyURL ?>" class="stretched-link"></a>
<?php endif; ?>
</ul>
</div>
</div>
2 changes: 1 addition & 1 deletion module/Frontpage/view/frontpage/organ/committee-list.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ $this->headTitle($this->translate('Committees'));
</div>
</div>
</div>
<div class="row">
<div class="card-grid">

<?php
$lang = $this->plugin('translate')->getTranslator()->getLocale();
Expand Down
4 changes: 2 additions & 2 deletions module/Frontpage/view/frontpage/organ/fraternity-list.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $this->headTitle($this->translate('Fraternities'));
<h1><?= $this->translate('Fraternities') ?></h1>
<p><?= $this->translate('Study association GEWIS obviously has several fraternities which contribute to the atmosphere at GEWIS and organize fun activities. Some fraternities have retired, but luckily new fraternities continue to be founded.') ?></p>
<p><?= $this->translate('The currently active fraternities of GEWIS (in arbitrary order)') ?></p>
<div class="row">
<div class="card-grid">
<?php
$lang = $this->plugin('translate')->getTranslator()->getLocale();

Expand All @@ -35,7 +35,7 @@ $this->headTitle($this->translate('Fraternities'));
<hr>
<h3><?= $this->translate('Retired fraternities') ?></h3>
<p><?= $this->translate('The following fraternities have retired:') ?></p>
<div class="row">
<div class="card-grid">
<?php
$lang = $this->plugin('translate')->getTranslator()->getLocale();
foreach ($abrogatedFraternities as $fraternity) {
Expand Down
24 changes: 14 additions & 10 deletions module/Frontpage/view/frontpage/organ/gmm-body.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@ $this->headTitle($namePlural);
<section class="section">
<div class="container">
<h1><?= $namePlural ?></h1>
<div class="row">
<?php if (empty($active)): ?>
<?php if (empty($active)): ?>
<div class="row">
<div class="col-md-12">
<p>
<?= sprintf(
Expand All @@ -34,7 +34,9 @@ $this->headTitle($namePlural);
) ?>
</p>
</div>
<?php else: ?>
</div>
<?php else: ?>
<div class="card-grid">
<?php
foreach ($active as $avc) {
echo $this->partial('partial/organ-card.phtml', [
Expand All @@ -43,17 +45,17 @@ $this->headTitle($namePlural);
]);
}
?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
<hr>
<h3>
<?= sprintf(
$this->translate('Previous %s'),
$namePlural,
) ?>
</h3>
<div class="row">
<?php if (empty($abrogated)): ?>
<?php if (empty($abrogated)): ?>
<div class="row">
<div class="col-md-12">
<p>
<?= sprintf(
Expand All @@ -62,7 +64,9 @@ $this->headTitle($namePlural);
) ?>
</p>
</div>
<?php else: ?>
</div>
<?php else: ?>
<div class="card-grid">
<?php
foreach ($abrogated as $avc) {
echo $this->partial('partial/organ-card.phtml', [
Expand All @@ -71,7 +75,7 @@ $this->headTitle($namePlural);
]);
}
?>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
</section>
2 changes: 1 addition & 1 deletion module/Frontpage/view/frontpage/organ/historical-committee-list.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ $this->headTitle($this->translate('Old committees'));
</div>
</div>
</div>
<div class="row">
<div class="card-grid">
<?php
$lang = $this->plugin('translate')->getTranslator()->getLocale();

Expand Down
64 changes: 33 additions & 31 deletions module/Frontpage/view/partial/organ-card.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,36 +14,38 @@ use Laminas\View\Renderer\PhpRenderer;

$organInformation = $organ->getApprovedOrganInformation()
?>
<div class="col-md-3 col-sm-4 col-xs-6">
<a href="<?= $this->url('home/organ', ['abbr' => $organ->getAbbr(), 'type' => $organ->getType()->value]) ?>">
<div class="card">
<div class="card-image">
<?php if (null !== $organInformation && null !== $organInformation->getThumbnailPath()): ?>
<img class="img-responsive" src="<?= $this->fileUrl($organInformation->getThumbnailPath()) ?>">
<?php endif ?>
<span class="card-title"><?= $this->escapeHtml($organ->getAbbr()) ?></span>
<div class="card-details">
<?php if (null !== $organInformation): ?>
<?= $lang === 'en' ? $organInformation->getShortEnglishDescription() : $organInformation->getShortDutchDescription() ?>
<?php endif; ?>
</div>
</div><!-- card image -->

<div class="card-content">
<span><?= $this->escapeHtml($organ->getName()) ?>
<?php if (null !== $organInformation && $this->acl('decision_service_acl')->isAllowed('organ', 'view')): ?>
<a href="mailto:<?= $organInformation->getEmail() ?>" class="pull-right">
<span class="fas fa-envelope"></span>
</a> &nbsp;
<?php endif; ?>
<?php if (null !== $organInformation && strlen($organInformation->getWebsite()) > 0): ?>
<a href="<?= $organInformation->getWebsite() ?>" class="pull-right">
<span class="fas fa-external-link-alt"></span>
</a>
<?php endif; ?>
</span>
</div><!-- card content -->

<div class="card">
<a href="<?= $this->url(
'home/organ',
[
'abbr' => $organ->getAbbr(),
'type' => $organ->getType()->value,
],
) ?>" class="stretched-link"></a>
<?php if (null !== $organInformation && null !== $organInformation->getThumbnailPath()): ?>
<img class="card-image" src="<?= $this->fileUrl($organInformation->getThumbnailPath()) ?>" alt="">
<?php else: ?>
<img class="carg-image" src="/img/missing_cover.svg" alt="">
<?php endif ?>
<div class="card-body">
<h5 class="card-title"><?= $this->escapeHtml($organ->getAbbr()) ?></h5>
<h6 class="card-subtitle text-muted"><?= $this->escapeHtml($organ->getName()) ?></h6>
<p class="card-text">
<?php if (null !== $organInformation): ?>
<?= $this->escapeHtml($lang === 'en' ? $organInformation->getShortEnglishDescription() : $organInformation->getShortDutchDescription()) ?>
<?php endif; ?>
</p>
</div>
<?php if (null !== $organInformation): ?>
<div class="card-footer text-muted">
<hr>
<?php if ($this->acl('decision_service_acl')->isAllowed('organ', 'view')): ?>
<span class="fas fa-envelope"></span>
<?php endif; ?>
<?php if (strlen($organInformation->getWebsite()) > 0): ?>
<span class="fas fa-globe"></span>
<?php endif; ?>
<!-- TODO: GH-1907 -->
</div>
</a>
<?php endif; ?>
</div>
26 changes: 13 additions & 13 deletions public/css/gewis-theme.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 2c13fd4

Please sign in to comment.