Added a link to the visible URL in the link list

Corrected CSS to prevent a line from showing underneath
Fixes https://github.com/shaarli/Shaarli/issues/53
This commit is contained in:
Florian Eula 2014-11-21 19:43:53 +01:00
parent 732e683bda
commit d741c9fc16
2 changed files with 36 additions and 32 deletions

View file

@ -24,6 +24,10 @@ input, textarea {
} }
a {
text-decoration: none;
}
h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; } h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; }
/* I don't give a shit about IE. He can't understand selectors such as input[type='submit']. */ /* I don't give a shit about IE. He can't understand selectors such as input[type='submit']. */
@ -69,9 +73,9 @@ h1 { font-size:20pt; font-weight:bold; font-style:italic; margin-bottom:20px; }
/* Small tab on the left of each link with edit/delete buttons. */ /* Small tab on the left of each link with edit/delete buttons. */
.button_edit, .button_delete { border-radius:0; box-shadow:none; border-style:none; border-width:0; padding:0; background:none; } .button_edit, .button_delete { border-radius:0; box-shadow:none; border-style:none; border-width:0; padding:0; background:none; }
.linkeditbuttons { .linkeditbuttons {
position:absolute; position:absolute;
left:-1px; left:-1px;
padding:4px 2px 2px 2px; padding:4px 2px 2px 2px;
background-color:#f0f0f0; background-color:#f0f0f0;
@ -111,7 +115,7 @@ cursor:pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
width:auto; width:auto;
padding:0 10px 5px 10px; padding:0 10px 5px 10px;
margin: auto; margin: auto;
} }
#pageheader a #pageheader a
@ -306,7 +310,7 @@ font-size:9pt;
background-color: transparent; background-color: transparent;
background-color: rgba(0, 0, 0, 0.4); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ background-color: rgba(0, 0, 0, 0.4); /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); /* IE6–IE9 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); /* IE6–IE9 */
text-shadow:2px 2px 1px #000000; text-shadow:2px 2px 1px #000000;
} }
/* Minimal customisation for jQuery widgets */ /* Minimal customisation for jQuery widgets */
@ -338,7 +342,7 @@ box-shadow:2px 2px 20px 2px #333333;
div.daily div.daily
{ {
font-family: Georgia, 'DejaVu Serif', Norasi, serif; font-family: Georgia, 'DejaVu Serif', Norasi, serif;
background-color: #E6D6BE; background-color: #E6D6BE;
/* Background paper texture by BashCorpo: /* Background paper texture by BashCorpo:
http://www.bashcorpo.dk/textures.php http://www.bashcorpo.dk/textures.php
@ -357,7 +361,7 @@ div.daily
#daily_col3 { float:left;position:relative; width:33%;} #daily_col3 { float:left;position:relative; width:33%;}
div.dailyAbout div.dailyAbout
{ {
float:left; float:left;
border: 1px solid black; border: 1px solid black;
font-size: 8pt; font-size: 8pt;
@ -365,21 +369,21 @@ div.dailyAbout
left:10px; left:10px;
top: 15px; top: 15px;
padding: 5px 5px 5px 5px; padding: 5px 5px 5px 5px;
text-align:center; text-align:center;
} }
div.dailyAbout a { color: #890500; } div.dailyAbout a { color: #890500; }
div.dailyTitle div.dailyTitle
{ {
font-weight: bold; font-weight: bold;
font-size: 44pt; font-size: 44pt;
text-align:center; text-align:center;
padding:10px 20px 0px 20px; padding:10px 20px 0px 20px;
} }
div.dailyDate div.dailyDate
{ {
font-size: 12pt; font-size: 12pt;
font-weight:bold; font-weight:bold;
text-align:center; text-align:center;
padding:0px 20px 30px 20px; padding:0px 20px 30px 20px;
} }
@ -393,19 +397,19 @@ div.dailyEntry
div.dailyEntry a { text-decoration:none; color: #890500; } div.dailyEntry a { text-decoration:none; color: #890500; }
div.dailyEntryTags { font-size:7.75pt; } div.dailyEntryTags { font-size:7.75pt; }
div.dailyEntryTitle { font-size:18pt; font-weight:bold;} div.dailyEntryTitle { font-size:18pt; font-weight:bold;}
div.dailyEntryThumbnail div.dailyEntryThumbnail
{ {
width:100%; width:100%;
text-align:center; text-align:center;
background-color:rgb(128,128,128); background-color:rgb(128,128,128);
background:url(../images/50pc_transparent.png); background:url(../images/50pc_transparent.png);
padding:4px 0px 2px 0px; padding:4px 0px 2px 0px;
} }
div.dailyEntryDescription div.dailyEntryDescription
{ {
margin-top: 10px; margin-top: 10px;
margin-bottom: 30px; margin-bottom: 30px;
text-align:justify; text-align:justify;
overflow:auto; overflow:auto;
} }
@ -415,7 +419,7 @@ div.dailyEntryDescription
} }
/* For lazy images loading in picture wall. /* For lazy images loading in picture wall.
Using http://www.appelsiini.net/projects/lazyload Using http://www.appelsiini.net/projects/lazyload
*/ */
.lazyimage { display:none; } .lazyimage { display:none; }
@ -464,7 +468,7 @@ div.dailyDate { font-size: 11pt;padding:0px; display:block; }
div.dailyEntryTitle { font-size:16pt; font-weight:bold;} div.dailyEntryTitle { font-size:16pt; font-weight:bold;}
div.dailyEntryDescription { font-size:10pt; } div.dailyEntryDescription { font-size:10pt; }
} }
/* Highlight search results */ /* Highlight search results */
.highlight { background-color: #FFFF33; } .highlight { background-color: #FFFF33; }

View file

@ -51,9 +51,9 @@
{if="$GLOBALS['config']['ARCHIVE_ORG']"} {if="$GLOBALS['config']['ARCHIVE_ORG']"}
<span class="linkarchive"><a href="https://web.archive.org/web/{$value.url|htmlspecialchars}">archive</a> - </span> <span class="linkarchive"><a href="https://web.archive.org/web/{$value.url|htmlspecialchars}">archive</a> - </span>
{/if} {/if}
<div style="position:relative;display:inline;"><a href="http://qrfree.kaywa.com/?l=1&s=8&d={$scripturl|urlencode}%3F{$value.linkdate|smallHash}" <div style="position:relative;display:inline;"><a href="http://qrfree.kaywa.com/?l=1&s=8&d={$scripturl|urlencode}%3F{$value.linkdate|smallHash}"
onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> - onclick="showQrCode(this); return false;" class="qrcode" data-permalink="{$scripturl}?{$value.linkdate|smallHash}"><img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div> -
<span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span><br> <a href={$value.url|htmlspecialchars}><span class="linkurl" title="Short link">{$value.url|htmlspecialchars}</span></a><br>
{if="$value.tags"} {if="$value.tags"}
<div class="linktaglist"> <div class="linktaglist">
{loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a></span> {/loop} {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value|htmlspecialchars}</a></span> {/loop}
@ -68,12 +68,12 @@
</div> </div>
{include="page.footer"} {include="page.footer"}
<script language="JavaScript"> <script language="JavaScript">
// Remove any displayed QR-Code // Remove any displayed QR-Code
function remove_qrcode() function remove_qrcode()
{ {
var elem = document.getElementById("permalinkQrcode"); var elem = document.getElementById("permalinkQrcode");
if (elem) elem.parentNode.removeChild(elem); if (elem) elem.parentNode.removeChild(elem);
return false; return false;
@ -81,7 +81,7 @@ function remove_qrcode()
// Show the QR-Code of a permalink (when the QR-Code icon is clicked). // Show the QR-Code of a permalink (when the QR-Code icon is clicked).
function showQrCode(caller,loading=false) function showQrCode(caller,loading=false)
{ {
// Dynamic javascript lib loading: We only load qr.js if the QR code icon is clicked: // Dynamic javascript lib loading: We only load qr.js if the QR code icon is clicked:
if (typeof(qr)=='undefined') // Load qr.js only if not present. if (typeof(qr)=='undefined') // Load qr.js only if not present.
{ {
@ -97,18 +97,18 @@ function showQrCode(caller,loading=false)
// Remove previous qrcode if present. // Remove previous qrcode if present.
remove_qrcode(); remove_qrcode();
// Build the div which contains the QR-Code: // Build the div which contains the QR-Code:
var element = document.createElement('div'); var element = document.createElement('div');
element.id="permalinkQrcode"; element.id="permalinkQrcode";
// Make QR-Code div commit sepuku when clicked: // Make QR-Code div commit sepuku when clicked:
if ( element.attachEvent ){ element.attachEvent('onclick', 'this.parentNode.removeChild(this);' ); } // Damn IE if ( element.attachEvent ){ element.attachEvent('onclick', 'this.parentNode.removeChild(this);' ); } // Damn IE
else { element.setAttribute('onclick', 'this.parentNode.removeChild(this);' ); } else { element.setAttribute('onclick', 'this.parentNode.removeChild(this);' ); }
// Build the QR-Code: // Build the QR-Code:
var image = qr.image({size: 8,value: caller.dataset.permalink}); var image = qr.image({size: 8,value: caller.dataset.permalink});
if (image) if (image)
{ {
element.appendChild(image); element.appendChild(image);
element.innerHTML+= "<br>Click to close"; element.innerHTML+= "<br>Click to close";
caller.parentNode.appendChild(element); caller.parentNode.appendChild(element);