cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Design adjustments to Link / HTML sharing

Browse source
This commit is contained in:
John Firebaugh 2013-07-26 18:17:36 -07:00
parent 6edf633885
commit bf7b2cf381
3 changed files with 45 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

75
app/assets/javascripts/leaflet.share.js
View file

@ -34,7 +34,7 @@ L.OSM.share = function (options) {
$('<h4>')
.text(I18n.t('javascripts.share.title')));
// Link
// Link / Embed
var $linkSection = $('<div>')
.attr('class', 'section share-link')
@ -63,45 +63,42 @@ L.OSM.share = function (options) {
var $shortLink, $longLink;
$('<ul>')
.appendTo($linkSection)
.append($('<li>')
.append($longLink = $('<a>')
.text(I18n.t('javascripts.share.long_link'))))
.append($('<li>')
.append($shortLink = $('<a>')
.text(I18n.t('javascripts.share.short_link'))));
// Embeddable HTML
var $embedSection = $('<div>')
.attr('class', 'section share-html')
.appendTo($ui);
$('<h4>')
.text(I18n.t('javascripts.share.embed'))
.appendTo($embedSection);
$form = $('<form>')
.attr('class', 'standard-form')
.appendTo($embedSection);
$('<div>')
.attr('class', 'form-row')
.appendTo($form)
.append($('<label>')
.attr('for', 'long_input')
.text(I18n.t('javascripts.share.long_link')))
.append($('<a>')
.attr('id', 'long_link')
.append($('<span>')
.attr('class', 'icon link')))
.append($('<input>')
.attr('id', 'long_input')
.attr('type', 'text')
.on('click', select));
$('<div>')
.attr('class', 'form-row')
.appendTo($form)
.append(
$('<label>')
.attr('for', 'embed_marker')
.append(
$('<input>')
.attr('id', 'embed_marker')
.attr('type', 'checkbox')
.bind('change', toggleMarker))
.append(I18n.t('javascripts.share.include_marker')));
.append($('<label>')
.attr('for', 'short_input')
.text(I18n.t('javascripts.share.short_link')))
.append($('<a>')
.attr('id', 'short_link')
.append($('<span>')
.attr('class', 'icon link')))
.append($('<input>')
.attr('id', 'short_input')
.attr('type', 'text')
.on('click', select));
$('<div>')
.attr('class', 'form-row')
.appendTo($form)
.append($('<label>')
.attr('for', 'embed_html')
.text(I18n.t('javascripts.share.embed')))
.append(
$('<textarea>')
.attr('id', 'embed_html')
@ -110,7 +107,7 @@ L.OSM.share = function (options) {
$('<p>')
.attr('class', 'deemphasize')
.text(I18n.t('javascripts.share.paste_html'))
.appendTo($embedSection);
.appendTo($linkSection);
// Image
@ -250,18 +247,18 @@ L.OSM.share = function (options) {
function update() {
var bounds = map.getBounds();
$('#link_marker, #embed_marker')
$('#link_marker')
.prop('checked', map.hasLayer(marker));
$('#image_filter')
.prop('checked', locationFilter.isEnabled());
// Link
// Link / Embed
$shortLink.attr('href', map.getShortUrl(marker));
$longLink.attr('href', map.getUrl(marker));
// Embed
$('#short_input').val(map.getShortUrl(marker));
$('#long_input').val(map.getUrl(marker));
$('#short_link').attr('href', map.getShortUrl(marker));
$('#long_link').attr('href', map.getUrl(marker));
var params = {
bbox: bounds.toBBoxString(),

14
app/assets/stylesheets/common.css.scss
View file

@ -638,17 +638,19 @@ a.donate {
.share-ui {
.share-link {
li {
display: inline-block;
text-align: center;
width: 50%;
a {
margin-left: 5px;
}
input,
textarea {
font-family: monospace;
font-size: small;
}
}
#embed_html {
resize: vertical;
font-family: monospace;
font-size: small;
}
#mapnik_scale {

2
config/locales/en.yml
View file

@ -2052,7 +2052,7 @@ en:
title: "Share"
cancel: "Cancel"
image: "Image"
link: "Link"
link: "Link or HTML"
short_link: "Short Link"
long_link: "Long Link"
embed: "Embeddable HTML"