mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-23 18:03:17 +00:00
PHRAS-2848 #comment Lightbox mobile design refacto #time 8h
This commit is contained in:
Harrys Ravalomanana
@@ -1,30 +1,34 @@
|
||||
$iconsPath: '../../../assets/common/images/icons/';
|
||||
|
||||
ul.image_set{
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:none;
|
||||
width:100%;
|
||||
border:none;
|
||||
$feedbackColor : #8bc34a;
|
||||
$basketColor : #2196f3 ;
|
||||
ul.image_set {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
width: 100%;
|
||||
border: none;
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
li.image_box a img{
|
||||
position:relative;
|
||||
border:none;
|
||||
width: auto!important;
|
||||
height: 100% !important;
|
||||
|
||||
li.image_box a img {
|
||||
position: relative;
|
||||
border: none;
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
top: 0 !important;
|
||||
object-fit: contain;
|
||||
}
|
||||
li.image_box a{
|
||||
padding:0;
|
||||
text-shadow:0;
|
||||
margin:0;
|
||||
|
||||
li.image_box a {
|
||||
padding: 0;
|
||||
text-shadow: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
li.image_box{
|
||||
|
||||
li.image_box {
|
||||
width: 18%;
|
||||
position: relative;
|
||||
margin: 0 2.5% 15px 0;
|
||||
@@ -38,19 +42,20 @@ li.image_box{
|
||||
}
|
||||
.thumb_wrapper {
|
||||
background: #ededed;
|
||||
width: 100%!important;
|
||||
height: 160px!important;
|
||||
width: 100% !important;
|
||||
height: 160px !important;
|
||||
@media screen and (max-width: 767px) {
|
||||
height: 130px !important;
|
||||
height: 130px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
li.image_box{
|
||||
li.image_box {
|
||||
width: 32%;
|
||||
margin: 0 2% 15px 0;
|
||||
&:nth-child(5n) {
|
||||
margin-right: 2% ;
|
||||
margin-right: 2%;
|
||||
}
|
||||
&:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
@@ -58,35 +63,37 @@ li.image_box{
|
||||
}
|
||||
}
|
||||
|
||||
a.no.active_choice{
|
||||
background-color:red;
|
||||
a.no.active_choice {
|
||||
background-color: red;
|
||||
color: #fff;
|
||||
}
|
||||
a.active_choice{
|
||||
|
||||
a.active_choice {
|
||||
background-color: #53b401;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.valid_choice{
|
||||
position:absolute;
|
||||
bottom:0;
|
||||
right:0;
|
||||
width:16px;
|
||||
height:16px;
|
||||
z-index:2;
|
||||
.valid_choice {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.valid_choice.agree{
|
||||
.valid_choice.agree {
|
||||
background: #7ed321;
|
||||
border-top-left-radius: 100px;
|
||||
}
|
||||
.valid_choice.disagree{
|
||||
|
||||
.valid_choice.disagree {
|
||||
background: #d0021b;
|
||||
border-top-left-radius: 100px;
|
||||
}
|
||||
|
||||
.thumb_wrapper {
|
||||
text-align:center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (orientation: landscape) {
|
||||
@@ -109,21 +116,120 @@ a.active_choice{
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
.ui-listview .ui-li-has-thumb .ui-li-thumb, .ui-listview .ui-li-has-thumb>.ui-btn>img:first-child, .ui-listview .ui-li-has-thumb>img:first-child {
|
||||
.ui-listview .ui-li-has-thumb .ui-li-thumb, .ui-listview .ui-li-has-thumb > .ui-btn > img:first-child, .ui-listview .ui-li-has-thumb > img:first-child {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/*user status*/
|
||||
.menu-bar-item {
|
||||
background: #000;
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
a {
|
||||
color: #fff!important;
|
||||
text-decoration: none!important;
|
||||
font-weight: normal;
|
||||
background: #f0f0f0;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
position: relative;
|
||||
.icomoon {
|
||||
font-size: 17px;
|
||||
position: absolute;
|
||||
left: 23px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.ui-link {
|
||||
color: #4f4f4f !important;
|
||||
text-decoration: none !important;
|
||||
.text {
|
||||
padding-left: 31px;
|
||||
color: #4f4f4f !important;
|
||||
text-decoration: none !important;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*new design of lightbox*/
|
||||
/*main nav */
|
||||
#lightbox-menu {
|
||||
li {
|
||||
margin-bottom: 30px;
|
||||
.ui-li-count {
|
||||
border-radius: 3px !important;
|
||||
border-top-left-radius: 0 !important;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border: 0;
|
||||
color: #fff;
|
||||
text-shadow: none;
|
||||
padding: 18px 23px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
min-width: 25px;
|
||||
background: $feedbackColor;
|
||||
}
|
||||
&.ui-first-child {
|
||||
margin-top: 15px;
|
||||
}
|
||||
&.ui-last-child {
|
||||
a {
|
||||
&:before {
|
||||
background: $basketColor;
|
||||
}
|
||||
&:hover, &:active, &:focus {
|
||||
color: $basketColor;
|
||||
}
|
||||
}
|
||||
.ui-li-count {
|
||||
background: $basketColor;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
a {
|
||||
padding: 22px 25px;
|
||||
font-size: 20px;
|
||||
border-radius: 3px !important;
|
||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.19);
|
||||
background-color: #eeeeee;
|
||||
&:hover, &:active, &:focus {
|
||||
color: $feedbackColor;
|
||||
}
|
||||
&:after {
|
||||
content: none !important;
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
bottom: 0;
|
||||
background: $feedbackColor;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox-bottom-btn {
|
||||
margin-top: 50px;
|
||||
.ui-btn {
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
#validation, #basket {
|
||||
.ui-content {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
.basket-title {
|
||||
background: $feedbackColor;
|
||||
padding: 12px 30px;
|
||||
font-size: 17px;
|
||||
margin: 0;
|
||||
text-shadow: none;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,13 +3,13 @@
|
||||
{% if app.getAuthenticator().isAuthenticated() %}
|
||||
<div class="menu-bar-item">
|
||||
{% if app.getAuthenticatedUser().isGuest %}
|
||||
<span class="icomoon icon-agree"></span>
|
||||
<span>{{ 'Guest' | trans }}</span>
|
||||
<span class="icomoon icon-agree"></span>
|
||||
<span class="text">{{ 'Guest' | trans }}</span>
|
||||
{% else %}
|
||||
<a target="_blank" href="{{ path('account') }}"
|
||||
title="{{ 'login:: Mon compte' | trans }}">
|
||||
<span class="icomoon icon-agree"></span>
|
||||
<span>{{ app.getAuthenticatedUser().getDisplayName() }}</span>
|
||||
<span class="icomoon icon-agree"></span>
|
||||
<span class="text">{{ app.getAuthenticatedUser().getDisplayName() }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -44,17 +44,17 @@
|
||||
{% include 'common/menubar.html.twig' %}
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<ul data-role="listview" style="width:100%;margin: 0;">
|
||||
<li>
|
||||
<ul id="lightbox-menu" data-role="listview" style="width:100%;margin: 0;">
|
||||
<li class="lightbox-item">
|
||||
<a href="#validation">{{ 'Validations' | trans }}</a>
|
||||
<span class="ui-li-count">{{_self.valid_baskets_length(baskets_collection)}}</span>
|
||||
</li>
|
||||
<li>
|
||||
<li class="lightbox-item">
|
||||
<a href="#baskets">{{ 'Paniers' | trans }}</a>
|
||||
<span class="ui-li-count">{{_self.baskets_length(baskets_collection)}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div style="margin:2em 0 0 0">
|
||||
<div class="lightbox-bottom-btn">
|
||||
<a href="{{ path ('logout') }}" data-role="button" rel="external">{{ 'Deconnexion' | trans }}</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,15 +89,19 @@
|
||||
<div id="validation" data-role="page">
|
||||
<div data-role="header">
|
||||
<a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
|
||||
<h1>{{ 'Validations' | trans }}</h1>
|
||||
<h1>{{ module_name }}</h1>
|
||||
</div>
|
||||
<div class="lightbox-user-info">
|
||||
{% include 'common/menubar.html.twig' %}
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<p>
|
||||
{{ 'Voici vos validations en cours' | trans }}
|
||||
</p>
|
||||
<p class="basket-title">
|
||||
{{ 'Validations' | trans }}
|
||||
<span>{{_self.valid_baskets_length(baskets_collection)}}</span>
|
||||
</p>
|
||||
<p>
|
||||
{{ 'Voici vos validations en cours' | trans }}
|
||||
</p>
|
||||
<ul data-role="listview" style="width:100%;margin: 0;">
|
||||
{% for basket in baskets_collection | sort | reverse%}
|
||||
{% if basket.getValidation() %}
|
||||
@@ -122,12 +126,16 @@
|
||||
<div id="baskets" data-role="page">
|
||||
<div data-role="header">
|
||||
<a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
|
||||
<h1>{{ 'Paniers' | trans }}</h1>
|
||||
<h1>{{module_name}}</h1>
|
||||
</div>
|
||||
<div class="lightbox-user-info">
|
||||
{% include 'common/menubar.html.twig' %}
|
||||
</div>
|
||||
<div data-role="content">
|
||||
<p class="basket-title">
|
||||
{{ 'Paniers' | trans }}
|
||||
<span>{{_self.baskets_length(baskets_collection)}}</span>
|
||||
</p>
|
||||
<p>
|
||||
{{ 'Voici vos paniers' | trans }}
|
||||
</p>
|
||||
|
||||
Reference in New Issue
Block a user