Feature/card design (#22)

Improved styling using card layout

CHANGELOG.md

@@ -0,0 +1,22 @@
+# Change Log
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project does not adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased]
+
+### Changed
+- Improved styling using card layout
+
+## [0.1.3] - 2017-03-24
+### Changed
+- new nicer login form
+- layout optimized (show html now on the right)
+- tell user that mails will be deleted
+
+### Added
+- set delete period in config
+
+## [<=0.1.2]
+See https://github.com/synox/disposable-mailbox/releases

src/client-libs/spinner.css

@@ -0,0 +1,59 @@
+/* http://tobiasahlin.com/spinkit/ */
+
+.spinner {
+    margin: 20px auto;
+    width: 50px;
+    height: 40px;
+    text-align: center;
+    font-size: 10px;
+}
+
+.spinner > div {
+    background-color: #333;
+    height: 100%;
+    width: 6px;
+    display: inline-block;
+
+    -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
+    animation: sk-stretchdelay 1.2s infinite ease-in-out;
+}
+
+.spinner .rect2 {
+    -webkit-animation-delay: -1.1s;
+    animation-delay: -1.1s;
+}
+
+.spinner .rect3 {
+    -webkit-animation-delay: -1.0s;
+    animation-delay: -1.0s;
+}
+
+.spinner .rect4 {
+    -webkit-animation-delay: -0.9s;
+    animation-delay: -0.9s;
+}
+
+.spinner .rect5 {
+    -webkit-animation-delay: -0.8s;
+    animation-delay: -0.8s;
+}
+
+@-webkit-keyframes sk-stretchdelay {
+    0%, 40%, 100% {
+        -webkit-transform: scaleY(0.4)
+    }
+    20% {
+        -webkit-transform: scaleY(1.0)
+    }
+}
+
+@keyframes sk-stretchdelay {
+    0%, 40%, 100% {
+        transform: scaleY(0.4);
+        -webkit-transform: scaleY(0.4);
+    }
+    20% {
+        transform: scaleY(1.0);
+        -webkit-transform: scaleY(1.0);
+    }
+}

src/client-libs/style.css

@@ -28,50 +28,25 @@ header {
     margin-top: 6px;
 }
 
+.email-table > .email {
+    border-top: 5px solid #7C96AB;
+
+    /* idea: card shadow arround:
+     see https://blog.alexdevero.com/mastering-card-design-with-bootstrap-4/
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    */
+}
+
+.header-shadow {
+    box-shadow: 0 2px 2px rgba(182, 182, 182, 0.75);
+}
+
 .sticky-header {
     top: 0;
     z-index: 1000;
-}
-
-.email {
-    border-bottom: 1px solid #7C96AB;
-}
-
-.email .email-summary {
-    font-weight: bold;
-    border-top: 5px solid #7C96AB;
-    border-bottom: 1px solid #7C96AB;
-    padding: 10px;
     background-color: white;
 }
 
