Skip to content

Commit 01e9a5f

Browse files
author
Anton Vernigor
committed
#36 разметка, необходимая для показа тултипов к ссылкам
1 parent 4335d63 commit 01e9a5f

4 files changed

Lines changed: 62 additions & 73 deletions

File tree

‎assets/fonts/icons/icons.woff‎

144 Bytes
Binary file not shown.

‎hmvc/markup/templates/pages/article.html‎

Lines changed: 7 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,13 @@ <h2><a class="main__anchor" id="что-такое-javascript" href="#что-та
77
Программы на этом языке называются <em>скриптами</em>. Они подключаются напрямую к HTML и, как только загружается
88
страничка &mdash; тут же выполняются.</p>
99
<p><a href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a>
10-
<a href="mailto:me@example.com">намылить</a> <a target="_blank" href="habrahabr.ru">новая вкладка</a> <a
11-
href="/play/ECMAScript">песочница</a> <a href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница
12-
plnkr.co</a> <a href="/files/file.doc">документ</a> <a href="/files/file.zip">архив</a> <a href="/files/file.xls">таблица</a>
13-
<a href="/files/file.pdf">pdf-документ</a> <a href="http://developer.mozilla.org/topic">справка в MDN</a> <a
14-
href="http://msdn.microsoft.com/topic">справка microsoft</a> <a href="http://www.w3.org/TR/HTML401">документация
15-
w3c</a> <a href="http://es5.github.com">спецификация ECMA</a></p>
16-
<p><a class="plain" href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a>
17-
<a class="plain" href="mailto:me@example.com">намылить</a> <a class="plain" target="_blank" href="habrahabr.ru">новая
18-
вкладка</a> <a class="plain" href="/play/ECMAScript">песочница</a> <a class="plain"
19-
href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница
20-
plnkr.co</a> <a class="plain" href="/files/file.doc">документ</a> <a class="plain" href="/files/file.zip">архив</a>
21-
<a class="plain" href="/files/file.xls">таблица</a> <a class="plain" href="/files/file.pdf">pdf-документ</a> <a
22-
class="plain" href="http://developer.mozilla.org/topic">справка в MDN</a> <a class="plain"
23-
href="http://msdn.microsoft.com/topic">справка
24-
microsoft</a> <a class="plain" href="http://www.w3.org/TR/HTML401">документация w3c</a> <a class="plain"
25-
href="http://es5.github.com">спецификация
26-
ECMA</a></p>
10+
<a href="mailto:me@example.com">намылить</a> <a target="_blank" href="habrahabr.ru">новая вкладка</a> <a href="/play/ECMAScript">песочница</a> <a href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница plnkr.co</a> <a href="/files/file.doc">документ</a> <a href="/files/file.zip">архив</a> <a href="/files/file.xls">таблица</a> <a href="/files/file.pdf">pdf-документ</a> <a href="http://developer.mozilla.org/topic">справка в MDN</a> <a href="http://msdn.microsoft.com/topic">справка microsoft</a> <a href="http://www.w3.org/TR/HTML401">документация w3c</a> <a href="http://es5.github.com">спецификация ECMA</a>
11+
<!-- Чтобы показать тултип с типом ссылки в конец документа добавляем span с классом link__type,
12+
в атрибут data-url копируем href ссылки. Абсолютное позиционирование у него уже задано,
13+
достаточно указать left и top относительно документа. -->
14+
<span class="link__type " data-url="/doc.doc"></span>
15+
</p>
16+
<p><a class="plain" href="http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a> <a class="plain" href="mailto:me@example.com">намылить</a> <a class="plain" target="_blank" href="habrahabr.ru">новая вкладка</a> <a class="plain" href="/play/ECMAScript">песочница</a> <a class="plain" href="http://plnkr.co/edit/mafDHHQUVJy7jdhlSMTB?p=preview">песочница plnkr.co</a> <a class="plain" href="/files/file.doc">документ</a> <a class="plain" href="/files/file.zip">архив</a> <a class="plain" href="/files/file.xls">таблица</a> <a class="plain" href="/files/file.pdf">pdf-документ</a> <a class="plain" href="http://developer.mozilla.org/topic">справка в MDN</a> <a class="plain" href="http://msdn.microsoft.com/topic">справка microsoft</a> <a class="plain" href="http://www.w3.org/TR/HTML401">документация w3c</a> <a class="plain" href="http://es5.github.com">спецификация ECMA</a></p>
2717
<p><a class="wiki" href="#01">ECMAScript</a>
2818
<a class="mailto" href="#02">намылить</a> <a class="external" target="_blank" href="#03">новая вкладка</a> <a
2919
class="sandbox" href="#04">песочница</a> <a class="sandbox" href="#999">песочница plnkr.co</a> <a class="doc"

‎styles/blocks/links/links.styl‎

Lines changed: 54 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
link-type(type)
2-
padding-right image-width('link-types/' + type + '.png') + 3
3-
background-image url('/img/link-types/' + type + '.png')
4-
51
$pseudo
62
text-decoration none
73
border-bottom 1px dashed transparent
84
&:hover
95
border-bottom 1px dashed
106
text-decoration none
117

