| author | Thierry Florac <thierry.florac@onf.fr> |
| Fri, 16 Nov 2018 08:24:37 +0100 | |
| changeset 222 | fa1df486025b |
| parent 221 | 52c1c11d0a0f |
| child 223 | 615c0a774971 |
--- a/src/pyams_default_theme/component/gallery/__init__.py Fri Nov 16 08:24:17 2018 +0100 +++ b/src/pyams_default_theme/component/gallery/__init__.py Fri Nov 16 08:24:37 2018 +0100 @@ -31,5 +31,14 @@ class DefaultGalleryRenderer(BaseGalleryRenderer): """Default gallery renderer""" - label = _("Default gallery renderer") + label = _("Default grid gallery renderer") weight = 1 + + +@adapter_config(name='carousel-sm', context=(IBaseGallery, IPyAMSLayer), provides=IContentRenderer) +@template_config(template='templates/renderer-carousel.pt', layer=IPyAMSLayer) +class CarouselGalleryRenderer(BaseGalleryRenderer): + """Carousel gallery renderer""" + + label = _("Carousel gallery renderer") + weight = 2
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/pyams_default_theme/component/gallery/templates/renderer-carousel.pt Fri Nov 16 08:24:37 2018 +0100 @@ -0,0 +1,37 @@ +<div tal:define="cache_key tales:cache_key(context)" + i18n:domain="pyams_default_theme" + id="carousel-${cache_key}" + class="carousel slide col-lg-8 col-md-8 col-lg-offset-2 col-md-offset-2" data-ride="carousel"> + <!-- Indicators --> + <ol class="carousel-indicators"> + <li tal:repeat="image context.get_visible_medias()" + class="${'active' if repeat.image.start() else None}" + data-target="#carousel-${cache_key}" + data-slide-to="${repeat.image.index}"></li> + </ol> + <!-- Wrapper for slides --> + <div class="carousel-inner" role="listbox"> + <div tal:repeat="image context.get_visible_medias()" + class="item ${'active' if repeat.image.start() else None}"> + <tal:var define="image_data i18n:image.data; + alt i18n:image.title;"> + ${structure:tales:picture(image_data, alt=alt)} + </tal:var> + <div class="carousel-caption"> + <h3>${i18n:image.title}</h3> + <p tal:define="description i18n:image.description"> + ${structure:tales:html(description)} + </p> + </div> + </div> + </div> + <!-- Controls --> + <a class="left carousel-control" href="#carousel-${cache_key}" role="button" data-slide="prev"> + <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> + <span class="sr-only" i18n:translate="">Previous</span> + </a> + <a class="right carousel-control" href="#carousel-${cache_key}" role="button" data-slide="next"> + <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> + <span class="sr-only" i18n:translate="">Next</span> + </a> +</div>
--- a/src/pyams_default_theme/component/gallery/templates/renderer-default.pt Fri Nov 16 08:24:17 2018 +0100 +++ b/src/pyams_default_theme/component/gallery/templates/renderer-default.pt Fri Nov 16 08:24:37 2018 +0100 @@ -1,23 +1,15 @@ -<div i18n:domain="pyams_content"> - <tal:loop repeat="image context.get_visible_medias()"> - <picture tal:define="image_data i18n:image.data; - image_url tales:absolute_url(image_data); - timestamp tales:timestamp(image);"> - <!-- xs source --> - <source media="(max-width: 767px)" - srcset="${image_url}/++thumb++w768?_=${timestamp}" /> - <!-- sm source --> - <source media="(max-width: 991px)" - srcset="${image_url}/++thumb++w992?_=${timestamp}" /> - <!-- md source --> - <source media="(max-width: 1199px)" - srcset="${image_url}/++thumb++w1200?_=${timestamp}" /> - <!-- lg source --> - <source media="(min-width: 1200px)" - srcset="${image_url}/++thumb++w1600?_=${timestamp}" /> - <!-- fallback image --> - <img style="width: 100%;" - tal:attributes="alt i18n:image.alt_title; src image_url" /> - </picture> - </tal:loop> +<div tal:define="cache_key tales:cache_key(context)" + i18n:domain="pyams_default_theme" + id="carousel-${cache_key}" + class="gallery gallery-grid" data-ride="carousel"> + <div tal:repeat="image context.get_visible_medias()" + class="item col-lg-3 col-md-4 col-sm-4 col-xs-6"> + <div class="legend">${i18n:image.title}</div> + <tal:var define="image_data i18n:image.data; + alt i18n:image.title;"> + ${structure:tales:picture(image_data, lg_width=3, md_width=4, sm_width=4, + xs_width=6, css_class='img_responsive', alt=alt)} + </tal:var> + <div class="author">${i18n:image.author}</div> + </div> </div>
--- a/src/pyams_default_theme/resources/css/pyams-default.css Fri Nov 16 08:24:17 2018 +0100 +++ b/src/pyams_default_theme/resources/css/pyams-default.css Fri Nov 16 08:24:37 2018 +0100 @@ -1,5 +1,5 @@ body { - font-family: "Advent Pro", Helvetica, Arial, sans-serif; + font-family: Lato, Helvetica, Arial, sans-serif; margin: 0 auto; } body .header-simple .regularbanner { @@ -16,6 +16,45 @@ left: 10px; max-height: calc(80%); } +body .affix { + top: 0; + width: 100%; + z-index: 9999 !important; + opacity: 0.95; + transition: all 0.5s ease-in-out; +} +body .affix ~ .container-fluid { + position: relative; + top: 50px; +} +body .navbar { + margin-bottom: 20px; + background-color: white; + border: 1px solid #39413b; + font-family: Oswald, Helvetica, Arial, Sans-Serif; + transition: all 0.5s ease-in-out; +} +body .navbar a, +body .navbar a:active, +body .navbar a:visited { + color: #39413b; +} +body .navbar li.active, +body .navbar .icon-bar { + background-color: #a5bcaa; +} +body .navbar.affix { + background-color: #39413b; +} +body .navbar.affix a { + color: white; +} +body .navbar.affix:hover a:hover { + color: #39413b; +} +body .navbar.affix .icon-bar { + background-color: white; +} h1, h2, h3, @@ -50,4 +89,29 @@ .margin-bottom-20 { margin-bottom: 20px; } +/** + * Images gallery + */ +.gallery { + display: flex; + flex-wrap: wrap; +} +.gallery .legend { + margin-bottom: 0.2em; +} +.gallery img { + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.75); + margin-bottom: 5px; + filter: grayscale(); + transition: all ease-in-out 0.5s; +} +.gallery img:hover { + filter: none; +} +.gallery .author { + margin-bottom: 15px; + text-align: right; + font-style: italic; + font-size: 0.8em; +} /*# sourceMappingURL=pyams-default.css.map */ \ No newline at end of file
--- a/src/pyams_default_theme/resources/css/pyams-default.css.map Fri Nov 16 08:24:17 2018 +0100 +++ b/src/pyams_default_theme/resources/css/pyams-default.css.map Fri Nov 16 08:24:37 2018 +0100 @@ -1,1 +1,1 @@ -{"version":3,"sources":["../../../../../../../../../home/tflorac/Dropbox/src/PyAMS/pyams_default_theme/src/pyams_default_theme/resources/less/pyams-default.less"],"names":[],"mappings":"AACA;EACC,aAAa,0CAAb;EACA,cAAA;;AAFD,IAIC,eACC;EACC,kBAAA;;AAIC,IANH,eACC,eAGC,QAEE;AAAD,IANH,eACC,eAIC,IACE;EACA,WAAA;;AAED,IATH,eACC,eAGC,QAKE;AAAD,IATH,eACC,eAIC,IAIE;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,YAAY,SAAZ;;AAOL;AACA;AACA;AACA;AACA;AACA;EACC,iDAAA;;AAKC,wBAA2C;EAC1C,YAFF,MAEG;IACA,aAAA;;;AAGF,wBAA0C,uBAAwB;EACjE,YAPF,MAOG;IACA,aAAA;;;AAGF,wBAA0C,uBAAuB;EAChE,YAZF,MAYG;IACA,aAAA;;;AAGF,wBAA0C;EACzC,YAjBF,MAiBG;IACA,aAAA;;;AAQH,cAAC;EACA,mBAAA;;AAED,cAAC;EACA,mBAAA","file":"pyams-default.css"} \ No newline at end of file +{"version":3,"sources":["../../../../../../../../../home/tflorac/Dropbox/src/PyAMS/pyams_default_theme/src/pyams_default_theme/resources/less/pyams-default.less"],"names":[],"mappings":"AACA;EACC,+CAAA;EACA,cAAA;;AAFD,IAIC,eACC;EACC,kBAAA;;AAIC,IANH,eACC,eAGC,QAEE;AAAD,IANH,eACC,eAIC,IACE;EACA,WAAA;;AAED,IATH,eACC,eAGC,QAKE;AAAD,IATH,eACC,eAIC,IAIE;EACA,kBAAA;EACA,SAAA;EACA,UAAA;EACA,YAAY,SAAZ;;AAjBL,IAsBC;EACC,MAAA;EACA,WAAA;EACA,wBAAA;EACA,aAAA;EACA,gCAAA;;AA3BF,IA6BC,OAAO;EACN,kBAAA;EACA,SAAA;;AA/BF,IAiCC;EACC,mBAAA;EACA,uBAAA;EACA,yBAAA;EACA,iDAAA;EACA,gCAAA;;AAtCF,IAiCC,QAOC;AAxCF,IAiCC,QAQC,EAAC;AAzCH,IAiCC,QASC,EAAC;EACA,cAAA;;AA3CH,IAiCC,QAYC,GAAE;AA7CJ,IAiCC,QAaC;EACC,yBAAA;;AAED,IAhBD,QAgBE;EACA,yBAAA;;AADD,IAhBD,QAgBE,MAGA;EACC,YAAA;;AAED,IAtBF,QAgBE,MAMC,MACA,EAAC;EACA,cAAA;;AARH,IAhBD,QAgBE,MAWA;EACC,uBAAA;;AAMJ;AACA;AACA;AACA;AACA;AACA;EACC,iDAAA;;AAKC,wBAA2C;EAC1C,YAFF,MAEG;IACA,aAAA;;;AAGF,wBAA0C,uBAAwB;EACjE,YAPF,MAOG;IACA,aAAA;;;AAGF,wBAA0C,uBAAuB;EAChE,YAZF,MAYG;IACA,aAAA;;;AAGF,wBAA0C;EACzC,YAjBF,MAiBG;IACA,aAAA;;;AAQH,cAAC;EACA,mBAAA;;AAED,cAAC;EACA,mBAAA;;;;;AASF;EACC,aAAA;EACA,eAAA;;AAFD,QAIC;EACC,oBAAA;;AALF,QAOC;EACC,6CAAA;EACG,kBAAA;EACH,QAAQ,WAAR;EACA,gCAAA;;AAEA,QAND,IAME;EACA,YAAA;;AAdH,QAiBC;EACC,mBAAA;EACA,iBAAA;EACA,kBAAA;EACA,gBAAA","file":"pyams-default.css"} \ No newline at end of file
--- a/src/pyams_default_theme/resources/css/pyams-default.min.css Fri Nov 16 08:24:17 2018 +0100 +++ b/src/pyams_default_theme/resources/css/pyams-default.min.css Fri Nov 16 08:24:37 2018 +0100 @@ -1,1 +1,1 @@ -body{font-family:"Advent Pro",Helvetica,Arial,sans-serif;margin:0 auto}body .header-simple .regularbanner{position:relative}body .header-simple .regularbanner img.regularbanner__media,body .header-simple .regularbanner picture.regularbanner__media{width:100%}body .header-simple .regularbanner img.logo,body .header-simple .regularbanner picture.logo{position:absolute;top:10px;left:10px;max-height:calc(80%)}h1,h2,h3,h4,h5,h6{font-family:Oswald,Helvetica,Arial,Sans-Serif}@media only screen and (min-width:1200px){.portal-page .slot.col-lg-0{display:none}}@media only screen and (min-width:992px) and (max-width:1199px){.portal-page .slot.col-md-0{display:none}}@media only screen and (min-width:768px) and (max-width:991px){.portal-page .slot.col-sm-0{display:none}}@media only screen and (max-width:767px){.portal-page .slot.col-xs-0{display:none}}.margin-bottom-10{margin-bottom:10px}.margin-bottom-20{margin-bottom:20px} +body{font-family:Lato,Helvetica,Arial,sans-serif;margin:0 auto}body .header-simple .regularbanner{position:relative}body .header-simple .regularbanner img.regularbanner__media,body .header-simple .regularbanner picture.regularbanner__media{width:100%}body .header-simple .regularbanner img.logo,body .header-simple .regularbanner picture.logo{position:absolute;top:10px;left:10px;max-height:calc(80%)}body .affix{top:0;width:100%;z-index:9999!important;opacity:.95;transition:all .5s ease-in-out}body .affix~.container-fluid{position:relative;top:50px}body .navbar{margin-bottom:20px;background-color:#fff;border:1px solid #39413b;font-family:Oswald,Helvetica,Arial,Sans-Serif;transition:all .5s ease-in-out}body .navbar a,body .navbar a:active,body .navbar a:visited{color:#39413b}body .navbar .icon-bar,body .navbar li.active{background-color:#a5bcaa}body .navbar.affix{background-color:#39413b}body .navbar.affix a{color:#fff}body .navbar.affix:hover a:hover{color:#39413b}body .navbar.affix .icon-bar{background-color:#fff}h1,h2,h3,h4,h5,h6{font-family:Oswald,Helvetica,Arial,Sans-Serif}@media only screen and (min-width:1200px){.portal-page .slot.col-lg-0{display:none}}@media only screen and (min-width:992px) and (max-width:1199px){.portal-page .slot.col-md-0{display:none}}@media only screen and (min-width:768px) and (max-width:991px){.portal-page .slot.col-sm-0{display:none}}@media only screen and (max-width:767px){.portal-page .slot.col-xs-0{display:none}}.margin-bottom-10{margin-bottom:10px}.margin-bottom-20{margin-bottom:20px}.gallery{display:flex;flex-wrap:wrap}.gallery .legend{margin-bottom:.2em}.gallery img{box-shadow:0 2px 6px 2px rgba(0,0,0,.75);margin-bottom:5px;filter:grayscale();transition:all ease-in-out .5s}.gallery img:hover{filter:none}.gallery .author{margin-bottom:15px;text-align:right;font-style:italic;font-size:.8em}
--- a/src/pyams_default_theme/resources/less/pyams-default.less Fri Nov 16 08:24:17 2018 +0100 +++ b/src/pyams_default_theme/resources/less/pyams-default.less Fri Nov 16 08:24:37 2018 +0100 @@ -1,6 +1,6 @@ body { - font-family: "Advent Pro", Helvetica, Arial, sans-serif; + font-family: Lato, Helvetica, Arial, sans-serif; margin: 0 auto; .header-simple { @@ -21,6 +21,49 @@ } } } + .affix { + top: 0; + width: 100%; + z-index: 9999 !important; + opacity: 0.95; + transition: all .5s ease-in-out; + } + .affix ~ .container-fluid { + position: relative; + top: 50px; + } + .navbar { + margin-bottom: 20px; + background-color: white; + border: 1px solid #39413b; + font-family: Oswald, Helvetica, Arial, Sans-Serif; + transition: all .5s ease-in-out; + + a, + a:active, + a:visited { + color: #39413b; + } + li.active, + .icon-bar { + background-color: #a5bcaa; + } + &.affix { + background-color: #39413b; + + a { + color: white; + } + &:hover { + a:hover { + color: #39413b; + } + } + .icon-bar { + background-color: white; + } + } + } } h1, @@ -66,3 +109,33 @@ margin-bottom: 20px; } } + + +/** + * Images gallery + */ + +.gallery { + display: flex; + flex-wrap: wrap; + + .legend { + margin-bottom: 0.2em; + } + img { + box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.75); + margin-bottom: 5px; + filter: grayscale(); + transition: all ease-in-out 0.5s; + + &:hover { + filter: none; + } + } + .author { + margin-bottom: 15px; + text-align: right; + font-style: italic; + font-size: 0.8em; + } +} \ No newline at end of file