diff --git a/templates/index/index.html.twig b/templates/index/index.html.twig index e2a054c..a9d3afa 100644 --- a/templates/index/index.html.twig +++ b/templates/index/index.html.twig @@ -56,8 +56,10 @@ {% for approve in chix.approves %} {#
#} + {#
{{ approve.user.name }}
#} +
{#
#} {% endfor %} diff --git a/templates/main.html.twig b/templates/main.html.twig index 5abcef6..a01e8df 100644 --- a/templates/main.html.twig +++ b/templates/main.html.twig @@ -41,6 +41,52 @@ .color-red { color:brown; } + + [data-message] { + position: relative; + } + + [data-message]:hover:after { + opacity: 1; + transition: all .3s ease; + bottom: 25px; + left: 0; + } + + [data-message]:after { + content: attr(data-message); + position: absolute; + left: 0; + bottom: 20px; + font-size: .8em; + opacity: 0; + padding: 5px 10px; + background: rgba(0,0,0, .8); + border-radius: 5px; + transition: all .3s ease; + white-space: nowrap; + color: #fff; + } + + [data-message]:before { + height: 0; + width: 0; + content: ''; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid rgba(0,0,0, .8); + position: absolute; + left: 5px; + opacity: 0; + bottom: 15px; + transition: all .3s ease; + } + + [data-message]:hover:before { + opacity: 1; + bottom: 20px; + transition: all .3s ease; + } {% endblock %}