Add common LStabs CSS classes to handle tabs content

Based on stuff provided by LSaccessRightsMatrixView.
This commit is contained in:
Benjamin Renard 2024-02-22 15:09:20 +01:00
parent 87e58e6425
commit e59ab4a94c
Signed by: bn8
GPG key ID: 3E2E1CE1907115BC
4 changed files with 69 additions and 61 deletions

View file

@ -125,50 +125,6 @@ span.LSaccessRightsMatrixView_inherit {
opacity: 0.3;
}
/*
* Tabs
*/
ul.LSaccessRightsMatrixView_tabs {
list-style-type: none;
padding: 0;
margin: 1em;
margin-bottom: 0;
display: flex;
flex-wrap: nowrap;
overflow: auto;
}
ul.LSaccessRightsMatrixView_tabs li a {
text-decoration: none;
color: #fff;
}
ul.LSaccessRightsMatrixView_tabs li {
text-decoration: none;
color: #fff;
background-color: #52BCE5;
border-radius: 3px 3px 0px 0px;
padding: 4px;
display: inline;
margin-right: 0.3rem;
}
ul.LSaccessRightsMatrixView_tabs li.LSaccessRightsMatrixView_active_tab {
color: #fff;
background-color: #0072B8;
}
div.LSaccessRightsMatrixView_tab_content {
border: 1px solid #0072B8;
margin: 1em;
padding: 0.5em;
margin-top: 0;
}
div.LSaccessRightsMatrixView_tab_content h2 {
margin: 0;
}
/*
* Legend
*/
@ -198,15 +154,6 @@ div.LSaccessRightsMatrixView_tab_content h2 {
@media (max-width: 1024px) {
div.LSaccessRightsMatrixView_tab_content {
margin: 0;
}
ul.LSaccessRightsMatrixView_tabs {
margin: 0;
margin-top: 0.3rem;
}
#LSaccessRightsMatrixView table thead th:first-of-type, #LSaccessRightsMatrixView table tbody th {
max-width: 25vw;
}

View file

@ -384,6 +384,55 @@ input[type='submit'].LSview_search, button {
margin-left: 1.2rem;
}
/*
* Tabs
*/
ul.LStabs {
list-style-type: none;
padding: 0;
margin: 1em;
margin-bottom: 0;
display: flex;
flex-wrap: nowrap;
overflow: auto;
}
ul.LStabs li a {
text-decoration: none;
color: #fff;
}
ul.LStabs li {
text-decoration: none;
color: #fff;
background-color: #52BCE5;
border-radius: 3px 3px 0px 0px;
padding: 4px;
display: inline;
margin-right: 0.3rem;
}
ul.LStabs li.LStabs_active {
color: #fff;
background-color: #0072B8;
}
div.LStabs_content {
border: 1px solid #0072B8;
margin: 1em;
padding: 0.5em;
margin-top: 0;
display: none;
}
div.LStabs_content_active {
display: block;
}
div.LStabs_content h2 {
margin: 0;
}
/*
*********************
* Error page
@ -483,6 +532,18 @@ input[type='submit'].LSview_search, button {
margin-right: 1vw;
}
/*
* LStabs
*/
div.LStabs_content {
margin: 0;
}
ul.LStabs {
margin: 0;
margin-top: 0.3rem;
}
/*
* Manage menu toggle
*/

View file

@ -253,7 +253,7 @@ td.LSobject-list, tr.LSobject-list, table.LStable tbody td, table.LStable th {
}
}
li.LSform_layout_active, ul.LSselect_selectable_object_types li, ul.LSaccessRightsMatrixView_tabs li {
li.LSform_layout_active, ul.LSselect_selectable_object_types li, ul.LStabs li {
border-radius: 0px;
border: none;
}
@ -287,11 +287,11 @@ ul.LSformElement_image_actions {
/* ---- Medium ---- */
li.LSform_layout_active, tr.LSobject-list:hover, table.LStable tr:hover, table.LStable tr.bis:hover, ul.LSaccessRightsMatrixView_tabs li, ul.LSselect_selectable_object_types li {
li.LSform_layout_active, tr.LSobject-list:hover, table.LStable tr:hover, table.LStable tr.bis:hover, ul.LStabs li, ul.LSselect_selectable_object_types li {
background-color: var(--medium-color);
}
div.loginform, div.recoverpasswordform, .loginform input[type='text'], .loginform input[type='password'], .recoverpasswordform input[type='text'], .recoverpasswordform input[type='password'], li.LSview-actions, div.LSform_layout, h1, form.LSglobal_search, div.LSformElement_image {
div.loginform, div.recoverpasswordform, .loginform input[type='text'], .loginform input[type='password'], .recoverpasswordform input[type='text'], .recoverpasswordform input[type='password'], li.LSview-actions, div.LSform_layout, h1, form.LSglobal_search, div.LSformElement_image, div.LStabs_content {
border-color: var(--medium-color);
}
@ -328,7 +328,7 @@ tr.LSobject-list-bis, table.LStable tr.bis, .LSform input[type=text], .LSform in
}
/* ---- Dark ---- */
li.LSform_layout_current, .LSform input[type=submit], input[type='submit'].LSview_search, button, ul.LSaccessRightsMatrixView_tabs li.LSaccessRightsMatrixView_active_tab, ul.LSselect_selectable_object_types li.current {
li.LSform_layout_current, .LSform input[type=submit], input[type='submit'].LSview_search, button, ul.LStabs li.LStabs_active, ul.LSselect_selectable_object_types li.current {
background-color: var(--dark-color);
}
@ -336,7 +336,7 @@ li.menu a, a.menu, h1 {
color: var(--dark-color);
}
input[type='submit'].LSview_search, input[type='text'].LSview_search, button, div.LSaccessRightsMatrixView_tab_content, ul.LSselect_selectable_object_types {
input[type='submit'].LSview_search, input[type='text'].LSview_search, button, ul.LSselect_selectable_object_types {
border-color: var(--dark-color);
}

View file

@ -2,13 +2,13 @@
{block name="content"}
<div id='LSaccessRightsMatrixView'>
<h1>{$pagetitle}</h1>
<ul class="LSaccessRightsMatrixView_tabs">
<ul class="LStabs">
{foreach $LSobjects as $obj => $obj_conf}
<li{if $LSobject==$obj} class="LSaccessRightsMatrixView_active_tab"{/if}><a href="addon/LSaccessRightsMatrixView/accessRightsMatrix?LSobject={$obj}">{$obj_conf.label}</a></li>
<li{if $LSobject==$obj} class="LStabs_active"{/if}><a href="addon/LSaccessRightsMatrixView/accessRightsMatrix?LSobject={$obj}">{$obj_conf.label}</a></li>
{/foreach}
</ul>
<div class='LSaccessRightsMatrixView_tab_content'>
<div class='LStabs_content LStabs_content_active'>
<h2>{$LSobjects[$LSobject]['label']}</h2>
<table class="table-header-rotated">