1486 make slug more usable

[Tirokk]

Authored by roschaefer
Sep 18, 2019
Merged Sep 19, 2019

---

🍰 Pullrequest

Design Team, I need your help: Can you tell me if the datetime next to the user's slug is a problem?

Issues

• fix 🚀 [Feature] Make the slug more visible and usable #1486

Todo

• None

[Tirokk]

Authored by alina-beck
Sep 18, 2019

---

Hmm... Have you tried putting the slug right behind the user name? I don't love the current solution on the posts but I don't really see a quick and easy way to make it prettier, so maybe just go with it for now.

I would make the font a bit smaller on the user profile (top left in your screenshot), though.

[Tirokk]

Authored by alina-beck
Sep 18, 2019

---

Outdated (history rewrite) - original diff

---

@@ -14,14 +14,15 @@
             <b class="username">{{ userName | truncate(18) }}</b>
           </div>
           <!-- Time -->
-          <div v-if="dateTime" style="display: inline;">
-            <ds-text align="left" size="small" color="soft">
+          <ds-text align="right" size="small" color="soft">
+            <span class="slug">{{ userSlug }}</span>
+            <div v-if="dateTime" style="display: inline;">

If you use a <span> here instead of the <div> there's no need for the inline style. It also makes more sense semantically. ;)

[Tirokk]

Authored by alina-beck
Sep 18, 2019

---

Outdated (history rewrite) - original diff

---

@@ -27,7 +27,12 @@
             />
           </client-only>
           <ds-space margin="small">
-            <ds-heading tag="h3" align="center" no-margin>{{ userName }}</ds-heading>
+            <ds-heading tag="h3" align="center" no-margin>
+              {{ userName }}
+            </ds-heading>
+            <ds-text size="large" align="center" color="soft">

Already mentioned it – I would prefer a smaller text size here

[Tirokk]

Authored by appinteractive
Sep 18, 2019

---

Hey You may want to take a look at my take on it: https://dist.appinteractive.now.sh/ I do it more or less like Twitter.

[Tirokk]

Authored by roschaefer
Sep 18, 2019

---

This is how it looks like. @appinteractive I like your styling but I think you don't cover the case that the date is empty, do you? So that's why I went with @alina-beck's suggestion now and moved the date next to the user name. It might happen that the date overflows the post card width on long user names, though.

[Tirokk]

Authored by alina-beck
Sep 19, 2019

---

I actually meant it the way @appinteractive suggested it in the design 😆 – but you're right, it could look weird with empty dates. How often do we have this case?

Anyway, I can live with both. You decide!

[Tirokk]

Authored by roschaefer
Sep 19, 2019

---

Oh, @alina-beck you're right! Sorry for not reading your suggestions carefullly.

The empty date happens on the user profile in the list of followed/unfollowed users. See picture 1 on the left side.

[Mogge]

just a tiny suggestion – really like it otherwise! ❤️