summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
authorFelix Hammerl <fhammerl@thoughtworks.com>2016-03-07 18:05:29 +0100
committerFelix Hammerl <fhammerl@thoughtworks.com>2016-03-09 16:11:38 +0100
commitf4f41812b90edebfda97ade61269f44a3c00323b (patch)
treee03a538258ad2c5cb0825a339783050fcba33f66 /web-ui/app
parent3621742b1bbd5c96c10f15a66043bbec238ba7c1 (diff)
Issue #620: Refactor palceholder
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/scss/_mascot.scss47
-rw-r--r--web-ui/app/scss/mixins/_position-helpers.scss9
-rw-r--r--web-ui/app/scss/style.scss12
-rw-r--r--web-ui/app/scss/templates/_no-content-placeholder.scss5
-rw-r--r--web-ui/app/scss/views/_no-mails-available.scss3
-rw-r--r--web-ui/app/scss/views/_no-message-selected.scss14
-rw-r--r--web-ui/app/templates/compose/no_mails_available.hbs6
-rw-r--r--web-ui/app/templates/compose/no_message_selected.hbs4
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>