Migrate "View Marker" and "View Line" popups to bootstrap

before-leaflet
Candid Dauth 2016-10-04 14:01:40 +03:00
rodzic 1f1a2dea46
commit 768d0fab8f
4 zmienionych plików z 27 dodań i 38 usunięć

Wyświetl plik

@ -223,7 +223,6 @@ textarea {
background: #fff; background: #fff;
position:absolute; position:absolute;
width: 350px; width: 350px;
height: 200px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888;
} }
@ -233,13 +232,10 @@ textarea {
} }
.fp-popup .content { .fp-popup .content {
position: absolute; height: 200px;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 5px 10px 2.1em 10px;
overflow: auto; overflow: auto;
padding-bottom: 1.5em;
border-radius: 10px;
} }
.fp-popup:before { .fp-popup:before {
@ -292,29 +288,22 @@ textarea {
position: absolute; position: absolute;
background: #fff; background: #fff;
bottom: 0; bottom: 0;
left: 10px; left: 0;
right: 10px; right: 15px;
padding: 5px 0; padding: 5px 10px;
box-shadow: 0 0 10px #fff; box-shadow: 0 0 10px #fff;
border-bottom-left-radius: 10px;
} }
.fp-popup .close-button { .fp-popup .close-button {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 20px; right: 20px;
font-size: 1.5em;
font-weight: bold;
color: inherit;
text-decoration: none; text-decoration: none;
} }
.fp-popup .content h2 {
margin-bottom: 0;
}
.pos,.distance { .pos,.distance {
font-style: italic; color: #888;
font-weight: normal;
} }
#colour-picker { #colour-picker {

Wyświetl plik

@ -1,15 +1,15 @@
<div class="content"> <div class="content container-fluid">
<h2>{{line.name}}</h2> <h2>{{line.name}}</h2>
<dl> <dl class="row">
<dt class="distance">Distance</dt> <dt class="col-sm-4 distance">Distance</dt>
<dd class="distance">{{round(line.distance, 2)}} km <span ng-show="line.time != null">({{formatTime(line.time)}} h {{routingMode(line.mode)}})</span></dd> <dd class="col-sm-8 distance">{{round(line.distance, 2)}} km <span ng-show="line.time != null">({{formatTime(line.time)}} h {{routingMode(line.mode)}})</span></dd>
<dt ng-repeat-start="field in types[line.typeId].fields" ng-show="field.type != 'dropdown' || field.options.length > 1">{{field.name}}</dt> <dt ng-repeat-start="field in types[line.typeId].fields" ng-show="field.type != 'dropdown' || field.options.length > 1" class="col-sm-4">{{field.name}}</dt>
<dd ng-repeat-end ng-show="field.type != 'dropdown' || field.options.length > 1" fp-type-field-content="field" fp-type-field-model="line.data[field.name]"></dd> <dd ng-repeat-end ng-show="field.type != 'dropdown' || field.options.length > 1" class="col-sm-8" fp-type-field-content="field" fp-type-field-model="line.data[field.name]"></dd>
</dl> </dl>
</div> </div>
<div class="buttons"> <div class="buttons">
<button ng-click="edit()" ng-hide="readonly">Edit</button> <button class="btn btn-default" ng-click="edit()" ng-hide="readonly">Edit</button>
<button ng-click="move()" ng-hide="readonly">Move</button> <button class="btn btn-default" ng-click="move()" ng-hide="readonly">Move</button>
<button ng-click="delete()" ng-hide="readonly">Remove</button> <button class="btn btn-default" ng-click="delete()" ng-hide="readonly">Remove</button>
</div> </div>

Wyświetl plik

@ -1,15 +1,15 @@
<div class="content"> <div class="content container-fluid">
<h2>{{marker.name}}</h2> <h2>{{marker.name}}</h2>
<dl> <dl class="row">
<dt class="pos">Coordinates</dt> <dt class="col-sm-4 pos">Coordinates</dt>
<dd class="pos">{{round(marker.lat, 5)}}, {{round(marker.lon, 5)}}</dd> <dd class="col-sm-8 pos">{{round(marker.lat, 5)}}, {{round(marker.lon, 5)}}</dd>
<dt ng-repeat-start="field in types[marker.typeId].fields" ng-show="field.type != 'dropdown' || field.options.length > 1">{{field.name}}</dt> <dt ng-repeat-start="field in types[marker.typeId].fields" ng-show="field.type != 'dropdown' || field.options.length > 1" class="col-sm-4">{{field.name}}</dt>
<dd ng-repeat-end ng-show="field.type != 'dropdown' || field.options.length > 1" fp-type-field-content="field" fp-type-field-model="marker.data[field.name]"></dd> <dd ng-repeat-end ng-show="field.type != 'dropdown' || field.options.length > 1" class="col-sm-8" fp-type-field-content="field" fp-type-field-model="marker.data[field.name]"></dd>
</dl> </dl>
</div> </div>
<div class="buttons"> <div class="buttons">
<button ng-click="edit()" ng-hide="readonly">Edit</button> <button class="btn btn-default" ng-click="edit()" ng-hide="readonly">Edit</button>
<button ng-click="move()" ng-hide="readonly">Move</button> <button class="btn btn-default" ng-click="move()" ng-hide="readonly">Move</button>
<button ng-click="delete()" ng-hide="readonly">Remove</button> <button class="btn btn-default" ng-click="delete()" ng-hide="readonly">Remove</button>
</div> </div>

Wyświetl plik

@ -37,7 +37,7 @@
template: template template: template
}; };
$('<a href="javascript:" class="close-button">×</a>').click(ret.close.bind(ret)).appendTo(el); $('<a href="javascript:" class="close-button"><span class="glyphicon glyphicon-remove"></span></a>').click(ret.close.bind(ret)).appendTo(el);
$compile(el[0])(scope); $compile(el[0])(scope);
scope.$evalAsync(); // $compile only replaces variables on next digest scope.$evalAsync(); // $compile only replaces variables on next digest