Add mobile version (beta)

This commit is contained in:
RainLoop Team 2016-05-01 04:07:10 +03:00
parent 1391648e1b
commit b0ffd84ac6
76 changed files with 2945 additions and 845 deletions

View file

@ -109,3 +109,7 @@
}
}
}
html.rl-mobile .b-settings-content .legend {
width: auto;
}

View file

@ -44,27 +44,27 @@ html.csstransitions.rl-started-trigger.no-mobile .b-login-content .loginFormWrap
.transition(opacity 0.5s linear);
}
.rl-anim {
html.csstransitions.rl-started-delay {
&.csstransitions.no-mobile.rl-started-delay {
#rl-left {
.transition(width 0.3s ease-out);
}
#rl-right {
.transition(left 0.3s ease-out);
}
#rl-sub-left, #rl-sub-left .messageList .inputSearch {
.transition(width 0.3s ease-out);
}
#rl-sub-right {
.transition(left 0.3s ease-out);
}
#rl-left {
.transition(width 0.3s ease-out);
}
#rl-right {
.transition(~'left 0.3s ease-out, right 0.3s ease-out');
}
#rl-sub-left, #rl-sub-left .messageList .inputSearch {
.transition(width 0.3s ease-out);
}
#rl-sub-right {
.transition(left 0.3s ease-out);
}
}
.rl-anim {
&.cssanimations.csstransitions.no-mobile .b-login-content .errorAnimated {
animation: login-form-shake 400ms ease-in-out;
}
@ -78,10 +78,6 @@ html.csstransitions.rl-started-trigger.no-mobile .b-login-content .loginFormWrap
opacity: 0;
}
/* &.csstransitions.no-mobile #rl-content {
.transition(opacity 0.3s ease-out);
}*/
&.csstransitions.no-mobile .btn-group.dropdown.colored-toggle.open .animate-this-icon-on-open {
animation: bounce-me .5s linear;
}

View file

@ -416,3 +416,18 @@
}
}
html.rl-mobile {
.b-contacts-content {
.b-list-content, .b-list-toolbar, .b-list-footer-toolbar {
width: 170px;
}
.b-list-toolbar .e-search {
width: 150px;
}
.b-view-content-toolbar, .b-view-content {
left: 170px;
}
}
}

View file

@ -242,7 +242,7 @@
max-width: fit-content;
white-space: nowrap;
overflow: hidden;
height: 20px;
height: 19px;
display: inline-block;
}
}
@ -258,4 +258,16 @@ html.rl-left-panel-disabled, html.rl-left-panel-short {
margin-top: 10px !important;
margin-left: 0 !important;
}
#rl-left {
visibility: hidden;
}
}
html.rl-mobile {
.btn.buttonCompose {
width: 100%;
}
.btn.buttonContacts {
display: none;
}
}

View file

@ -19,6 +19,22 @@
min-height: 400px;
}
html.rl-mobile {
#rl-center {
min-width: 250px;
min-height: 250px;
}
&.rl-left-panel-enabled #rl-right {
right: -150px;
}
&.rl-left-panel-disabled #rl-right {
left: 5px !important;
}
}
#rl-top {
.g-ui-absolute-reset;
bottom: auto;
@ -353,3 +369,18 @@ html.rl-ctrl-key-pressed {
margin-top: 20px;
font-size: 20px;
}
html.rl-mobile .hide-on-mobile {
display: none;
}
.show-on-mobile {
display: none;
}
html.rl-mobile .show-on-mobile {
display: initial;
}
html.rl-mobile .width100-on-mobile {
width: 100%;
}

View file

