From a3cbede680f9623c7ab4071df9abf143dec64065 Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Wed, 1 Feb 2017 20:22:25 +0100 Subject: Refactor layout based on bootstrap 4 grid --- budget/static/css/main.css | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index f3fe8a0..0a07e94 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -55,13 +55,6 @@ body { background-position: center bottom; background-repeat: no-repeat; height: 100%; - width: 230px; - padding-left: 10px; - padding-right: 20px; - padding-top: 10px; - margin-left: -20px; - margin-top: -10px; - margin-right: 15px; color: black; position: fixed; } @@ -70,13 +63,13 @@ body { #add-member-form input[type="text"] { width: 60%; } #add-member-form button { width: 35%; } -#table_overflow { overflow-y: auto; overflow-x: hidden; width: 235px; } +#table_overflow { overflow-y: auto; overflow-x: hidden;} + /* Content */ .content { - padding-top: 1em; - padding-left: 250px; + margin-top: 1rem; } /* Home */ @@ -94,7 +87,9 @@ body { height: 100px; } -#footer{ +footer{ + margin-left: -15px; + margin-right: -15px; margin-top: 30px; position: fixed; bottom: 0px; -- cgit v1.1 From c6c5f8657e3935da98c537fe75ab2eefe8751b6c Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Thu, 2 Feb 2017 11:48:40 +0100 Subject: Adapt navigation bar to bootstrap 4 Also fixed some weird alignment issues. I think this will need more work later (revamp the navbar layout to avoid that sensation of thing which are floating at random places in the navbar). --- budget/static/css/main.css | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index 0a07e94..80d3b1c 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -5,15 +5,25 @@ /* General */ body { - margin-top: 40px; + /* For fixed navbar */ + padding-top: 3.5rem; + padding-bottom: 2rem; } /* Navbar */ -.navbar h1{ margin-left: 75px; } +.navbar h1 { + font-size: 1rem; + margin: 0; + padding: 0; +} .navbar .primary-nav { padding-left: 75px; } -.navbar .secondary-nav { padding-right: 75px; } -.brand{ font-family: 'Lobster', arial, serif; } +.navbar .secondary-nav { + text-align: right; + flex-direction: row-reverse; + +} +.navbar-brand{ font-family: 'Lobster', arial, serif; } /* Header */ -- cgit v1.1 From f9856cb991afc216d9c7fa1fb90a3937f52eff24 Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Thu, 2 Feb 2017 11:51:59 +0100 Subject: Adapt tryout button to bootstrap 4 Trying to keep same look'n'feel. --- budget/static/css/main.css | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index 80d3b1c..04e07ae 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -46,6 +46,14 @@ body { #header .tryout { margin-right: 10em; + color: #fff; + background-color: #414141; + border-color: #414141; +} + +#header .tryout:hover { + background-color: #606060; + border-color: #606060; } #header .additional-content { -- cgit v1.1 From a47d91fab96653c8cc3caa28c01fdd3ae3baae32 Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Thu, 2 Feb 2017 11:55:35 +0100 Subject: Do not force huge add member button BS4 provides larger touch-friendly controls anyway. --- budget/static/css/main.css | 1 - 1 file changed, 1 deletion(-) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index 04e07ae..8d73e70 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -79,7 +79,6 @@ body { #add-member-form { padding-top: 1em; padding-bottom: 1em; } #add-member-form input[type="text"] { width: 60%; } -#add-member-form button { width: 35%; } #table_overflow { overflow-y: auto; overflow-x: hidden;} -- cgit v1.1 From fe39258630e55d4a3e1297a01a1c8fd39bad3a4e Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Sat, 4 Feb 2017 00:29:10 +0100 Subject: Adapt list bills view to bootstrap 4 - modal classes and hierarchy changed since BS2 - striped tables are now handled by css3 pseudo-class rather than classes - fix placement/alignment for the button and comment above the table --- budget/static/css/main.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index 8d73e70..eded897 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -121,6 +121,11 @@ footer{ float: right; } +#new-bill, .identifier { + margin-top: 16px; + margin-bottom: 16px; +} + .password-reminder{ float: right; margin-right: 20px; -- cgit v1.1 From 0aafbcc0b396aebfe1cd98ceea451b239c6c397c Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Sat, 4 Feb 2017 10:10:32 +0100 Subject: Update bootstrap-datepicker to 1.6.4 Actually switching to maintained fork at https://github.com/uxsolutions/bootstrap-datepicker ; the original project being unmaintained since 2012. - Works with recent jQuery - BS4 is not supported by bootstrap-datepicker, but actually, it works :-) ref https://github.com/uxsolutions/bootstrap-datepicker/issues/1670 --- budget/static/css/main.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index eded897..a82ffe6 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -1,5 +1,5 @@ @import "bootstrap.min.css"; -@import "datepicker.css"; +@import "bootstrap-datepicker3.standalone.css"; @import "../fonts/fontfaces.css"; /* General */ -- cgit v1.1 From 8b96dcb25756ae54edf5ecfdba1a706b54a7ab0f Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Thu, 9 Feb 2017 15:47:28 +0100 Subject: Prevent modal overflow Allowing the modal to extend; thus "natural" page scrolling allows to see the whole popup. --- budget/static/css/main.css | 4 ---- 1 file changed, 4 deletions(-) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index a82ffe6..4823830 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -223,10 +223,6 @@ tr:hover .extra-info { display: inline; } -.modal-body { - max-height:455px; -} - /* Fluid Offsets for Boostrap */ .row-fluid > [class*="span"]:not([class*="offset"]):first-child{margin-left:0;} -- cgit v1.1 From 7d3ebe5378698fcac17c4d4276b79c46c5640dfc Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Thu, 9 Feb 2017 16:41:19 +0100 Subject: Prevent dancing cells while hovering sidebar lines Fix a regression introduced with BS4 update. --- budget/static/css/main.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index 4823830..4fd2964 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -203,6 +203,10 @@ tr.payer_line .balance-name{ color: white; } +.balance.table { + table-layout: fixed; +} + #bill-form > fieldset { margin-top: 10px; } -- cgit v1.1 From 57596b5f46555b2163c849c83f97ac5d779d9b25 Mon Sep 17 00:00:00 2001 From: Jocelyn Delalande Date: Thu, 9 Feb 2017 16:49:01 +0100 Subject: Prevent "Add new bill" button flickering --- budget/static/css/main.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'budget/static/css/main.css') diff --git a/budget/static/css/main.css b/budget/static/css/main.css index 4fd2964..11963d2 100644 --- a/budget/static/css/main.css +++ b/budget/static/css/main.css @@ -126,6 +126,11 @@ footer{ margin-bottom: 16px; } +/* Avoid text color flickering when it loose focus as the modal appears */ +.btn-primary[data-toggle="modal"] { + color: #fff; +} + .password-reminder{ float: right; margin-right: 20px; -- cgit v1.1