From d2c4172686c45b5a224f75e172cd986ce05aa245 Mon Sep 17 00:00:00 2001 From: Gustavo Maximiliano Cortez Date: Thu, 11 Dec 2014 16:07:43 -0300 Subject: [PATCH] split css with hover in a separate file. Common file for loading action. New grunt mobile --- Gruntfile.js | 34 ++++- cordova/build.sh | 4 +- css/src/desktop.css | 174 ++++++++++++++++++++++++ css/src/main.css | 251 +++-------------------------------- css/src/mobile.css | 19 ++- index.html | 13 +- js/controllers/history.js | 2 +- js/controllers/homeWallet.js | 2 +- views/create.html | 12 +- views/createProfile.html | 21 +-- views/home.html | 20 +-- views/import.html | 12 +- views/importProfile.html | 12 +- views/includes/loading.html | 16 +++ views/join.html | 14 +- 15 files changed, 273 insertions(+), 333 deletions(-) create mode 100644 css/src/desktop.css create mode 100644 views/includes/loading.html diff --git a/Gruntfile.js b/Gruntfile.js index d0c634215..c813ca3e0 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -65,7 +65,7 @@ module.exports = function(grunt) { }, css: { files: ['css/src/*.css'], - tasks: ['cssmin:copay'] + tasks: ['cssmin:desktop'] }, main: { files: [ @@ -157,11 +157,16 @@ module.exports = function(grunt) { } }, cssmin: { - copay: { + desktop: { files: { 'css/copay.min.css': ['css/src/*.css'], } }, + mobile: { + files: { + 'css/copay.min.css': ['css/src/*.css', '!css/src/desktop.css', '!css/src/animation.css'], + } + }, vendors: { files: { 'css/vendors.min.css': ['css/foundation.min.css', 'css/foundation-icons.css', 'lib/angular/angular-csp.css'] @@ -236,10 +241,27 @@ module.exports = function(grunt) { }); - grunt.registerTask('default', ['shell:dev', 'nggettext_compile', 'concat', 'cssmin']); - grunt.registerTask('dist', ['shell:prod', 'nggettext_compile', 'concat', 'cssmin', 'uglify', 'copy:dist']); - grunt.registerTask('dist-dbg', ['shell:dev', 'nggettext_compile', 'concat', 'cssmin', 'copy:dist']); - grunt.registerTask('prod', ['shell:prod', 'nggettext_compile', 'concat', 'cssmin', 'uglify']); + grunt.registerTask('default', [ + 'shell:dev', 'nggettext_compile', 'concat', 'cssmin:desktop', 'cssmin:vendors' + ]); + grunt.registerTask('mobile', [ + 'shell:dev', 'nggettext_compile', 'concat', 'cssmin:mobile', 'cssmin:vendors' + ]); + grunt.registerTask('dist', [ + 'shell:prod', 'nggettext_compile', 'concat', 'cssmin:desktop', 'cssmin:vendors', 'uglify', 'copy:dist' + ]); + grunt.registerTask('dist-dbg', [ + 'shell:prod', 'nggettext_compile', 'concat', 'cssmin:desktop', 'cssmin:vendors', 'copy:dist' + ]); + grunt.registerTask('dist-mobile', [ + 'shell:prod', 'nggettext_compile', 'concat', 'cssmin:mobile', 'cssmin:vendors', 'uglify', 'copy:dist' + ]); + grunt.registerTask('dist-mobile-dbg', [ + 'shell:dev', 'nggettext_compile', 'concat', 'cssmin:mobile', 'cssmin:vendors', 'copy:dist' + ]); + grunt.registerTask('prod', [ + 'shell:prod', 'nggettext_compile', 'concat', 'cssmin:desktop', 'cssmin:vendors', 'uglify' + ]); grunt.registerTask('translate', ['nggettext_extract']); grunt.registerTask('docs', ['jsdoc']); }; diff --git a/cordova/build.sh b/cordova/build.sh index ba05ebf7b..0f0973f7e 100755 --- a/cordova/build.sh +++ b/cordova/build.sh @@ -98,12 +98,12 @@ if $DBGJS then echo "${OpenColor}${Green}* Generating copay bundle (debug js)...${CloseColor}" cd $BUILDDIR/.. - grunt dist-dbg + grunt dist-mobile-dbg checkOK else echo "${OpenColor}${Green}* Generating copay bundle...${CloseColor}" cd $BUILDDIR/.. - grunt dist + grunt dist-mobile checkOK fi diff --git a/css/src/desktop.css b/css/src/desktop.css new file mode 100644 index 000000000..8b1b34249 --- /dev/null +++ b/css/src/desktop.css @@ -0,0 +1,174 @@ +.head .menu a.dropdown:hover, +.head .menu a.dropdown.hover { + border-bottom: 1px solid #fff; +} + +.head .menu ul.hover { + background: #FFFFFF; +} + +.head .menu ul li a:hover { + background-color: #F8F8FB; + color: #2C3E50; +} + +.col3 a.selected:hover { + background-color: #213140; + color: #fff; +} + +.col3 a:hover { + background-color: #16A085; + color: #fff; +} + +a:hover { + color: #2980b9; +} + +.last-transactions-content:hover { + background: #eee; +} + +a.button-setup.add-wallet:hover { + opacity: 1; +} + +a.button-setup:hover { + color: #666; + border-color: #666; +} + +.createProfile .button-setup a:hover, .home .button-setup a:hover, .settings .button-setup a:hover, .import-profile .button-setup a:hover { + background: #3C4E60; +} + +.name-wallet i:hover { + color: #fff; +} + +ul.pagination li.current a:hover, ul.pagination li.current a:focus { + background: #16A085; +} + +table tr:hover { + background-color: #eee; + cursor: pointer; +} + +button.secondary:hover, +button.secondary:focus, +.button.secondary:hover, +.button.secondary:focus { + background-color: #2980B9; + color: #fff; +} + +button.primary:hover, +button.primary:focus, +.button.primary:hover, +.button.primary:focus { + background-color: #16A085; + color: #fff; +} + +button.warning:hover, +button.warning:focus, +.button.warning:hover, +.button.warning:focus { + background-color: #82251A; + color: #e6e6e6; +} + +button.white:hover, +button.white:focus, +.button.white:hover, +.button.white:focus { + background-color: #E0E0E0; + color: #2C3E50; +} + +button.black:hover, +button.black:focus, +.button.black:hover, +.button.black:focus { + background-color: #213140; + color: #fff; +} + +button.gray:hover, +button.gray:focus, +.button.gray:hover, +.button.gray:focus { + background-color: #E0E5E5; + color: #2C3E50; +} + +.wallet-selection.wallets li:hover { + background-color: #3C4E60; +} + +.wallet-selection.wallets a.wallet-item:hover, +.side-nav.wallets a.wallet-item:hover { + color: #7A8C9E; + line-height: 20px; +} + +.side-nav li.nav-item:hover { + background-color: #3C4E60; + overflow: hidden; +} + +.fi-trash.text-gray:hover { + color: #CA5649; +} + +a:hover .photo-container { + background: #34495E; + color: #fff; +} + +.side-nav li.active:hover a { + background-color: #F8F8FB; +} + +.side-nav li:hover a { + background-color: #3C4E60; +} + +a.text-gray:hover {color: #2C3E50;} +a.text-black:hover {color: #213140;} +a.text-primary:hover {color: #50E3C2;} +a.text-secondary:hover {color: #4A90E2;} +a.text-white:hover {color: #ccc;} +a.text-warning:hover {color: #FD7262;} + +.w-popup-menu li:hover{ + background-color: #34B191; +} +.w-popup-menu li:hover .w-popup-icon { + color: transparent; +} +.w-popup-menu li:hover .w-popup-main, .w-popup-menu li:hover .w-popup-sub { + color: #FFFFFF; +} + +.createProfile a.text-gray:hover, +.home a.text-gray:hover, +.import-profile a.text-gray:hover, +.settings a.text-gray:hover { + color: #fff; +} + +.tabs dd>a:hover { + background: #1C2B39; +} + +.tabs dd.active a:hover { + background: transparent; +} + +.reveal-modal .close-reveal-modal:hover, dialog .close-reveal-modal:hover { + background: #ddd; +} + diff --git a/css/src/main.css b/css/src/main.css index 4daa9e0fe..7e5845571 100644 --- a/css/src/main.css +++ b/css/src/main.css @@ -163,12 +163,6 @@ header .alt-currency { text-align: center; } -.head .menu a.dropdown:hover, -.head .menu a.dropdown.hover { - border-bottom: 1px solid #fff; - top: 0; -} - .head .menu ul { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; @@ -184,23 +178,12 @@ header .alt-currency { border-bottom: 1px solid #eee; } -.head .menu ul.hover { - background: #FFFFFF; - -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25); - box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.25); -} - .head .menu ul li a { display: block; padding: 5px 10px; color: #8597A7; } -.head .menu ul li a:hover { - background-color: #F8F8FB; - color: #2C3E50; -} - .col1 { width: 56px; float: left; @@ -232,16 +215,6 @@ header .alt-currency { color: #3C4E60; } -.col3 a.selected:hover { - background-color: #213140; - color: #fff; -} - -.col3 a:hover { - background-color: #16A085; - color: #fff; -} - .off-canvas-wrap, .inner-wrap{ height:100%; } @@ -325,10 +298,6 @@ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, inpu color: #7A8C9E !important; } -a:hover { - color: #2980b9; -} - .page, .main { height:100%; overflow-y: auto; @@ -463,10 +432,6 @@ ul.tx-copayers { cursor:pointer; } -.last-transactions-content:hover { - background: #eee; -} - .sign-action { background: #E4E8EC; width: 100%; @@ -523,10 +488,6 @@ a.button-setup.add-wallet { color: #fff; } -a.button-setup.add-wallet:hover { - opacity: 1; -} - a.button-setup { border-radius: 3px; border: 1px solid #E4E8EC; @@ -536,12 +497,6 @@ a.button-setup { color: #A0A3A6; } - -a.button-setup:hover { - color: #666; - border-color: #666; -} - .createProfile a.button-setup, .home a.button-setup, .settings a.button-setup, .import-profile a.button-setup { border-radius: 3px; border: 1px solid #3E5366; @@ -550,10 +505,6 @@ a.button-setup:hover { background: transparent; } -.createProfile .button-setup a:hover, .home .button-setup a:hover, .settings .button-setup a:hover, .import-profile .button-setup a:hover { - background: #3C4E60; -} - .dn {display: none;} .dni {display: none !important;} .pr {position: relative;} @@ -672,10 +623,6 @@ a.button-setup:hover { color: #B6E9DF; } -.name-wallet i:hover { - color: #fff; -} - .box-livenet { background: #213140; padding: 0rem 0.5rem 0.2rem; @@ -876,10 +823,6 @@ ul.pagination li.current a { background: #1ABC9C; } -ul.pagination li.current a:hover, ul.pagination li.current a:focus { - background: #16A085; -} - .tooltip { background-color: #1ABC9C; color: #fff; @@ -972,11 +915,6 @@ table tbody tr:last-child td { border-bottom: none; } -table tr:hover { - background-color: #eee; - cursor: pointer; -} - input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], textarea { color: #343c43; margin-bottom: 1.3rem; @@ -988,30 +926,18 @@ input[type=date], input[type=datetime-local], input[type=datetime], input[type=e padding-left: 45px; } +/* SECONDARY */ button.secondary, .button.secondary { + background-color: #008CC1; color: #fff; - background: #008CC1; -} -button.secondary:hover, -button.secondary:focus, -.button.secondary:hover, -.button.secondary:focus { - background-color: #2980B9; - color: #fff; + border-radius: 3px; } + button.disabled.secondary, button[disabled].secondary, .button.disabled.secondary, -.button[disabled].secondary, -button.disabled.secondary:hover, -button.disabled.secondary:focus, -button[disabled].secondary:hover, -button[disabled].secondary:focus, -.button.disabled.secondary:hover, -.button.disabled.secondary:focus, -.button[disabled].secondary:hover, -.button[disabled].secondary:focus { +.button[disabled].secondary { background-color: #E4E8EC; color: #A5B2BF; } @@ -1022,27 +948,12 @@ button.primary, background-color: #1ABC9C; color: #fff; border-radius: 3px; - border-radius: 3px; -} -button.primary:hover, -button.primary:focus, -.button.primary:hover, -.button.primary:focus { - background-color: #16A085; - color: #fff; } + button.disabled.primary, button[disabled].primary, .button.disabled.primary, -.button[disabled].primary, -button.disabled.primary:hover, -button.disabled.primary:focus, -button[disabled].primary:hover, -button[disabled].primary:focus, -.button.disabled.primary:hover, -.button.disabled.primary:focus, -.button[disabled].primary:hover, -.button[disabled].primary:focus { +.button[disabled].primary { background-color: #95a5a6; color: #E6E6E6; } @@ -1054,30 +965,13 @@ button.warning, color: #fff; border-radius: 3px; } -button.warning:hover, -button.warning:focus, -.button.warning:hover, -.button.warning:focus { - background-color: #82251A; - color: #e6e6e6; -} button.disabled.warning, button[disabled].warning, .button.disabled.warning, -.button[disabled].warning, -button.disabled.warning:hover, -button.disabled.warning:focus, -button[disabled].warning:hover, -button[disabled].warning:focus, -.button.disabled.warning:hover, -.button.disabled.warning:focus, -.button[disabled].warning:hover, -.button[disabled].warning:focus { +.button[disabled].warning { background-color: #95a5a6; color: #E6E6E6; - -moz-box-shadow: none; - box-shadow: none; } /* WHITE */ @@ -1086,26 +980,11 @@ button.white, background-color: #fff; color: #2C3E50; } -button.white:hover, -button.white:focus, -.button.white:hover, -.button.white:focus { - background-color: #E0E0E0; - color: #2C3E50; -} button.disabled.white, button[disabled].white, .button.disabled.white, -.button[disabled].white, -button.disabled.white:hover, -button.disabled.white:focus, -button[disabled].white:hover, -button[disabled].white:focus, -.button.disabled.white:hover, -.button.disabled.white:focus, -.button[disabled].white:hover, -.button[disabled].white:focus { +.button[disabled].white { background-color: #95a5a6; color: #E6E6E6; } @@ -1116,26 +995,11 @@ button.black, background-color: #2C3E50; color: #fff; } -button.black:hover, -button.black:focus, -.button.black:hover, -.button.black:focus { - background-color: #213140; - color: #fff; -} button.disabled.black, button[disabled].black, .button.disabled.black, -.button[disabled].black, -button.disabled.black:hover, -button.disabled.black:focus, -button[disabled].black:hover, -button[disabled].black:focus, -.button.disabled.black:hover, -.button.disabled.black:focus, -.button[disabled].black:hover, -.button[disabled].black:focus { +.button[disabled].black { background-color: #95a5a6; color: #E6E6E6; } @@ -1146,13 +1010,6 @@ button.gray, background-color: #A9B2B8; color: #2C3E50; } -button.gray:hover, -button.gray:focus, -.button.gray:hover, -.button.gray:focus { - background-color: #E0E5E5; - color: #2C3E50; -} .button, button { text-transform: uppercase; @@ -1176,10 +1033,6 @@ ul.wallet-selection.wallets { display: block; } -.wallet-selection.wallets li:hover { - background-color: #3C4E60; -} - .side-nav.wallets li { margin: 1.2rem 0; padding: 0.3rem 0.1rem; @@ -1201,9 +1054,7 @@ ul.wallet-selection.wallets { } .wallet-selection.wallets a.wallet-item, -.wallet-selection.wallets a.wallet-item:hover, -.side-nav.wallets a.wallet-item, -.side-nav.wallets a.wallet-item:hover { +.side-nav.wallets a.wallet-item { color: #7A8C9E; line-height: 20px; } @@ -1216,19 +1067,11 @@ ul.wallet-selection.wallets { .side-nav .wallet-item { padding: 4px 0; } + .side-nav li.nav-item { overflow: hidden; } -.side-nav li.nav-item:hover { - background-color: #3C4E60; - overflow: hidden; -} - -.fi-trash.text-gray:hover { - color: #CA5649; -} - .postfix.button, .prefix.button { position: absolute; width: 38px; @@ -1293,11 +1136,6 @@ label.postfix, span.postfix { color: #fff; } -a:hover .photo-container { - background: #34495E; - color: #fff; -} - .side-nav li { font-size: 16px; line-height: 40px; @@ -1326,14 +1164,6 @@ a:hover .photo-container { opacity: 1; } -.side-nav li.active:hover a { - background-color: #F8F8FB; -} - -.side-nav li:hover a { - background-color: #3C4E60; -} - .sidebar-footer { width: 100%; position: absolute; @@ -1427,13 +1257,6 @@ input.ng-invalid-match, input.ng-invalid-match:focus { .text-warning {color: #CA5649;} .text-success {color: #1ABC9C;} -a.text-gray:hover {color: #2C3E50;} -a.text-black:hover {color: #213140;} -a.text-primary:hover {color: #50E3C2;} -a.text-secondary:hover {color: #4A90E2;} -a.text-white:hover {color: #ccc;} -a.text-warning:hover {color: #FD7262;} - .box-setup-copayers { background: #F8F8FB; margin-bottom: 15px; @@ -1475,23 +1298,19 @@ a.text-warning:hover {color: #FD7262;} } @media only screen and (min-width: 40.063em) { - dialog.tiny, .reveal-modal.tiny { - width: 50%; - margin-left: -25%; - } + dialog.tiny, .reveal-modal.tiny, + dialog.small, .reveal-modal.small, + dialog.medium, .reveal-modal.medium, dialog.large, .reveal-modal.large { max-height: 70%; overflow-y: auto; - width: 80%; - margin-left: -40%; } } @media only screen and (max-width: 40em) { - dialog.tiny, .reveal-modal.tiny { - height: 100%; - overflow-y: auto; - } + dialog.tiny, .reveal-modal.tiny, + dialog.small, .reveal-modal.small, + dialog.medium, .reveal-modal.medium, dialog.large, .reveal-modal.large { height: 100%; overflow-y: auto; @@ -1577,17 +1396,6 @@ a.text-warning:hover {color: #FD7262;} opacity: 0.8; } -.w-popup-menu li:hover{ - background-color: #34B191; -} -.w-popup-menu li:hover .w-popup-icon { - text-shadow: 0px 0px 20px #c5e4f4; - color: transparent; -} -.w-popup-menu li:hover .w-popup-main, .w-popup-menu li:hover .w-popup-sub { - color: #FFFFFF; -} - /*///////////////////////// LOADING /////////////////////////*/ .contener_mixte { width:44px; height:44px; position:absolute; @@ -1631,16 +1439,16 @@ a.text-warning:hover {color: #FD7262;} .fond{position:absolute;padding-top:85px;top:0;left:0; right:0;bottom:0;} .loading-screen { - background-color: #F2F5F8; width: 100%; height: 100%; position: absolute; z-index: 999; top: 0; left: 0; + background-color: #F2F5F8; } -.loading-screen .spinner { +.loading-screen-content { margin-top: 20%; width: 100%; text-align: center; @@ -1686,13 +1494,6 @@ a.text-warning:hover {color: #FD7262;} text-align: center; } -.createProfile a.text-gray:hover, -.home a.text-gray:hover, -.import-profile a.text-gray:hover, -.settings a.text-gray:hover { - color: #fff; -} - .home, .settings, .createProfile, .import-profile { overflow: hidden; padding: 2rem 0; @@ -1720,14 +1521,6 @@ a.text-warning:hover {color: #FD7262;} line-height: 15px; } -.tabs dd>a:hover { - background: #1C2B39; -} - -.tabs dd.active a:hover { - background: transparent; -} - .tabs-content { margin-bottom: 0; } @@ -1807,7 +1600,3 @@ a.text-warning:hover {color: #FD7262;} text-transform: uppercase; } -.reveal-modal .close-reveal-modal:hover, dialog .close-reveal-modal:hover { - background:#ddd; -} - diff --git a/css/src/mobile.css b/css/src/mobile.css index 0674b49f4..a3c3a5f1c 100644 --- a/css/src/mobile.css +++ b/css/src/mobile.css @@ -6,6 +6,10 @@ @media (max-width: 1024px) { + .loading-screen { + background-color: #2C3E50; + } + .logo-setup { margin: 0 0 1rem 0; } @@ -205,10 +209,6 @@ margin-bottom: 50px; } - ul.off-canvas-list li a:hover { - background: transparent; - } - .label { font-size: 80%; padding: 0.15rem 0.2rem; @@ -234,6 +234,17 @@ .move-left .exit-off-canvas { box-shadow: none; } + + /* Remove all vendors hover */ + + ul.off-canvas-list li a:hover { + background: none; + } + + .side-nav li a:not(.button) { + padding: 0; + } + } @media (max-width: 640px) { diff --git a/index.html b/index.html index bb651ad55..9cb84ce9c 100644 --- a/index.html +++ b/index.html @@ -30,15 +30,8 @@
-
- +
+
@@ -61,7 +54,7 @@
-