Skip to content

Commit

Permalink
XWIKI-19406: Layout alignment issue (#2206)
Browse files Browse the repository at this point in the history 
* Removed the bootstrap grid from the card on the Help Home page
* Added style to the new card elements
* Added a couple classes to force the number of columns
* Updated structure on other pages of the help section.
* Used bootstrap 3 variables
  • Loading branch information
@Sereza7
Sereza7 authored Dec 2, 2024
1 parent e52b739 commit 19c4e8a
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 74 deletions.
27 changes: 8 additions & 19 deletions ...iki-platform-help/xwiki-platform-help-ui/src/main/resources/Help/Applications/WebHome.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,33 +116,22 @@

{{velocity}}
{{html clean="false"}}
<div class="row">
<ul class="card-list two-cols">
#foreach ($card in $actionCards)
## See http://getbootstrap.com/css/#grid-responsive-resets .
#if ($foreach.index > 0 && $foreach.index % 2 == 0)
<div class="clearfix visible-sm-block visible-md-block visible-lg-block"></div>
#end
<div class="col-xs-12 col-sm-6">
<li class="card">
#helpActionCard($card)
</div>
</li>
#end
</div>
</ul>
<h2 id="HExamples">$services.localization.render('help.applications.title1')</h2>
<p>$services.localization.render('help.applications.description1')</p>
<div class="row">
<ul class="card-list three-cols">
#foreach ($card in $exampleCards)
## See http://getbootstrap.com/css/#grid-responsive-resets .
#if ($foreach.index > 0 && $foreach.index % 2 == 0)
<div class="clearfix visible-sm-block "></div>
#end
#if ($foreach.index > 0 && $foreach.index % 3 == 0)
<div class="clearfix visible-md-block visible-lg-block"></div>
#end
<div class="col-xs-12 col-sm-6 col-md-4">
<li class="card">
#helpExampleCard($card)
</div>
</li>
#end
</div>
</ul>
<p><a href="$exoPrefix/#%7Ct=extensions&p=1&l=30&s=doc.creationDate&d=desc&category=application" class="wikiexternallink">$services.localization.render('help.applications.link')</a></p>
{{/html}}
{{/velocity}}</content>
Expand Down
46 changes: 46 additions & 0 deletions ...wiki-platform-help/xwiki-platform-help-ui/src/main/resources/Help/Code/VelocityMacros.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -402,6 +402,52 @@
}
}

.card-list {
display: flex;
flex-wrap: wrap;
align-items: stretch;
row-gap: 1em;
column-gap: 1%;
padding-left: 0;
}

li.card {
list-style: none;
flex-shrink: 1;
width: 24%;
}

.three-cols > li.card {
width: 32%;
}

.two-cols > li.card {
width: 49%;
}

@media (max-width: @screen-lg-min) {
li.card {
width: 32%;
}
}

@media (max-width: @screen-md-min) {
.card-list > li.card {
width: 49%;
}
}

@media (max-width: @screen-sm-min) {
.card-list > li.card {
width: 100%;
}
}

li.card > .well {
height: 100%;
margin-bottom: 0px;
}

.video-modal .modal-body {
text-align: center;
}
Expand Down
27 changes: 8 additions & 19 deletions ...ore/xwiki-platform-help/xwiki-platform-help-ui/src/main/resources/Help/Macros/WebHome.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,33 +115,22 @@

