beenull/disposable-mailbox-3
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Feature/card design (#22)

Browse source 
Improved styling using card layout
This commit is contained in:
synox 2017-04-13 22:15:28 +02:00 committed by GitHub
parent 06d7b86d99
commit 05f79f7cfb
5 changed files with 152 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
CHANGELOG.md Normal file
View file

@ -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

59
src/client-libs/spinner.css Normal file
View file

@ -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);
}
}

BIN
src/client-libs/spinner.gif
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

51
src/client-libs/style.css
View file

@ -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;

107
src/index.html
View file

@ -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>
<pre>{{$ctrl.error.detail|json}}</pre>
</p>
<div>
<pre>{{$ctrl.error.detail|json}}</pre>
</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">
<p class="lead">Your mailbox <strong>{{$ctrl.address}}</strong> is ready. </p>
<p>Emails will appear here automatically. They will be deleted after 30 days.</p>
<p><br/>
<img src="client-libs/spinner.gif">
<br/>
</p>
<div class="card waiting-screen">
<div class="card-block">
<p class="lead">Your mailbox <strong>{{$ctrl.address}}</strong> is ready. </p>
<p>Emails will appear here automatically. They will be deleted after 30 days.</p>
<div class="spinner">
<div class="rect1"></div>
<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="row sticky-header" ec-stickyfill>
<div class="col-sm-12 email-summary">{{mail.subject}}
<form class="form-inline float-xs-right">
<div class="card email">
<div class="card-block header-shadow sticky-header" ec-stickyfill ng-init="htmlTabActive=false">
<div class="row">
<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"
ng-click="htmlTabActive=false">show text
</button>
<button ng-show="mail.textHtml && !htmlTabActive" class="btn btn-outline-info btn-sm"
ng-click="htmlTabActive=true">show html
</button>
<button ng-show="htmlTabActive" class="btn btn-outline-info btn-sm "
ng-click="htmlTabActive=false">show text
</button>
<button ng-show="mail.textHtml && !htmlTabActive"
class="btn btn-outline-info btn-sm"
ng-click="htmlTabActive=true">show html
</button>
<a role="button" class="btn btn-sm btn-outline-primary"
href="{{$ctrl.backend_url}}?download_email_id={{mail.id}}&username={{$ctrl.username}}"
download="true">Download
</a>
<a role="button" class="btn btn-sm btn-outline-primary "
href="{{$ctrl.backend_url}}?download_email_id={{mail.id}}&username={{$ctrl.username}}"
download="true">Download
</a>
<button ng-click="$ctrl.deleteMail(mail, $index)" type="button"
class="btn btn-sm btn-outline-danger">Delete
</button>
</form>
<button ng-click="$ctrl.deleteMail(mail, $index)" type="button"
class="btn btn-sm btn-outline-danger">Delete
</button>
</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 ng-if="!htmlTabActive" class="mail-content"
ng-bind-html="mail.textPlain | nl2br | autolink "></div>
<div ng-if="htmlTabActive" class="mail-content" ng-bind-html="mail.textHtml"></div>
<div class="card-block">
<h6 class="card-subtitle text-muted">To: {{mail.toString}}</h6>
<h6 ng-if="mail.cc" ng-repeat="(address,name) in mail.cc" class="card-subtitle text-muted">CC:
{{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>