@ -1,5 +1,5 @@
html.rl-no-preview-pane {
html.rl-no-preview-pane {
.messageList.message-selected {
display: none;
}
@ -15,6 +15,7 @@ html.rl-no-preview-pane {
height: 30px;
padding: 10px @rlMainBorderSize;
z-index: 102;
white-space: nowrap;
}
.b-footer {
@ -75,6 +76,7 @@ html.rl-no-preview-pane {
height: 29px;
padding: 10px 8px 10px 11px;
z-index: 101;
white-space: nowrap;
background-color: #eee;
// #gradient > .vertical(#f4f4f4, #dfdfdf);
@ -624,3 +626,9 @@ html.cssanimations.rl-anim .messageList .line-loading {
cursor: pointer;
cursor: move;
}
html.rl-mobile {
#rl-sub-left .messageList .inputSearch {
width: 160px !important;
}
}

View file

@ -17,7 +17,7 @@ html.rl-no-preview-pane {
position: absolute;
top: 0;
right: 0;
left: -2px;
left: 0;
height: 30px;
padding: 10px 0;
color: #fff;
@ -120,6 +120,8 @@ html.rl-no-preview-pane {
background-color: #f8f8f8;
border-top: 0px;
border-bottom: 1px solid #ddd;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
z-index: 1;
top: 0;
left: 0;
@ -159,6 +161,7 @@ html.rl-no-preview-pane {
.informationShort {
margin-left: 22px;
margin-right: 50px;
a {
.g-ui-link;
}
@ -563,6 +566,7 @@ html.rl-no-preview-pane .messageView {
.b-content {
top: 50px;
left: 0;
bottom: @rlBottomMargin;
right: @rlBottomMargin;
border: @rlMainBorderSize solid @rlMainDarkColor;

View file

@ -112,3 +112,7 @@
}
}
}
html.rl-mobile .b-settings-content .legend {
width: auto;
}

View file

@ -1,6 +1,10 @@
.b-settings-accounts {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;
@ -58,6 +62,8 @@
.account-item {
white-space: nowrap;
.e-action {
cursor: pointer;
}
@ -103,6 +109,8 @@
.identity-item {
white-space: nowrap;
.e-action {
cursor: pointer;
}

View file

@ -1,6 +1,10 @@
.b-settings-filters {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;
@ -54,6 +58,8 @@
.filter-item {
white-space: nowrap;
.e-action {
cursor: pointer;
}

View file

@ -1,6 +1,10 @@
.b-settings-folders {
html.rl-mobile &{
margin-right: 35px;
}
&.ignore-folder-subscribe {
.subscribe-folder, .unsubscribe-folder {
display: none;

View file

@ -1,6 +1,10 @@
.b-settings-general {
html.rl-mobile &{
margin-right: 15px;
}
.notification-desc-denied {
color: #999;
display: none;
@ -20,7 +24,7 @@
}
.flag-name {
border-bottom: 1px dashed #555;
cursor: pointer;
padding: 2px 0px;

View file

@ -1,6 +1,10 @@
.b-settings-open-pgp {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;

View file

@ -1,6 +1,10 @@
.b-settings-templates {
html.rl-mobile &{
margin-right: 15px;
}
.process-place {
text-align: center;
width: 600px;

View file

@ -7,8 +7,16 @@
}
}
html.rl-mobile .b-settings-content .b-settings-theme .legend {
width: auto;
}
.b-themes-list {
html.rl-mobile &{
margin-right: 15px;
}
.e-item {
display: inline-block;

View file

@ -192,6 +192,4 @@ html.ssm-state-mobile .accountPlace {
animation: thirdBar 1s infinite;
}
}
}
}

View file

@ -174,11 +174,11 @@ html.rgba .g-ui-resizable-delimiter-highlight {
}
}
e-spinner {
.e-spinner {
display: none;
}
.e-powered {
.e-powered, .e-mobile-switcher {
margin-top: 8px;
color: #333;
a {

View file

@ -382,3 +382,33 @@ html.no-rgba .modal {
.control-label.remove-padding-top {
padding-top: 0;
}
html.rl-mobile {
.popups .modal {
width: 100% !important;
width: calc(~'100% - 20px') !important;
}
.b-settings-content {
padding: 10px;
padding-left: 20px;
}
.list-table {
width: 100%;
max-width: 100%;
}
.form-horizontal {
.control-group {
.control-label {
text-align: left;
float: none;
}
.controls {
margin-left: 0;
}
}
}
}