Issue #620: Refactor palceholder

8 files changed, 42 insertions, 58 deletions

diff --git a/web-ui/app/scss/_mascot.scss b/web-ui/app/scss/_mascot.scss
deleted file mode 100644
index 74279063..00000000
--- a/web-ui/app/scss/_mascot.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-#no-message-selected-pane {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100vh;
-
-  z-index: -100;
-  background: $contrast;
-  padding: 30px;
-  vertical-align:middle;
-  text-align:center;
-  -webkit-transform: translate3d(0, 0, 0);
-  &:before{
-    content: '';
-    display: inline-block;
-    height: 100%;
-    vertical-align: middle;
-    margin-right: -0.25em;
-  }
-  .scene{
-    display:inline-block;
-    vertical-align:middle;
-  }
-
-  .text{
-    color:$medium_dark_grey;
-    margin-bottom: 40px;
-  }
-}
-
-#no-mails-available-pane {
-    text-align: center;
-    line-height: 100vh;
-    margin-top: -130px;
-
-  .scene{
-    display:inline-block;
-    vertical-align:middle;
-  }
-
-  .text{
-    color:$medium_dark_grey;
-    margin-bottom: 40px;
-  }
-
-}
diff --git a/web-ui/app/scss/mixins/_position-helpers.scss b/web-ui/app/scss/mixins/_position-helpers.scss
new file mode 100644
index 00000000..254bfc6c
--- /dev/null
+++ b/web-ui/app/scss/mixins/_position-helpers.scss
@@ -0,0 +1,9 @@
+@mixin absolute-center-unknown-height-width() {
+    margin: auto;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
index eeadd662..d27b3031 100644
--- a/web-ui/app/scss/style.scss
+++ b/web-ui/app/scss/style.scss
@@ -8,26 +8,26 @@
 @import "base/colors";
 @import "base/scaffolding";
 
-// templates
-
-
 // mixins
+@import "mixins/position-helpers";
 @import "mixins";
 
+// templates
+@import "templates/no-content-placeholder";
 
 // layout
 @import "layout/message-panel";
 
-// modules
+// views
 @import "views/message-panel";
-
+@import "views/no-message-selected";
+@import "views/no-mails-available";
 
 // misc stuff
 @import "others";
 
 // TODO
 @import "compose";
-@import "mascot";
 @import "read";
 @import "reply";
 @import "security";
diff --git a/web-ui/app/scss/templates/_no-content-placeholder.scss b/web-ui/app/scss/templates/_no-content-placeholder.scss
new file mode 100644
index 00000000..c6807011
--- /dev/null
+++ b/web-ui/app/scss/templates/_no-content-placeholder.scss
@@ -0,0 +1,5 @@
+.no-content-placeholder {
+    @include absolute-center-unknown-height-width;
+
+    color: $medium_dark_grey;
+}
diff --git a/web-ui/app/scss/views/_no-mails-available.scss b/web-ui/app/scss/views/_no-mails-available.scss
new file mode 100644
index 00000000..bf5d256a
--- /dev/null
+++ b/web-ui/app/scss/views/_no-mails-available.scss
@@ -0,0 +1,3 @@
+.no-mails-available-pane {
+   @extend .no-content-placeholder;
+}
diff --git a/web-ui/app/scss/views/_no-message-selected.scss b/web-ui/app/scss/views/_no-message-selected.scss
new file mode 100644
index 00000000..0e367bf2
--- /dev/null
+++ b/web-ui/app/scss/views/_no-message-selected.scss
@@ -0,0 +1,14 @@
+.no-message-selected-pane {
+    background: $contrast;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    &__text {
+        @extend .no-content-placeholder;
+
+        margin-bottom: 40px; // aligns label with "no results for XYZ"
+    }
+}
diff --git a/web-ui/app/templates/compose/no_mails_available.hbs b/web-ui/app/templates/compose/no_mails_available.hbs
index 6388d7db..147f3533 100644
--- a/web-ui/app/templates/compose/no_mails_available.hbs
+++ b/web-ui/app/templates/compose/no_mails_available.hbs
@@ -1,7 +1,7 @@
-<div class="scene">
+<div class="no-mails-available-pane">
   {{#if forSearch }}
-    <div class="text">{{t 'NO RESULTS FOR'}}: '{{ forSearch }}'.</div>
+    {{t 'NO RESULTS FOR'}}: '{{ forSearch }}'.
   {{else}}
-    <div class="text">{{t 'NO EMAILS IN'}} '{{ tag }}'.</div>
+    {{t 'NO EMAILS IN'}} '{{ tag }}'.
   {{/if}}
 </div>
diff --git a/web-ui/app/templates/compose/no_message_selected.hbs b/web-ui/app/templates/compose/no_message_selected.hbs
index 0442192d..71aa6267 100644
--- a/web-ui/app/templates/compose/no_message_selected.hbs
+++ b/web-ui/app/templates/compose/no_message_selected.hbs
@@ -1,3 +1,3 @@
-<div class="scene">
-  <div class="text">{{t 'NOTHING SELECTED'}}.</div>
+<div class="no-message-selected-pane">
+    <div class="no-message-selected-pane__text">{{t 'NOTHING SELECTED'}}.</div>
 </div>