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

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

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

2
config/locales/en.yml
View file

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