Skip to content

Commit

Permalink
UI: adjust presentation table layout. (#37754, #38126)
Browse files Browse the repository at this point in the history 
https://mantis.ilias.de/view.php?id=38126
https://mantis.ilias.de/view.php?id=37754
  • Loading branch information
@lukastocker
lukastocker committed Nov 29, 2023
1 parent fb66f46 commit c27f73a
Show file tree
Hide file tree
Showing 7 changed files with 175 additions and 247 deletions.
2 changes: 1 addition & 1 deletion src/UI/examples/Table/Presentation/base.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ function included_data()
'bookings_available' => '3',
'target_group' => 'Employees, Field Service',
'goals' => 'Lorem Ipsum....',
'topics' => '<li>Tranportations</li><li>Europapolice</li>',
'topics' => '<ul><li>Tranportations</li><li>Europapolice</li></ul>',
'date' => '30.09.2017 - 02.10.2017',
'location' => 'Hamburg',
'address' => 'Hauptstraße 123',
Expand Down
110 changes: 54 additions & 56 deletions src/UI/templates/default/Table/tpl.presentationrow.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="il-table-presentation-row row collapsed" id="{ID}">

<div class="il-table-presentation-row-controls">
<div class="il-table-presentation-row-controls col-lg-auto col-sm-12">
<div class="il-table-presentation-row-controls-expander inline">
{EXPANDER}
</div>
Expand All @@ -9,75 +9,73 @@
</div>
</div>

<div class="il-table-presentation-row-contents col-lg col-sm-12">
<div class="row">
<div class="il-table-presentation-row-header col-lg col-sm-12">

<div class="il-table-presentation-row-contents">

<!-- has to be in one line so :empty selector can check if there is a button in this div -->
<div class="il-table-presentation-actions"><!-- BEGIN button -->{BUTTON}<br /><!-- END button --></div>

<div class="il-table-presentation-row-header">

<h4 class="il-table-presentation-row-header-headline" onClick="$(document).trigger('{TOGGLE_SIGNAL}');">
{SYMBOL}
{HEADLINE}
<!-- BEGIN subheadline -->
<br />
<small>
{SUBHEADLINE}
</small>
<!-- END subheadline -->
</h4>

<div class="il-table-presentation-row-header-fields">
<div class="l-bar__container">
<!-- BEGIN important_field -->
<div class="l-bar__group">
<!-- BEGIN important_field_label -->
<div class="il-table-presentation-row-header-fields-label l-bar__element">{IMPORTANT_FIELD_LABEL}</div>
<!-- END important_field_label -->
<!-- BEGIN important_field_value -->
<div class="il-table-presentation-row-header-fields-value l-bar__element">{IMPORTANT_FIELD_VALUE}</div>
<!-- END important_field_value -->
<h4 class="il-table-presentation-row-header-headline" onClick="$(document).trigger('{TOGGLE_SIGNAL}');">
{SYMBOL}
{HEADLINE}
<!-- BEGIN subheadline -->
<br />
<small>
{SUBHEADLINE}
</small>
<!-- END subheadline -->
</h4>

<div class="il-table-presentation-row-header-fields">
<div class="l-bar__container">
<!-- BEGIN important_field -->
<div class="l-bar__group">
<!-- BEGIN important_field_label -->
<div class="il-table-presentation-row-header-fields-label l-bar__element">{IMPORTANT_FIELD_LABEL}</div>
<!-- END important_field_label -->
<!-- BEGIN important_field_value -->
<div class="il-table-presentation-row-header-fields-value l-bar__element">{IMPORTANT_FIELD_VALUE}</div>
<!-- END important_field_value -->
</div>
<!-- END important_field -->
</div>
<!-- END important_field -->
{SHY_EXPANDER}
</div>
{SHY_EXPANDER}
</div>

</div>
<div class="il-table-presentation-actions col-lg-auto col-sm-12"><!-- BEGIN button -->{BUTTON}<br /><!-- END button --></div>

<div class="il-table-presentation-row-expanded col-lg-12 col-sm-12">
<div class="row">
<div class="il-table-presentation-desclist col-lg col-sm-12<!-- BEGIN has_further_fields --> desclist-column<!-- END has_further_fields -->">
{DESCLIST}
</div>

<div class="il-table-presentation-row-expanded">
<div class="il-table-presentation-desclist inline<!-- BEGIN has_further_fields --> desclist-column<!-- END has_further_fields -->">
{DESCLIST}
</div>
<!-- BEGIN further_fields_section -->
<div class="il-table-presentation-details col-lg-5 col-sm-12">

<!-- BEGIN further_fields_section -->
<div class="il-table-presentation-details inline">
<div class="il-table-presentation-fields">
<!-- BEGIN further_fields_headline -->
<h5>{FURTHER_FIELDS_HEADLINE}</h5>
<!-- END further_fields_headline -->

<div class="il-table-presentation-fields">
<!-- BEGIN further_fields_headline -->
<h5>{FURTHER_FIELDS_HEADLINE}</h5>
<!-- END further_fields_headline -->
<!-- BEGIN further_field -->
<!-- BEGIN further_field_label -->
<span class="il-item-property-name">
{FIELD_LABEL}
</span>
<!-- END further_field_label -->

<!-- BEGIN further_field -->
<!-- BEGIN further_field_label -->
<span class="il-item-property-name">
{FIELD_LABEL}
</span>
<!-- END further_field_label -->
<span class="il-item-property-value">
{FIELD_VALUE}
</span>
<br />
<!-- END further_field -->
</div>

<span class="il-item-property-value">
{FIELD_VALUE}
</span>
<br />
<!-- END further_field -->
</div>
<!-- END further_fields_section -->
</div>

</div>
<!-- END further_fields_section -->
</div>

</div>

</div>
1 change: 0 additions & 1 deletion templates/default/030-tools/_tool_highlighted-box.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ $min-height: auto !default;
) {
min-height: $min-height;
padding: $il-padding-xxxlarge-horizontal;
margin-bottom: $il-margin-xxlarge-vertical;
background-color: $background-color;
border: $border;
border-radius: $il-border-radius-base;
Expand Down
11 changes: 10 additions & 1 deletion templates/default/050-layout/_layout_breakpoints.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,13 @@ $grid-breakpoints: (
xl: $screen-lg,
xxl: 1400px) !default;

// end of section based on bootstrap 3
// end of section based on bootstrap 3

@mixin on-screen-size($size) {
@if $size == small {
@media screen and (max-width: $screen-sm) { @content; }
} @else if $size == large {
// note that this excludes print!
@media screen and (min-width: $screen-sm + 1px) { @content; }
}
}
101 changes: 25 additions & 76 deletions templates/default/070-components/UI-framework/Table/_ui-component_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
@use "../../../030-tools/_tool_browser-prefixes" as *;
@use "../../../050-layout/basics" as *;
@use "../../../050-layout/layout_grid" as l-grid;
@use "../../../030-tools/tool_highlighted-box" as box;
@use "../../../050-layout/layout_breakpoints" as brk;

$table-border-color: $il-main-border-color;

Expand All @@ -27,26 +29,12 @@ $il-table-presentation-details-viewcontrols-btn-bg: white;
.il-table-presentation-row {
background-color: $il-main-bg;
border-top: $il-table-presentation-rowborder-top;
margin: 0;
padding-top: $il-padding-large-vertical;
padding-bottom: $il-padding-large-vertical;
padding-top: $il-padding-xxlarge-vertical;
padding-bottom: $il-padding-xxlarge-vertical;
position: relative;
white-space: nowrap;

.il-table-presentation-actions {
right: 10px;
position: absolute;
}

.il-table-presentation-row-controls,
.il-table-presentation-row-contents {
display: inline-block;
vertical-align: top;
}

.il-table-presentation-row-controls {
width: $il-table-presentation-rowcontrol-colwidth;
padding-left: $il-padding-small-horizontal;
.il-table-presentation-row-controls-collapser {
display: none; /*initially hidden*/
}
Expand All @@ -58,16 +46,6 @@ $il-table-presentation-details-viewcontrols-btn-bg: white;

.il-table-presentation-row-contents {
white-space: normal;
width: $il-table-presentation-contents-colwidth;
}

.il-table-presentation-actions {
margin: 5px 0;

// if there is an action, row header text should not run over action button
&:not(:empty) + .il-table-presentation-row-header {
max-width: calc(100% - 11rem);
}
}

.il-table-presentation-row-header {
Expand All @@ -81,59 +59,44 @@ $il-table-presentation-details-viewcontrols-btn-bg: white;
cursor: pointer;
}

@include brk.on-screen-size('small') {
order: 1;
}

.il-table-presentation-row-header-fields {
display: block; /*initially visible*/
}
}

.il-table-presentation-actions {
@include brk.on-screen-size('small') {
order: 3;
margin-top: $il-margin-xxlarge-vertical;
}
}

// add : to both importantfields and desclist keys
.il-table-presentation-row-header-fields-label::after,
.il-table-presentation-desclist .il-listing-characteristic-value-label::after {
content: ":";
}

.il-table-presentation-row-expanded {
//Using row mixin, to make this responsive
@include l-grid.make-row;
display: none; /*initially hidden*/
margin-top: $il-margin-large-vertical;
margin-left: 0;
margin-right: 0;

.il-table-presentation-desclist {
//Using column mixin, to make this responsive
padding-right: $il-padding-small-horizontal;
&.desclist-column {
@include l-grid.media-breakpoint-up(sm) {
@include l-grid.make-col(7);
}
padding-left: 0;
}

@include brk.on-screen-size('small') {
order: 2;
}

.il-table-presentation-details {
//Using column mixin, to make this responsive
@include l-grid.media-breakpoint-up(sm) {
@include l-grid.make-col(5);
}
.il-table-presentation-actions {
margin-bottom: $il-margin-large-vertical;
}

.il-table-presentation-fields {
//Inherit from Bootstrap Well
@include box.highlighted-box();
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: $il-main-darker-bg;
border: 1px solid $il-main-border-dark-color;
border-radius: $il-border-radius-base;
@include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05));
blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, .15);
}
// end of Bootstrap Well
font-size: $il-font-size-small;
.il-item-property-name {
color: $il-text-light-color;
Expand All @@ -148,20 +111,6 @@ $il-table-presentation-details-viewcontrols-btn-bg: white;
// ==========
//

//
// Media Query Breakdowns
//

// this should become a general tool
@mixin on-screen-size($size) {
@if $size == small {
@media screen and (max-width: $il-grid-float-breakpoint-max) { @content; }
} @else if $size == large {
// note that this excludes print!
@media screen and (min-width: $il-grid-float-breakpoint-max + 1px) { @content; }
}
}

//
// Basic Table Design
//
Expand All @@ -188,7 +137,7 @@ $il-table-presentation-details-viewcontrols-btn-bg: white;

// hover row on larger screens only
.c-table-data__row:hover td.c-table-data__cell {
@include on-screen-size(large) {
@include brk.on-screen-size(large) {
background-color: $il-main-darker-bg;
}
}
Expand All @@ -200,7 +149,7 @@ $il-table-presentation-details-viewcontrols-btn-bg: white;
th.c-table-data__cell {
padding: 0; // most of the header cells get padding from the resize wrapper
// sticky header on large screens
@include on-screen-size(large) {
@include brk.on-screen-size(large) {
position: -webkit-sticky;
position: sticky;
top: 0;
Expand All @@ -214,7 +163,7 @@ th.c-table-data__cell {

// shadow below header when sticky (because borders and box shadow are left behind in tables)
th.c-table-data__cell:after {
@include on-screen-size(large) {
@include brk.on-screen-size(large) {
position: absolute;
content: "";
left: 0;
Expand Down Expand Up @@ -262,7 +211,7 @@ th.c-table-data__cell:after {

// shadow that sticks to the right of action column (because borders and box shadow are left behind and do not stick)
.c-table-data__rowselection:after {
@include on-screen-size(large) {
@include brk.on-screen-size(large) {
position: absolute;
content: "";
top: 0;
Expand Down Expand Up @@ -359,7 +308,7 @@ td.c-table-data__cell--highlighted {
}
// hover on larger screens only
.c-table-data__row:hover td.c-table-data__cell--highlighted {
@include on-screen-size(large) {
@include brk.on-screen-size(large) {
background-color: darken($il-main-darker-bg, 7%);
}
}
Expand All @@ -374,7 +323,7 @@ td.c-table-data__cell--highlighted {
}

.c-table-data {
@include on-screen-size(small) {
@include brk.on-screen-size(small) {
//
// Basic Table Design
//
Expand Down
Loading

0 comments on commit c27f73a

Please sign in to comment.