{{velocity}}
{{html clean="false"}}
&lt;div class="row"&gt;
&lt;ul class="card-list two-cols"&gt;
#foreach ($card in $actionCards)
## See http://getbootstrap.com/css/#grid-responsive-resets .
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 2 == 0)
&lt;div class="clearfix visible-sm-block visible-md-block visible-lg-block"&gt;&lt;/div&gt;
#end
&lt;div class="col-xs-12 col-sm-6"&gt;
&lt;li class="card"&gt;
#helpActionCard($card)
&lt;/div&gt;
&lt;/li&gt;
#end
&lt;/div&gt;
&lt;/ul&gt;
&lt;h3 id="HExamples"&gt;Examples&lt;/h3&gt;
&lt;p&gt;Need help or confused with some of our macros? Check out their documentation and find out more about their functionality.&lt;/p&gt;
&lt;div class="row"&gt;
&lt;ul class="card-list three-cols"&gt;
#foreach ($card in $exampleCards)
## See http://getbootstrap.com/css/#grid-responsive-resets .
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 2 == 0)
&lt;div class="clearfix visible-sm-block "&gt;&lt;/div&gt;
#end
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 3 == 0)
&lt;div class="clearfix visible-md-block visible-lg-block"&gt;&lt;/div&gt;
#end
&lt;div class="col-xs-12 col-sm-6 col-md-4"&gt;
&lt;li class="card"&gt;
#helpExampleCard($card)
&lt;/div&gt;
&lt;/li&gt;
#end
&lt;/div&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href="https://extensions.xwiki.org/xwiki/bin/view/Main/#%7Ct=extensions&amp;p=1&amp;l=30&amp;s=doc.creationDate&amp;d=desc&amp;category=macro" class="wikiexternallink"&gt;$services.localization.render('help.macros.more')&lt;/a&gt;&lt;/p&gt;
{{/html}}
{{/velocity}}</content>
Expand Down
30 changes: 8 additions & 22 deletions .../xwiki-platform-help/xwiki-platform-help-ui/src/main/resources/Help/Templates/WebHome.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,38 +117,24 @@

{{velocity}}
{{html clean="false"}}
&lt;div class="row"&gt;
&lt;ul class="card-list two-cols"&gt;
#foreach ($card in $actionCards)
## See http://getbootstrap.com/css/#grid-responsive-resets .
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 2 == 0)
&lt;div class="clearfix visible-sm-block visible-md-block visible-lg-block"&gt;&lt;/div&gt;
#end
&lt;div class="col-xs-12 col-sm-6"&gt;
&lt;li class="card"&gt;
#helpActionCard($card)
&lt;/div&gt;
&lt;/li&gt;
#end
&lt;/div&gt;
&lt;/ul&gt;
&lt;h3 id="HExamples"&gt;$services.localization.render('help.templates.examples.title')&lt;/h3&gt;
&lt;p&gt;$services.localization.render('help.templates.examples.description')&lt;/p&gt;
&lt;div class="row"&gt;
&lt;ul class="card-list"&gt;
#foreach ($card in $exampleCards)
## See http://getbootstrap.com/css/#grid-responsive-resets .
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 2 == 0)
&lt;div class="clearfix visible-sm-block "&gt;&lt;/div&gt;
#end
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 3 == 0)
&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;
#end
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 4 == 0)
&lt;div class="clearfix visible-lg-block"&gt;&lt;/div&gt;
#end
&lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
&lt;li class="card"&gt;
#set ($outputCard = {})
#getTemplateExample($card $outputCard)
#helpExampleCard($outputCard)
&lt;/div&gt;
&lt;/li&gt;
#end
&lt;/div&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;a href="$exoPrefix/Templates+Application/" class="wikiexternallink"&gt;$services.localization.render('help.templates.more')&lt;/a&gt;&lt;/p&gt;
{{/html}}
{{/velocity}}</content>
Expand Down
18 changes: 4 additions & 14 deletions ...tform-core/xwiki-platform-help/xwiki-platform-help-ui/src/main/resources/Help/WebHome.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,23 +40,13 @@

{{velocity output="false"}}
#macro (display4Cards $cards)
&lt;div class="row"&gt;
&lt;ul class="card-list"&gt;
#foreach ($card in $cards)
## See http://getbootstrap.com/css/#grid-responsive-resets .
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 2 == 0)
&lt;div class="clearfix visible-sm-block "&gt;&lt;/div&gt;
#end
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 3 == 0)
&lt;div class="clearfix visible-md-block"&gt;&lt;/div&gt;
#end
#if ($foreach.index &gt; 0 &amp;&amp; $foreach.index % 4 == 0)
&lt;div class="clearfix visible-lg-block"&gt;&lt;/div&gt;
#end
&lt;div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"&gt;
&lt;li class='card'&gt;
#helpExampleCard($card)
&lt;/div&gt;
&lt;/li&gt;
#end
&lt;/div&gt;
&lt;/ul&gt;
#end

#set ($howToCards = [{
Expand Down

0 comments on commit 19c4e8a

Please sign in to comment.