Skip to content
This repository has been archived by the owner on Mar 28, 2021. It is now read-only.

Commit

Permalink
Feature/card design (#22)
Browse files Browse the repository at this point in the history 
Improved styling using card layout
  • Loading branch information
@synox
synox authored Apr 13, 2017
1 parent 06d7b86 commit 05f79f7
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 88 deletions.
22 changes: 22 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -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 changes: 59 additions & 0 deletions src/client-libs/spinner.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
Binary file removed src/client-libs/spinner.gif
View file
Binary file not shown.
47 changes: 11 additions & 36 deletions src/client-libs/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,51 +28,26 @@ header {
margin-top: 6px;
}

.sticky-header {
top: 0;
z-index: 1000;
}

.email {
border-bottom: 1px solid #7C96AB;
}

.email .email-summary {
font-weight: bold;
.email-table > .email {
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;
/* 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);
*/
}

.email .email-headers dl dd {
display: block;
overflow: hidden;
margin-bottom: .3rem;
.header-shadow {
box-shadow: 0 2px 2px rgba(182, 182, 182, 0.75);
}

.email .mail-content {
.sticky-header {
top: 0;
z-index: 1000;
background-color: white;
padding-left: 20px;
overflow: hidden;
}


.waiting-screen {
padding: 40px 15px;
text-align: center;
Expand Down
113 changes: 61 additions & 52 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">

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

<button ng-click="$ctrl.deleteMail(mail, $index)" type="button"
class="btn btn-sm btn-outline-danger">Delete
</button>
</form>
<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>

<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>
</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>
Expand Down

0 comments on commit 05f79f7

Please sign in to comment.