[mobile] [style] fix checkboxes

This commit is contained in:
Rushabh Mehta 2015-08-07 18:26:15 +05:30
parent e41bfe3003
commit 263d94f217
8 changed files with 83 additions and 30 deletions

View file

@ -166,6 +166,9 @@ body {
.timeline .timeline-item:last-child {
border-bottom: none;
}
.list-row {
padding: 13px 15px !important;
}
.doclist-row {
position: relative;
padding-right: 10px;
@ -192,6 +195,15 @@ body {
.doclist-row .list-row-right {
float: right;
}
.doclist-row .list-row-right .list-row-indicator {
top: 4px;
}
.doclist-row .list-row-right .list-row-indicator .indicator::before,
.doclist-row .list-row-right .list-row-indicator .indicator::after {
height: 12px;
width: 12px;
border-radius: 12px;
}
.doclist-row .list-row-right.no-right-column {
position: absolute;
top: 0;
@ -199,15 +211,6 @@ body {
left: -10px;
width: 100%;
}
.doclist-row .list-row-right.no-right-column .list-row-indicator {
top: 5px;
}
.doclist-row .list-row-right.no-right-column .list-row-indicator .indicator::before,
.doclist-row .list-row-right.no-right-column .list-row-indicator .indicator::after {
height: 14px;
width: 14px;
border-radius: 14px;
}
body[data-route^="messages"] .navbar-center {
display: block !important;
position: absolute;
@ -258,6 +261,28 @@ body {
}
}
@media (max-width: 991px) {
input[type='checkbox'] {
-webkit-appearance: none;
width: 18px;
height: 18px;
background: white;
border-radius: 9px;
margin-top: -2px;
margin-bottom: -5px;
border: 1px solid #d1d8dd;
display: inline-block;
}
input[type='checkbox']:checked {
background: #3b99fc;
border-color: #3b99fc;
}
input.list-select-all {
margin-top: 0px;
}
.input-area input[type='checkbox'] {
margin-top: 2px;
margin-left: -23px;
}
.intro-area,
.footnote-area {
padding: 15px 0px;
@ -269,7 +294,7 @@ body {
position: relative;
}
.page-head .page-title h1 {
font-size: 18px;
font-size: 22px;
margin-top: 22px;
}
body[data-route^="Form"] .page-title h1 {

View file

@ -42,7 +42,7 @@ frappe.ui.form.Dashboard = Class.extend({
var badge = $(repl('<div class="col-md-4">\
<div class="alert-badge">\
<a class="badge-link grey">%(label)s</a>\
<span class="badge">-</span>\
<span class="badge" style="margin-left: 10px;">-</span>\
</div></div>', {label:label, icon: frappe.boot.doctype_icons[doctype]}))
.appendTo(this.body)

View file

@ -1,5 +1,5 @@
<div class="row doclist-row {% if (data._checkbox) { %} has-checkbox {% } %}">
<div class="{% if(right_column) { %} col-xs-12 {% } else { %} col-xs-10 {% } %}
<div class="col-xs-10
{% if (list.meta.title_field) { %}
col-sm-8
{% } else { %}
@ -13,8 +13,7 @@
{% if (list.meta.title_field) {
var is_different = data.name !== data[list.meta.title_field];
%}
<div class="list-col col-sm-2 col-xs-10 text-right text-ellipsis rtl list-row-id
{% if (!is_different) { %} hidden-xs {% } %}">
<div class="list-col col-sm-2 hidden-xs text-right text-ellipsis rtl list-row-id">
{% if (is_different) { %}
<a class="text-muted list-value" href="#Form/{%= data._doctype_encoded %}/{%= data._name_encoded %}">
{%= data.name %}</a>
@ -24,7 +23,6 @@
<!-- comment -->
<div class="list-col col-sm-2 col-xs-2
{% if(!right_column) { %} no-right-column {% } %}
text-right list-row-right">
<div class="visible-xs pull-right list-row-indicator">{%= list.get_indicator_dot(data) %}</div>
<div class="hidden-xs pull-right">

View file

@ -1,6 +1,6 @@
<div class="list-row list-row-head">
<div class="row doclist-row">
<div class="col-xs-12
<div class="col-xs-10
{% if (list.meta.title_field) { %}
col-sm-8
{% } else { %}

View file

@ -126,7 +126,6 @@ frappe.ui.toolbar.update_notifications = function() {
frappe.views.show_open_count_list(this);
}
}
return false;
});
$(".navbar-new-comments")

View file

@ -7,7 +7,7 @@
{% if (item.type==="doctype") { %}
<span class="open-notification hide" data-doctype="{%= item.name %}"></span>
{% } %}
<p class="text-muted small module-item-description">{%= item.description %}</p>
<p class="text-muted small module-item-description hidden-xs">{%= item.description %}</p>
</div>
<div class="col-xs-4 text-muted text-right small" style="padding-top: 5px;">
{% if (item.last_modified) { %}

View file

@ -157,6 +157,10 @@
}
// listviews
.list-row {
padding: 13px 15px !important;
}
.doclist-row& {
position: relative;
padding-right: 10px;
@ -187,6 +191,19 @@
.list-row-right {
float: right;
.list-row-indicator {
top: 4px;
// bigger indicators for list
.indicator::before, .indicator::after {
height: 12px;
width: 12px;
border-radius: 12px;
}
}
}
.list-row-right.no-right-column {
@ -196,17 +213,6 @@
left: -10px;
width: 100%;
.list-row-indicator {
top: 5px;
// bigger indicators for list
.indicator::before, .indicator::after {
height: 14px;
width: 14px;
border-radius: 14px;
}
}
}
}
@ -273,6 +279,29 @@
}
@media(max-width: 991px) {
input[type='checkbox'] {
-webkit-appearance:none;
width: 18px;
height: 18px;
background: white;
border-radius: 9px;
margin-top: -2px;
margin-bottom: -5px;
border: 1px solid @border-color;
display: inline-block;
}
input[type='checkbox']:checked {
background: @checkbox-color;
border-color: @checkbox-color;
}
input.list-select-all {
margin-top: 0px;
}
.input-area input[type='checkbox'] {
margin-top: 2px;
margin-left: -23px;
}
.intro-area,
.footnote-area {
padding: 15px 0px;
@ -288,7 +317,7 @@
.page-head {
.page-title h1 {
font-size: 18px;
font-size: 22px;
margin-top: 22px;
}
}

View file

@ -31,3 +31,5 @@
@label-info-bg: #E8DDFF;
@label-warning-bg: #FFE6BF;
@label-danger-bg: #FFDCDC;
@checkbox-color: #3b99fc;