Added responsive classes to location and area input widgets
authorThierry Florac <thierry.florac@onf.fr>
Thu, 15 Feb 2018 16:35:05 +0100
changeset 26 bda2fd13a832
parent 25 ee893d457cdb
child 27 70e485fd1d84
Added responsive classes to location and area input widgets
src/pyams_gis/widget/templates/geoarea-input.pt
src/pyams_gis/widget/templates/geopoint-input.pt
--- a/src/pyams_gis/widget/templates/geoarea-input.pt	Wed Jan 31 17:26:58 2018 +0100
+++ b/src/pyams_gis/widget/templates/geoarea-input.pt	Thu Feb 15 16:35:05 2018 +0100
@@ -5,48 +5,51 @@
 		tal:attributes="class view/fieldset_class | default;
 						data-ams-plugin-pyams_gis-src extension:resource_path('pyams_gis:pyams_gis')"
 		data-ams-plugin-pyams_gis-async="false">
-		<button class="btn pull-right" tal:attributes="href string:#modal_dialog_${name}"
-			data-ams-click-handler="PyAMS_GIS.area.clear">
-			<i class="fa fa-fw fa-lg fa-trash hint opaque align-base"
-			   data-ams-hint-gravity="se" data-ams-hint-offset="10"
-			   title="Remove area settings" i18n:attributes="title"></i>
-		</button>
-		<button class="btn pull-right" tal:attributes="href string:#modal_dialog_${name}" data-toggle="modal">
-			<i class="fa fa-fw fa-lg fa-map-marker hint opaque align-base"
-			   data-ams-hint-gravity="se" data-ams-hint-offset="10"
-			   title="Select area from map" i18n:attributes="title"></i>
-		</button>
-		<div id="modal_dialog" class="modal fade"
-			 tal:attributes="id string:modal_dialog_${name}"
-			 data-ams-events-handlers='{"show.bs.modal": "PyAMS_GIS.area.init"}'>
-			<div class="modal-dialog modal-max">
-				<div class="modal-content">
-					<div class="modal-header">
-						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
-							<i class="fa fa-fw fa-times-circle"></i>
-						</button>
-						<h3 class="modal-title">
-							<span class="title" i18n:translate="">Select map area</span>
-						</h3>
-					</div>
-					<div class="ams-form">
-						<div class="modal-body">
-							<div class="map-header"
-								 tal:define="header provider:pyams_gis.map.header"
-								 tal:condition="header"
-								 tal:content="structure header"></div>
-							<div class="map" id="map_area" style="width: 100%; height: 600px;"
-								 data-map-leaflet-fieldname="fieldname"
-								 tal:attributes="id string:map_area_${name};
-												 data-map-leaflet-fieldname view/name;"></div>
+		<div class="col-md-7 pull-right">
+			<button class="btn pull-right" tal:attributes="href string:#modal_dialog_${name}"
+				data-ams-click-handler="PyAMS_GIS.area.clear">
+				<i class="fa fa-fw fa-lg fa-trash hint opaque align-base"
+				   data-ams-hint-gravity="se" data-ams-hint-offset="10"
+				   title="Remove area settings" i18n:attributes="title"></i>
+			</button>
+			<button class="btn pull-right" tal:attributes="href string:#modal_dialog_${name}" data-toggle="modal">
+				<i class="fa fa-fw fa-lg fa-map-marker hint opaque align-base"
+				   data-ams-hint-gravity="se" data-ams-hint-offset="10"
+				   title="Select area from map" i18n:attributes="title"></i>
+			</button>
+			<div id="modal_dialog" class="modal fade"
+				 tal:attributes="id string:modal_dialog_${name}"
+				 data-ams-events-handlers='{"show.bs.modal": "PyAMS_GIS.area.init"}'>
+				<div class="modal-dialog modal-max">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+								<i class="fa fa-fw fa-times-circle"></i>
+							</button>
+							<h3 class="modal-title">
+								<span class="title" i18n:translate="">Select map area</span>
+							</h3>
 						</div>
-						<footer>
-							<button type="button" class="btn btn-primary close-widget" data-dismiss="modal">OK</button>
-						</footer>
+						<div class="ams-form">
+							<div class="modal-body">
+								<div class="map-header"
+									 tal:define="header provider:pyams_gis.map.header"
+									 tal:condition="header"
+									 tal:content="structure header"></div>
+								<div class="map" id="map_area" style="width: 100%; height: 600px;"
+									 data-map-leaflet-fieldname="fieldname"
+									 tal:attributes="id string:map_area_${name};
+													 data-map-leaflet-fieldname view/name;"></div>
+							</div>
+							<footer>
+								<button type="button" class="btn btn-primary close-widget" data-dismiss="modal">OK</button>
+							</footer>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
+		<div class="clearfix-xs clearfix-sm"></div>
 		<tal:loop repeat="widget view/subform/widgets/values">
 			<input type="hidden"
 				   tal:condition="python:widget.mode == 'hidden'"
