related to #1859 New design for mobile app banner

This commit is contained in:
MatthieuLP
2023-02-06 17:12:53 +01:00
parent c6ada9b9ac
commit 9ca48379e1
2 changed files with 35 additions and 32 deletions

View File

@@ -417,21 +417,19 @@ jQuery(document).ready(function(){
<div class="promote-apps">
<div class="promote-content">
<div class="left-side">
<img src="https://de.piwigo.org/./plugins/piwigo-piwigodotorg/images/mobile_applications/Group_77.png">
<div class="promote-text">
<span>{"Piwigo is also on mobile."|@translate|escape:javascript}</span>
<span>{"Try now !"|@translate|escape:javascript}</span>
</div>
<img src="https://sandbox.piwigo.com/uploads/4/y/1/4y1zzhnrnw//2023/01/24/20230124175152-015bc1e3.png">
</div>
<div class="promote-text">
<span>{"Piwigo is also on mobile."|@translate|escape:javascript}</span>
<span>{"Try now !"|@translate|escape:javascript}</span>
</div>
<div class="mid-side"></div>
<div class="right-side">
<div class="promote-text">
<span>{"Install Piwigo on mobile"|@translate|escape:javascript}</span>
<div>
<a href="{$PHPWG_URL}/mobile-applications" target="_blank"><span class="go-to-porg icon-link-1">{"Discover"|@translate|escape:javascript}</span></a>
</div>
</div>
</div>
<span class="dont-show-again">{'Understood, do not show again'|translate|escape:javascript}</span>
<span class="dont-show-again icon-cancel tiptip" title="{'Understood, do not show again'|translate|escape:javascript}"></span>
</div>
{/if}

View File

@@ -6773,9 +6773,14 @@ color:#FF7B00;
flex-direction: column;
justify-content: flex-end;
border-bottom: 1px solid lightgray;
padding: 0 15px 15px 15px;
margin-bottom: 15px;
padding: 15px;
margin: 0 20px 15px 20px;
border-radius: 5px;
background: #f5d8b0;
position: relative;
box-shadow: 0px 5px 10px 5px rgba(0,0,0,0.1)
}
.close-apps {
@@ -6791,11 +6796,11 @@ color:#FF7B00;
}
.dont-show-again {
margin-left: auto;
color: #555;
border-radius: 20px;
padding: 3px 8px;
font-weight: 700;
position: absolute;
color: #333;
top: 5px;
right: 5px;
font-size: 25px;
}
.dont-show-again:hover,
@@ -6806,28 +6811,26 @@ color:#FF7B00;
.promote-content {
display: flex;
flex-direction: row;
justify-content: space-around;
justify-content: center;
flex: 2;
}
.promote-content .left-side {
display: flex;
flex-direction: row;
align-items: center;
}
.promote-content .mid-side {
border-right: 1px solid gray;
flex: 1;
}
.promote-content .right-side {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex: 1;
}
.promote-content .left-side img {
width: 170px;
margin-left: 60px;
margin-right: 80px;
margin-left: 25px;
}
.promote-text {
@@ -6836,8 +6839,13 @@ color:#FF7B00;
font-size: 30px;
font-weight: 700;
color: #000;
justify-content: center;
flex: 2;
}
.promote-text span {
font-size: 35px;
}
.promote-text span:first-child {
margin-bottom: 5px;
}
@@ -6854,6 +6862,7 @@ color:#FF7B00;
color: #3c3c3c;
width: 150px;
text-align: center;
white-space: nowrap;
}
.go-to-porg::before {
@@ -6876,23 +6885,19 @@ color:#FF7B00;
@media (max-width: 1450px) {
.promote-text span {
font-size: 20px;
}
.promote-content .left-side img {
margin-left: 60px;
font-size: 30px;
}
}
@media (max-width: 1170px) {
.promote-content .left-side img {
margin: 0 20px 0 0;
.promote-text span {
font-size: 25px;
}
}
@media (max-width: 1050px) {
.promote-text span {
font-size: 15px;
font-size: 20px;
}
.promote-content .left-side img {