Dereku/snappymail
1
0
Fork 0
mirror of https://github.com/the-djmaze/snappymail.git synced 2026-09-09 17:37:02 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved Contacts dialog layout for mobile

Browse source
This commit is contained in:
the-djmaze 2022-11-28 12:25:21 +01:00
parent 4085f58b4e
commit aa842dbc83
2 changed files with 280 additions and 300 deletions
Download patch file Download diff file Expand all files Collapse all files

72
dev/Styles/User/Contacts.less
View file

@ -1,14 +1,8 @@
@contacts-popup-left-width: 25%;
#V-PopupsContacts {
bottom: 0;
width: auto;
min-width: 550px;
max-width: 900px;
min-height: 300px;
max-height: 700px;
.control-group {
label.iconsize24 {
@ -18,32 +12,28 @@
}
.modal-body {
display: flex;
height: calc(100vh - 49px);
padding: 0;
position: relative;
}
/* Left */
.b-list-toolbar {
padding: 0;
height: 44px;
text-align: center;
width: @contacts-popup-left-width;
border-bottom: 1px solid rgba(128,128,128,0.4);
border-bottom: 1px solid var(--border-color, #ddd);
.e-search {
margin: 7px 0 0;
width: calc(100% - 20px);
width: calc(100% - 10px);
}
}
.b-list-footer-toolbar {
position: absolute;
left: 0;
bottom: 0;
height: 46px;
width: @contacts-popup-left-width;
background-color: var(--message-list-toolbar-bg-color,#eee);
box-shadow: inset 0 1px 0 #ccc;
border-top: 1px solid var(--border-color, #ddd);
.footer-pager {
padding: 8px 10px 0 0;
@ -52,11 +42,7 @@
}
.b-list-content {
position: absolute;
top: 45px;
bottom: 46px;
left: 0;
width: @contacts-popup-left-width;
height: calc(100% - 44px - 46px);
overflow: hidden;
overflow-y: auto;
scroll-behavior: smooth;
@ -87,9 +73,8 @@
position: relative;
margin: 0;
border: 0;
border-left: 6px solid #eee;
border-bottom: 1px solid rgba(128,128,128,0.25);
border-bottom: 1px solid var(--border-color, #ddd);
&.focused {
border-left-color: #bbb;
@ -132,15 +117,17 @@
}
}
/* Right */
.right {
width: 100%;
border-left: 1px solid var(--border-color, #ddd);
}
.b-view-content-toolbar {
border-top: 1px solid var(--border-color, #ddd);
padding: 7px;
position: absolute;
bottom: 0;
right: 0;
left: @contacts-popup-left-width;
height: 30px;
text-align: right;
border-top: 1px solid rgba(128,128,128,0.4);
.dropdown-menu.right-edge {
top: auto;
@ -149,13 +136,9 @@
}
.b-view-content {
position: absolute;
top: 0;
bottom: 45px;
left: @contacts-popup-left-width;
right: 0;
height: calc(100% - 46px);
margin: 0;
overflow: auto;
border-left: 1px solid rgba(128,128,128,0.25);
span {
height: 20px;
@ -179,21 +162,8 @@
}
input, textarea {
box-shadow: none;
border-color: #fff;
font-size: 18px;
width: 70vw;
max-width: 400px;
&:hover {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
border-color: #ccc;
}
&:focus {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
border-color: #999;
}
}
}
@ -227,3 +197,9 @@ html:not(rl-mobile) {
}
}
}
@media screen and (max-width: 900px) {
#V-PopupsContacts {
width: 100%;
}
}

6
snappymail/v/0.0.0/app/templates/Views/User/PopupsContacts.html
View file

@ -43,6 +43,7 @@
</div>
</header>
<div class="modal-body">
<div class="left">
<div class="b-list-toolbar">
<input type="search" class="e-search" placeholder="Search" autofocus="" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search">
</div>
@ -67,11 +68,13 @@
</div>
</div>
</div>
<div class="b-list-footer-toolbar thm-message-list-bottom-toolbar">
<div class="b-list-footer-toolbar">
<div class="footer-pager">
<!-- ko template: { name: 'Paginator', data: contactsPaginator } --><!-- /ko -->
</div>
</div>
</div>
<div class="right">
<form class="b-view-content" spellcheck="false" data-bind="css: {'read-only': contact() && contact().readOnly()}">
<div class="b-contact-view-desc" data-bind="visible: !contact()"
data-i18n="CONTACTS/CONTACT_VIEW_DESC"></div>
@ -320,4 +323,5 @@
-->
<!-- /ko -->
</div>
</div>
</div>