diff --git a/frappe/core/page/desktop/desktop.css b/frappe/core/page/desktop/desktop.css deleted file mode 100644 index 36abce3b08..0000000000 --- a/frappe/core/page/desktop/desktop.css +++ /dev/null @@ -1,69 +0,0 @@ -#page-desktop { - position: absolute; - min-width: 100%; - min-height: 100%; - overflow: auto; - padding-top: 14px; - padding-bottom: 50px; - margin-bottom: -50px; - border: 0px; - background-color: transparent; - background-color: #fcfdfe; -} - -#icon-grid { - padding-top: 15px; - padding-bottom: 30px; -} - -.case-wrapper { - position: relative; - margin: 0px; - float: left; - width: 100px; - height: 120px; -} - -.case-label { - font-size: 90%; - line-height: 1.1; - text-align: center; - /*text-shadow: 1px 1px 3px rgba(0, 0, 0, 1), 0px 3px 15px rgba(0, 0, 0, 0.5);*/ -} - -.circle { - position: absolute; - top: 0px; - right: 15px; - width: 10px; - height: 10px; - border-radius: 50%; - -moz-border-radius: 50%; - -webkit-border-radius: 50%; - line-height: none; - background: #FF5858; - z-index: 5; -} - -/*.circle-text { - color: white; - display: inline-block; - min-width: 15px; -}*/ - -@media (max-width: 768px) { - .case-wrapper { - margin: 9px; - width: 70px; - height: 90px; - } - .case-label { - padding-top: 2px; - font-size: 85%; - } - .circle { - right: 3px; - } -} - - diff --git a/frappe/core/page/desktop/desktop.js b/frappe/core/page/desktop/desktop.js index 23ca7d1379..a87f12086a 100644 --- a/frappe/core/page/desktop/desktop.js +++ b/frappe/core/page/desktop/desktop.js @@ -1,9 +1,9 @@ frappe.provide('frappe.desktop'); frappe.pages['desktop'].onload = function(wrapper) { - $('
\ -
\ +
\
\
\
').appendTo(wrapper); @@ -49,11 +49,12 @@ frappe.desktop.render = function() { $module_icon = $(repl('
\ - \ %(app_icon)s\ -
%(_label)s
\ +
\ + \ + %(_label)s\ +
\
', module)).click(module.link ? function() { var link = $(this).attr("data-link"); if(link) { diff --git a/frappe/public/build.json b/frappe/public/build.json index f73d97f863..6989d5a654 100644 --- a/frappe/public/build.json +++ b/frappe/public/build.json @@ -33,7 +33,7 @@ "public/css/octicons/octicons.css", "public/css/desk.css", "public/css/mobile.css", - "public/css/app_icon.css", + "public/css/desktop.css", "public/css/avatar.css", "public/css/navbar.css", "public/css/slickgrid.css", diff --git a/frappe/public/css/app_icon.css b/frappe/public/css/app_icon.css index f2b4b568b8..5380880409 100644 --- a/frappe/public/css/app_icon.css +++ b/frappe/public/css/app_icon.css @@ -1,69 +1,56 @@ .app-icon { - border-radius: 5px; - overflow: hidden; - padding: 15px; - display: inline-block; - margin: auto; - text-align: center; - /*border: 1px solid #36414C;*/ - border: 1px solid #d1d8dd; - background-color: #fff; + /* border-radius: 5px;*/ + overflow: hidden; + padding: 15px; + display: inline-block; + margin: auto; + text-align: center; + background-color: #fff; } - -.app-icon:hover { - background-color: #f5f7fa; -} - - -.app-icon i { - font-size: 40px; - min-width: 40px; - color: #36414C; - display: inline-block; -} - .app-icon:hover i { - color: inherit; + color: #8d99a6; } - -.app-icon svg, .app-icon img { - height: 40px; - width: 40px; - margin-top: -3px; +.app-icon i { + font-size: 48px; + min-width: 48px; + color: #36414c; + display: inline-block; + transition: 0.2s; + -webkit-transition: 0.2s; +} +.app-icon svg, +.app-icon img { + height: 40px; + width: 40px; + margin-top: -3px; } - .app-icon path { - fill: #36414C; + fill: #36414c; + transition: 0.2s; + -webkit-transition: 0.2s; } - .app-icon:hover path { - fill: inherit; + fill: #8d99a6; } - .app-icon-small { - padding: 12px; + padding: 12px; } - .app-icon-img.app-icon-small { - padding: 0px; - height: 54px; - width: 54px; + padding: 0px; + height: 54px; + width: 54px; } - .app-icon-img { - padding: 0px; - height: 70px; - width: 70px; + padding: 0px; + height: 70px; + width: 70px; } - .app-icon-img img { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } - - @media (max-width: 768px) { - .app-icon { - padding: 12px; - } + .app-icon { + padding: 12px; + } } diff --git a/frappe/public/css/desk.css b/frappe/public/css/desk.css index f2541ec8f4..140998e0e7 100644 --- a/frappe/public/css/desk.css +++ b/frappe/public/css/desk.css @@ -301,16 +301,21 @@ em.link-option { color: #ffdb4c; } /* module */ +.module-section { + margin-bottom: 15px; +} .module-item { margin: 0px; - padding: 5px 0px; + padding: 7px; border-bottom: 1px solid #d1d8dd; cursor: pointer; } .module-item h4 { - margin-bottom: 2px; display: inline-block; } +.module-item .module-item-description { + margin-top: -5px; +} .module-item .badge { margin-top: -2px; margin-left: 3px; @@ -589,9 +594,8 @@ ul.linked-with-list li { border-top: 1px solid #d1d8dd; } /* form footer */ -.form-footer { - padding-bottom: 60px; - /*box-shadow: 0px -1px 6px rgba(0,0,0,0.3);*/ +.layout-main-section-wrapper { + margin-bottom: 60px; } .form-footer h5 { margin: 15px 0px; diff --git a/frappe/public/css/desktop.css b/frappe/public/css/desktop.css new file mode 100644 index 0000000000..44a5b5fda6 --- /dev/null +++ b/frappe/public/css/desktop.css @@ -0,0 +1,125 @@ +#page-desktop { + position: absolute; + min-width: 100%; + min-height: 100%; + padding-top: 14px; + padding-bottom: 50px; + margin-bottom: -50px; + border: 0px; +} +.case-wrapper { + position: relative; + margin: 0px; + float: left; + width: 138px; + height: 120px; +} +.case-label { + font-size: 90%; + line-height: 1.1; + text-align: center; + margin-top: -10px; + transition: 0.2s; + -webkit-transition: 0.2s; + /*text-shadow: 1px 1px 3px rgba(0, 0, 0, 1), 0px 3px 15px rgba(0, 0, 0, 0.5);*/ +} +.circle { + color: #ff5858; + margin-top: -2px; + margin-left: -16px; + margin-right: 2px; + font-size: 14px; +} +.app-icon { + /* border-radius: 5px;*/ + overflow: hidden; + padding: 15px; + display: inline-block; + margin: auto; + text-align: center; + background-color: #fff; +} +.app-icon i { + font-size: 48px; + min-width: 48px; + color: #4b5661; + display: inline-block; + transition: 0.2s; + -webkit-transition: 0.2s; +} +.app-icon svg, +.app-icon img { + height: 48px; + width: 48px; + margin-top: -3px; +} +.app-icon path { + fill: #4b5661; + transition: 0.2s; + -webkit-transition: 0.2s; +} +.case-wrapper:hover path { + fill: #36414c; +} +.case-wrapper:hover i, +.case-wrapper:hover { + color: #36414c; +} +.app-icon-small { + padding: 12px; +} +.app-icon-img.app-icon-small { + padding: 0px; + height: 54px; + width: 54px; +} +.app-icon-img { + padding: 0px; + height: 70px; + width: 70px; +} +.app-icon-img img { + width: 100%; + height: 100%; +} +#icon-grid { + padding-top: 15px; + padding-bottom: 30px; + max-width: 970px; + margin: auto; +} +@media (min-width: 768px) and (max-width: 991px) { + #icon-grid { + max-width: 690px; + } +} +@media (max-width: 767px) { + #icon-grid { + max-width: 320px; + } + .case-wrapper { + width: 80px; + height: 90px; + } + .case-label { + font-size: 80%; + } + .app-icon i { + font-size: 32px; + min-width: 32px; + } + .app-icon svg, + .app-icon img { + height: 32px; + width: 32px; + } +} +@media (max-width: 320px) { + #icon-grid { + max-width: 280px; + } + .case-wrapper { + width: 70px; + height: 90px; + } +} diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js index 599ee73c12..032f52fdb2 100644 --- a/frappe/public/js/frappe/ui/page.js +++ b/frappe/public/js/frappe/ui/page.js @@ -45,7 +45,7 @@ frappe.ui.Page = Class.extend({ } else { var main = this.add_view("main", '
\
\ -
\ +
\
\
\
'); diff --git a/frappe/public/js/frappe/views/module/module_section.html b/frappe/public/js/frappe/views/module/module_section.html index 395ea5b4a6..2ba1f67c87 100644 --- a/frappe/public/js/frappe/views/module/module_section.html +++ b/frappe/public/js/frappe/views/module/module_section.html @@ -7,7 +7,7 @@ {% if (item.type==="doctype") { %} {% } %} -

