Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue #439 #440

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

giulong
Copy link

@giulong giulong commented Sep 7, 2024

Minor changes to the Spark report styling to fix issue #439. With the committed changes this is how tags are displayed:

Screenshot 2024-09-07 alle 19 57 21

To show no regressions are introduced, this is how a test with no tags is now displayed:

Screenshot 2024-09-07 alle 20 01 02

Mind the bug (and the fix) affects not only categories, but author and devices as well.
Tested in local by building a new extent reports jar, installing it in the local Maven repository, and enabling offline mode in the ExtentSparkReporterConfig. Please let me know if more evidences/tests are needed.

@@ -29,7 +29,7 @@
* MIT Licensed.
*/
.jstBracket,.jstComma,.jstValue{white-space:pre-wrap}.jstValue{font-size:10px;font-weight:400;font-family:"Lucida Console",Monaco,monospace}.jstProperty{color:#666;word-wrap:break-word}.jstBool{color:#2525CC}.jstNum{color:#D036D0}.jstNull{color:gray}.jstStr{color:#2DB669}.jstFold:after{content:' -';cursor:pointer}.jstExpand{white-space:normal}.jstExpand:after{content:' +';cursor:pointer}.jstFolded{white-space:normal!important}.jstHiddenBlock{display:none}
.test-wrapper{padding:0;margin:0;overflow:auto;min-height:100%;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;border:1px solid #e9eaec}@media only screen and (max-width:992px){.test-wrapper{position:absolute;left:0;width:100%}}.test-wrapper .test-list{position:relative;padding:0;width:100%;overflow-y:hidden;background-color:#fff}@media only screen and (min-width:992px){.test-wrapper .test-list{width:25%;border-right:1px solid #e9eaec;float:left}.test-wrapper .test-list .test-list-wrapper{height:calc(100vh - 65px - 115px - 41px)}}@media only screen and (min-width:992px) and (max-width:1440px){.test-wrapper .test-list{width:35%}}.test-wrapper .test-list .test-list-tools{padding:5px 15px;border-bottom:1px solid #e9eaec;text-align:right;display:block}.test-wrapper .test-list .test-list-tools .tools{list-style:none;padding:0}.test-wrapper .test-list .test-list-tools .tools>li{display:inline-block;padding:3px 5px}.test-wrapper .test-list .test-list-tools .tools>li>a{font-size:16px;color:#8a8a8a;display:block;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out}.test-wrapper .test-list .test-list-tools .tools>li>a:focus,.test-wrapper .test-list .test-list-tools .tools>li>a:hover{color:#24d5d8}.test-wrapper .test-list .test-list-wrapper{position:relative;overflow-y:auto}.test-wrapper .test-list .test-list-wrapper .test-list-item{padding-left:0;list-style:none}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item{position:relative;display:table;width:100%;padding:15px;border-bottom:1px solid #e9eaec;cursor:pointer;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item:focus,.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item:hover{background-color:#fafafa}@media only screen and (min-width:992px){.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item.active{background-color:#fafafa}}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item a{color:#8a8a8a}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-avatar{position:absolute;top:20px}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-avatar img{width:30px;height:30px;border-radius:50px}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail{vertical-align:top;display:table-cell;width:100%;padding-left:5px}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail p{margin-bottom:0}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail .name{font-size:16px;color:#090909}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail .subject{color:#090909;font-weight:500;margin-bottom:5px}.test-wrapper .test-content{float:left;width:75%;position:relative;padding:0;background-color:#fff;height:calc(100vh - 65px - 115px);overflow:auto;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}@media only screen and (min-width:992px) and (max-width:1440px){.test-wrapper .test-content{width:65%}}@media only screen and (max-width:992px){.test-wrapper .test-content{position:fixed;width:100%;height:calc(100vh - 65px);top:calc(65px + 20px);left:-100%}.test-wrapper .test-content.open{left:0}}.test-wrapper .test-content .test-content-tools{padding:10px 15px;border-bottom:1px solid #e9eaec}@media only screen and (min-width:992px){.test-wrapper .test-content .test-content-tools{display:none}}.test-wrapper .test-content .test-content-tools ul{list-style:none;padding:0;display:inline-block}.test-wrapper .test-content .test-content-tools ul li{display:inline-block}.test-wrapper .test-content .test-content-tools ul li a{font-size:16px;padding:0 10px;color:#8a8a8a}.test-wrapper .test-content .test-content-tools ul li a:focus,.test-wrapper .test-content .test-content-tools ul li a:hover{color:#24d5d8}.test-wrapper .test-content .test-content-detail{position:relative;padding:10px 20px;max-height:calc(100vh - 65px)}@media only screen and (max-width:992px){.test-wrapper .test-content .test-content-detail{padding:15px}}.test-wrapper .test-content .test-content-detail .detail-head{position:relative}.test-wrapper .test-content .test-content-detail .detail-head .thumb-img{width:50px;height:50px}.test-wrapper .test-content .test-content-detail .detail-head .info{height:50px;padding-left:65px}.test-wrapper .test-content .test-content-detail .detail-head .info .title{padding-top:5px}.test-wrapper .test-content .test-content-detail .detail-head .info .sub-title{max-width:100%}.test-wrapper .test-content .test-content-detail .detail-head .tools{padding:0;list-style:none;float:right;margin-top:15px}.test-wrapper .test-content .test-content-detail .detail-head .tools>li{display:inline-block;padding:10px}.test-wrapper .test-content .test-content-detail .detail-head .tools>li a{color:#8a8a8a}.test-wrapper .test-content .test-content-detail .detail-head .tools>li a:focus,.test-wrapper .test-content .test-content-detail .detail-head .tools>li a:hover{color:#515365}.test-wrapper .test-content .test-content-detail .detail-body{padding:25px 30px;position:relative}@media only screen and (max-width:992px){.test-wrapper{left:200px}}
.test-wrapper{padding:0;margin:0;overflow:auto;min-height:100%;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;border:1px solid #e9eaec}@media only screen and (max-width:992px){.test-wrapper{position:absolute;left:0;width:100%}}.test-wrapper .test-list{position:relative;padding:0;width:100%;overflow-y:hidden;background-color:#fff}@media only screen and (min-width:992px){.test-wrapper .test-list{width:25%;border-right:1px solid #e9eaec;float:left}.test-wrapper .test-list .test-list-wrapper{height:calc(100vh - 65px - 115px - 41px)}}@media only screen and (min-width:992px) and (max-width:1440px){.test-wrapper .test-list{width:35%}}.test-wrapper .test-list .test-list-tools{padding:5px 15px;border-bottom:1px solid #e9eaec;text-align:right;display:block}.test-wrapper .test-list .test-list-tools .tools{list-style:none;padding:0}.test-wrapper .test-list .test-list-tools .tools>li{display:inline-block;padding:3px 5px}.test-wrapper .test-list .test-list-tools .tools>li>a{font-size:16px;color:#8a8a8a;display:block;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out}.test-wrapper .test-list .test-list-tools .tools>li>a:focus,.test-wrapper .test-list .test-list-tools .tools>li>a:hover{color:#24d5d8}.test-wrapper .test-list .test-list-wrapper{position:relative;overflow-y:auto}.test-wrapper .test-list .test-list-wrapper .test-list-item{padding-left:0;list-style:none}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item{position:relative;display:table;width:100%;padding:15px;border-bottom:1px solid #e9eaec;cursor:pointer;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item:focus,.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item:hover{background-color:#fafafa}@media only screen and (min-width:992px){.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item.active{background-color:#fafafa}}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item a{color:#8a8a8a}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-avatar{position:absolute;top:20px}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-avatar img{width:30px;height:30px;border-radius:50px}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail{vertical-align:top;display:table-cell;width:100%;padding-left:5px}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail p{margin-bottom:0}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail .name{font-size:16px;color:#090909}.test-wrapper .test-list .test-list-wrapper .test-list-item .test-item .test-detail .subject{color:#090909;font-weight:500;margin-bottom:5px}.test-wrapper .test-content{float:left;width:75%;position:relative;padding:0;background-color:#fff;height:calc(100vh - 65px - 115px);overflow:auto;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out}@media only screen and (min-width:992px) and (max-width:1440px){.test-wrapper .test-content{width:65%}}@media only screen and (max-width:992px){.test-wrapper .test-content{position:fixed;width:100%;height:calc(100vh - 65px);top:calc(65px + 20px);left:-100%}.test-wrapper .test-content.open{left:0}}.test-wrapper .test-content .test-content-tools{padding:10px 15px;border-bottom:1px solid #e9eaec}@media only screen and (min-width:992px){.test-wrapper .test-content .test-content-tools{display:none}}.test-wrapper .test-content .test-content-tools ul{list-style:none;padding:0;display:inline-block}.test-wrapper .test-content .test-content-tools ul li{display:inline-block}.test-wrapper .test-content .test-content-tools ul li a{font-size:16px;padding:0 10px;color:#8a8a8a}.test-wrapper .test-content .test-content-tools ul li a:focus,.test-wrapper .test-content .test-content-tools ul li a:hover{color:#24d5d8}.test-wrapper .test-content .test-content-detail{position:relative;padding:10px 20px;max-height:calc(100vh - 65px)}@media only screen and (max-width:992px){.test-wrapper .test-content .test-content-detail{padding:15px}}.test-wrapper .test-content .test-content-detail .detail-head{position:relative}.test-wrapper .test-content .test-content-detail .detail-head .thumb-img{width:50px;height:50px}.test-wrapper .test-content .test-content-detail .detail-head .info{padding-left:65px}.test-wrapper .test-content .test-content-detail .detail-head .info .title{padding-top:5px}.test-wrapper .test-content .test-content-detail .detail-head .info .sub-title{max-width:100%}.test-wrapper .test-content .test-content-detail .detail-head .tools{padding:0;list-style:none;float:right;margin-top:15px}.test-wrapper .test-content .test-content-detail .detail-head .tools>li{display:inline-block;padding:10px}.test-wrapper .test-content .test-content-detail .detail-head .tools>li a{color:#8a8a8a}.test-wrapper .test-content .test-content-detail .detail-head .tools>li a:focus,.test-wrapper .test-content .test-content-detail .detail-head .tools>li a:hover{color:#515365}.test-wrapper .test-content .test-content-detail .detail-body{padding:25px 30px;position:relative}@media only screen and (max-width:992px){.test-wrapper{left:200px}}
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since it's not very clear in the diff, this is the rule I changed removing the fixed height:50px, from this:

.test-wrapper .test-content .test-content-detail .detail-head .info{height:50px;padding-left:65px}

to this:

.test-wrapper .test-content .test-content-detail .detail-head .info{padding-left:65px}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant