Improve clickability of tags.

master
Nick Sergeant 2013-01-21 18:00:10 -05:00
parent 622fd1f41b
commit ac55f53229
6 changed files with 65 additions and 42 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -489,19 +489,25 @@ section.main {
li {
list-style-type: none;
margin: 6px 0 6px 22px;
margin-left: 22px;
}
}
a {
border-bottom: 1px solid #5AB6F4;
color: #5AB6F4;
display: block;
font: normal 12px $Helvetica;
padding: 3px 0;
text-decoration: none;
span {
border-bottom: 1px solid #5AB6F4;
}
&:hover {
span {
border-bottom: 1px solid #2B6E9B;
color: #2B6E9B;
}
}
&.view-all {
font-weight: bold;
margin: 0 0 0 22px;
@ -514,6 +520,10 @@ section.main {
a.all-tags {
font-weight: bold;
margin-left: 22px;
span {
border-bottom: 1px solid #5AB6F4;
}
}
a.favorited-snipts {
display: inline-block;
@ -535,24 +545,35 @@ section.main {
li {
background: transparent url('/static/images/api-icon.png') center left no-repeat;
list-style-type: none;
margin: 6px 0 6px 0;
margin: 0;
padding-left: 22px;
a {
border-bottom: 1px solid #999;
color: #999;
display: block;
font: bold 12px $Helvetica;
padding: 3px 0;
text-decoration: none;
span {
border-bottom: 1px solid #999;
}
&:hover {
span {
border-bottom: 1px solid #333;
color: #333;
}
}
&.active {
span {
border-bottom: 1px solid #333;
color: #333;
}
}
}
&.api {
padding-top: 1px;
}
&.twitter {
background: transparent url('/static/images/twitter-icon.png') 4px center no-repeat;
}
@ -563,7 +584,9 @@ section.main {
background: transparent url('/static/images/groups-icon.png') 2px center no-repeat;
}
&:first-of-type {
margin-top: 0;
a {
padding-top: 0;
}
}
&.blog {
background: transparent url('/static/images/blog-icon.png') 3px center no-repeat;

View File

@ -2,62 +2,62 @@
<h1>Popular public tags</h1>
<ul>
<li>
<a href="/public/tag/as3/" {% if tag.name == 'as3' %}class="active"{% endif %}>as3</a>
<a href="/public/tag/as3/" {% if tag.name == 'as3' %}class="active"{% endif %}><span>as3</span></a>
</li>
<li>
<a href="/public/tag/bash/" {% if tag.name == 'bash' %}class="active"{% endif %}>bash</a>
<a href="/public/tag/bash/" {% if tag.name == 'bash' %}class="active"{% endif %}><span>bash</span></a>
</li>
<li>
<a href="/public/tag/c_2/" {% if tag.name == 'c++' %}class="active"{% endif %}>c++</a>
<a href="/public/tag/c_2/" {% if tag.name == 'c++' %}class="active"{% endif %}><span>c++</span></a>
</li>
<li>
<a href="/public/tag/css/" {% if tag.name == 'css' %}class="active"{% endif %}>css</a>
<a href="/public/tag/css/" {% if tag.name == 'css' %}class="active"{% endif %}><span>css</span></a>
</li>
<li>
<a href="/public/tag/django/" {% if tag.name == 'django' %}class="active"{% endif %}>django</a>
<a href="/public/tag/django/" {% if tag.name == 'django' %}class="active"{% endif %}><span>django</span></a>
</li>
<li>
<a href="/public/tag/drupal/" {% if tag.name == 'drupal' %}class="active"{% endif %}>drupal</a>
<a href="/public/tag/drupal/" {% if tag.name == 'drupal' %}class="active"{% endif %}><span>drupal</span></a>
</li>
<li>
<a href="/public/tag/git/" {% if tag.name == 'git' %}class="active"{% endif %}>git</a>
<a href="/public/tag/git/" {% if tag.name == 'git' %}class="active"{% endif %}><span>git</span></a>
</li>
<li>
<a href="/public/tag/html/" {% if tag.name == 'html' %}class="active"{% endif %}>html</a>
<a href="/public/tag/html/" {% if tag.name == 'html' %}class="active"{% endif %}><span>html</span></a>
</li>
<li>
<a href="/public/tag/java/" {% if tag.name == 'java' %}class="active"{% endif %}>java</a>
<a href="/public/tag/java/" {% if tag.name == 'java' %}class="active"{% endif %}><span>java</span></a>
</li>
<li>
<a href="/public/tag/javascript/" {% if tag.name == 'javascript' %}class="active"{% endif %}>javascript</a>
<a href="/public/tag/javascript/" {% if tag.name == 'javascript' %}class="active"{% endif %}><span>javascript</span></a>
</li>
<li>
<a href="/public/tag/jquery/" {% if tag.name == 'jquery' %}class="active"{% endif %}>jquery</a>
<a href="/public/tag/jquery/" {% if tag.name == 'jquery' %}class="active"{% endif %}><span>jquery</span></a>
</li>
<li>
<a href="/public/tag/js/" {% if tag.name == 'js' %}class="active"{% endif %}>js</a>
<a href="/public/tag/js/" {% if tag.name == 'js' %}class="active"{% endif %}><span>js</span></a>
</li>
<li>
<a href="/public/tag/linux/" {% if tag.name == 'linux' %}class="active"{% endif %}>linux</a>
<a href="/public/tag/linux/" {% if tag.name == 'linux' %}class="active"{% endif %}><span>linux</span></a>
</li>
<li>
<a href="/public/tag/mysql/" {% if tag.name == 'mysql' %}class="active"{% endif %}>mysql</a>
<a href="/public/tag/mysql/" {% if tag.name == 'mysql' %}class="active"{% endif %}><span>mysql</span></a>
</li>
<li>
<a href="/public/tag/php/" {% if tag.name == 'php' %}class="active"{% endif %}>php</a>
<a href="/public/tag/php/" {% if tag.name == 'php' %}class="active"{% endif %}><span>php</span></a>
</li>
<li>
<a href="/public/tag/python/" {% if tag.name == 'python' %}class="active"{% endif %}>python</a>
<a href="/public/tag/python/" {% if tag.name == 'python' %}class="active"{% endif %}><span>python</span></a>
</li>
<li>
<a href="/public/tag/ruby/" {% if tag.name == 'ruby' %}class="active"{% endif %}>ruby</a>
<a href="/public/tag/ruby/" {% if tag.name == 'ruby' %}class="active"{% endif %}><span>ruby</span></a>
</li>
<li>
<a href="/public/tag/sql/" {% if tag.name == 'sql' %}class="active"{% endif %}>sql</a>
<a href="/public/tag/sql/" {% if tag.name == 'sql' %}class="active"{% endif %}><span>sql</span></a>
</li>
<li>
<a href="/public/tag/wordpress/" {% if tag.name == 'wordpress' %}class="active"{% endif %}>wordpress</a>
<a href="/public/tag/wordpress/" {% if tag.name == 'wordpress' %}class="active"{% endif %}><span>wordpress</span></a>
</li>
</ul>
<a href="/tags/" class="all-tags">View all tags &raquo;</a>
<a href="/tags/" class="all-tags"><span>View all tags &raquo;</span></a>
</section>

View File

@ -1,12 +1,12 @@
<section class="tags">
{% if request.user == user %}
<a href="/{{ user }}/favorites/" class="favorited-snipts {% if 'favorites' in request.path %}active{% endif %}">View favorited snipts &raquo;</a>
<a href="/{{ user }}/favorites/" class="favorited-snipts {% if 'favorites' in request.path %}active{% endif %}"><span>View favorited snipts &raquo;</span></a>
{% endif %}
<h1>{{ user.username }}'s tags</h1>
<ul>
{% for t in tags %}
<li>
<a {% if tag.name == t.name %}class="active"{% endif %} href="/{{ user.username }}/tag/{{ t.slug }}/">{{ t.name }}</a>
<a {% if tag.name == t.name %}class="active"{% endif %} href="/{{ user.username }}/tag/{{ t.slug }}/"><span>{{ t.name }}</span></a>
</li>
{% endfor %}
</ul>

View File

@ -197,27 +197,27 @@
<nav class="footer">
<ul>
<li class="api">
<a href="/api/" {% if '/api/' in request.path %}class="active"{% endif %}>API</a>
<a href="/api/" {% if '/api/' in request.path %}class="active"{% endif %}><span>API</span></a>
</li>
<li class="twitter">
<a href="https://twitter.com/#!/snipt">@snipt</a>
<a href="https://twitter.com/#!/snipt"><span>@snipt</span></a>
</li>
{% if not request.user.profile.is_pro %}
<li class="pro">
<a href="/pro/">Go Pro</a>
<a href="/pro/"><span>Go Pro</span></a>
</li>
{% endif %}
<li class="blog">
<a href="https://blog.snipt.net/">Snipt Blog</a>
<a href="https://blog.snipt.net/"><span>Snipt Blog</span></a>
</li>
<li class="blog">
<a href="/blogging/" {% if '/blogging/' in request.path %}class="active"{% endif %}>Blogging on Snipt</a>
<a href="/blogging/" {% if '/blogging/' in request.path %}class="active"{% endif %}><span>Blogging on Snipt</span></a>
</li>
<li class="roadmap">
<a href="https://github.com/nicksergeant/snipt/">Open source on GitHub</a>
<a href="https://github.com/nicksergeant/snipt/"><span>Open source on GitHub</span></a>
</li>
<li class="roadmap">
<a href="https://github.com/nicksergeant/snipt/issues?state=open">Bugs & feature requests</a>
<a href="https://github.com/nicksergeant/snipt/issues?state=open"><span>Bugs & feature requests</span></a>
</li>
</ul>
</nav>