12-
$link-type
13-
background-position 100% 60%
14-
background-repeat no-repeat
8+
$link-type
9+
&::before
10+
position absolute
11+
color #fff
12+
background #5C626A
13+
padding 0 9px
14+
border-radius 2px
15+
font 10px/19px font
16+
letter-spacing .1ex
1517

1618
// .pseudo is for any tag but link that should look like pseudo-link
1719
.pseudo
@@ -50,87 +52,84 @@ a:active
5052
font-size 90%
5153

5254
// --
53-
.main [href^="mailto:"],
54-
a.mailto
55+
.link__type[data-url^="mailto:"]
5556
@extend $link-type
56-
link-type 'mailto'
57+
&::before
58+
@extend $font-mail
59+
font-size 12px // слишком мелкая иконка
5760

5861
// --
59-
.main [target="_blank"],
60-
a.external
62+
.link__type[data-url^='/play/'],
63+
.link__type[data-url^='http://plnkr.co/']
6164
@extend $link-type
62-
link-type 'newwindow'
65+
&::before
66+
@extend $font-edit
67+
font-size 12px // слишком мелкая иконка
6368

6469
// --
65-
.main [href^='/play/'],
66-
.main [href^='http://plnkr.co/'],
67-
a.sandbox
70+
.link__type[data-url$=".doc"],
71+
.link__type[data-url$=".docx"]
6872
@extend $link-type
69-
link-type 'sandbox'
73+
&::before
74+
content 'DOC'
7075

7176
// --
72-
.main [href$=".doc"],
73-
.main [href$=".docx"],
74-
a.doc
77+
.link__type[data-url$=".zip"]
7578
@extend $link-type
76-
link-type 'doc'
79+
&::before
80+
content 'ZIP'
7781

7882
// --
79-
.main [href$=".zip"],
80-
a.zip
83+
.link__type[data-url$=".xls"],
84+
.link__type[data-url$=".xlsx"]
8185
@extend $link-type
82-
link-type 'zip'
86+
&::before
87+
content 'XLS'
8388

8489
// --
85-
.main [href$=".xls"],
86-
.main [href$=".xlsx"],
87-
a.xls
90+
.link__type[data-url$=".pdf"]
8891
@extend $link-type
89-
link-type 'xls'
92+
&::before
93+
content 'PDF'
9094

9195
// --
92-
.main [href$=".pdf"],
93-
a.pdf
96+
.link__type[data-url^='http://developer.mozilla.org'],
97+
.link__type[data-url^='https://developer.mozilla.org']
9498
@extend $link-type
95-
link-type 'pdf'
99+
&::before
100+
content 'MDN'
96101

97102
// --
98-
.main [href^='http://developer.mozilla.org'],
99-
.main [href^='https://developer.mozilla.org'],
100-
a.mdn
103+
.link__type[data-url^='http://msdn.microsoft.com'],
104+
.link__type[data-url^='https://msdn.microsoft.com']
101105
@extend $link-type
102-
link-type 'mdn'
106+
&::before
107+
content 'MSDN'
103108

104109
// --
105-
.main [href^='http://msdn.microsoft.com'],
106-
.main [href^='https://msdn.microsoft.com'],
107-
a.msdn
110+
.link__type[data-url^='http://wikipedia.org'],
111+
.link__type[data-url*='wikipedia.org']
108112
@extend $link-type
109-
link-type 'msdn'
113+
&::before
114+
content 'WIKI'
110115

111116
// --
112-
.main [href^='http://wikipedia.org'],
113-
.main [href*='wikipedia.org'],
114-
a.wiki
117+
.link__type[data-url^='http://w3.org'],
118+
.link__type[data-url^='http://dev.w3.org'],
119+
.link__type[data-url^='http://www.w3.org'],
120+
.link__type[data-url^='https://www.w3.org'],
121+
.link__type[data-url^='https://w3.org']
115122
@extend $link-type
116-
link-type 'wiki'
123+
&::before
124+
content 'W3C'
117125

118126
// --
119-
.main [href^='http://w3.org'],
120-
.main [href^='http://dev.w3.org'],
121-
.main [href^='http://www.w3.org'],
122-
.main [href^='https://www.w3.org'],
123-
.main [href^='https://w3.org'],
124-
a.w3c
127+
.link__type[data-url^='http://es5.github.com']
125128
@extend $link-type
126-
link-type 'w3c'
129+
&::before
130+
content 'ECMA'
127131

128132
// --
129-
.main [href^='http://es5.github.com'],
130-
a.ecma
131-
@extend $link-type
132-
link-type 'ecma'
133-
// --
134133

135134
// placeholder selector, can't be moved to the top
136135
// because order matters

‎styles/blocks/placeholders/font-icons.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ $font-warning
4242

4343
$font-mail
4444
@extend $font-icon
45-
content '\2709'
45+
content '\e810'
4646

4747
$font-edit
4848
@extend $font-icon

0 commit comments

Comments
 (0)