[Mapbender-commits] r10356 - in trunk/mapbender: http/css http/plugins resources/db
svn_mapbender at osgeo.org
svn_mapbender at osgeo.org
Mon Nov 25 07:08:50 PST 2019
Author: armin11
Date: 2019-11-25 07:08:43 -0800 (Mon, 25 Nov 2019)
New Revision: 10356
Added:
trunk/mapbender/resources/db/module_metadataCarousel.sql
Modified:
trunk/mapbender/http/css/tiny-slider-demo-style.css
trunk/mapbender/http/css/tiny-slider-mapbender.css
trunk/mapbender/http/plugins/mod_metadataCarouselTinySlider.php
Log:
Optimize metadataCarousel layout - add responsiveness - thanx to karlo ;-)
Modified: trunk/mapbender/http/css/tiny-slider-demo-style.css
===================================================================
--- trunk/mapbender/http/css/tiny-slider-demo-style.css 2019-11-25 13:41:43 UTC (rev 10355)
+++ trunk/mapbender/http/css/tiny-slider-demo-style.css 2019-11-25 15:08:43 UTC (rev 10356)
@@ -1,24 +1,24 @@
-body { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; margin: 0; padding: 0; }
-li { list-style: none; }
-ul, ol, li { margin: 0; padding: 0; }
+#metadataCarouselTinySlider li { list-style: none; }
+#metadataCarouselTinySlider ul, ol, li { margin: 0; padding: 0; }
/*.container {
max-width: 900px;
margin: 0 auto;
}*/
pre[class*="language-"] > code[data-language] { overflow: auto !important; }
-section { margin: 50px 0; }
-h1 { font-size: 45px; }
-h2 {
+#metadataCarouselTinySlider section { margin: 50px 0; }
+#metadataCarouselTinySlider h1 { font-size: 45px; }
+#metadataCarouselTinySlider h2 {
padding-top: 60px;
text-align: center;
+ display: none;
}
@media (min-width: 300px) and (max-width: 799px) {
- h2 { padding-top: 20%; }
+ #metadataCarouselTinySlider h2 { padding-top: 20%; }
}
@media (min-width: 800px) {
- h2 { padding-top: 160px; }
+ #metadataCarouselTinySlider h2 { padding-top: 160px; }
}
-p {
+#metadataCarouselTinySlider p {
margin: 0;
padding: 0.8em 0;
line-height: 1.4;
@@ -25,26 +25,26 @@
font-weight: 300;
text-align: center;
}
-a:focus {
+#metadataCarouselTinySlider a:focus {
outline: 1px solid red;
}
/*img { max-width: 100%; }
-img:not(.tns-lazy-img), .lazyload img { height: auto; }
-.autoWidth img { max-width: none; }
-.autoHeight img { width: 100%; }
-.img {
+#metadataCarouselTinySlider img:not(.tns-lazy-img), .lazyload img { height: auto; }
+#metadataCarouselTinySlider .autoWidth img { max-width: none; }
+#metadataCarouselTinySlider .autoHeight img { width: 100%; }
+#metadataCarouselTinySlider .img {
font-size: 100px;
font-weight: 100;
color: #fff;
text-align: center;
}*/
-.img a {
+#metadataCarouselTinySlider .img a {
display: block;
padding: 22% 0;
color: inherit;
text-decoration: none;
}
-.visually-hidden {
+#metadataCarouselTinySlider .visually-hidden {
position: fixed;
left: -10000px;
opacity: 0;
@@ -145,7 +145,7 @@
.controls li:hover { background: #f2f2f2; }
.tns-controls { text-align: center; margin-bottom: 10px; }
-.tns-controls [aria-controls] {
+/*.tns-controls [aria-controls] {
font-size: 15px;
margin: 0 5px;
padding: 0 1em;
@@ -154,7 +154,7 @@
background: #66CCFF;
border-radius: 3px;
border: 0;
-}
+}*/
.lt-ie9 .tns-controls > [aria-controls] {
line-height: 2.5em;
}
@@ -168,19 +168,20 @@
border: 0;
}
.tns-controls [disabled] {
- color: #999999;
+ color: #ccc;
background: #B3B3B3;
cursor: not-allowed !important;
+ border: 2px solid transparent;
}
.tns-nav {
text-align: center;
- margin: 10px 0;
+ margin: -10px 0 10px 0;
}
.tns-nav > [aria-controls] {
- width: 9px;
- height: 9px;
+ width: 12px;
+ height: 12px;
padding: 0;
- margin: 0 5px;
+ margin: 3px;
border-radius: 50%;
background: #ddd;
border: 0;
Modified: trunk/mapbender/http/css/tiny-slider-mapbender.css
===================================================================
--- trunk/mapbender/http/css/tiny-slider-mapbender.css 2019-11-25 13:41:43 UTC (rev 10355)
+++ trunk/mapbender/http/css/tiny-slider-mapbender.css 2019-11-25 15:08:43 UTC (rev 10356)
@@ -1,13 +1,13 @@
-body {
+/*body {
background: #333;
color: white;
-}
+}*/
.slider-container {
- max-width: 600px;
-/*max-width: 1000px*/
- /*padding: 2rem 3rem;*/
+ /*max-width: 600px;*/
+ /*max-width: 1000px*/
+ padding: 0rem 4rem;
/*background: #e6e6e6;*/
- margin: 2rem auto 0 auto;
+ /*margin: 2rem auto 0 auto;*/
overflow: hidden;
border-radius: 5px;
position:relative;
@@ -31,8 +31,7 @@
padding: 0;
font-size: 30px;
position: absolute;
- top: 50%;
- margin-top: -18px;
+ top: 60px;
z-index: 10000;
background: transparent;
}
@@ -61,7 +60,7 @@
.slider-item {
background: transparent;
/*border-right: 2px solid #333;*/
- padding: 1.5rem .75rem;
+ /*padding: 1.5rem .75rem;*/
position: relative;
/*new*/
height: 150px;
@@ -78,6 +77,10 @@
}
}
+#customize-controls {
+display:none;
+}
+
.controls {
margin: 0;
padding: 0;
@@ -92,15 +95,10 @@
display: flex;
align-items: center;
justify-content: space-between;
- &:focus {
- outline: none;
- }
+}
- li:hover {
- cursor: pointer;
- }
-}
+
.card {
text-align: center;
margin: 0 auto;
@@ -108,8 +106,8 @@
/*max-width: 200px; */
color: #333;
background: white;
- border-radius: 5px;
- padding-bottom: .75rem;
+ /*border-radius: 5px;*/
+ /* padding-bottom: .75rem;*/
font-family: sans-serif;
overflow: hidden;
box-shadow: 2px 2px rgba(black, .3);
@@ -133,7 +131,7 @@
/*new*/
font-size: 10px;
margin: 0;
- padding: 0 .5rem;
+ /*padding: 0 .5rem;*/
}
}
.card > img {
@@ -145,9 +143,9 @@
height: 24px !important;
width: 24px !important;
position: absolute;
- top: 0;
- right: 0;
-
+ top: 5px;
+ right: 3px;
+ cursor: pointer;
}
.tns-item {
@@ -159,19 +157,35 @@
}
.tns-controls [aria-controls] {
- background: #e2e2e2 !important;
+ background: #EEE !important;
+ padding: 8px;
+ border: 2px solid #DDD;
+ border-radius: 5px;
}
+.tns-controls [aria-controls]:hover {
+ border: 2px solid #333;
+}
+.tns-controls [disabled]:hover {
+ border: 2px solid transparent;
+}
+
+.tns-visual-hidden{
+display:none;
+}
+
/*Caption Text*/
.slider-item .card .load-count {
/*bottom: 110px;*/
color: black;
font-weight: bold;
- /*font-size: 16px;*/
+ /*font-size: 16px;
text-shadow: 1px 1px 2px white, 0 0 1em black, 0 0 0.2em black;
- /*line-height: 0px;*/
- /*padding:0 120px;*/
+ line-height: 0px;
+ padding:0 120px;*/
position: absolute;
text-transform: uppercase;
- z-index:100;
+ /*z-index:100;*/
+ top: 5px;
+ left: 5px;
}
Modified: trunk/mapbender/http/plugins/mod_metadataCarouselTinySlider.php
===================================================================
--- trunk/mapbender/http/plugins/mod_metadataCarouselTinySlider.php 2019-11-25 13:41:43 UTC (rev 10355)
+++ trunk/mapbender/http/plugins/mod_metadataCarouselTinySlider.php 2019-11-25 15:08:43 UTC (rev 10356)
@@ -15,7 +15,7 @@
* - http/plugins/mod_metadataCarouselTinySlider.php
*
* SQL:
- *
+ * resources/db/module_metadataCarousel.sql
*
* License:
* Copyright (c) 2009, Open Source Geospatial Foundation
@@ -233,7 +233,7 @@
this.addElementToSlider = function(item) {
that.mainSlider.destroy();
- $("div.my-slider").append('<div class="slider-item" resourceId="'+item.id+'" title="' + item.title + ' - ' + item.abstract + '"><div class="card"><span class="load-count">'+item.loadCount+'</span><img class="load_image" src="../img/osgeo_graphics/document-send-symbolic.symbolic.png" title="Load" resourceId="'+item.id+'" resourceTitle="'+item.title+'"><img src="'+item.previewURL+'" alt=""><h2>'+item.id+'</h2></div></div>');
+ $("div.my-slider").append('<div class="slider-item" resourceId="'+item.id+'" title="' + item.title + ' - ' + item.abstract + '"><div class="card"><span class="load-count">'+item.loadCount+'</span><img class="load_image" src="../img/osgeo_graphics/document-send-symbolic.symbolic.png" title="Load" resourceId="'+item.id+'" resourceTitle="'+item.title+'"><img src="'+item.previewURL+'" alt=""></div></div>');
$(".dummy").remove();
that.mainSlider = that.mainSlider.rebuild();
//add events again!
Added: trunk/mapbender/resources/db/module_metadataCarousel.sql
===================================================================
--- trunk/mapbender/resources/db/module_metadataCarousel.sql (rev 0)
+++ trunk/mapbender/resources/db/module_metadataCarousel.sql 2019-11-25 15:08:43 UTC (rev 10356)
@@ -0,0 +1,114 @@
+INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment, e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height, e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod, e_target, e_requires, e_url) VALUES('<app_id>','metadataCarouselTinySlider',10,1,'','Metadata carousel','div','','',NULL ,NULL ,586,180,4000,'box-sizing: border-box;','','','../plugins/mod_metadataCarouselTinySlider.php','','','','');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'allowResize', 'true', 'This element var defines if the viewer should extent wmc to viewer screen size' ,'var');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'css_file_metadata_carousel_mb', '../css/tiny-slider-mapbender.css', '' ,'file/css');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'css_file_metadata_carousel_tinyslider', '../extensions/tiny-slider-master/dist/tiny-slider.css', '' ,'file/css');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'css_file_metadata_carousel_tinyslider_demo', '../css/tiny-slider-demo-style.css', '' ,'file/css');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'css_file_metadata_carousel_tinyslider_prism', '../extensions/tiny-slider-master/demo/css/prism.css', '' ,'file/css');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'maxResults', '5', '' ,'var');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'resourceFilter', '[]', 'array of ids to restrict the metadata resources ' ,'var');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'searchUrl', '../php/mod_callMetadata.php?', '' ,'var');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'metadataCarouselTinySlider', 'slidesPerSide', '3', '' ,'var');
+
+INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment, e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height, e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod, e_target, e_requires, e_url) VALUES('<app_id>','tinySliderModule',12,1,'','','','','',NULL ,NULL ,NULL ,NULL ,NULL ,'','','','','../extensions/tiny-slider-master/dist/min/tiny-slider.js','','','');
+
+INSERT INTO gui_element(fkey_gui_id, e_id, e_pos, e_public, e_comment, e_title, e_element, e_src, e_attributes, e_left, e_top, e_width, e_height, e_z_index, e_more_styles, e_content, e_closetag, e_js_file, e_mb_mod, e_target, e_requires, e_url) VALUES('<app_id>','carouselDiv',5,1,'','Maßstab','div','','',NULL ,NULL ,NULL ,NULL ,99,'','<div id="carouselDiv_btn">
+<svg style=''transform:rotate(0deg);margin: 0 auto;width: 100%;'' width="17" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.0142 11.6191L14.6042 13.0291L9.01416 7.43914L3.42416 13.0291L2.01416 11.6191L9.01416 4.61914L16.0142 11.6191Z" stroke="currentColor" stroke-width="2"/>
+</svg><p class=''carouselDiv_btn_name''>Karten entdecken?</p></div>','div','../plugins/mb_carouselContainer.js','','metadataCarouselTinySlider','','');
+INSERT INTO gui_element_vars(fkey_gui_id, fkey_e_id, var_name, var_value, context, var_type) VALUES('<app_id>', 'carouselDiv', 'css', '/* INSERT carouselDiv -> elementVar -> css(text/css) */
+
+#carouselDiv_btn{
+position:absolute;
+bottom:0px;
+background-color:rgba(255,255,255,1);
+font-family: Helvetica,Roboto,Arial,sans-serif;
+color: #777;
+font-style: normal;
+font-weight: 700;
+letter-spacing: 1px;
+padding:5px 20px;
+border-top: 2px solid #DDD;
+border-left: 2px solid #DDD;
+border-right: 2px solid #DDD;
+box-sizing: border-box;
+}
+#carouselDiv_btn:hover{
+cursor: pointer;
+color: #333;
+
+}
+#carouselDiv_btn p{
+margin:0;
+padding:0;
+text-align:center;
+}
+.carouselDiv_btn_Opened svg{
+transform: rotate(-180deg) !important;
+}
+
+#carouselContainer{
+display:none;
+margin:0;
+padding:0;
+list-style-type: none;
+float:left;
+position: absolute;
+bottom: 20px;
+overflow:hidden;
+}
+
+#carouselDiv{
+width: 100vw;
+height: 20px;
+position: fixed;
+bottom: 0;
+display: flex;
+flex-direction: row;
+justify-content: center;
+}
+
+.carouselDiv_btn_Opened {
+bottom: 20px !important;
+border-bottom: 2px solid #DDD;
+padding: 5px !important;
+}
+
+.tns-liveregion {display:none;}
+
+ at media (max-width: 942px) {
+#carouselContainer{
+width: calc(100vw - 50px);
+max-width: 630px;
+height: 164px;
+}
+
+.carouselDiv_btn_Opened {
+width: calc(100vw - 54px) !important;
+max-width: 630px;
+height: 194px;
+}
+
+}
+
+ at media (min-width: 943px) {
+
+#carouselContainer{
+width: calc(100vw - 477px);
+min-width: 630px;
+max-width: 630px;
+
+height: 164px;
+}
+
+.carouselDiv_btn_Opened {
+min-width: 630px;
+max-width: 630px;
+/*width: calc(100vw - 477px) !important;*/
+height: 194px;
+}
+}
+
+/* END INSERT carouselDiv -> elementVar -> css(text/css) */
+', '' ,'text/css');
+
+
More information about the Mapbender_commits
mailing list