Providing more space between controls for mobile access

Support
#1

Hi,

Is there any ‘general’ styling that can be changed to have the web UI provide more space between the controls? I would like to make the UI more mobile friendly (but not responsive all the way) and it would help a lot if the space between fields - especially on the field group and grid controls - to provide more spacing in between.

I tried to fiddle around a little with style overrides but did not find anything that does the trick. Only on the tables I could improve the spacing by setting a min-height on the table cell wrapper:


.v-table-cell-wrapper {
	min-height: 40px;
}

Is there anything that can be tweaked to improve spacing on the field group and grid controls as well?

#2

Hi,

You can use these SCSS variables to tune default component sizes and spacings in your theme extension:


$v-line-height: 1.55;

$v-unit-size: 35px;

$v-layout-margin-top: 13px;
$v-layout-margin-left: 13px;
$v-layout-margin-right: 13px;
$v-layout-margin-bottom: 13px;

$v-layout-spacing-vertical: 13px;
$v-layout-spacing-horizontal: 13px;

$v-table-row-height: 35px;
$v-table-cell-padding-horizontal: 10px;

You can set them in halo-ext-defaults.scss file and restart your application. Also you will need to tune a bit some CSS rules, for example height of menu header, in halo-ext.scss file:


/* Define your theme modifications inside next mixin */
@mixin com_company_mobilesize-halo-ext {
  .cuba-inverse-header {
    height: 50px !important;
  }
}

And you will see the following result:

You can find more useful SCSS variables here: Extending an Existing Theme - CUBA Platform. Developer’s Manual

mobile-friendly-sizes

#3

Hi Yuriy,

Thank you. I played around a little with these before but without success. I guess you need to use them in some consistent combination which I didn’t before. Especially the unit size escaped my attention as well as the vertical and horizontal spacing. They turn out to be exactly what i was looking for.