{%= item.description %}

+

{%= item.description %}

{% if (item.last_modified) { %} @@ -16,7 +16,7 @@
{% } else { %}
-
{%= item.label || item.name %}
+

{%= item.label || item.name %}

{% } %}
diff --git a/frappe/public/less/desk.less b/frappe/public/less/desk.less index 161b580325..0a38913bfd 100644 --- a/frappe/public/less/desk.less +++ b/frappe/public/less/desk.less @@ -367,18 +367,25 @@ em.link-option { /* module */ +.module-section { + margin-bottom: 15px; +} + .module-item { margin: 0px; - padding: 5px 0px; + padding: 7px; border-bottom: 1px solid @border-color; cursor: pointer; } .module-item h4 { - margin-bottom: 2px; display: inline-block; } +.module-item .module-item-description { + margin-top: -5px; +} + .module-item .badge { margin-top: -2px; margin-left: 3px; @@ -723,9 +730,8 @@ ul.linked-with-list li { /* form footer */ -.form-footer { - padding-bottom: 60px; - /*box-shadow: 0px -1px 6px rgba(0,0,0,0.3);*/ +.layout-main-section-wrapper { + margin-bottom: 60px; } .form-footer h5 { diff --git a/frappe/public/less/desktop.less b/frappe/public/less/desktop.less new file mode 100644 index 0000000000..cf337ad4ff --- /dev/null +++ b/frappe/public/less/desktop.less @@ -0,0 +1,152 @@ +@import "variables.less"; + +@icon-color: #4b5661; + +#page-desktop { + position: absolute; + min-width: 100%; + min-height: 100%; + padding-top: 14px; + padding-bottom: 50px; + margin-bottom: -50px; + border: 0px; +} + +.case-wrapper { + position: relative; + margin: 0px; + float: left; + width: 138px; + height: 120px; +} + +.case-label { + font-size: 90%; + line-height: 1.1; + text-align: center; + margin-top: -10px; + transition: 0.2s; + -webkit-transition: 0.2s; + /*text-shadow: 1px 1px 3px rgba(0, 0, 0, 1), 0px 3px 15px rgba(0, 0, 0, 0.5);*/ +} + +.circle { + color: #ff5858; + margin-top: -2px; + margin-left : -16px; + margin-right: 2px; + font-size: 14px; +} + +.app-icon { +/* border-radius: 5px;*/ + overflow: hidden; + padding: 15px; + display: inline-block; + margin: auto; + text-align: center; + background-color: #fff; +} + +.app-icon i { + font-size: 48px; + min-width: 48px; + color: @icon-color; + display: inline-block; + transition: 0.2s; + -webkit-transition: 0.2s; +} + +.app-icon svg, .app-icon img { + height: 48px; + width: 48px; + margin-top: -3px; +} + +.app-icon path { + fill: @icon-color; + transition: 0.2s; + -webkit-transition: 0.2s; +} + +.case-wrapper:hover path { + fill: @text-color; +} + +.case-wrapper:hover i, +.case-wrapper:hover { + color: @text-color; +} + +.app-icon-small { + padding: 12px; +} + +.app-icon-img.app-icon-small { + padding: 0px; + height: 54px; + width: 54px; +} + +.app-icon-img { + padding: 0px; + height: 70px; + width: 70px; +} + +.app-icon-img img { + width: 100%; + height: 100%; +} + +#icon-grid { + padding-top: 15px; + padding-bottom: 30px; + max-width: 970px; + margin: auto; +} + +// mobile + +@media (min-width: 768px) and (max-width: 991px) { + #icon-grid { + max-width: 690px; + } +} + +@media (max-width: 767px) { + #icon-grid { + max-width: 320px; + } + + .case-wrapper { + width: 80px; + height: 90px; + } + + .case-label { + font-size: 80%; + } + + .app-icon i { + font-size: 32px; + min-width: 32px; + } + + .app-icon svg, .app-icon img { + height: 32px; + width: 32px; + } + +} + +@media (max-width: 320px) { + #icon-grid { + max-width: 280px; + } + + .case-wrapper { + width: 70px; + height: 90px; + } +} diff --git a/frappe/public/less/variables.less b/frappe/public/less/variables.less index c3d4b3e739..15f1dd91ab 100644 --- a/frappe/public/less/variables.less +++ b/frappe/public/less/variables.less @@ -1,3 +1,4 @@ +@brand-primary: #5E64FF; @border-color: #d1d8dd; @text-color: #36414C; @text-muted: #8D99A6;