Merge branch 'master' of https://github.com/pixelated/pixelated-user-agent

# By Felix Hammerl (13) and Thais Siqueira (3)
# Via Christoph (1) and Thais Siqueira (1)
* 'master' of https://github.com/pixelated/pixelated-user-agent:
  Sets SSL certifications to false.
  Fixes pep8 errors and update requests to 2.9.1.
  Update locust test to run after xsrf token implementation.
  Issue #620: Adapt unit tests to CSS changes
  Issue #620: Refactor palceholder
  Issue #620: Remove former main css file
  Issue #620: Spike growl CSS modularization
  Issue #617: Highlight search terms by altering mail content
  Issue #617: Allow only >=3 alphanumeric characters in search field
  Issue #617: Restrict searching to alphanumeric characters
  Issue #617: Remove highlighting for sandboxed content
  Issue #617: Add sandbox to build scripts
  Issue #617: Add sandbox to user-agent
  Issue #617: Create sandbox resouces
  Issue #617: Add iframe-resizer
  Issue #617: Serve content from Sandbox resource

19 files changed, 146 insertions, 108 deletions

diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
deleted file mode 100644
index cfb31cbe..00000000
--- a/web-ui/app/scss/_alerts.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.message-panel {
-  width: 100%;
-  margin: 10px auto;
-  position: fixed;
-  z-index: 10000;
-  text-align: center;
-  span{
-    padding: 5px 60px;
-    &.success {
-        background: $warning;
-        color: darken($warning, 50%);
-        border: 1px solid darken($warning, 10%);
-        @include box-shadow(1px 1px 3px darken($warning, 60%));
-    }
-    &.error {
-        font-weight: bold;
-        color: white;
-        background: $error;
-        border: 1px solid darken($error, 10%);
-        @include box-shadow(1px 1px 3px darken($error, 60%));
-    }
-  }
-}
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.scss b/web-ui/app/scss/_mixins.scss
index 5bb84105..4583c55d 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -1,4 +1,4 @@
-@import 'colors';
+@import 'base/colors';
 
 // SHARED MIXINS
 @mixin btn-transition {
diff --git a/web-ui/app/scss/_others.scss b/web-ui/app/scss/_others.scss
new file mode 100644
index 00000000..e73ed33d
--- /dev/null
+++ b/web-ui/app/scss/_others.scss
@@ -0,0 +1,7 @@
+.no-padding {
+    padding: 0;
+}
+
+.text-right {
+    text-align: right;
+}
diff --git a/web-ui/app/scss/_read.scss b/web-ui/app/scss/_read.scss
index 2c079408..236a7c7c 100644
--- a/web-ui/app/scss/_read.scss
+++ b/web-ui/app/scss/_read.scss
@@ -66,6 +66,13 @@
 
 .bodyArea {
   padding: 10px 30px 0 30px;
+  box-sizing: border-box;
+
+  iframe {
+    box-sizing: inherit;
+    border: none;
+    width: 100%;
+  }
 }
 
 .attachmentsAreaWrap {
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/base/_colors.scss
index de5f76b3..de5f76b3 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/base/_colors.scss
diff --git a/web-ui/app/scss/opensans.scss b/web-ui/app/scss/base/_fonts.scss
index ada6a025..ada6a025 100644
--- a/web-ui/app/scss/opensans.scss
+++ b/web-ui/app/scss/base/_fonts.scss
diff --git a/web-ui/app/scss/base/_scaffolding.scss b/web-ui/app/scss/base/_scaffolding.scss
new file mode 100644
index 00000000..b8b5fa3b
--- /dev/null
+++ b/web-ui/app/scss/base/_scaffolding.scss
@@ -0,0 +1,10 @@
+html {
+    height: 100% ;
+}
+
+body {
+    min-height: 100% ;
+    overflow: hidden;
+    background: $white;
+}
+
diff --git a/web-ui/app/scss/layout/_message-panel.scss b/web-ui/app/scss/layout/_message-panel.scss
new file mode 100644
index 00000000..e311a9bf
--- /dev/null
+++ b/web-ui/app/scss/layout/_message-panel.scss
@@ -0,0 +1,9 @@
+message-panel-container {
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    width: 100% ;
+    position: relative;
+    margin-bottom: 0;
+}
+
diff --git a/web-ui/app/scss/main.scss b/web-ui/app/scss/main.scss
deleted file mode 100644
index b582a5d5..00000000
--- a/web-ui/app/scss/main.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-@import "compass/css3";
-@import "reset";
-@import "foundation";
-@import "colors";
-@import "mixins";
-@import "alerts";
-@import "read";
-@import "reply";
-@import "compose";
-@import "security";
-@import "mascot";
-@import "styles";
-
-html {
-    height:100%;
-}
-body {
-    min-height:100%;
-    overflow: hidden;
-    background: $white;
-}
-header#main {
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  position: relative;
-  margin-bottom: 0;
-}
-
-.no-padding {
-  padding: 0;
-}
-
-.text-right {
-  text-align: right;
-}
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/sandbox.scss b/web-ui/app/scss/sandbox.scss
new file mode 100644
index 00000000..3cb4c441
--- /dev/null
+++ b/web-ui/app/scss/sandbox.scss
@@ -0,0 +1,20 @@
+$search-highlight: #FFEF29;
+
+body {
+    font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif;
+    font-size: 13px;
+    line-height: 1.2em;
+    background: white;
+    color: #333;
+    padding: 0;
+    margin: 0;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    font-style: normal;
+    box-sizing: border-box;
+    word-wrap: break-word;
+}
+
+.search-highlight {
+  background-color: $search-highlight;
+}
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
new file mode 100644
index 00000000..d27b3031
--- /dev/null
+++ b/web-ui/app/scss/style.scss
@@ -0,0 +1,35 @@
+// vendor stylesheets and resets
+@import "vendor/reset";
+@import "compass/css3";
+@import "vendor/foundation";
+
+// basic configuration
+@import "base/fonts";
+@import "base/colors";
+@import "base/scaffolding";
+
+// mixins
+@import "mixins/position-helpers";
+@import "mixins";
+
+// templates
+@import "templates/no-content-placeholder";
+
+// layout
+@import "layout/message-panel";
+
+// views
+@import "views/message-panel";
+@import "views/no-message-selected";
+@import "views/no-mails-available";
+
+// misc stuff
+@import "others";
+
+// TODO
+@import "compose";
+@import "read";
+@import "reply";
+@import "security";
+@import "styles";
+
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/foundation.scss b/web-ui/app/scss/vendor/_foundation.scss
index 7918cf26..7918cf26 100644
--- a/web-ui/app/scss/foundation.scss
+++ b/web-ui/app/scss/vendor/_foundation.scss
diff --git a/web-ui/app/scss/reset.scss b/web-ui/app/scss/vendor/_reset.scss
index 55f8d054..55f8d054 100644
--- a/web-ui/app/scss/reset.scss
+++ b/web-ui/app/scss/vendor/_reset.scss
diff --git a/web-ui/app/scss/views/_message-panel.scss b/web-ui/app/scss/views/_message-panel.scss
new file mode 100644
index 00000000..4a0a7a6b
--- /dev/null
+++ b/web-ui/app/scss/views/_message-panel.scss
@@ -0,0 +1,26 @@
+.message-panel {
+  width: 100%;
+  margin: 10px auto;
+  position: fixed;
+  z-index: 10000;
+  text-align: center;
+
+  &__growl {
+    padding: 5px 60px;
+
+    &--success {
+      background: $warning;
+      color: darken($warning, 50%);
+      border: 1px solid darken($warning, 10%);
+      @include box-shadow(1px 1px 3px darken($warning, 60%));
+    }
+
+    &--error {
+      font-weight: bold;
+      color: white;
+      background: $error;
+      border: 1px solid darken($error, 10%);
+      @include box-shadow(1px 1px 3px darken($error, 60%));
+    }
+  }
+}
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"
+    }
+}