cerebrate-project
/
cerebrate
mirror of https://github.com/cerebrate-project/cerebrate
1
0
Fork 0
Code Issues Releases Wiki Activity

chg: [app] Various layout improvements for responsiveness

pull/93/head
Sami Mokaddem 2021-11-04 10:47:03 +01:00
parent c55088aa85
commit 4f084e6beb
No known key found for this signature in database
GPG Key ID: 164C473F627A06FA
15 changed files with 141 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/View/Helper/BootstrapHelper.php
View File

@ -779,7 +779,7 @@ class BoostrapListTable extends BootstrapGeneric {
$rowValue = $this->genCell($field);
$rowKey = $this->genNode('th', [
'class' => [
'col-sm-2'
'col-4 col-sm-2'
],
'scope' => 'row'
], h($field['key']));
@ -808,7 +808,7 @@ class BoostrapListTable extends BootstrapGeneric {
}
return $this->genNode('td', [
'class' => [
'col-sm-10',
'col-8 col-sm-10',
!empty($row['_cellVariant']) ? "bg-{$row['_cellVariant']}" : ''
]
], $cellContent);

4
templates/element/genericElements/Form/formLayouts/formDefault.php
View File

@ -9,12 +9,12 @@
<?= $data['description'] ?>
</div>
<?php endif; ?>
<div class="panel col-8">
<div class="panel col-lg-8">
<?= $fieldsString ?>
</div>
<?php if (!empty($metaTemplateString)) : ?>
<div class="col-10">
<div class="col-lg-10">
<?=
$this->Bootstrap->accordion(
[

2
templates/element/genericElements/Form/genericForm.php
View File

@ -37,7 +37,7 @@
'select' => '<select name="{{name}}" {{attrs}}>{{content}}</select>',
'checkbox' => '<input type="checkbox" name="{{name}}" value="{{value}}"{{attrs}}>',
'checkboxFormGroup' => '{{label}}',
'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10">{{input}}{{error}}</div>',
'nestingLabel' => '{{hidden}}<div class="col-sm-2 form-label">{{text}}</div><div class="col-sm-10">{{input}}</div>',
'option' => '<option value="{{value}}"{{attrs}}>{{text}}</option>',
'optgroup' => '<optgroup label="{{label}}"{{attrs}}>{{content}}</optgroup>',

9
templates/element/genericElements/Form/metaTemplateScaffold.php
View File

@ -5,7 +5,7 @@ use Cake\Utility\Inflector;
$default_template = [
'inputContainer' => '<div class="row mb-3 metafield-container">{{content}}</div>',
'inputContainerError' => '<div class="row mb-3 metafield-container has-error">{{content}}</div>',
'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10">{{input}}{{error}}</div>',
];
$this->Form->setTemplates($default_template);
$backupTemplates = $this->Form->getTemplates();
@ -38,8 +38,9 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
$metaField = reset($metaTemplateField->metaFields);
$fieldData = [
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.%s.value', $metaField->meta_template_id, $metaField->meta_template_field_id, $metaField->id),
'label' => $metaTemplateField->field,
'label' => $metaTemplateField->label,
];
$this->Form->setTemplates($backupTemplates);
$fieldsHtml .= $this->element(
'genericElements/Form/fieldScaffold',
[
@ -60,12 +61,11 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
'form' => $this->Form,
]
);
$this->Form->setTemplates($backupTemplates);
} else {
$this->Form->setTemplates($backupTemplates);
$fieldData = [
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.new.0', $metaTemplateField->meta_template_id, $metaTemplateField->id),
'label' => $metaTemplateField->field,
'label' => $metaTemplateField->label,
];
$fieldsHtml .= $this->element(
'genericElements/Form/fieldScaffold',
@ -79,6 +79,7 @@ foreach ($metaTemplatesData as $i => $metaTemplate) {
}
$tabData['content'][$i] = $fieldsHtml;
}
$this->Form->setTemplates($backupTemplates);
echo $this->Bootstrap->Tabs([
'pills' => true,
'data' => $tabData,

13
templates/element/genericElements/Form/multiFieldScaffold.php
View File

@ -1,8 +1,11 @@
<?php
use Cake\Utility\Inflector;
$default_template = [
'inputContainer' => '<div class="row pb-1 multi-metafield-container">{{content}}</div>',
'inputContainerError' => '<div class="row pb-1 metafield-container has-error">{{content}}</div>',
'formGroup' => '<div class="col-sm-2 form-label" {{attrs}}>{{label}}</div><div class="col-sm-10">{{input}}{{error}}</div>',
'formGroup' => '<label class="col-sm-2 col-form-label form-label" {{attrs}}>{{label}}</label><div class="col-sm-10 multi-metafield-input-container">{{input}}{{error}}</div>',
];
$form->setTemplates($default_template);
@ -10,8 +13,9 @@ $fieldsHtml = '';
$labelPrintedOnce = false;
if (!empty($metaFieldsEntities)) {
foreach ($metaFieldsEntities as $i => $metaFieldsEntity) {
$metaFieldsEntity->label = Inflector::humanize($metaFieldsEntity->field);
$fieldData = [
'label' => $metaFieldsEntity->field,
'label' => $metaFieldsEntity->label,
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.%s.value', $metaFieldsEntity->meta_template_id, $metaFieldsEntity->meta_template_field_id, $metaFieldsEntity->id),
];
if ($labelPrintedOnce) { // Only the first input can have a label
@ -28,13 +32,14 @@ if (!empty($metaFieldsEntities)) {
}
}
if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field button
$metaTemplateField->label = Inflector::humanize($metaTemplateField->field);
$emptyMetaFieldInput = '';
if (empty($metaFieldsEntities)) {
$emptyMetaFieldInput = $this->element(
'genericElements/Form/fieldScaffold',
[
'fieldData' => [
'label' => $metaTemplateField->field,
'label' => $metaTemplateField->label,
'field' => sprintf('MetaTemplates.%s.meta_template_fields.%s.metaFields.new.0', $metaTemplateField->meta_template_id, $metaTemplateField->id),
'class' => 'new-metafield',
],
@ -53,7 +58,7 @@ if (!empty($metaTemplateField) && !empty($multiple)) { // Add multiple field but
]
);
$multiFieldButtonHtml = sprintf(
'<div class="row pb-1 multi-metafield-container"><div class="col-sm-2 form-label"></div><div class="col-sm-10">%s</div></div>',
'<div class="row pb-1 multi-metafield-container"><div class="col-sm-2 form-label"></div><div class="col-sm-10 multi-metafield-input-container">%s</div></div>',
$this->element(
'genericElements/Form/multiFieldButton',
[

6
templates/element/genericElements/SingleViews/single_view.php
View File

@ -78,11 +78,11 @@
__('{0} view', \Cake\Utility\Inflector::singularize(\Cake\Utility\Inflector::humanize($this->request->getParam('controller')))) :
$title;
echo sprintf(
"<div id=\"single-view-table-container-%s\">
"<div id=\"single-view-table-container-%s\">
<h2 class=\"fw-light\">%s</h2>
%s%s
<div>%s</div>
<div id=\"metafieldsPanel\" class=\"col-lg-8 px-0\">%s</div>
<div class=\"col-xl-10 col-xxl-8 px-0\">%s</div>
<div id=\"metafieldsPanel\" class=\"col-xl-12 col-xxl-10 px-0\">%s</div>
<div id=\"accordion\">%s</div>
</div>",
$tableRandomValue,

19
webroot/css/themes/additional/bootstrap-additional.css
View File

@ -300,7 +300,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: #6c757d;
@ -309,11 +309,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

19
webroot/css/themes/theme-darkly.css
View File

@ -300,7 +300,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: #444;
@ -309,11 +309,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

19
webroot/css/themes/theme-default.css
View File

@ -300,7 +300,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: #6c757d;
@ -309,11 +309,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

19
webroot/css/themes/theme-flatly.css
View File

@ -300,7 +300,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: #95a5a6;
@ -309,11 +309,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

19
webroot/css/themes/theme-minty.css
View File

@ -300,7 +300,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: #95a5a6;
@ -309,11 +309,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

19
webroot/css/themes/theme-quartz.css
View File

@ -300,7 +300,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: rgba(255, 255, 255, 0.4);
@ -309,11 +309,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

19
webroot/css/themes/theme-slate.css
View File

@ -296,7 +296,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: #7a8288;
@ -305,11 +305,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

19
webroot/css/themes/theme-vapor.css
View File

@ -300,7 +300,7 @@
:not(.meta-template-container) > .multi-metafield-container {
position: relative; }
:not(.meta-template-container) > .multi-metafield-container > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: #ea39b8;
@ -309,11 +309,18 @@
width: 0.5rem;
height: 100%;
border-width: 0px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; }
:not(.meta-template-container) > .multi-metafield-container:last-child > .col-sm-10::before {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px); }
@media (min-width: 576px) {
:not(.meta-template-container) > .multi-metafield-container:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px; } }
:not(.meta-template-container) > .multi-metafield-container:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;

60
webroot/scss/custom.scss
View File

@ -1,48 +1,9 @@
$secondary: #6c757d !default;
// .multi-metafield-container {
// position: relative;
// }
// .multi-metafield-container .col-sm-10::before {
// transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
// border-style: solid;
// border-color: $secondary;
// }
// .multi-metafield-container:first-child .col-sm-10::before {
// transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
// border-top-right-radius: 3px;
// position: absolute;
// content: ' ';
// width: 0.5rem;
// border-width: 2px 2px 0px 0px;
// }
// .multi-metafield-container .col-sm-10::before {
// position: absolute;
// content: ' ';
// width: 0.5rem;
// height: 100%;
// border-width: 0px 2px 0px 0px;
// }
// .multi-metafield-container:last-child .col-sm-10::before {
// transform: translateX(calc(1.5rem * -.5));
// border-bottom-left-radius: 3px;
// position: absolute;
// content: ' ';
// width: 0.5rem;
// height: 50%;
// border-width: 0px 0px 2px 2px;
// }
// :not(.meta-template-container) .multi-metafield-container {
// .multi-metafield-container :not(.meta-template-container) {
:not(.meta-template-container) > .multi-metafield-container {
position: relative;
& > .col-sm-10::before {
& > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5 - 0.25rem - 2px));
border-style: solid;
border-color: $secondary;
@ -53,13 +14,22 @@ $secondary: #6c757d !default;
border-width: 0px 2px 0px 0px;
}
&:first-child > .col-sm-10::before {
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 12px);
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px;
&:first-child > .multi-metafield-input-container::before {
border-width: 2px 0px 0px 2px;
border-top-left-radius: 3px;
transform: translate(calc(1.5rem * -.5), -20px);
}
@include media-breakpoint-up(sm) {
&:first-child > .multi-metafield-input-container::before {
height: calc(100% - 10px);
transform: translate(calc(1.5rem * -.5 - 0.25rem - 2px), 20px);
border-top-left-radius: 0px;
border-top-right-radius: 3px;
border-width: 2px 2px 0px 0px;
}
}
&:last-child > .col-sm-10::before {
&:last-child > .multi-metafield-input-container::before {
transform: translateX(calc(1.5rem * -.5));
border-bottom-left-radius: 3px;
height: 50%;