Add Vertical and Horizontal alignments to section styling settings for Varbase Layout Builder ~10 [#3218194]

Requested and provided by Razem

Problem/Motivation

Section ONLY

Name the fieldset: Alignment

Horizontal alignment

Vertical alignment

Horizontal alignment for Layout: Columns

Vertical alignment for Layout: Columns

Proposed resolution

Have a custom Bootstrap Style - Styling Group named "Alignment"
Have 2 custom Bootstrap Style - Styling plugins:

HorizontalAlignment
VerticalAlignment

Other layout options could be aligned using this Bootstrap 4/5 way
#3210657: Add Boxed options ( Wide, Medium, Narrow, Tiny ) in Varbase Layout Builder ~10

Use some of the Bootstrap 5 icons
https://icons.getbootstrap.com/

Horizontal alignment

Align start
Align center
Align end

Maybe more icons for more alignment options in Bootstrap 5.

Vertical alignment

Align top
Align middle
Align bottom

Remaining tasks

Add plugins
Have it work with 1 column
Have it work with 2 and more columns
Integrate with #3210657: Add Boxed options ( Wide, Medium, Narrow, Tiny ) in Varbase Layout Builder ~10
Test
Review
Automated testing
Release

For manual update
Run a basic composer update

Go to "/admin/config/bootstrap-styles/settings"
And fill in the following:

Horizontal alignment
justify-content-start|Align start
justify-content-center|Align center
justify-content-end|Align end
Vertical alignment
align-items-start|Align top
align-items-center|Align middle
align-items-end|Align bottom
And save the settings

User interface changes

Have Alignment UI/UX styling options with VLB

Boxed VLB - No background - Align NONE

Boxed VLB - No background - Align start

Boxed VLB - No background - Align Center

Boxed VLB - No background - Align end

2 cols - Boxed VLB - No background - Align NONE

2 cols - Boxed VLB - No background - Align start

2 cols - Boxed VLB - No background - Align Center

2 cols - Boxed VLB - No background - Align end

Boxed VLB - BG Color - Edge to Edge BG - Align NONE

Boxed VLB - BG Color - Edge to Edge BG - Align start

Boxed VLB - BG Color - Edge to Edge BG - Align center

Boxed VLB - BG Color - Edge to Edge BG - Align end

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align NONE

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align start

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align center

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align end

Boxed VLB - BG Color - No Edge to Edge BG - Align NONE

Boxed VLB - BG Color - No Edge to Edge BG - Align start

Boxed VLB - BG Color - No Edge to Edge BG - Align center

Boxed VLB - BG Color - No Edge to Edge BG - Align end

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align NONE

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align start

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align center

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align end

RTL Support

API changes

New plugins

Data model changes

Section configuration will have 2 new saved values for alignment
- horizontal_alignment
- vertical_alignment

Comment	File	Size	Author
#28	Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-3.png	30.06 KB	rajab natshah
#27	Test-1-Alignment-dev-varbase9c1-alignment-2.png	194.45 KB	rajab natshah
#27	Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-2.png	230.38 KB	rajab natshah
#25	Test-1-Alignment-dev-varbase9c1-alignment.png	1.51 MB	rajab natshah
#19	Test1-Alignmen-ar-1.png	400.15 KB	rajab natshah
#19	Test1-Alignmen-edit-layout-ar-1.png	578.95 KB	rajab natshah
#19	Test1-Alignmen-edit-layout-ar-1-open-edit-section.png	205.52 KB	rajab natshah
#13	Test1-Alignmen.png	778.89 KB	rajab natshah
#13	Test1-Alignmen-edit-layout.png	928.53 KB	rajab natshah
#13	Horizontal-Align-Center---Vertical-align-bottom--3-cols.png	328.91 KB	rajab natshah
#13	Horizontal-Align-Center---Vertical-align-Middle.png	178.9 KB	rajab natshah
#9	a2.png	30.43 KB	rajab natshah
#9	a1.png	195.97 KB	rajab natshah
#8	Bootstrap Styles alignment.png	110.1 KB	rajab natshah
	Bootstrap-Icons-Alignment.png	96.29 KB	rajab natshah

Comments

Comment #1

10 June 2021 at 08:06

RajabNatshah created an issue. See original summary.

Comment #2

rajab natshah

he/him

commented 10 June 2021 at 08:07

Issue summary:

View changes

Comment #3

rajab natshah

he/him

commented 10 June 2021 at 08:08

Title:

Add Vertical and Horizontal alignments to section layout settings for Varbase Layout Builder ~10

» Add Vertical and Horizontal alignments to section styling settings for Varbase Layout Builder ~10

Comment #4

rajab natshah

he/him

commented 10 June 2021 at 08:26

Issue summary:

View changes

Comment #5

rajab natshah

he/him

commented 10 June 2021 at 08:27

Issue summary:

View changes

Comment #6

rajab natshah

he/him

commented 10 June 2021 at 08:28

Issue summary:

View changes

Comment #7

rajab natshah

he/him

commented 10 June 2021 at 09:09

After having a look at

Bootstrap 5 Horizontal alignment

https://getbootstrap.com/docs/5.0/layout/columns/#horizontal-alignment

Bootstrap 4 Horizontal alignment

https://getbootstrap.com/docs/4.6/layout/grid/#horizontal-alignment

Bootstrap 5 Vertical alignment

https://getbootstrap.com/docs/5.0/layout/columns/#vertical-alignment

Bootstrap 4 Vertical alignment

https://getbootstrap.com/docs/4.6/layout/grid/#vertical-alignment

  Horizontal alignment  |  Bootstrap 5              |  Bootstrap 4
------------------------|---------------------------|-------------------------------
            Align start |  justify-content-start    |  justify-content-start
           Align center |  justify-content-center   |  justify-content-center
              Align end |  justify-content-end      |  justify-content-end
  No name & icon yet    |  justify-content-around   |  justify-content-around
  No name & icon yet    |  justify-content-between  |  justify-content-between  
  No name & icon yet    |  justify-content-evenly   |  NO

Maybe it could be named Justify content
Or keep it and do the mapping

    Vertical alignment  |  Bootstrap 5            |   Bootstrap 4
------------------------|-------------------------|-------------------------------
              Align top |  align-items-start      |   align-items-start
           Align middle |  align-items-center     |   align-items-center
           Align bottom |  align-items-end        |   align-items-end

Implementing the following

  Horizontal alignment  |  Bootstrap 5              |  Bootstrap 4
------------------------|---------------------------|-------------------------------
            Align start |  justify-content-start    |  justify-content-start
           Align center |  justify-content-center   |  justify-content-center
              Align end |  justify-content-end      |  justify-content-end

    Vertical alignment  |  Bootstrap 5            |   Bootstrap 4
------------------------|-------------------------|-------------------------------
              Align top |  align-items-start      |   align-items-start
           Align middle |  align-items-center     |   align-items-center
           Align bottom |  align-items-end        |   align-items-end

Comment #8

rajab natshah

he/him

commented 10 June 2021 at 12:58

Issue summary:

View changes

Status	File	Size
new	Bootstrap Styles alignment.png	110.1 KB

Horizontal alignment

justify-content-start|Align start
justify-content-center|Align center
justify-content-end|Align end

Vertical alignment

align-items-start|Align top
align-items-center|Align middle
align-items-end|Align bottom

Comment #9

rajab natshah

he/him

commented 10 June 2021 at 18:07

Issue summary:

View changes

Status	File	Size
new	a1.png	195.97 KB
new	a2.png	30.43 KB

Have Alignment UI/UX styling options with VLB

Comment #10

rajab natshah

he/him

commented 10 June 2021 at 18:15

Issue summary:

View changes

Comment #11

10 June 2021 at 18:16

RajabNatshah committed 277d9f0 on 10.0.x

Issue #3218194: Add Vertical and Horizontal alignments to section...

Comment #12

12 June 2021 at 08:07

RajabNatshah committed 356247e on 10.0.x

Issue #3218194: Add Vertical and Horizontal alignments to section...

Comment #13

rajab natshah

he/him

commented 12 June 2021 at 16:05

Issue summary:

View changes

Status	File	Size
new	Horizontal-Align-Center---Vertical-align-Middle.png	178.9 KB
new	Horizontal-Align-Center---Vertical-align-bottom--3-cols.png	328.91 KB
new	Test1-Alignmen-edit-layout.png	928.53 KB
new	Test1-Alignmen.png	778.89 KB

Comment #14

12 June 2021 at 16:14

RajabNatshah committed c5320d8 on 10.0.x

Issue #3218194: Add Vertical and Horizontal alignments to section...

Comment #15

rajab natshah

he/him

commented 12 June 2021 at 16:25

Assigned:	Unassigned	» mohammed j. razem
Status:	Active	» Needs review
Issue tags:		+varbase-9.0.0

Comment #16

rajab natshah

he/him

commented 13 June 2021 at 07:21

Issue summary:

View changes

Comment #17

13 June 2021 at 09:20

RajabNatshah committed 5296ee9 on 10.0.x

Issue #3218194: Style the RTL Layout Builder for the Alignment

Comment #18

13 June 2021 at 09:46

RajabNatshah committed 071796e on 10.0.x

Issue #3218194: Style the RTL Layout Builder for the Alignment

Comment #19

rajab natshah

he/him

commented 13 June 2021 at 09:59

Issue summary:

View changes

Status	File	Size
new	Test1-Alignmen-edit-layout-ar-1-open-edit-section.png	205.52 KB
new	Test1-Alignmen-edit-layout-ar-1.png	578.95 KB
new	Test1-Alignmen-ar-1.png	400.15 KB

Comment #20

13 June 2021 at 10:43

RajabNatshah committed 75e42c0 on 10.0.x

Issue #3218194: Style the RTL Layout Builder for the Alignment

Comment #21

rajab natshah

he/him

commented 13 June 2021 at 15:05

Assigned:	mohammed j. razem	» rajab natshah
Status:	Needs review	» Active

Feedback by Razem

Size of icons in layout builder should be consistent with other UI elements.

Remove alignment from blocks

Rename “Alignment” to “Blocks alignment”

Comment #22

13 June 2021 at 16:47

RajabNatshah committed c03ff81 on 10.0.x

Issue #3218194: Changed Size of icons in layout builder be consistent...

Comment #23

14 June 2021 at 12:05

RajabNatshah committed 106679a on 10.0.x

Issue #3218194: Change Vertical and Horizontal alignments for sections...

Comment #24

17 June 2021 at 13:04

RajabNatshah committed 1aa640c on 10.0.x

Issue #3218194: Change Vertical and Horizontal alignments for sections...

Comment #25

rajab natshah

he/him

commented 20 June 2021 at 10:51

Issue summary:

View changes

Status	File	Size
new	Test-1-Alignment-dev-varbase9c1-alignment.png	1.51 MB

Comment #26

rajab natshah

he/him

commented 20 June 2021 at 10:52

Issue summary:

View changes

Comment #27

rajab natshah

he/him

commented 20 June 2021 at 11:38

Issue summary:

View changes

Status	File	Size
new	Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-2.png	230.38 KB
new	Test-1-Alignment-dev-varbase9c1-alignment-2.png	194.45 KB

Comment #28

rajab natshah

he/him

commented 20 June 2021 at 11:42

Issue summary:

View changes

Status	File	Size
new	Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-3.png	30.06 KB

Comment #29

rajab natshah

he/him

commented 20 June 2021 at 11:42

Status:

Active

» Fixed

Comment #30

rajab natshah

he/him

commented 20 June 2021 at 12:07

Assigned:

rajab natshah

» Unassigned

Comment #31

rajab natshah

he/him

commented 22 June 2021 at 08:51

Issue summary:

View changes

Comment #32

rajab natshah

he/him

commented 22 June 2021 at 08:52

Issue summary:

View changes

Comment #33

rajab natshah

he/him

commented 22 June 2021 at 08:56

Issue summary:

View changes

Comment #34

rajab natshah

he/him

commented 22 June 2021 at 08:56

Issue summary:

View changes

Comment #35

23 June 2021 at 08:24

RajabNatshah committed 9846099 on 10.0.x

Issue #3218194: Have a hook update to add Vertical and Horizontal...

Comment #36

rajab natshah

he/him

commented 23 June 2021 at 08:55

Added a hook update to import:

Horizontal alignment

justify-content-start|Align start
justify-content-center|Align center
justify-content-end|Align end

Vertical alignment

align-items-start|Align top
align-items-center|Align middle
align-items-end|Align bottom

into the bootstrap_styles.settings config

Comment #37

7 July 2021 at 08:59

Status:

Fixed

» Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

Add Vertical and Horizontal alignments to section styling settings for Varbase Layout Builder ~10

Problem/Motivation

Proposed resolution

Horizontal alignment

Vertical alignment

Remaining tasks

For manual update

Horizontal alignment

Vertical alignment

User interface changes

Boxed VLB - No background - Align NONE

Boxed VLB - No background - Align start

Boxed VLB - No background - Align Center

2 cols - Boxed VLB - No background - Align NONE

2 cols - Boxed VLB - No background - Align start

2 cols - Boxed VLB - No background - Align Center

2 cols - Boxed VLB - No background - Align end

Boxed VLB - BG Color - Edge to Edge BG - Align NONE

Boxed VLB - BG Color - Edge to Edge BG - Align start

Boxed VLB - BG Color - Edge to Edge BG - Align center

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align NONE

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align start

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align center

2 cols - Boxed VLB - BG Color - Edge to Edge BG - Align end

Boxed VLB - BG Color - No Edge to Edge BG - Align NONE

Boxed VLB - BG Color - No Edge to Edge BG - Align start

Boxed VLB - BG Color - No Edge to Edge BG - Align center

Boxed VLB - BG Color - No Edge to Edge BG - Align end

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align NONE

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align start

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align center

2 cols - Boxed VLB - BG Color - No Edge to Edge BG - Align end

RTL Support

API changes

Data model changes

Comments

Bootstrap 5 Horizontal alignment

Bootstrap 4 Horizontal alignment

Bootstrap 5 Vertical alignment

Bootstrap 4 Vertical alignment

Implementing the following

Horizontal alignment

Vertical alignment

Horizontal alignment

Vertical alignment

Referenced by