OPNsense Forum

English Forums => Development and Code Review => Topic started by: opnsense_user12123 on March 18, 2018, 04:45:49 pm

Title: [SOLVED] CSS Class double entry! - makes it difficult to create a clean template
Post by: opnsense_user12123 on March 18, 2018, 04:45:49 pm
As i great new templates i found a bug in the mvc/app/views of several plugins.
The problem with this bug is that if your create a border for a class, the border is visible two times and makes a line twice as thick. i found no solution -> if i´m wrong please tell me. i´m not perfect!

this is what i found: (see screenshot) There are two entries of "tab-content". Why?
<div class="tab-content content-box tab-content">

I made a comparison: see screenshot1 - called "perfect" and screenshot2 called "not perfect"

and in these plugin view files i found the double entry bug:

Code: [Select]
  D:\eclipse-workspace\opnsense\plugins\mail\postfix\src\opnsense\mvc\app\views\OPNsense\Postfix\domain.volt (1 hit)
Line 78: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\mail\postfix\src\opnsense\mvc\app\views\OPNsense\Postfix\general.volt (1 hit)
Line 33: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\mail\postfix\src\opnsense\mvc\app\views\OPNsense\Postfix\recipient.volt (1 hit)
Line 78: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\mail\postfix\src\opnsense\mvc\app\views\OPNsense\Postfix\sender.volt (1 hit)
Line 78: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\freeradius\src\opnsense\mvc\app\views\OPNsense\Freeradius\client.volt (1 hit)
Line 82: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\freeradius\src\opnsense\mvc\app\views\OPNsense\Freeradius\user.volt (1 hit)
Line 105: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\frr\src\opnsense\mvc\app\views\OPNsense\Quagga\bgp.volt (1 hit)
Line 38: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\frr\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsbgp.volt (1 hit)
Line 108: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\frr\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsgeneral.volt (1 hit)
Line 126: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\frr\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsospf.volt (1 hit)
Line 473: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\frr\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsospfv3.volt (1 hit)
Line 373: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\frr\src\opnsense\mvc\app\views\OPNsense\Quagga\ospf.volt (1 hit)
Line 37:     <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\frr\src\opnsense\mvc\app\views\OPNsense\Quagga\ospf6.volt (1 hit)
Line 36:     <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\ftp-proxy\src\opnsense\mvc\app\views\OPNsense\FtpProxy\index.volt (1 hit)
Line 85: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\quagga\src\opnsense\mvc\app\views\OPNsense\Quagga\bgp.volt (1 hit)
Line 38: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\quagga\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsbgp.volt (1 hit)
Line 108: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\quagga\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsgeneral.volt (1 hit)
Line 126: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\quagga\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsospf.volt (1 hit)
Line 473: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\quagga\src\opnsense\mvc\app\views\OPNsense\Quagga\diagnosticsospfv3.volt (1 hit)
Line 373: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\quagga\src\opnsense\mvc\app\views\OPNsense\Quagga\ospf.volt (1 hit)
Line 37:     <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\quagga\src\opnsense\mvc\app\views\OPNsense\Quagga\ospf6.volt (1 hit)
Line 36:     <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\relayd\src\opnsense\mvc\app\views\OPNsense\Relayd\index.volt (1 hit)
Line 218: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\siproxd\src\opnsense\mvc\app\views\OPNsense\Siproxd\general.volt (1 hit)
Line 38: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\zerotier\src\opnsense\mvc\app\views\OPNsense\Zerotier\index.volt (1 hit)
Line 91: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net\zerotier\src\opnsense\mvc\app\views\OPNsense\Zerotier\overview.volt (1 hit)
Line 52: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net-mgmt\lldpd\src\opnsense\mvc\app\views\OPNsense\Lldpd\general.volt (1 hit)
Line 33: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net-mgmt\telegraf\src\opnsense\mvc\app\views\OPNsense\Telegraf\general.volt (1 hit)
Line 33: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net-mgmt\telegraf\src\opnsense\mvc\app\views\OPNsense\Telegraf\input.volt (1 hit)
Line 33: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\net-mgmt\telegraf\src\opnsense\mvc\app\views\OPNsense\Telegraf\output.volt (1 hit)
Line 33: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\acme-client\src\opnsense\mvc\app\views\OPNsense\AcmeClient\accounts.volt (1 hit)
Line 59: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\acme-client\src\opnsense\mvc\app\views\OPNsense\AcmeClient\actions.volt (1 hit)
Line 72: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\acme-client\src\opnsense\mvc\app\views\OPNsense\AcmeClient\certificates.volt (1 hit)
Line 387: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\acme-client\src\opnsense\mvc\app\views\OPNsense\AcmeClient\settings.volt (1 hit)
Line 196: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\acme-client\src\opnsense\mvc\app\views\OPNsense\AcmeClient\validations.volt (1 hit)
Line 84: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\clamav\src\opnsense\mvc\app\views\OPNsense\ClamAV\general.volt (1 hit)
Line 40: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\tinc\src\opnsense\mvc\app\views\OPNsense\Tinc\index.volt (1 hit)
Line 93: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\security\tor\src\opnsense\mvc\app\views\OPNsense\Tor\diagnostics.volt (1 hit)
Line 94: <div class="tab-content content-box tab-content" style="padding-bottom: 1.5em;">
  D:\eclipse-workspace\opnsense\plugins\security\tor\src\opnsense\mvc\app\views\OPNsense\Tor\general.volt (1 hit)
Line 141: <div class="tab-content content-box tab-content" style="padding-bottom: 1.5em;">
  D:\eclipse-workspace\opnsense\plugins\security\tor\src\opnsense\mvc\app\views\OPNsense\Tor\info.volt (1 hit)
Line 62: <div class="tab-content content-box tab-content" style="padding-bottom: 1.5em;">
  D:\eclipse-workspace\opnsense\plugins\sysutils\monit\src\opnsense\mvc\app\views\OPNsense\Monit\index.volt (1 hit)
Line 283: <div class="tab-content content-box tab-content">
  D:\eclipse-workspace\opnsense\plugins\www\c-icap\src\opnsense\mvc\app\views\OPNsense\CICAP\general.volt (1 hit)
Line 36: <div class="tab-content content-box tab-content">
Title: Re: CSS Class double entry! - makes it difficult to create a clean template
Post by: fabian on March 18, 2018, 07:58:18 pm
are you sure that this is the reason? This are two different tab implementations.
Can you click into it and look if removing it changes anything?

The tabs at the bottom are simple bootstrap tabs while the one at the top is the implementation when tabs in the form are used.
Title: Re: CSS Class double entry! - makes it difficult to create a clean template
Post by: opnsense_user12123 on March 18, 2018, 09:33:44 pm
are you sure that this is the reason? This are two different tab implementations.
Can you click into it and look if removing it changes anything?

The tabs at the bottom are simple bootstrap tabs while the one at the top is the implementation when tabs in the form are used.

Yeah... i think you are right. ;-)

The problem arises through content-box and tab-content using both at the same time.
But you have to set border on both classes to get a good appearance -> And thats the problem.
Otherwise some content-boxes don´t have a border. it has no real logic in part of the framework.

its very difficult to get all needed boxes with one line-border.
I researched further and also tried with nth-child,first-child,last-child class.

but no luck at all.