Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issue #164172 style: Certificate view design changes #30

Open
wants to merge 3 commits into
base: release-1.0.7
Choose a base branch
from
Open

Issue #164172 style: Certificate view design changes #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e286794
Issue #164172 style: Certificate view design changes
Aug 25, 2020
08e67ce
Issue #164172 style: Certificate view design changes
Aug 25, 2020
983bfcf
Issue #164172 style: Certificate view design changes
Aug 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 144 additions & 0 deletions src/components/com_tjcertificate/media/css/tjCertificate.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
.course-info-pin .thumbnail {
width: 200px;
padding: 0;
border-radius: 0;
}
.course-info-pin .thumbnail .tj-certificate-item-title {
font-weight: 600;
height: 42px;
overflow: hidden;
line-height: 20px;
font-size: 15px;
margin: 0;
}
.tj-certificate-sharing ul li {
display: inline-block;
padding: 20px 15px 0px 0;
}
.tj-certificate-blocks {
margin-bottom: 25px;
}
.tj-certificate-blocks h3 {
margin: 0 0 10px 0;
padding: 0;
font-size: 16px;
}
.btn-print {
background: transparent;
border: 0;
color: #337ab7;
}
.btn-print:before {
content: "\f02f";
font-family: "FontAwesome";
float: left;
}
.tj-certificate-action-btn .btn {
background-color: transparent !important;
color: #337ab7;
text-transform: uppercase;
font-weight: 600;
border-radius: 0;
}
.tj-certificate-action-btn .btn:hover,
.tj-certificate-action-btn .btn:focus {
background-color: #337ab7 !important;
color: #fff !important;
border: 1px solid #337ab7;
text-decoration: none;
}
.icon-search:before {
content: "\f002";
font-family: "FontAwesome";
}
.tj-search-filters .input-append {
display: inline-flex;
}
.br-1 {
border: 1px solid #e3e4e5;
}
.bg-lightblue {
background-color: #d6edf6;
}
.bg-white {
background-color: white;
}
.font-600 {
font-weight: 600;
}
.mt-0 {
margin-top: 0;
}
.py-10 {
padding-top: 10px;
padding-bottom: 10px;
}
.m-10 {
margin: 10px;
}
.m-5 {
margin: 5px;
}
.p-5 {
padding: 5px;
}
.p-15 {
padding: 15px;
}
.p-10 {
padding: 10px;
}
.px-15 {
padding-left: 15px;
padding-right: 15px;
}
.py-25 {
padding-top: 25px;
padding-bottom: 25px;
}
.fs-16 {
font-size: 16px;
}
.br-5 {
border-radius: 5px;
}
.mb-15 {
margin-bottom: 15px;
}
.mr-5 {
margin-right: 5px;
}
.d-block {
display: block;
}
@media screen and (max-width: 600px) {
.course-info-pin .thumbnail {
width: 100%;
border: 0;
}
.course-info-pin .thumbnail .bg-contain {
height: 80px !important;
width: 100px;
float: left;
}
.tj-certificate-item-content {
float: right;
width: 70%;
}
.course-info-pin .thumbnail .tj-certificate-item-title {
height: auto;
}
.tj-certificate-item-content .p-10 {
padding: 0;
}
.course-info-pin hr {
display: none;
}
.tj-certificate-action-btn {
margin: 10px 0 0 0;
}
.tj-certificate-action-btn .btn {
float: left;
width: auto;
}
}
5 changes: 5 additions & 0 deletions src/components/com_tjcertificate/site/languages/en-GB/en-GB.com_tjcertificate.ini
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ COM_TJCERTIFICATE_TEMPLATE_INVALID_DATE="Invalid expiry date! Enter in Y-m-d H:i
COM_TJCERTIFICATE_CERTIFICATE_PRINT="Print"
COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_PDF="Save as PDF"
COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_FILE_NAME="Certificate_%s"
COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_SHARE="Certificate Download & Share:"
COM_TJCERTIFICATE_CERTIFICATE_CERTIFICATE_RECIPIENT="Certificate Recipient:"
COM_TJCERTIFICATE_CERTIFICATE_ABOUT_THE_COURSE="About the Course:"
COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_AS_IMAGE="Download as Image"
COM_TJCERTIFICATE_CERTIFICATE_COMPLETED_BY="Completed by "

;My certificate view
COM_TJCERTIFICATE_CERTIFICATE_MY_VIEW_DEFAULT_TITLE="My Certificates"
Expand Down
172 changes: 107 additions & 65 deletions src/components/com_tjcertificate/site/views/certificate/tmpl/default.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,23 @@
use Joomla\CMS\Factory;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\HTML\HTMLHelper;

HTMLHelper::StyleSheet('components/com_tjcertificate/assets/font-awesome-4.1.0/css/font-awesome.min.css');
HTMLHelper::script('components/com_tjcertificate/assets/html2canvas/js/html2canvas.js');
HTMLHelper::script('components/com_tjcertificate/assets/tjCertificate.js');
HTMLHelper::script('components/com_tjcertificate/assets/css/tjCertificate.css');

