CSS

Observation for PR #521 Safari Chrome After manual add in styles in Safari browser Problem The dropdown button, dropdown box and dropdown list were not wrapped inside a <div></div> <div class="color-background color-background-block dataset-color-background-block"> <p><?= $mainSection->getReleaseDetails()['authors'] ?> (<?=$mainSection->getReleaseDetails()['release_year']?>): <?= $mainSection->getReleaseDetails()['dataset_title'].' '.($mainSection->getReleaseDetails()['publisher'] ?? '<span class="label label-danger">NO PUBLISHER SET</span>').'. '; ?><a href="https://doi.org/10.5524/<?php echo $model->identifier;?>">https://doi.org/10.5524/<?php echo $model->identifier;?></a></p> <p><a class="doi-badge" href="#"><span class="badge">DOI</span><span class="badge">10.5524/<?php echo $model->identifier;?></span></a><button onclick="showCitation()" class="drop-citation-btn" >Cite Dataset<span class="caret"></span></button></p> <div id="citationDropdown" class="citation-content"> <a id="citeText" href='http://data.datacite.org/text/x-bibliography/10.5524/<?php echo $model->identifier;?>' target="_blank">Text</a> <a id="citeRis" href='http://data.datacite.org/application/x-research-info-systems/10.5524/<?php echo $model->identifier;?>' target="_self">RIS</a> <a id="citeBibTeX" href='http://data.datacite.org/application/x-bibtex/10.5524/<?php echo $model->identifier;?>' target="_self">BibTeX</a> </div> </div> Solution Wrap all dropdown stuff inside dataset-block-wrapper <div class="color-background color-background-block dataset-color-background-block"> <p><?= $mainSection->getReleaseDetails()['authors'] ?> (<?=$mainSection->getReleaseDetails()['release_year']?>): <?= $mainSection->getReleaseDetails()['dataset_title'].' '.($mainSection->getReleaseDetails()['publisher'] ?? '<span class="label label-danger">NO PUBLISHER SET</span>').'. '; ?><a href="https://doi.org/10.5524/<?php echo $model->identifier;?>">https://doi.org/10.5524/<?php echo $model->identifier;?></a></p> <div id="dataset-block-wrapper"> <div id="dropdown-div"> <div class="dropdown-box"> <button id="CiteDataset" class="drop-citation-btn dropdown-toggle" type="button" data-toggle="dropdown">Cite Dataset<span class="caret"></span></button> <?php $text = file_get_contents('https://data.datacite.org/text/x-bibliography/10.5524/' . $model->identifier); $clean_text = strip_tags(preg_replace("/&#?[a-z0-9]+;/i", "", $text)); ?> <script> function showText() { var textWindow = window.open(); textWindow.document.write(`<?php echo $clean_text; ?>`); } </script> <ul class="dropdown-menu" aria-labelledby="CiteDataset"> <li><a id="Text" onclick="showText()" target="_blank">Text</a></li> <li><a id="citeRis" href='https://data.datacite.org/application/x-research-info-systems/10.5524/<?php echo $model->identifier;?>' target="_self">RIS</a></li> <li><a id="citeBibTeX" href='https://data.datacite.org/application/x-bibtex/10.5524/<?php echo $model->identifier;?>' target="_self">BibTeX</a></li> </ul> </div> </div> </div> </div> Update the CSS #dropdown-div { margin : 0; float : left ; } .dropdown-box { position: absolute; } .drop-citation-btn { width: 110px; color: white; font-size: 13px; font-weight: normal; border: none; cursor: pointer; background-color: #099242; padding: 5px 10px; border-radius: 4px 4px 4px 4px; display: inline-block; position: relative; text-decoration: none; } .drop-citation-btn:hover { color: white; text-decoration: none; } .drop-citation-btn:focus { outline: none; } #dropdown-div ul { list-style: none; position: relative; float: none; margin-top: 5px; min-width: 100px; border: 1px solid #099242; border-radius: 4px 4px 4px 4px; font-size: 13px; } #dropdown-div li a:hover {background-color: #F3FAF6;} Reference Cross browser testing Handling common HTML and CSS problem ...

Learn Yii2 JavaScript, FCC CSS, FCC Clean Code, YouTube Todo Todo - Project To start a new project Publon DOI, user story 1.1 Dataflow diagram 1.2 Read API documents 1.3 Access all the Publon, DataCite and CorssRef API Done Follow up PR Add-delete-button-#457 1.1 Factor out common code into static method in CurationLog.php 1.2 Finished the unit test of curationLogEntryFactory function 1.3 Finished datasetLogEntryFactory and createDatasetLogEntry function and passed the unit tests Follow up PR Add Hypothes.is metadata schema #516 for Issue #85 2.1 Created scenario to capture DOI Reference ...

Learn Yii2 JavaScript, FCC CSS, FCC Clean Code, YouTube Todo - Github issue Follow up PR Add-delete-button-#457 Study Add link preview #61, Link previews #428 2.1 Start with Add the metadata schema on dataset page to allow Hypothesis to parse citation DOI #85 2.2 Then Add the metadata schema on dataset page to allow other web sites to make link previews of our web site #513 2.3 Finally Link previews #428 Follow up Update porject links via admin pages #375 ...

Learn Yii2 JavaScript, FCC CSS, FCC Clean Code, YouTube Todo To start a new project Publon DOI, user story Done Merged and closed Change wip to ok #511 Follow up PR Add-delete-button-#457 2.1 Update feature file 2.2 Create EntryLog.php component class to log createNewEntry event 2.3 Try to create component services for curation log and dataset log which are not needed 2.4 To add static function in models/CurationLog.php and unit test the static function Create behat test for PR Remove-publisher-option-#507 Study Add link preview #61 Study Update porject links via admin pages #375 - Made different scenario for this feature in gist - Looked into check_duplicate Reference How to approach professional web design, referred figure Popular web layout frameworks: 2.1 Bootstrap 4.5 2.2 Foundation 6 CSS technologies 3.1 LESS 3.2 SASS/SCSS 3.3 SMACSS CSS cheat sheet ...

Learn Yii2 JavaScript, FCC CSS, FCC Clean Code, YouTube Todo To start a new project, user story Done PR Remove publisher option in admin page #507 Comment on Update porject links via admin pages #375 Made different scenario for this feature in gist Looked into check_duplicate Studied Add link preview #61 Reference Yii2 Database migration