Skip to content

Commit 276a7d6

Browse files
dlechdlech
committed
Merge pull request ev3dev#140 from WasabiFan/fix-floating-user-cards
Fix floating user cards and update styles for current usage
2 parents fc13e6b + 00b0e63 commit 276a7d6

3 files changed

Lines changed: 42 additions & 14 deletions

File tree

‎_includes/author-card.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@
22

33
{% assign author_no_at_sign = include.author | strip_html | remove_first: "@" %}
44
{% assign at_sign = include.author | strip_html | replace: author_no_at_sign %}
5+
{% if include.theme %}
6+
{% assign extra_classes = "user-card-" | append: include.theme %}
7+
{% endif %}
58
<!-- first function does not work and truncate function returns trailing "..." -->
69
{% assign test_at_sign_is_first = include.author | truncate: 4 | replace: "@" | size %}
710
<!-- this looks weird, but it was the only way I could figure out how to test
811
that the first character of include.author is "@" -->
912
{% if at_sign.size > 0 and test_at_sign_is_first == 3 %}
10-
<div data-card-user="{{author_no_at_sign}}"></div><br/>
13+
<div data-card-user="{{author_no_at_sign}}" class="{{ extra_classes }}"></div><br/>
1114
{% else %}
12-
<div class="user-card"><div class="user-card-name">{{ include.author }}</div></div>
15+
<div class="user-card {{ extra_classes }}"><div class="user-card-name">{{ include.author }}</div></div>
1316
{% endif %}

‎_layouts/tutorial.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@ <h2> Authors </h2>
2626
<h2> Author </h2>
2727
{% endif %}
2828
{% for author in page.author %}
29-
<div style="float: left; margin-right: 20px;">{% include author-card.html author = author %}</div>
29+
<div style="float: left; margin-right: 20px;">{% include author-card.html author=author theme='light' %}</div>
3030
{% endfor %}
3131
{% endif %}

‎stylesheets/user-cards.scss‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,50 @@
11
---
22
---
33

4+
@import "custom-variables";
5+
6+
@keyframes card-hover {
7+
from { border-left-width: 4px; }
8+
to { border-left-width: 8px; }
9+
}
10+
11+
@keyframes card-hover-out {
12+
from { border-left-width: 8px; }
13+
to { border-left-width: 4px; }
14+
}
15+
416
.user-card {
517
position: relative;
618
min-height: 40px;
19+
min-width: 218px;
720
background-color: #252525;
821
font-family: "Helvetica", Arial, sans-serif;
922
color: #fff;
10-
border-radius: 2px;
23+
border-radius: 3px;
1124
text-align: center;
1225
font-weight: 100;
13-
padding: 5px;
14-
-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
15-
-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
16-
-o-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
17-
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.7);
26+
padding: 5px 5px 5px 0;
27+
border-left: 4px solid $brand-primary;
28+
29+
animation: card-hover-out;
30+
animation-duration: 0.1s;
31+
32+
&:hover {
33+
border-left-color: darken($brand-primary, 10%);
34+
animation: card-hover;
35+
animation-duration: 0.1s;
36+
animation-fill-mode: forwards;
37+
}
38+
39+
a {
40+
color: #eeeeee;
41+
}
1842

1943
.user-card-avatar {
2044
position: absolute;
2145
float: left;
22-
max-height: 100%;
46+
height: 100%;
2347
width: auto;
24-
max-width: 20%;
2548
top: 50%;
2649
-webkit-transform: translateY(-50%);
2750
-ms-transform: translateY(-50%);
@@ -31,9 +54,7 @@
3154

3255
img {
3356
vertical-align: middle;
34-
border: 1px solid #aaa;
35-
border-radius: 2px;
36-
height: 40px;
57+
height: 100%;
3758
}
3859
}
3960

@@ -57,3 +78,7 @@
5778
vertical-align: middle;
5879
}
5980
}
81+
82+
.user-card-light {
83+
background-color: #303030;
84+
}

0 commit comments

Comments
 (0)