if ($this->showSearchBox)
{
?>
<form action="<?php echo Route::_('index.php?option=com_tjcertificate&view=certificate'); ?>" method="post" name="adminForm" id="adminForm">
<div class="tj-search-filters">
<div class="btn-wrapper input-append">
<input type="text" name="certificate" id="certificate"
value="<?php echo $this->uniqueCertificateId; ?>" placeholder="<?php echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_TEMPLATE_ENTER_CERTIFICATE_ID'); ?>">
<input type="text" name="certificate" id="certificate"
value="<?php echo $this->uniqueCertificateId;?>"
placeholder="<?php echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_TEMPLATE_ENTER_CERTIFICATE_ID'); ?>">
<button type="submit" class="btn hasTooltip" title="" aria-label="Search" data-original-title="Search">
<span class="icon-search" aria-hidden="true"></span>
</button>
Expand All @@ -31,71 +39,105 @@
</form>
<?php
}
?>
<div class="row tj-certificate">
<div class="col-sm-12 col-md-9 tj-certificate-content mb-15">
<?php
if ($this->certificate)
{?>
<div id="certificateContent">
<?php
echo $this->certificate->generated_body;
?>
</div>
<input id="certificateId" type="hidden" value="<?php echo $this->certificate->unique_certificate_id;?>"/>
<?php
}
?>
</div>
<div class="col-sm-12 col-md-3 tj-certificate-deatils">

// Tjlms course / jt event info HTML
if (!empty($this->contentHtml))
{
echo $this->contentHtml;
}
<div class="tj-certificate-blocks">
<div class="tj-certificate-blocks-heading">
<h3>
<?php echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_CERTIFICATE_RECIPIENT');?>
</h3>
</div>
<div class="tj-certificate-content bg-lightblue py-25 px-15">
<h4 class="mt-0 pull-left mr-5"><?php
echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_COMPLETED_BY');
?></h4>
<span class="fs-16"><strong><?php echo Factory::getUser($this->certificate->getUserId())->name; ?></strong></span>
</div>
</div>

if ($this->certificate)
{
if ($this->certificate->getUserId() == Factory::getUser()->id)
{
?>
<div class="techjoomla-bootstrap">
<div class="table-responsive">
<table cellpadding="5">
<tr>
<td>
<input type="button" class="btn btn-blue" onclick="printCertificate('certificateContent')"
value="<?php echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_PRINT');?>" />
</td>
<?php
if ($this->certificate->getDownloadUrl())
{
?>
<td>
<a class="btn btn-primary btn-medium" href="<?php echo $this->certificate->getDownloadUrl();?>">
<?php
echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_PDF');
?>
</a>
</td>
<?php
}
?>
</tr>
</table>
<?php
if ($this->certificate->getUserId() == Factory::getUser()->id)
{
?>
<div class="tj-certificate-blocks">
<div class="tj-certificate-blocks-heading">
<h3>
<?php echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_SHARE');?>
</h3>
</div>
<div>
<div class="tj-certificate-content p-15 br-1">

<a class="d-block mb-15" id="btn-Convert-Html2Image" href="#"><i class="fa fa-download" aria-hidden="true"></i>
<?php
echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_AS_IMAGE');
?></a>

<?php
if ($this->certificate->getDownloadUrl())
{
?>

<a class="d-block mb-15" href="<?php echo $this->certificate->getDownloadUrl();?>">
<i class="fa fa-file-pdf-o" aria-hidden="true"></i>
<?php
echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_DOWNLOAD_PDF');
?>
</a>

<?php
}
?>

<span class="btn-print">
<input type="button" class="btn-print" onclick="printCertificate('certificateContent')"
value="<?php echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_PRINT');?>" />
</span>

<div class="tj-certificate-sharing">
<?php
if (isset($this->item))
{
echo $this->loadTemplate('social_sharing');
}
?>
</div>
<div id="previewImage"></div>
</div>
</div>
<?php
}
?>
<div id="certificateContent">
<?php
echo $this->certificate->generated_body;
?>
}
?>
<div class="tj-certificate-blocks">
<div class="tj-certificate-blocks-heading">
<h3>
<?php echo Text::_('COM_TJCERTIFICATE_CERTIFICATE_ABOUT_THE_COURSE');?>
</h3>
</div>
<div class="tj-certificate-content">
<?php
//Tjlms course/ jt event info HTML
if (!empty($this->contentHtml))
{
echo $this->contentHtml;
}
?>
</div>
</div>
</div>
</div>
<?php
}
?>

<script type="text/javascript">
function printCertificate(elementId) {
var printContent = document.getElementById(elementId).innerHTML;
var originalContent = document.body.innerHTML;
document.body.innerHTML = printContent;
window.print();
document.body.innerHTML = originalContent;
}
</script>
<style type="text/css">
.icon-search:before {
content: "\f002";
font-family: "FontAwesome";
}
.tj-search-filters .input-append{
display: inline-flex;
}
</style>
Loading