From 82f2e842433f623e9324f0ad718d5b014015dc27 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Sat, 13 Oct 2018 17:10:23 +0200
Subject: [PATCH] Add emphasis to the expired status

---
 flatisfy/web/js_src/components/flatstableline.vue | 9 ++++++++-
 flatisfy/web/js_src/views/details.vue             | 7 ++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/flatisfy/web/js_src/components/flatstableline.vue b/flatisfy/web/js_src/components/flatstableline.vue
index ca85eda..330108b 100644
--- a/flatisfy/web/js_src/components/flatstableline.vue
+++ b/flatisfy/web/js_src/components/flatstableline.vue
@@ -12,7 +12,7 @@
                 </template>
 
                 [{{ flat.id.split("@")[1] }}]
-                {{ flat.is_expired ? "[" + $t("common.expired") + "]" : null }}
+                <span class="expired">{{ flat.is_expired ? "[" + $t("common.expired") + "]" : null }}</span>
                 {{ flat.title }}
 
                 <template v-if="photo">
@@ -88,3 +88,10 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.expired {
+    font-weight: bold;
+    text-transform: uppercase;
+}
+</style>
diff --git a/flatisfy/web/js_src/views/details.vue b/flatisfy/web/js_src/views/details.vue
index 145793d..6e0fe1c 100644
--- a/flatisfy/web/js_src/views/details.vue
+++ b/flatisfy/web/js_src/views/details.vue
@@ -11,7 +11,7 @@
                             -->{{ flat.status ? capitalize($t("status." + flat.status)) : '' }}<!--
                         --></router-link><!--
                     -->) {{ flat.title }} [{{ flat.id.split("@")[1] }}]
-                    {{ flat.is_expired ? '[' + $t('common.expired') + ']' : '' }}
+                    <span class="expired">{{ flat.is_expired ? '[' + $t('common.expired') + ']' : '' }}</span>
                 </h2>
                 <div class="grid">
                     <div class="left-panel">
@@ -369,6 +369,11 @@ export default {
 </script>
 
 <style scoped>
+.expired {
+    font-weight: bold;
+    text-transform: uppercase;
+}
+
 @media screen and (min-width: 768px) {
     .grid {
         display: grid;