Skip to content

Front End Implementation for the Citation Project #3

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

Merged
gsviteri merged 23 commits into from
May 4, 2020
Merged

Front End Implementation for the Citation Project #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
4e140af
base modal implementation with citation text, copy to clipboard and e…
Mar 5, 2020
4b42536
added export functionality to modal
yusra-haider Mar 10, 2020
f03d0d5
fixed an accidental typo
yusra-haider Mar 10, 2020
3de57c9
uncommented an loc
yusra-haider Mar 10, 2020
8658199
fixed a few bugs
yusra-haider Mar 10, 2020
d82c548
added an important fix for a bug where the modal was interfering with…
yusra-haider Mar 12, 2020
c02219a
Added some styling for pathway styling. Also added horizontal line be…
yusra-haider Mar 16, 2020
d9d29f8
changed code so that we only show one url in the pathway citation:
yusra-haider Mar 16, 2020
b768d32
- Fixed styling for the export form
yusra-haider Mar 16, 2020
940e00b
-Added some comments -slight styling change for button
yusra-haider Mar 16, 2020
3960352
disabled export button on modal open
yusra-haider Mar 16, 2020
37c787b
Changed export as to download as and export to download
yusra-haider Mar 17, 2020
f3d3196
added css rule to only apply margin to export options in FF
yusra-haider Mar 18, 2020
bde18f7
stylized the main cite us button, and adjusted it for different scree…
yusra-haider Mar 19, 2020
cbdcf4e
updated code to consume the the updated services from Content Service
yusra-haider Apr 22, 2020
9b53763
changed the way pathway text is being displayed. Added specific citat…
yusra-haider Apr 27, 2020
110a8ad
added comments
yusra-haider Apr 28, 2020
69eb861
fixed typo
yusra-haider Apr 28, 2020
1e1ec72
updated the icon
yusra-haider Apr 29, 2020
aaff96f
moved citation-query.js to js folder
yusra-haider Apr 29, 2020
3425662
deleted citation-query.js from favourite folder
yusra-haider Apr 29, 2020
88fc6e2
changed the css for citation-button-large from display:block to displ…
yusra-haider Apr 29, 2020
73aa8e0
fixed the css for the button
yusra-haider Apr 29, 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
67 changes: 67 additions & 0 deletions templates/favourite/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -808,6 +808,73 @@ video.responsive-vid {
}
/* ### END TWITTER WIDGET ### */

/** ### CSS for the citation project ### **/
.radio-button input[type="radio"],
input.radio {
float: left;
clear: none;
margin: 2px 0 0 2px;
}

.radio-button label {
float: left;
clear: none;
display: block;
padding: 0px 1em 0px 8px;
font-weight: normal;
}

#exportCitationButton[disabled] {
cursor: not-allowed;
}

@-moz-document url-prefix() {
.radio-button label {
margin: 2px 0 0 0;
}
}

/* class for citation button on big screens */
.citation-button-large {
position:fixed;
top:50%;
display: block;
background-color:#2F9EC2;
color:white;
padding: 16px;
border-radius: 0 10px 10px 0;
transition: 0.5s;
}

.citation-button-large i {
padding: 1px 2px 1px 2px;
}

.citation-button-large span {
font-family: Arial;
font-weight: 700;
display: none;
font-size: 25px;
}

.citation-button-large:hover {
padding-right: 25px;
color: white;
}

.citation-button-large:hover span {
display: inline-block;
color: white;
}

.citation-button-large:hover img {
display: none;
}


/* ### CSS for Citation Project Ends Here ###*/


