moparisthebest/mail
1
0
Fork 0
mirror of https://github.com/moparisthebest/mail synced 2024-12-23 07:48:48 -05:00
Code Issues Releases Wiki Activity

[WO-361] Fix flexbox styles by preventing shrink on the required dom nodes

Browse Source
This commit is contained in:
Tankred Hase 2014-04-29 23:35:43 +02:00
parent 4cf83fd6f1
commit dc02106492
3 changed files with 44 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/sass/views/_read.scss
View File

@ -44,45 +44,47 @@
}
}
.attachments {
.attachments-wrapper {
flex-shrink: 0;
position: relative;
width: inherit;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
min-height: em(44);
.attachment {
height: 32px;
border-radius: 16px;
vertical-align: middle;
margin: 5px 0 5px 5px;
padding: 5px 10px 5px 10px;
.attachments {
position: relative;
width: inherit;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
display: inline-block;
min-height: em(44);
span {
font-size: 14px;
color: $color-grey-input;
.attachment {
height: 32px;
border-radius: 16px;
vertical-align: middle;
}
margin: 5px 0 5px 5px;
padding: 5px 10px 5px 10px;
border: 1px;
border-style: solid;
border-color: $color-grey-lighter;
display: inline-block;
&:hover,
&:focus {
background-color: darken($color-white, 2%);
cursor: pointer;
span {
font-size: 14px;
color: $color-grey-input;
vertical-align: middle;
}
&:hover,
&:focus {
background-color: darken($color-white, 2%);
cursor: pointer;
}
}
}
}
.seperator-line {
flex-shrink: 0;
height: 1px;
color: $color-grey-lighter;
background-color: $color-grey-lighter;
.seperator-line {
height: 1px;
color: $color-grey-lighter;
background-color: $color-grey-lighter;
}
}
.body {

11
src/tpl/read.html
View File

@ -30,15 +30,18 @@
</div><!--/.mail-addresses-->
</div><!--/.headers-->
<div ng-switch="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
<div ng-switch-when="true" class="attachments">
<span class="attachment" ng-repeat="attachment in state.mailList.selected.attachments" ng-click="download(attachment)">
<div class="attachments-wrapper"
ng-switch="state.mailList.selected.attachments !== undefined && state.mailList.selected.attachments.length > 0">
<div class="attachments" ng-switch-when="true">
<span class="attachment"
ng-repeat="attachment in state.mailList.selected.attachments"
ng-click="download(attachment)">
<span data-icon="&#xe003;"></span>
{{attachment.filename}}
</span><!--/.attachment-->
</div><!--/.attachments-->
<div ng-switch-default class="seperator-line"></div>
</div><!--/.ng-switch-->
</div><!--/.attachments-wrapper-->
<div class="body" ng-switch="state.mailList.selected === undefined || (state.mailList.selected.encrypted === false && state.mailList.selected.body !== undefined) || (state.mailList.selected.encrypted === true && state.mailList.selected.decrypted === true)">
<div ng-switch-when="true">

18
src/tpl/write.html
View File

@ -41,17 +41,13 @@
</button><!--/.btn-attachment-->
</div><!--/.subject-box-->
<div ng-switch="attachments.length > 0">
<div ng-switch-when="true">
<div class="attachments-box">
<span ng-repeat="attachment in attachments" class="attachment">
<span data-icon="&#xe003;"></span>
{{attachment.filename}}
<span class="close" data-icon="&#xe000;" ng-click="remove(attachment)"></span>
</span><!--/.attachment-->
</div><!--/.attachments-box-->
</div><!--/ng-switch-when-->
</div><!--/ng-switch-->
<div class="attachments-box" ng-show="attachments.length > 0">
<span ng-repeat="attachment in attachments" class="attachment">
<span data-icon="&#xe003;"></span>
{{attachment.filename}}
<span class="close" data-icon="&#xe000;" ng-click="remove(attachment)"></span>
</span><!--/.attachment-->
</div><!--/.attachments-box-->
<div class="body" focus-child>
<p ng-model="body" contentEditable="true" spellcheck="false" ng-change="updatePreview()" tabindex="3" focus-me="state.lightbox === 'write' && writerTitle === 'Reply'"></p>