fix #4

magix-cms · Sep 25, 2023 · f43ca6d · f43ca6d
1 parent dbebe9c
commit f43ca6d
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 72 deletions.
diff --git a/config.xml b/config.xml
@@ -21,7 +21,7 @@
 		</authors>
 		<release>
 			<date_create>16/12/2015</date_create>
-			<date_update>13/04/2023</date_update>
+			<date_update>25/09/2023</date_update>
 			<version>3.0</version>
 			<phase>Stable</phase>
 		</release>

diff --git a/skin/public/advantage/brick/advantages.tpl b/skin/public/advantage/brick/advantages.tpl
@@ -1,31 +1,36 @@
 {widget_advantage_data}
 {strip}
-{if !isset($orientation)}
-    {assign var="orientation" value="left"}
-{/if}
+    {if !isset($orientation)}
+        {assign var="orientation" value="left"}
+    {/if}
 {/strip}
 {if isset($advantages) && $advantages != null}
     <section id="advantages" class="clearfix">
         <div class="container">
             <div class="row">
                 {strip}{capture name="class"}
                     {$nb = $advantages|count}
-                    col-12{if $nb > 1 && $nb !== 3} col-sm-6{if $nb === 4} col-md-3{/if}{elseif $nb === 3} col-sm-4{/if}
+                    adv
+                    {*col-12{if $nb > 1 && $nb !== 3} col-sm-6{if $nb === 4} col-md-3{/if}{elseif $nb === 3} col-sm-4{/if}*}
                 {/capture}{/strip}
                 {foreach $advantages as $adv}
-                <div class="{$smarty.capture.class}">
-                    <div class="media media-{$orientation}">
-                        <div class="icon">
-                            <span class="material-icons {$adv.icon}"></span>
-                            <h4>{$adv.title}</h4>
+                    <div class="{$smarty.capture.class}">
+                        <div class="media media-{$orientation}">
+                            <div class="media-title">
+                                <div class="icon">
+                                    <span class="material-icons {$adv.icon}"></span>
+                                </div>
+                                <div class="title">
+                                    <h3>{$adv.title}</h3>
+                                </div>
+                            </div>
+                            <div class="media-body icon-{$orientation}">
+                                {if $nb !== 1}{$adv.desc = $adv.desc|truncate:500:'...'}{/if}
+                                <p>{$adv.desc}</p>
+                            </div>
+                            {if $adv.url}<a href="{$adv.url}" title="{#read_more#} {$adv.title}" class="all-hover{if $adv.blank} targetblank{/if}"><span class="sr-only">{$adv.title}</span></a>{/if}
                         </div>
-                        <div class="media-body icon-{$orientation}">
-                            {if $nb !== 1}{$adv.desc = $adv.desc|truncate:500:'...'}{/if}
-                            <p>{$adv.desc}</p>
-                        </div>
-                        {if $adv.url}<a href="{$adv.url}" title="{#read_more#} {$adv.title}" class="all-hover{if $adv.blank} targetblank{/if}"><span class="sr-only">{$adv.title}</span></a>{/if}
                     </div>
-                </div>
                 {/foreach}
             </div>
         </div>

diff --git a/skin/public/css/src/less/plugins/advantage.less b/skin/public/css/src/less/plugins/advantage.less
@@ -9,44 +9,70 @@
 
 #advantages {
 	padding: 50px 0 60px;
-	margin-bottom: 30px;
+	margin: 8rem 0 0 0;
+	.adv{
+		padding: 1rem;
+		//flex: 1 0 0;
 
-	.media {
-		position: relative;
-		margin-bottom: 40px;
-
-		&-left {
-			padding-right: 15px;
-		}
-		&-right {
-			padding-left: 15px;
-		}
-		&-top {
-			padding-bottom: 15px;
+		@media (min-width: .breakpoint(sm)[min]) {
+			flex: 1 0 20%;
+			//border-right: 1px solid var(--main-color);
+			//max-width: 20%;
 		}
-		&-bottom {
-			padding-top: 15px;
-		}
-	}
-
-	.media-body {
-		&.icon-top,
-		&.icon-bottom {
-			text-align: center;
-		}
-
-		&.icon-right {
-			text-align: right;
-		}
-	}
-
-	.icon {
-		text-align: center;
+		.media {
+			position: relative;
+			margin-bottom: 1.5rem;
+			display: flex;
+			flex-direction: column;
+			@media (min-width: .breakpoint(sm)[min]) {
+				padding: 0;
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+			}
+			@media (max-width: .breakpoint(sm)[max]) {
+				.all-hover{
+					//text-indent: unset;
+					overflow: hidden;
+				}
+			}
+			/*&-left {
+				padding-right: 15px;
+			}
+			&-right {
+				padding-left: 15px;
+			}
+			&-top {
+				padding-bottom: 15px;
+			}
+			&-bottom {
+				padding-top: 15px;
+			}*/
+			.media-body {
+				&.icon-top,
+				&.icon-bottom {
+					text-align: center;
+				}
 
-		> i,
-		> span {
-			font-size: 3em;
-			color: var(--main-color);
+				&.icon-right {
+					text-align: right;
+				}
+			}
+			.media-title{
+				display: flex;
+				flex-direction: column;
+				@media (max-width: .breakpoint(sm)[max]) {
+					align-items: center;
+				}
+				.icon {
+					//text-align: center;
+					margin-bottom: var(--spacer);
+					> i,
+					> span {
+						font-size: 3em;
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/skin/public/css/src/less/tablet/advantage.less b/skin/public/css/src/less/tablet/advantage.less
@@ -1,7 +1,7 @@
 //
 // Company advantages
 //
-
+/*
 @media (min-width: @screen-sm-min) {
 	#advantages {
 		padding: 60px 0;
@@ -10,7 +10,7 @@
 			margin-bottom: 0;
 		}
 
-		/*&:before {
+		&:before {
 			background: url('@{imgpath}advantage/bg_advantage_sm.jpg') repeat center center;
 
 			@media (min-width: @screen-md-min) {
@@ -19,24 +19,6 @@
 			@media (min-width: @screen-lg-min) {
 				background: url('@{imgpath}advantage/bg_advantage_lg.jpg') repeat center center;
 			}
-		}*/
-
-		.icon {
-			> i,
-			> span {
-				font-size: 3em;
-				@media (min-width: @screen-md-min) {
-					font-size: 4em;
-				}
-			}
-		}
-	}
-}
-
-@media (min-width: @screen-md-max) {
-	#advantages {
-		.media {
-			margin-bottom: 0;
 		}
 	}
-}
+}*/