@media only screen and (max-width: 1024px) {
.fav2buttons div[id^="favglyph-box"] i,
.fav2buttons div[id*=" favglyph-box"] i {
Expand Down
Binary file added templates/favourite/images/reactome/citation.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 63 additions & 3 deletions templates/favourite/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@
JHtml::_('jquery.framework');
$doc->addStyleSheet($this->baseurl. '/templates/' .$this->template. '/bootstrap/favth-bootstrap.css');
$doc->addScript($this->baseurl. '/templates/' .$this->template. '/bootstrap/favth-bootstrap.js');
//Custom: adding the js files for the citation project
$doc->addScript($this->baseurl. '/templates/' .$this->template. '/js/clipboard.min.js');
$doc->addScript($this->baseurl. '/templates/' .$this->template. '/js/citation-query.js');

// Custom: Adding autocomplete javascript
JHtml::_('script', 'jui/jquery.autocomplete.min.js', array('version' => 'auto', 'relative' => true));
Expand Down Expand Up @@ -85,7 +88,7 @@
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
<!-- custom: icon for phone app -->
<link rel="apple-touch-icon" sizes="128x128" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template;?>/images/logo/icon.png">

<!-- PARAMETERS -->
<?php require("admin/params.php"); ?>

Expand Down Expand Up @@ -521,7 +524,6 @@ function gtag(){dataLayer.push(arguments)};
</div>
<?php } ?>


<!-- PROMO -->
<?php
$promoactive = 0;
Expand Down Expand Up @@ -1376,11 +1378,69 @@ class="<?php
</div>
<?php } ?>


<?php if ($this->countModules('cite-us')) { ?>

<a class="citation-button-large favth-visible-md favth-visible-lg" onClick="getCitation();">
<span>Cite Us!</span>
<img src="<?php echo $this->baseurl ?>/templates/favourite/images/reactome/citation.png">
</a>

<button type="button" class="favth-btn favth-visible-xs favth-visible-sm" style= "width: 100%; padding: 10px; padding-bottom: 10px;" onClick="getCitation();">Cite Us!</button>

<!-- Modal -->
<div id="citationModal" class="modal fade" role="dialog" style="display:none;">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header favth-col-xs-12">
<div class="favth-col-xs-7 padding0">
<h4 class="modal-title" style="font-weight:bold"> Cite Us!</h4>
</div>
<div class="favth-col-xs-5" style="margin-top:20px; margin-bottom:10px; text-align:right; padding:0">
<a id="clipboardButton" data-clipboard-target="#citationText" title="Copy"><i class="fa fa-clipboard"></i></a>
<a id="mailButton" onClick="sendMail()" title="Email"><i class="fa fa-envelope"></i></a>
</div>
</div>
<div class="modal-body">
<div id="citationWarning" class="alert alert-warning" style="display:none;">
<strong>Warning!</strong> Unable to extract citation. Please try again later.
</div>
<div id="citationText" style="white-space:pre-line"></div>
<hr id="breakLine">
<form id="exportCitationForm">
<h5 style="font-weight:bold">Download As:</h5>
<div class="radio-button">
<input type="radio" class="radio" id="exportCitationAsBibTeX" name="exportOption" value="bib" onClick="enableExportCitationButton()"/>
<label for="exportCitationAsBibTeX">BibTeX</label>

<input type="radio" class="radio" id="exportCitationAsRIS" name="exportOption" value="ris" onClick="enableExportCitationButton()"/>
<label for="exportCitationAsRIS">RIS</label>

<input type="radio" class="radio" id="exportCitationAsText" name="exportOption" value="txt" onClick="enableExportCitationButton()"/>
<label for="exportCitationAsText">Text</label>
</div>
</form>
</div>

<div class="modal-footer">
<button id="exportCitationButton" type="button" class="favth-btn favth-btn-small" disabled onClick="exportCitation();">Download</button>
<button type="button" class="favth-btn favth-btn-small" data-dismiss="modal">Close</button>
</div>

</div>
</div>
</div>

<?php } ?>


<!-- BACKTOP -->
<div id="fav-backtopwrap">
<div class="favth-container">
<div class="favth-row">
<?php if (($show_back_to_top) !=0) : ?>
<?php if (($show_back_to_top) !=0) : ?>
<div id="fav-backtop" class="favth-col-lg-12 favth-col-md-12 favth-col-sm-12 favth-col-xs-12">
<a href="#" class="btn backtop" title="<?php echo htmlspecialchars($back_to_top_text);?>">
<i class="fa fa-angle-up"></i>
Expand Down
Loading