--- a/src/pyams_gis/widget/templates/geopoint-input.pt	Wed Jan 31 17:26:58 2018 +0100
+++ b/src/pyams_gis/widget/templates/geopoint-input.pt	Thu Feb 15 16:35:05 2018 +0100
@@ -5,50 +5,53 @@
 		tal:attributes="class view/fieldset_class | default;
 						data-ams-plugin-pyams_gis-src extension:resource_path('pyams_gis:pyams_gis');"
 		data-ams-plugin-pyams_gis-async="false">
-		<button class="btn pull-right" tal:attributes="href string:#modal_dialog_${name}"
-			data-ams-click-handler="PyAMS_GIS.position.clear">
-			<i class="fa fa-fw fa-lg fa-trash hint opaque align-base"
-			   data-ams-hint-gravity="se" data-ams-hint-offset="10"
-			   title="Remove position settings" i18n:attributes="title"></i>
-		</button>
-		<button class="btn pull-right" tal:attributes="href string:#modal_dialog_${name}" data-toggle="modal">
-			<i class="fa fa-fw fa-lg fa-map-marker hint opaque align-base"
-			   data-ams-hint-gravity="se" data-ams-hint-offset="10"
-			   title="Select location from map" i18n:attributes="title"></i>
-		</button>
-		<div id="modal_dialog" class="modal fade"
-			 tal:attributes="id string:modal_dialog_${name}"
-			 data-ams-events-handlers='{"show.bs.modal": "PyAMS_GIS.position.init"}'>
-			<div class="modal-dialog modal-max">
-				<div class="modal-content">
-					<div class="modal-header">
-						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
-							<i class="fa fa-fw fa-times-circle"></i>
-						</button>
-						<h3 class="modal-title">
-							<span class="title" i18n:translate="">Select marker position</span>
-						</h3>
-					</div>
-					<div class="ams-form">
-						<div class="modal-body">
-							<div class="map-header"
-								 tal:define="header provider:pyams_gis.map.header"
-								 tal:condition="header"
-								 tal:content="structure header"></div>
-							<div class="map" id="map_location" style="width: 100%; height: 600px;"
-								 data-map-leaflet-fieldname="fieldname"
-								 tal:attributes="id string:map_location_${name};
-												 data-map-leaflet-fieldname view/name;"></div>
+		<div class="col-md-7 pull-right">
+			<button class="btn" tal:attributes="href string:#modal_dialog_${name}"
+				data-ams-click-handler="PyAMS_GIS.position.clear">
+				<i class="fa fa-fw fa-lg fa-trash hint opaque align-base"
+				   data-ams-hint-gravity="se" data-ams-hint-offset="10"
+				   title="Remove position settings" i18n:attributes="title"></i>
+			</button>
+			<button class="btn" tal:attributes="href string:#modal_dialog_${name}" data-toggle="modal">
+				<i class="fa fa-fw fa-lg fa-map-marker hint opaque align-base"
+				   data-ams-hint-gravity="se" data-ams-hint-offset="10"
+				   title="Select location from map" i18n:attributes="title"></i>
+			</button>
+			<div id="modal_dialog" class="modal fade"
+				 tal:attributes="id string:modal_dialog_${name}"
+				 data-ams-events-handlers='{"show.bs.modal": "PyAMS_GIS.position.init"}'>
+				<div class="modal-dialog modal-max">
+					<div class="modal-content">
+						<div class="modal-header">
+							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+								<i class="fa fa-fw fa-times-circle"></i>
+							</button>
+							<h3 class="modal-title">
+								<span class="title" i18n:translate="">Select marker position</span>
+							</h3>
 						</div>
-						<footer>
-							<button type="button" class="btn btn-primary close-widget"
-									data-dismiss="modal" data-ams-click-event="marker.closed.position"
-									tal:attributes='data-ams-click-event-options string:{"fieldname": "${view/name}"}'>OK</button>
-						</footer>
+						<div class="ams-form">
+							<div class="modal-body">
+								<div class="map-header"
+									 tal:define="header provider:pyams_gis.map.header"
+									 tal:condition="header"
+									 tal:content="structure header"></div>
+								<div class="map map-location" id="map_location" style="width: 100%; height: 600px;"
+									 data-map-leaflet-fieldname="fieldname"
+									 tal:attributes="id string:map_location_${name};
+													 data-map-leaflet-fieldname view/name;"></div>
+							</div>
+							<footer>
+								<button type="button" class="btn btn-primary close-widget"
+										data-dismiss="modal" data-ams-click-event="marker.closed.position"
+										tal:attributes='data-ams-click-event-options string:{"fieldname": "${view/name}"}'>OK</button>
+							</footer>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
+		<div class="clearfix-xs clearfix-sm"></div>
 		<tal:loop repeat="widget view/subform/widgets/values">
 			<input type="hidden"
 				   tal:condition="python:widget.mode == 'hidden'"