-.email .email-headers {
-    background-color: white;
-}
-
-.email .email-headers dl {
-    padding: 0 0 4px;
-    color: black;
-    overflow: hidden;
-}
-
-.email .email-headers dl dt {
-    float: left;
-    color: black;
-    margin: 0 3px 0 0;
-}
-
-.email .email-headers dl dd {
-    display: block;
-    overflow: hidden;
-    margin-bottom: .3rem;
-}
-
-.email .mail-content {
-    background-color: white;
-    padding-left: 20px;
-    overflow: hidden;
-}
 
 .waiting-screen {
     padding: 40px 15px;

src/index.html

@@ -10,6 +10,7 @@
     <meta name="description" content="Mailbox">
     <link rel="shortcut icon" href="favicon.gif" type="image/x-icon">
     <link rel="stylesheet" href="client-libs/style.css">
+    <link rel="stylesheet" href="client-libs/spinner.css">
     <link rel="stylesheet" href="client-libs/angular-stickyfill-0.1.0/angular-stickyfill.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
           integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
@@ -48,74 +49,82 @@
             <div ng-if="$ctrl.error" class="alert alert-danger" role="alert">
                 <p><strong>Sorry, there was a problem. </strong></p>
                 <p> {{$ctrl.error.desc}} </p>
-                <p>
+                <div>
-                <pre>{{$ctrl.error.detail|json}}</pre>
+                    <pre>{{$ctrl.error.detail|json}}</pre>
-                </p>
+                </div>
                 <p> If you are the developer you might want to check the developer tools console of your web
                     browser and your php error logs. </p>
             </div>
 
             <div ng-if="$ctrl.username && $ctrl.mails.length == 0">
-                <div class="waiting-screen">
+                <div class="card waiting-screen">
-                    <p class="lead">Your mailbox <strong>{{$ctrl.address}}</strong> is ready. </p>
+                    <div class="card-block">
-                    <p>Emails will appear here automatically. They will be deleted after 30 days.</p>
+                        <p class="lead">Your mailbox <strong>{{$ctrl.address}}</strong> is ready. </p>
-                    <p><br/>
+                        <p>Emails will appear here automatically. They will be deleted after 30 days.</p>
-                        <img src="client-libs/spinner.gif">
+                        <div class="spinner">
-                        <br/>
+                            <div class="rect1"></div>
-                    </p>
+                            <div class="rect2"></div>
+                            <div class="rect3"></div>
+                            <div class="rect4"></div>
+                            <div class="rect5"></div>
+                        </div>
+                    </div>
                 </div>
             </div>
-
             <div ng-if="$ctrl.username" ng-repeat="mail in $ctrl.mails | orderBy:'-date' track by $index"
                  class="email-table">
 
-                <section class="email" ng-init="htmlTabActive=false">
+                <div class="card email">
-                    <div class="row sticky-header" ec-stickyfill>
+                    <div class="card-block header-shadow sticky-header" ec-stickyfill ng-init="htmlTabActive=false">
-                        <div class="col-sm-12 email-summary">{{mail.subject}}
+                        <div class="row">
-                            <form class="form-inline float-xs-right">
+                            <div class="col-sm-8">
+                                <h3 class="card-title">{{mail.subject}}</h3>
+                            </div>
+                            <div class="col-sm-4 text-right">
+                                <form class="form-inline float-xs-right">
 
-                                <button ng-show="htmlTabActive" class="btn btn-outline-info btn-sm"
+                                    <button ng-show="htmlTabActive" class="btn btn-outline-info btn-sm "
-                                        ng-click="htmlTabActive=false">show text
+                                            ng-click="htmlTabActive=false">show text
-                                </button>
+                                    </button>
-                                <button ng-show="mail.textHtml && !htmlTabActive" class="btn btn-outline-info btn-sm"
+                                    <button ng-show="mail.textHtml && !htmlTabActive"
-                                        ng-click="htmlTabActive=true">show html
+                                            class="btn btn-outline-info btn-sm"
-                                </button>
+                                            ng-click="htmlTabActive=true">show html
+                                    </button>
 
-                                <a role="button" class="btn btn-sm btn-outline-primary"
+                                    <a role="button" class="btn btn-sm btn-outline-primary "
-                                   href="{{$ctrl.backend_url}}?download_email_id={{mail.id}}&username={{$ctrl.username}}"
+                                       href="{{$ctrl.backend_url}}?download_email_id={{mail.id}}&username={{$ctrl.username}}"
-                                   download="true">Download
+                                       download="true">Download
-                                </a>
+                                    </a>
 
-                                <button ng-click="$ctrl.deleteMail(mail, $index)" type="button"
+                                    <button ng-click="$ctrl.deleteMail(mail, $index)" type="button"
-                                        class="btn btn-sm btn-outline-danger">Delete
+                                            class="btn btn-sm btn-outline-danger">Delete
-                                </button>
+                                    </button>
-                            </form>
+                                </form>
+                            </div>
                         </div>
-                    </div>
+                        <div class="row">
+                            <div class="col-sm-8">
+                                <h6 class="card-subtitle mt-1 text-muted">{{mail.fromName}}
+                                    &lt;{{mail.fromAddress}}&gt;</h6>
+                            </div>
+                            <div class="col-sm-4">
+                                <h6 class="card-subtitle mt-1 text-muted" style="text-align: right">{{mail.date}}</h6>
+                            </div>
 
-                    <div class="row">
-                        <div class="col-sm-12 email-headers">
-                            <dl>
-                                <dt>To:</dt>
-                                <dd>{{mail.toString}}</dd>
-                                <div ng-if="mail.cc" ng-repeat="(address,name) in mail.cc">
-                                    <dt>CC:</dt>
-                                    <dd>{{address}}</dd>
-                                </div>
-                                <dt>From:</dt>
-                                <dd>{{mail.fromName}} &lt;{{mail.fromAddress}}&gt;</dd>
-                                <dt>Date:</dt>
-                                <dd>{{mail.date}}</dd>
-                            </dl>
 
                         </div>
                     </div>
-                    <div class="row mail-content">
+                    <div class="card-block">
-                        <div ng-if="!htmlTabActive" class="mail-content"
+                        <h6 class="card-subtitle text-muted">To: {{mail.toString}}</h6>
-                             ng-bind-html="mail.textPlain | nl2br | autolink "></div>
+                        <h6 ng-if="mail.cc" ng-repeat="(address,name) in mail.cc" class="card-subtitle text-muted">CC:
-                        <div ng-if="htmlTabActive" class="mail-content" ng-bind-html="mail.textHtml"></div>
+                            {{address}}</h6>
+
+                        <div class="mt-2 card-text">
+                            <div ng-if="!htmlTabActive" ng-bind-html="mail.textPlain | nl2br | autolink "></div>
+                            <div ng-if="htmlTabActive" ng-bind-html="mail.textHtml"></div>
+                        </div>
                     </div>
-                </section>
+                </div>
             </div>
         </div>
     </main>