Requested and provided by Razem

Problem/Motivation

  • Section ONLY
  • Name the fieldset: Alignment
    • Horizontal alignment
    • Vertical alignment

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

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 NONE

Boxed VLB - No background - Align start

Boxed VLB - No background - Align start

Boxed VLB - No background - Align Center

Boxed VLB - No background - Align Center

Boxed VLB - No background - Align end
Boxed VLB - No background - Align end

2 cols - Boxed VLB - No background - Align NONE

2 cols - Boxed VLB - No background - Align NONE

2 cols - Boxed VLB - No background - Align start

2 cols - Boxed VLB - No background - Align start

2 cols - Boxed VLB - No background - Align Center

2 cols - Boxed VLB - No background - Align Center

2 cols - Boxed VLB - No background - Align end

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 NONE

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

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 center

Boxed VLB - BG Color - Edge to Edge BG - Align end
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 NONE

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

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 center

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

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 NONE

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

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 center

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

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 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 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 center

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

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

RTL Support

RTL Support Test alignment edit layout RTL

RTL Support Test alignment

RTL Support front-end Test alignment

API changes

  • New plugins

Data model changes

  • Section configuration will have 2 new saved values for alignment
    • horizontal_alignment
    • vertical_alignment
CommentFileSizeAuthor
#28 Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-3.png30.06 KBrajab natshah
#27 Test-1-Alignment-dev-varbase9c1-alignment-2.png194.45 KBrajab natshah
#27 Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-2.png230.38 KBrajab natshah
#25 Test-1-Alignment-dev-varbase9c1-alignment.png1.51 MBrajab natshah
#19 Test1-Alignmen-ar-1.png400.15 KBrajab natshah
#19 Test1-Alignmen-edit-layout-ar-1.png578.95 KBrajab natshah
#19 Test1-Alignmen-edit-layout-ar-1-open-edit-section.png205.52 KBrajab natshah
#13 Test1-Alignmen.png778.89 KBrajab natshah
#13 Test1-Alignmen-edit-layout.png928.53 KBrajab natshah
#13 Horizontal-Align-Center---Vertical-align-bottom--3-cols.png328.91 KBrajab natshah
#13 Horizontal-Align-Center---Vertical-align-Middle.png178.9 KBrajab natshah
#9 a2.png30.43 KBrajab natshah
#9 a1.png195.97 KBrajab natshah
#8 Bootstrap Styles alignment.png110.1 KBrajab natshah
Bootstrap-Icons-Alignment.png96.29 KBrajab natshah

Comments

RajabNatshah created an issue. See original summary.

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
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
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented

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
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new Bootstrap Styles alignment.png110.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

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new a1.png195.97 KB
new a2.png30.43 KB
  • Have Alignment UI/UX styling options with VLB

rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

  • RajabNatshah committed 277d9f0 on 10.0.x 
    Issue #3218194: Add Vertical and Horizontal alignments to section...

  • RajabNatshah committed 356247e on 10.0.x 
    Issue #3218194: Add Vertical and Horizontal alignments to section...
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new Horizontal-Align-Center---Vertical-align-Middle.png178.9 KB
new Horizontal-Align-Center---Vertical-align-bottom--3-cols.png328.91 KB
new Test1-Alignmen-edit-layout.png928.53 KB
new Test1-Alignmen.png778.89 KB

  • RajabNatshah committed c5320d8 on 10.0.x 
    Issue #3218194: Add Vertical and Horizontal alignments to section...
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: Unassigned » mohammed j. razem
Status: Active » Needs review
Issue tags: +varbase-9.0.0
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

  • RajabNatshah committed 5296ee9 on 10.0.x 
    Issue #3218194: Style the RTL Layout Builder for the Alignment

  • RajabNatshah committed 071796e on 10.0.x 
    Issue #3218194: Style the RTL Layout Builder for the Alignment
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new Test1-Alignmen-edit-layout-ar-1-open-edit-section.png205.52 KB
new Test1-Alignmen-edit-layout-ar-1.png578.95 KB
new Test1-Alignmen-ar-1.png400.15 KB

  • RajabNatshah committed 75e42c0 on 10.0.x 
    Issue #3218194: Style the RTL Layout Builder for the Alignment
rajab natshah’s picture

rajab natshah
he/him
commented
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”

  • RajabNatshah committed c03ff81 on 10.0.x 
    Issue #3218194: Changed Size of icons in layout builder be consistent...

  • RajabNatshah committed 106679a on 10.0.x 
    Issue #3218194: Change Vertical and Horizontal alignments for sections...

  • RajabNatshah committed 1aa640c on 10.0.x 
    Issue #3218194: Change Vertical and Horizontal alignments for sections...
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new Test-1-Alignment-dev-varbase9c1-alignment.png1.51 MB
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-2.png230.38 KB
new Test-1-Alignment-dev-varbase9c1-alignment-2.png194.45 KB
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
StatusFileSize
new Edit-layout-for-Test-1-Alignment-dev-varbase9c1-alignment-3.png30.06 KB
rajab natshah’s picture

rajab natshah
he/him
commented
Status: Active » Fixed
rajab natshah’s picture

rajab natshah
he/him
commented
Assigned: rajab natshah » Unassigned
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes
rajab natshah’s picture

rajab natshah
he/him
commented
Issue summary: View changes

  • RajabNatshah committed 9846099 on 10.0.x 
    Issue #3218194: Have a hook update to add Vertical and Horizontal...
rajab natshah’s picture

rajab natshah
he/him
commented

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

Status: Fixed » Closed (fixed)

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