From 3a0c5effc93e82a72e43550992a3ca40434f8377 Mon Sep 17 00:00:00 2001 From: amezigh Date: Tue, 7 Mar 2017 14:54:46 +0100 Subject: [PATCH] Fix position of fixed banner with filters (update color-finder.css & affix.js) --- .../src/main/webapp/Css/color-finder.css | 1 - .../src/main/webapp/Css/color-finder.min.css | 2 +- contrast-finder-webapp/src/main/webapp/Js/affix.js | 7 +++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/contrast-finder-webapp/src/main/webapp/Css/color-finder.css b/contrast-finder-webapp/src/main/webapp/Css/color-finder.css index bbf1792..4cc5825 100644 --- a/contrast-finder-webapp/src/main/webapp/Css/color-finder.css +++ b/contrast-finder-webapp/src/main/webapp/Css/color-finder.css @@ -256,7 +256,6 @@ fieldset .form-control { } #contrast-solution thead.affix { - top: 136px; width: 100%; margin-left: -4px; } diff --git a/contrast-finder-webapp/src/main/webapp/Css/color-finder.min.css b/contrast-finder-webapp/src/main/webapp/Css/color-finder.min.css index 2a8afa2..783afbd 100644 --- a/contrast-finder-webapp/src/main/webapp/Css/color-finder.min.css +++ b/contrast-finder-webapp/src/main/webapp/Css/color-finder.min.css @@ -1 +1 @@ -a,body{color:#4c4c4c}#notSatisfied,.noResult{text-align:center}@font-face{font-family:Montserrat;src:url(../Fonts/montserrat-regular-webfont.eot);src:url(../Fonts/montserrat-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/montserrat-regular-webfont.woff) format("woff"),url(../Fonts/montserrat-regular-webfont.ttf) format("truetype"),url(../Fonts/montserrat-regular-webfont.svg#montserratregular) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url(../Fonts/montserrat-bold-webfont.eot);src:url(../Fonts/montserrat-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/montserrat-bold-webfont.woff) format("woff"),url(../Fonts/montserrat-bold-webfont.ttf) format("truetype"),url(../Fonts/montserrat-bold-webfont.svg#montserratregular) format("svg");font-weight:700;font-style:normal}@font-face{font-family:OpenSans;src:url(../Fonts/opensans-light-webfont.eot);src:url(../Fonts/opensans-light-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/opensans-light-webfont.woff) format("woff"),url(../Fonts/opensans-light-webfont.ttf) format("truetype"),url(../Fonts/opensans-light-webfont.svg#montserratregular) format("svg");font-weight:300;font-style:normal}@font-face{font-family:OpenSans;src:url(../Fonts/opensans-semibold-webfont.eot);src:url(../Fonts/opensans-semibold-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/opensans-semibold-webfont.woff) format("woff"),url(../Fonts/opensans-semibold-webfont.ttf) format("truetype"),url(../Fonts/opensans-semibold-webfont.svg#montserratregular) format("svg");font-weight:700;font-style:normal}*,:after,:before{box-sizing:border-box}html{font-size:100%}body{font-family:OpenSans,Helvetica,sans-serif;font-weight:400;font-size:1rem;line-height:1.6}ul{list-style-type:none;margin:0;padding:0}a:hover{color:inherit}h2{font-family:Montserrat,Helvetica,sans-serif}img{max-width:100%;height:auto;vertical-align:middle;border:0}fieldset{margin-bottom:.5rem}.help-block{font-size:12px;color:#5A5151;margin-top:10px;font-weight:300}.help-block a{text-decoration:underline}.alert-warning{color:#6c4a1e}.alert-warning .alert-link{color:#6b4b0a}.form-horizontal .form-group{margin-left:0;margin-right:0}.form-group{margin:2.5rem 0;float:left;width:50%;padding-right:4rem}.form-group.modify{margin-bottom:0}.form-group.suggest{margin-top:1rem}.form-group.modify label,.form-group.suggest label{display:block}@media (max-width:1023px){.form-group{float:none;width:100%;padding-right:0}}.form-control{font-size:.9rem}#notSatisfied,#tested-color,.noResult{font-size:20px}fieldset .form-control{width:auto}.h2-on-empty-result{margin-top:70px}#notSatisfied{margin-top:60px}#initial-contrast{margin-bottom:3px}.cercle{float:right;width:100px;height:55px;border-radius:.3rem;margin-right:5px;border:1px solid #CCC}.cf-group-fields,.text-sample{border:1px solid #CCC}.color-sample{width:7rem;height:2rem;border-radius:.3rem;margin-right:5px}.legend-wrapper{display:inline-block;vertical-align:middle}.control-fieldset legend{border:none;font-size:14px;font-weight:700;text-align:right}.cf-group-fields{border-radius:4px;padding:1px 1px 1px 14px}.radio.first-radio{padding-top:0}.highRatioCheckBox{padding-top:10px}.color-codes{font-size:.95rem;list-style:none;padding:0}.invalid-color{color:#b94a48;display:none;font-size:1.2rem;position:relative;top:-2px}.sample-bordered{border:1px solid #CCC}#background-sample,#foreground-sample{display:inline-block;vertical-align:middle}.form-control.error{border-color:#b94a48}@media (max-width:1199px){.control-fieldset legend{text-align:left;margin-bottom:0}.color-sample{margin-left:15px}}#old-contrast.affix{z-index:1;background-color:#f6f6f6;top:0}#contrast-solution thead.affix{top:136px;width:100%;margin-left:-4px}@media (max-width:767px){#contrast-solution thead.affix,#old-contrast.affix{position:static;width:auto;top:0;background-color:transparent}}@media (min-width:768px){#old-contrast.affix{width:750px}}@media (min-width:992px){#old-contrast.affix{width:970px}}@media (min-width:1200px){#old-contrast.affix{width:1170px}}.col01,.col02{width:22%}.col03{width:6%}.col05{width:8%}.text-sample p{margin:0}#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:700;padding:5px 40px;position:relative;transition:.5s;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}#submit-button,.logo__text,.menu .menu-item{font-family:Montserrat,Helvetica,sans-serif}#forkongithub a:hover{background:#060;color:#fff}#forkongithub a::after,#forkongithub a::before{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff}#forkongithub a::after{bottom:1px;top:auto}#image-reference{margin-left:43.833333%}@media screen and (min-width:1200px){#forkongithub,#forkongithub a{width:200px;position:absolute}#forkongithub{display:block;top:0;right:0;overflow:hidden;height:200px}#forkongithub a{top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,.8)}#image-reference{margin-left:36.333333%}}@media (max-width:992px){#image-reference{margin-left:56.633333%}}.header{background-color:#fff;box-shadow:0 2px 2px rgba(46,49,146,.1);position:relative}.logo{float:left;margin:0;line-height:66px}.logo .logo__image{width:50px}.logo .logo__image,.logo .logo__text{display:inline-block;vertical-align:middle}.logo__text{font-size:1.8rem;font-weight:700;color:#4c4c4c;width:calc(100% - 60px);line-height:1}.toggle{border:0;background:0 0;float:right;margin:1.5rem .5rem;width:2.5rem;cursor:pointer}.toggle__bar{display:block;background-color:#4c4c4c;height:4px;width:100%}.toggle__bar+.toggle__bar{margin-top:4px}@media screen and (min-width:1024px){.toggle{display:none}}.menu{text-align:right;line-height:70px}.menu .menu-item{padding:0 1rem;line-height:1;border-right:1px solid #e5e5e5;display:inline-block;vertical-align:middle;position:relative}.menu .menu-item.is-active:before{content:"";height:0;width:0;display:block;border-left:20px solid transparent;border-right:20px solid transparent;border-top:10px solid #d90b0b;position:absolute;top:-29px;left:calc(50% - 19px)}.menu .menu-item.is-active{color:#d90b0b}.menu .menu-item:last-child{border-right:none}@media screen and (max-width:1024px){.menu .menu-item.current-menu-item a:before{content:none}.menu{float:left;height:0;overflow:hidden;width:100%}.menu .menu-item{display:block;border:none;padding:.7rem 0;text-align:left}.menu.is-opened{margin:.5rem 0 1rem;padding:.5rem .5rem 1rem 1rem;border:1px solid;height:100%}}.fieldset-fields,.form-control{display:inline-block;vertical-align:middle}.main-title{margin:3rem 0}.form-control{max-width:100px}input[type=text]{height:2rem}input[type=radio]{float:left;margin:7px}legend{margin-bottom:0;font-weight:700;font-size:1.2rem;border-bottom:0}fieldset label{margin-right:.5rem}@media (max-width:767px){fieldset label{width:100%}}#submit-button{font-size:1.2rem;padding:0 1.5rem;line-height:1.6;border:2px solid #d90b0b;color:#d90b0b;background:#fff;border-radius:20px;-webkit-transition:all .3s ease;transition:all .3s ease;text-shadow:none}#submit-button:focus,#submit-button:hover{color:#fff;background-color:#ef362c;text-decoration:none}.site-bottom{background:#f6f6f6;padding:4rem 0}.site-bottom .site-bottom__title{font-size:1.2rem;font-weight:700;color:#4c4c4c;margin-top:0;margin-bottom:.5rem}.site-bottom .site-bottom__title.site-bottom__title--lang{font-size:.9rem;color:#4c4c4c;margin-bottom:0;display:inline-block;vertical-align:middle}.site-bottom .site-bottom__title.site-bottom__title--lang:after{content:none}.site-bottom .site-bottom__social:after,.site-bottom .site-bottom__title:after{content:"";width:68px;border-bottom:2px solid #e5e5e5;height:1px;display:block;margin:.3rem 0}.site-bottom .menu-bottom{font-size:.9rem;line-height:1.6}.site-bottom .site-bottom__social{line-height:1}.site-bottom .site-bottom__social .site-bottom__social-item{display:inline-block;padding-right:.8rem}.site-bottom .site-bottom__social .site-bottom__social-item .site-bottom__social-link{color:#f6f6f6}.site-bottom .site-bottom__social .site-bottom__social-item .site-bottom__social-link--facebook{color:#d90b0b;font-size:2.4rem}.site-bottom .site-bottom__social .site-bottom__social-item .site-bottom__social-link .site-bottom__circled-link{width:35px;height:35px;background-color:#d90b0b;border-radius:30px;font-size:1.5rem!important;line-height:36px!important;text-align:center;position:relative;top:-4px}.site-bottom .lang-menu-footer{display:inline;font-size:.9rem}.site-bottom .lang-menu-footer .lang-item{display:inline-block}.site-bottom .lang-menu-footer .lang-item a{text-decoration:none;vertical-align:middle;color:#4c4c4c}.site-bottom .lang-menu-footer .lang-item:not(:last-child):after{content:"|";padding:0 0 0 .2rem;font-size:.7rem}@media screen and (max-width:1024px){.site-bottom .lang-switcher-wrapper{margin:1rem 0}.site-bottom .site-bottom__mobile-col:not(:last-child){margin-bottom:1.5rem}}@media screen and (max-width:768px){.site-bottom .site-bottom__mobile-col{text-align:center}.site-bottom .site-bottom__social:after,.site-bottom .site-bottom__title:after{content:none}.site-bottom .site-bottom__social-item{padding:0 .4rem}.site-bottom .site-bottom__title--lang{display:none}}.footer{padding:.5rem 0;text-align:center;line-height:2}.footer #footer-copyright{font-size:.8rem;line-height:1.6;margin-bottom:0}.footer #footer-copyright a{text-decoration:underline}@media screen and (max-width:1024px){.col04,.text-sample{display:none}.cercle{float:none;margin-bottom:1rem}} \ No newline at end of file +a,body{color:#4c4c4c}#notSatisfied,.noResult{text-align:center}@font-face{font-family:Montserrat;src:url(../Fonts/montserrat-regular-webfont.eot);src:url(../Fonts/montserrat-regular-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/montserrat-regular-webfont.woff) format("woff"),url(../Fonts/montserrat-regular-webfont.ttf) format("truetype"),url(../Fonts/montserrat-regular-webfont.svg#montserratregular) format("svg");font-weight:400;font-style:normal}@font-face{font-family:Montserrat;src:url(../Fonts/montserrat-bold-webfont.eot);src:url(../Fonts/montserrat-bold-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/montserrat-bold-webfont.woff) format("woff"),url(../Fonts/montserrat-bold-webfont.ttf) format("truetype"),url(../Fonts/montserrat-bold-webfont.svg#montserratregular) format("svg");font-weight:700;font-style:normal}@font-face{font-family:OpenSans;src:url(../Fonts/opensans-light-webfont.eot);src:url(../Fonts/opensans-light-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/opensans-light-webfont.woff) format("woff"),url(../Fonts/opensans-light-webfont.ttf) format("truetype"),url(../Fonts/opensans-light-webfont.svg#montserratregular) format("svg");font-weight:300;font-style:normal}@font-face{font-family:OpenSans;src:url(../Fonts/opensans-semibold-webfont.eot);src:url(../Fonts/opensans-semibold-webfont.eot?#iefix) format("embedded-opentype"),url(../Fonts/opensans-semibold-webfont.woff) format("woff"),url(../Fonts/opensans-semibold-webfont.ttf) format("truetype"),url(../Fonts/opensans-semibold-webfont.svg#montserratregular) format("svg");font-weight:700;font-style:normal}*,:after,:before{box-sizing:border-box}html{font-size:100%}body{font-family:OpenSans,Helvetica,sans-serif;font-weight:400;font-size:1rem;line-height:1.6}ul{list-style-type:none;margin:0;padding:0}a:hover{color:inherit}h2{font-family:Montserrat,Helvetica,sans-serif}img{max-width:100%;height:auto;vertical-align:middle;border:0}fieldset{margin-bottom:.5rem}.help-block{font-size:12px;color:#5A5151;margin-top:10px;font-weight:300}.help-block a{text-decoration:underline}.alert-warning{color:#6c4a1e}.alert-warning .alert-link{color:#6b4b0a}.form-horizontal .form-group{margin-left:0;margin-right:0}.form-group{margin:2.5rem 0;float:left;width:50%;padding-right:4rem}.form-group.modify{margin-bottom:0}.form-group.suggest{margin-top:1rem}.form-group.modify label,.form-group.suggest label{display:block}@media (max-width:1023px){.form-group{float:none;width:100%;padding-right:0}}.form-control{font-size:.9rem}#notSatisfied,#tested-color,.noResult{font-size:20px}fieldset .form-control{width:auto}.h2-on-empty-result{margin-top:70px}#notSatisfied{margin-top:60px}#initial-contrast{margin-bottom:3px}.cercle{float:right;width:100px;height:55px;border-radius:.3rem;margin-right:5px;border:1px solid #CCC}.cf-group-fields,.text-sample{border:1px solid #CCC}.color-sample{width:7rem;height:2rem;border-radius:.3rem;margin-right:5px}.legend-wrapper{display:inline-block;vertical-align:middle}.control-fieldset legend{border:none;font-size:14px;font-weight:700;text-align:right}.cf-group-fields{border-radius:4px;padding:1px 1px 1px 14px}.radio.first-radio{padding-top:0}.highRatioCheckBox{padding-top:10px}.color-codes{font-size:.95rem;list-style:none;padding:0}.invalid-color{color:#b94a48;display:none;font-size:1.2rem;position:relative;top:-2px}.sample-bordered{border:1px solid #CCC}#background-sample,#foreground-sample{display:inline-block;vertical-align:middle}.form-control.error{border-color:#b94a48}@media (max-width:1199px){.control-fieldset legend{text-align:left;margin-bottom:0}.color-sample{margin-left:15px}}#old-contrast.affix{z-index:1;background-color:#f6f6f6;top:0}#contrast-solution thead.affix{width:100%;margin-left:-4px}@media (max-width:767px){#contrast-solution thead.affix,#old-contrast.affix{position:static;width:auto;top:0;background-color:transparent}}@media (min-width:768px){#old-contrast.affix{width:750px}}@media (min-width:992px){#old-contrast.affix{width:970px}}@media (min-width:1200px){#old-contrast.affix{width:1170px}}.col01,.col02{width:22%}.col03{width:6%}.col05{width:8%}.text-sample p{margin:0}#forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:700;padding:5px 40px;position:relative;transition:.5s;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}#submit-button,.logo__text,.menu .menu-item{font-family:Montserrat,Helvetica,sans-serif}#forkongithub a:hover{background:#060;color:#fff}#forkongithub a::after,#forkongithub a::before{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff}#forkongithub a::after{bottom:1px;top:auto}#image-reference{margin-left:43.833333%}@media screen and (min-width:1200px){#forkongithub,#forkongithub a{width:200px;position:absolute}#forkongithub{display:block;top:0;right:0;overflow:hidden;height:200px}#forkongithub a{top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,.8)}#image-reference{margin-left:36.333333%}}@media (max-width:992px){#image-reference{margin-left:56.633333%}}.header{background-color:#fff;box-shadow:0 2px 2px rgba(46,49,146,.1);position:relative}.logo{float:left;margin:0;line-height:66px}.logo .logo__image{width:50px}.logo .logo__image,.logo .logo__text{display:inline-block;vertical-align:middle}.logo__text{font-size:1.8rem;font-weight:700;color:#4c4c4c;width:calc(100% - 60px);line-height:1}.toggle{border:0;background:0 0;float:right;margin:1.5rem .5rem;width:2.5rem;cursor:pointer}.toggle__bar{display:block;background-color:#4c4c4c;height:4px;width:100%}.toggle__bar+.toggle__bar{margin-top:4px}@media screen and (min-width:1024px){.toggle{display:none}}.menu{text-align:right;line-height:70px}.menu .menu-item{padding:0 1rem;line-height:1;border-right:1px solid #e5e5e5;display:inline-block;vertical-align:middle;position:relative}.menu .menu-item.is-active:before{content:"";height:0;width:0;display:block;border-left:20px solid transparent;border-right:20px solid transparent;border-top:10px solid #d90b0b;position:absolute;top:-29px;left:calc(50% - 19px)}.menu .menu-item.is-active{color:#d90b0b}.menu .menu-item:last-child{border-right:none}@media screen and (max-width:1024px){.menu .menu-item.current-menu-item a:before{content:none}.menu{float:left;height:0;overflow:hidden;width:100%}.menu .menu-item{display:block;border:none;padding:.7rem 0;text-align:left}.menu.is-opened{margin:.5rem 0 1rem;padding:.5rem .5rem 1rem 1rem;border:1px solid;height:100%}}.fieldset-fields,.form-control{display:inline-block;vertical-align:middle}.main-title{margin:3rem 0}.form-control{max-width:100px}input[type=text]{height:2rem}input[type=radio]{float:left;margin:7px}legend{margin-bottom:0;font-weight:700;font-size:1.2rem;border-bottom:0}fieldset label{margin-right:.5rem}@media (max-width:767px){fieldset label{width:100%}}#submit-button{font-size:1.2rem;padding:0 1.5rem;line-height:1.6;border:2px solid #d90b0b;color:#d90b0b;background:#fff;border-radius:20px;-webkit-transition:all .3s ease;transition:all .3s ease;text-shadow:none}#submit-button:focus,#submit-button:hover{color:#fff;background-color:#ef362c;text-decoration:none}.site-bottom{background:#f6f6f6;padding:4rem 0}.site-bottom .site-bottom__title{font-size:1.2rem;font-weight:700;color:#4c4c4c;margin-top:0;margin-bottom:.5rem}.site-bottom .site-bottom__title.site-bottom__title--lang{font-size:.9rem;color:#4c4c4c;margin-bottom:0;display:inline-block;vertical-align:middle}.site-bottom .site-bottom__title.site-bottom__title--lang:after{content:none}.site-bottom .site-bottom__social:after,.site-bottom .site-bottom__title:after{content:"";width:68px;border-bottom:2px solid #e5e5e5;height:1px;display:block;margin:.3rem 0}.site-bottom .menu-bottom{font-size:.9rem;line-height:1.6}.site-bottom .site-bottom__social{line-height:1}.site-bottom .site-bottom__social .site-bottom__social-item{display:inline-block;padding-right:.8rem}.site-bottom .site-bottom__social .site-bottom__social-item .site-bottom__social-link{color:#f6f6f6}.site-bottom .site-bottom__social .site-bottom__social-item .site-bottom__social-link--facebook{color:#d90b0b;font-size:2.4rem}.site-bottom .site-bottom__social .site-bottom__social-item .site-bottom__social-link .site-bottom__circled-link{width:35px;height:35px;background-color:#d90b0b;border-radius:30px;font-size:1.5rem!important;line-height:36px!important;text-align:center;position:relative;top:-4px}.site-bottom .lang-menu-footer{display:inline;font-size:.9rem}.site-bottom .lang-menu-footer .lang-item{display:inline-block}.site-bottom .lang-menu-footer .lang-item a{text-decoration:none;vertical-align:middle;color:#4c4c4c}.site-bottom .lang-menu-footer .lang-item:not(:last-child):after{content:"|";padding:0 0 0 .2rem;font-size:.7rem}@media screen and (max-width:1024px){.site-bottom .lang-switcher-wrapper{margin:1rem 0}.site-bottom .site-bottom__mobile-col:not(:last-child){margin-bottom:1.5rem}}@media screen and (max-width:768px){.site-bottom .site-bottom__mobile-col{text-align:center}.site-bottom .site-bottom__social:after,.site-bottom .site-bottom__title:after{content:none}.site-bottom .site-bottom__social-item{padding:0 .4rem}.site-bottom .site-bottom__title--lang{display:none}}.footer{padding:.5rem 0;text-align:center;line-height:2}.footer #footer-copyright{font-size:.8rem;line-height:1.6;margin-bottom:0}.footer #footer-copyright a{text-decoration:underline}@media screen and (max-width:1024px){.col04,.text-sample{display:none}.cercle{float:none;margin-bottom:1rem}} \ No newline at end of file diff --git a/contrast-finder-webapp/src/main/webapp/Js/affix.js b/contrast-finder-webapp/src/main/webapp/Js/affix.js index 3f1ebec..19056dd 100644 --- a/contrast-finder-webapp/src/main/webapp/Js/affix.js +++ b/contrast-finder-webapp/src/main/webapp/Js/affix.js @@ -6,12 +6,13 @@ $(function() { setUpForm = $('#set-up-form').height(), limit = header + setUpForm + 68; return (this.top = header + setUpForm + 68) - } + } } }); $(window).on('resize scroll', function() { var header = $('#header').height(), + bannerHeight = $('#old-contrast').height(), setUpForm = $('#set-up-form').height(), limit = header + setUpForm + 68; @@ -19,9 +20,11 @@ $(function() { $(this).scrollTop() > limit && $(this).width() >= 768 ) { - $('body').css('margin-top', '160px'); + $('body').css('margin-top', '160px'); + $('#contrast-solution thead').css('top', bannerHeight); } else { $('body').css('margin-top', 'inherit'); + $('#contrast-solution thead').css('top', 0); } }); }); \ No newline at end of file