hazza/Phraseanet
1
0
Fork 0
mirror of https://github.com/alchemy-fr/Phraseanet.git synced 2025-10-23 18:03:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

PHRAS-2848 #comment Lightbox mobile design refacto #time 8h

Browse Source
This commit is contained in:
Harrys Ravalomanana
2019-12-03 18:05:01 +04:00
parent 8227b86c3e
commit c691be541c
3 changed files with 171 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
resources/www/lightbox/styles/jquery-mobile/_jquery-validator.scss
View File

@@ -1,30 +1,34 @@
$iconsPath: '../../../assets/common/images/icons/'; $iconsPath: '../../../assets/common/images/icons/';
$feedbackColor : #8bc34a;
ul.image_set{ $basketColor : #2196f3 ;
padding:0; ul.image_set {
margin:0; padding: 0;
border:none; margin: 0;
width:100%; border: none;
border:none; width: 100%;
border: none;
list-style-type: none; list-style-type: none;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
li.image_box a img{
position:relative; li.image_box a img {
border:none; position: relative;
width: auto!important; border: none;
height: 100% !important; width: auto !important;
height: 100% !important;
top: 0 !important; top: 0 !important;
object-fit: contain; object-fit: contain;
} }
li.image_box a{
padding:0; li.image_box a {
text-shadow:0; padding: 0;
margin:0; text-shadow: 0;
margin: 0;
width: 100%; width: 100%;
} }
li.image_box{
li.image_box {
width: 18%; width: 18%;
position: relative; position: relative;
margin: 0 2.5% 15px 0; margin: 0 2.5% 15px 0;
@@ -38,19 +42,20 @@ li.image_box{
} }
.thumb_wrapper { .thumb_wrapper {
background: #ededed; background: #ededed;
width: 100%!important; width: 100% !important;
height: 160px!important; height: 160px !important;
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
height: 130px !important; height: 130px !important;
} }
} }
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
li.image_box{ li.image_box {
width: 32%; width: 32%;
margin: 0 2% 15px 0; margin: 0 2% 15px 0;
&:nth-child(5n) { &:nth-child(5n) {
margin-right: 2% ; margin-right: 2%;
} }
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; margin-right: 0;
@@ -58,35 +63,37 @@ li.image_box{
} }
} }
a.no.active_choice{ a.no.active_choice {
background-color:red; background-color: red;
color: #fff; color: #fff;
} }
a.active_choice{
a.active_choice {
background-color: #53b401; background-color: #53b401;
color: #fff; color: #fff;
} }
.valid_choice{ .valid_choice {
position:absolute; position: absolute;
bottom:0; bottom: 0;
right:0; right: 0;
width:16px; width: 16px;
height:16px; height: 16px;
z-index:2; z-index: 2;
} }
.valid_choice.agree{ .valid_choice.agree {
background: #7ed321; background: #7ed321;
border-top-left-radius: 100px; border-top-left-radius: 100px;
} }
.valid_choice.disagree{
.valid_choice.disagree {
background: #d0021b; background: #d0021b;
border-top-left-radius: 100px; border-top-left-radius: 100px;
} }
.thumb_wrapper { .thumb_wrapper {
text-align:center; text-align: center;
} }
@media screen and (orientation: landscape) { @media screen and (orientation: landscape) {
@@ -109,21 +116,120 @@ a.active_choice{
font-size: 18px; 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%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
/*user status*/ /*user status*/
.menu-bar-item { .menu-bar-item {
background: #000; background: #f0f0f0;
padding: 12px; padding: 12px 15px;
text-align: center; text-align: left;
a { position: relative;
color: #fff!important; .icomoon {
text-decoration: none!important; font-size: 17px;
font-weight: normal; 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;
}

8
templates/mobile/common/menubar.html.twig
View File

@@ -3,13 +3,13 @@
{% if app.getAuthenticator().isAuthenticated() %} {% if app.getAuthenticator().isAuthenticated() %}
<div class="menu-bar-item"> <div class="menu-bar-item">
{% if app.getAuthenticatedUser().isGuest %} {% if app.getAuthenticatedUser().isGuest %}
<span class="icomoon icon-agree">&#xe957;</span> <span class="icomoon icon-agree">&#xe950;</span>
<span>{{ 'Guest' | trans }}</span> <span class="text">{{ 'Guest' | trans }}</span>
{% else %} {% else %}
<a target="_blank" href="{{ path('account') }}" <a target="_blank" href="{{ path('account') }}"
title="{{ 'login:: Mon compte' | trans }}"> title="{{ 'login:: Mon compte' | trans }}">
<span class="icomoon icon-agree">&#xe957;</span> <span class="icomoon icon-agree">&#xe950;</span>
<span>{{ app.getAuthenticatedUser().getDisplayName() }}</span> <span class="text">{{ app.getAuthenticatedUser().getDisplayName() }}</span>
</a> </a>
{% endif %} {% endif %}
</div> </div>

26
templates/mobile/lightbox/index.html.twig
View File

@@ -44,17 +44,17 @@
{% include 'common/menubar.html.twig' %} {% include 'common/menubar.html.twig' %}
</div> </div>
<div data-role="content"> <div data-role="content">
<ul data-role="listview" style="width:100%;margin: 0;"> <ul id="lightbox-menu" data-role="listview" style="width:100%;margin: 0;">
<li> <li class="lightbox-item">
<a href="#validation">{{ 'Validations' | trans }}</a> <a href="#validation">{{ 'Validations' | trans }}</a>
<span class="ui-li-count">{{_self.valid_baskets_length(baskets_collection)}}</span> <span class="ui-li-count">{{_self.valid_baskets_length(baskets_collection)}}</span>
</li> </li>
<li> <li class="lightbox-item">
<a href="#baskets">{{ 'Paniers' | trans }}</a> <a href="#baskets">{{ 'Paniers' | trans }}</a>
<span class="ui-li-count">{{_self.baskets_length(baskets_collection)}}</span> <span class="ui-li-count">{{_self.baskets_length(baskets_collection)}}</span>
</li> </li>
</ul> </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> <a href="{{ path ('logout') }}" data-role="button" rel="external">{{ 'Deconnexion' | trans }}</a>
</div> </div>
</div> </div>
@@ -89,15 +89,19 @@
<div id="validation" data-role="page"> <div id="validation" data-role="page">
<div data-role="header"> <div data-role="header">
<a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a> <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
<h1>{{ 'Validations' | trans }}</h1> <h1>{{ module_name }}</h1>
</div> </div>
<div class="lightbox-user-info"> <div class="lightbox-user-info">
{% include 'common/menubar.html.twig' %} {% include 'common/menubar.html.twig' %}
</div> </div>
<div data-role="content"> <div data-role="content">
<p> <p class="basket-title">
{{ 'Voici vos validations en cours' | trans }} {{ 'Validations' | trans }}
</p> <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;"> <ul data-role="listview" style="width:100%;margin: 0;">
{% for basket in baskets_collection | sort | reverse%} {% for basket in baskets_collection | sort | reverse%}
{% if basket.getValidation() %} {% if basket.getValidation() %}
@@ -122,12 +126,16 @@
<div id="baskets" data-role="page"> <div id="baskets" data-role="page">
<div data-role="header"> <div data-role="header">
<a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a> <a rel="external" href="#home" data-icon="arrow-l">{{ 'Back' | trans }}</a>
<h1>{{ 'Paniers' | trans }}</h1> <h1>{{module_name}}</h1>
</div> </div>
<div class="lightbox-user-info"> <div class="lightbox-user-info">
{% include 'common/menubar.html.twig' %} {% include 'common/menubar.html.twig' %}
</div> </div>
<div data-role="content"> <div data-role="content">
<p class="basket-title">
{{ 'Paniers' | trans }}
<span>{{_self.baskets_length(baskets_collection)}}</span>
</p>
<p> <p>
{{ 'Voici vos paniers' | trans }} {{ 'Voici vos paniers' | trans }}
</p> </p>