Reftagger in responsive design

Ryan
Ryan Member Posts: 1
edited November 20 in English Forum

On desktop, this is fantastic. With mobile traffic becoming the majority web population, making reftagger responsive friendly would be a good move. I'm just thinking out loud here.

Currently, touch interaction can be confusing for users. When tapped, a link opens but can easily be accidentally tapped again or if the popup is closed and the user taps it again he is redirected. That's the biggest one really. Rather than using a focus affect with js, a visible close button would be helpful for responsive layouts. 

I'm not finding a responsive site to see a demo of the styling, but the popup would need to respect the max screen size so nothing appears off screen.

Comments

  • Mark Goldsmith
    Mark Goldsmith Member Posts: 1

    I figured out a workaround on how to make Reftagger work better for mobile devices. Essentially the width of the tooltip is too wide, so I created a custom CSS file and loaded that. So here is what my Javascript looks like ( you need the cssOverride attribute set to true) :

    <script>
     var refTagger = {
     settings: {
     cssOverride:true,
     bibleVersion: "NIV",
     roundCorners: true,
     socialSharing: [],
     }
     };
     (function(d, t) {
     var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
     g.src = "//api.reftagger.com/v2/RefTagger.js";
     s.parentNode.insertBefore(g, s);
     }(document, "script"));
     </script>

    Then I loaded my custom CSS and make sure that .rtToolTip had a width of 280px;

    .rtTooltipHeader{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
    .rtTooltipBody{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
    .rtTooltipBody .ch-ref{font-weight:700}
    .rtTooltipFooter{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}
    .rtTooltipFooter a:link,.rtTooltipFooter a:visited{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;font-weight:400;text-decoration:none}
    .rtTooltipDropShadow .rtContainer{-webkit-box-shadow:0 0 6px 0 #444;-moz-box-shadow:0 0 6px 0 #444;box-shadow:0 0 6px 0 #444}
    .rtTooltipRoundedCorners .rtContainer{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;overflow:hidden}
    .rtLight .rtContainer{background:#fff}
    .rtLight .rtTooltipHeader{background:#e7e7e7;color:#333}
    .rtLight .rtTooltipBody{color:#666}
    .rtLight .rtTooltipFooter a:link,.rtLight .rtTooltipFooter a:visited{font-size:12px;color:#ccc}
    .rtLight .rtTooltipFooter a:hover{color:#666}
    .rtDark .rtContainer{background:#555}
    .rtDark .rtTooltipHeader{background:#888;color:#eee}
    .rtDark .rtTooltipBody{color:#fff}
    .rtDark .rtTooltipFooter a:link,.rtDark .rtTooltipFooter a:visited{color:#999}
    .rtDark .rtTooltipFooter a:hover{color:#eee}
    .rtTooltipSocialIcon{background:url(//bible.logos.com/v2/social-icons.png)}
    .rtTooltip{text-align:left;text-indent:0;width:280px;min-height:140px;z-index:99}
    .rtTooltip div{text-align:left}
    .rtTooltipHeader{border:0;font-size:14px;font-weight:700;line-height:32px;height:32px;margin:0;padding:0 20px 0 15px}
    .rtTooltipBody{border:0;line-height:1.4;font-size:14px;margin:0;min-height:40px;padding:19px 20px 0 15px}
    .rtTooltipBody .ch-ref,.rtTooltipBody .verse-ref{font-size:85%;position:relative;top:-1px}
    .rtTooltipFooter{border:0;font-size:14px;line-height:14px;letter-spacing:normal;padding:22px 32px 12px 15px;text-align:left}
    .rtTooltipFooter div{text-align:right}.rtTooltipFooter .rtTooltipMoreLink{float:right}
    .rtTooltipFooter .rtTooltipBrandLink{display:inline-block;margin-right:20px;font-size:12px}
    .rtTooltipSocial{float:right}
    .rtTooltip .rtTooltipSocialIcon{display:inline-block;margin-top:8px;height:19px;width:21px}
    .rtTooltip,.rtTooltip a,.rtTooltipBody p,.rtTooltipBody span{letter-spacing:normal;margin:0;padding:0}
    .rtLibronix img{float:none}.libronixLinkImage{border:0;float:none;margin:0 0 0 4px;padding:0}
  • David Roy Slentz
    David Roy Slentz Member Posts: 2
    https://community.logos.com/discussion/comment/573257#Comment_573257

    RefTagger CSS and Responsive

    The Responsive CSS file and set up works well. I am only having a problem where I cannot change the Scripture body font. Not matter what I change it to, it remains the same font which I have used in my website. The problem is that there is also "text-shadow" style to it and it makes the Scriptures difficult to read.

    This was something that I could not change even BEFORE I added your responsive CSS file.

    What is  it that I am doing wrong that I cannot remove the "text-shadow" and that I cannot change the font, etc. of the Scripture body text?

Categories