Adding support for pictures

1. Back Image: Here you can provide a url to an image and it will use it
as the background instead of the usual gradient and background icon.

2. Images in Content: Here you have a new verb "picture" which allows
you to add an image to the content of your card and scale it to fit
appropriately. The syntax is "picture | url | heightInPixels"

3. More Colors: Because you can now use any image as a background, I ran
into the problem of the default image clashing terribly with the images
I was using. So I added all the other colors to the color picker and
increased the maxWidth of the picker to fit all the new colors. I could
have been more picky about which colors because there are a lot of
duplicates with different names, but I didn't have the time for it.

4. It looks like I made some changes to bootstrap.min.css. It was a
while back and I don't remember what it does. However I was able to use
a better diffing tool than the one which comes with github and was able
to tell that it's a hack of a change made to .dropdown-menu changing
"min-width:160px" to "width:640px"

It's been a while and I really can't recall what that's for; it's
probably for the colorpicker but if it is, I don't really know of a
clean way to do it. I'll test it to see if it's even necessary and
remove it if it isn't. Let me know your thoughts on this as I'm not
really a web developer so I don't know if it's ok to muck with this. My
general strategy for UI is to change things with the developer toolbar
and then make the changes to the corresponding file if it looks good, so
feel free to tell me if my code sucks, and if it should be improved in
any way.

generator/css/cards.css

@@ -23,7 +23,7 @@
 }
 
 .card-back {
-    background-color: white;
+/*     background-color: white; */
     border-radius: 4mm;
     border-color: inherit;
     margin: 3mm;
@@ -129,13 +129,17 @@
 }
 .card-subtitle {
     height: 18px;
-    line-height: 18px;
     margin-bottom: 0.0em;
+    line-height: 18px;
     font-family: 'Noto Sans', 'Myriad Pro', Calibri, Helvetica, Arial, sans-serif;
     font-size: 10pt;
     font-style: italic;
 }
-
+.card-picture {
+    height: 80px;
+    line-height: 18px;
+    margin-bottom: 0.0em;
+}
 .card-property-line {
     text-indent: -1em;
     margin-left: 1em;

generator/js/cards.js

@@ -108,6 +108,12 @@ function card_element_subtitle(params, card_data, options) {
     return '<div class="card-element card-subtitle">' + subtitle + '</div>';
 }
 
+function card_element_picture(params, card_data, options) {
+    var url = params[0] || "";
+	var height = params[1] || "";
+    return '<div class="card-element card-picture" style ="background-image: url(&quot;' + url + '&quot;); background-size: contain; background-position: center;background-repeat: no-repeat; height:' + height + 'px"></div>';
+}
+
 function card_element_ruler(params, card_data, options) {
     var color = card_data_color_front(card_data, options);
     var fill = 'fill="' + color + '"';
@@ -144,6 +150,13 @@ function card_element_property(params, card_data, options) {
     result += '<div class="card-element card-property-line">';
     result += '   <h4 class="card-property-name">' + params[0] + '</h4>';
     result += '   <p class="card-p card-property-text">' + params[1] + '</p>';
+	if (params[2])
+	{
+		result += '   <div style="float:right">';
+		result += '       <h4 class="card-property-name">' + params[2] + '</h4>';
+		result += '       <p class="card-p card-property-text">' + params[3] + '</p>';
+		result += '   </div>';
+	}
     result += '</div>';
     return result;
 }
@@ -241,7 +254,8 @@ var card_element_generators = {
     bullet: card_element_bullet,
     fill: card_element_fill,
     section: card_element_section,
-    disabled: card_element_empty
+    disabled: card_element_empty,
+	picture: card_element_picture
 };
 
 // ============================================================================
@@ -299,15 +313,27 @@ function card_generate_front(data, options) {
 function card_generate_back(data, options) {
     var color = card_data_color_back(data, options)
     var style_color = card_generate_color_style(color, options);
-    var style_gradient = card_generate_color_gradient_style(color, options);
-    var icon = card_data_icon_back(data, options);
+	var url = data.background_image;
+	var background_style = "";
+	if (url)
+	{
+		background_style = 'style = "background-image: url(&quot;' + url + '&quot;); background-size: contain; background-position: center; background-repeat: no-repeat;"'
+	}
+	else 
+	{
+		background_style = card_generate_color_gradient_style(color, options);
+    }
+	var icon = card_data_icon_back(data, options);
 
     var result = "";
     result += '<div class="card card-size-' + options.card_size + '" ' + style_color + '>';
-    result += '  <div class="card-back" ' + style_gradient + '>';
-    result += '    <div class="card-back-inner">';
-    result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
-    result += '    </div>';
+    result += '  <div class="card-back" ' + background_style + '>';
+	if (!url)
+	{
+		result += '    <div class="card-back-inner">';
+		result += '      <div class="card-back-icon icon-' + icon + '" ' + style_color + '></div>';
+		result += '    </div>';
+	}
     result += '  </div>';
     result += '</div>';
 

generator/js/colors.js

@@ -144,15 +144,146 @@ var css_color_names = [
 
 var card_colors = {
     "": "",
-    "dimgray": "dimgray",
-    "black": "black",
-    "darkgoldenrod": "darkgoldenrod",
-    "saddlebrown": "saddlebrown",
-    "indianred": "indianred",
-    "maroon": "maroon",
-    "indigo": "indigo",
-    "darkblue": "darkblue",
-    "royalblue": "royalblue",
-    "darkgreen": "darkgreen",
-    "#666633": "#666633"
+    "DimGray": "DimGray",
+    "Black": "Black",
+    "DarkGoldenrod": "DarkGoldenrod",
+    "SaddleBrown": "SaddleBrown",
+    "IndianRed": "IndianRed",
+    "Maroon": "Maroon",
+    "Indigo": "Indigo",
+    "DarkBlue": "DarkBlue",
+    "RoyalBlue": "RoyalBlue",
+    "DarkGreen": "DarkGreen",
+    "#666633": "#666633",
+    "Navy": "Navy",          
+    "MediumBlue": "MediumBlue",           
+    "Blue": "Blue",           
+    "Green": "Green",                
+    "Teal": "Teal",                 
+    "DarkCyan": "DarkCyan",             
+    "DeepSkyBlue": "DeepSkyBlue",          
+    "DarkTurquoise": "DarkTurquoise",        
+    "MediumSpringGreen": "MediumSpringGreen",    
+    "Lime": "Lime",                 
+    "SpringGreen": "SpringGreen",          
+    "Aqua": "Aqua",                 
+    "Cyan": "Cyan",                 
+    "MidnightBlue": "MidnightBlue",     
+    "DodgerBlue": "DodgerBlue",
+    "LightSeaGreen": "LightSeaGreen",
+    "ForestGreen": "ForestGreen",
+    "SeaGreen": "SeaGreen",
+    "DarkSlateGray": "DarkSlateGray",
+    "LimeGreen": "LimeGreen",
+    "MediumSeaGreen": "MediumSeaGreen",
+    "Turquoise": "Turquoise",
+    "SteelBlue": "SteelBlue",
+    "DarkSlateBlue": "DarkSlateBlue",
+    "MediumTurquoise": "MediumTurquoise",
+    "DarkOliveGreen": "DarkOliveGreen",
+    "CadetBlue": "CadetBlue",
+    "CornflowerBlue": "CornflowerBlue",
+    "MediumAquaMarine": "MediumAquaMarine",
+    "SlateBlue": "SlateBlue",
+    "OliveDrab": "OliveDrab",
+    "SlateGray": "SlateGray",
+    "LightSlateGray": "LightSlateGray",
+    "MediumSlateBlue": "MediumSlateBlue",
+    "LawnGreen": "LawnGreen",
+    "Chartreuse": "Chartreuse",
+    "Aquamarine": "Aquamarine",
+    "Maroon": "Maroon",
+    "Purple": "Purple",
+    "Olive": "Olive",
+    "Gray": "Gray",
+    "SkyBlue": "SkyBlue",
+    "LightSkyBlue": "LightSkyBlue",
+    "BlueViolet": "BlueViolet",
+    "DarkRed": "DarkRed",
+    "DarkMagenta": "DarkMagenta",
+    "DarkSeaGreen": "DarkSeaGreen",
+    "LightGreen": "LightGreen",
+    "MediumPurple": "MediumPurple",
+    "DarkViolet": "DarkViolet",
+    "PaleGreen": "PaleGreen",
+    "DarkOrchid": "DarkOrchid",
+    "YellowGreen": "YellowGreen",
+    "Sienna": "Sienna",
+    "Brown": "Brown",
+    "DarkGray": "DarkGray",
+    "LightBlue": "LightBlue",
+    "GreenYellow": "GreenYellow",
+    "PaleTurquoise": "PaleTurquoise",
+    "LightSteelBlue": "LightSteelBlue",
+    "PowderBlue": "PowderBlue",
+    "FireBrick": "FireBrick",
+    "MediumOrchid": "MediumOrchid",
+    "RosyBrown": "RosyBrown",
+    "DarkKhaki": "DarkKhaki",
+    "Silver": "Silver",
+    "MediumVioletRed": "MediumVioletRed",
+    "Peru": "Peru",
+    "Chocolate": "Chocolate",
+    "Tan": "Tan",
+    "LightGray": "LightGray",
+    "Thistle": "Thistle",
+    "Orchid": "Orchid",
+    "GoldenRod": "GoldenRod",
+    "PaleVioletRed": "PaleVioletRed",
+    "Crimson": "Crimson",
+    "Gainsboro": "Gainsboro",
+    "Plum": "Plum",
+    "BurlyWood": "BurlyWood",
+    "LightCyan": "LightCyan",
+    "Lavender": "Lavender",
+    "DarkSalmon": "DarkSalmon",
+    "Violet": "Violet",
+    "PaleGoldenRod": "PaleGoldenRod",
+    "LightCoral": "LightCoral",
+    "Khaki": "Khaki",
+    "AliceBlue": "AliceBlue",
+    "HoneyDew": "HoneyDew",
+    "Azure": "Azure",
+    "SandyBrown": "SandyBrown",
+    "Wheat": "Wheat",
+    "Beige": "Beige",
+    "WhiteSmoke": "WhiteSmoke",
+    "MintCream": "MintCream",
+    "GhostWhite": "GhostWhite",
+    "Salmon": "Salmon",
+    "AntiqueWhite": "AntiqueWhite",
+    "Linen": "Linen",
+    "LightGoldenRodYellow": "LightGoldenRodYellow",
+    "OldLace": "OldLace",
+    "Red": "Red",
+    "Fuchsia": "Fuchsia",
+    "Magenta": "Magenta",
+    "DeepPink": "DeepPink",
+    "OrangeRed": "OrangeRed",
+    "Tomato": "Tomato",
+    "HotPink": "HotPink",
+    "Coral": "Coral",
+    "DarkOrange": "DarkOrange",
+    "LightSalmon": "LightSalmon",
+    "Orange": "Orange",
+    "LightPink": "LightPink",
+    "Pink": "Pink",
+    "Gold": "Gold",
+    "PeachPuff": "PeachPuff",
+    "NavajoWhite": "NavajoWhite",
+    "Moccasin": "Moccasin",
+    "Bisque": "Bisque",
+    "MistyRose": "MistyRose",
+    "BlanchedAlmond": "BlanchedAlmond",
+    "PapayaWhip": "PapayaWhip",
+    "LavenderBlush": "LavenderBlush",
+    "SeaShell": "SeaShell",
+    "Cornsilk": "Cornsilk",
+    "LemonChiffon": "LemonChiffon",
+    "FloralWhite": "FloralWhite",
+    "Snow": "Snow",
+    "Yellow": "Yellow",
+    "LightYellow": "LightYellow",
+    "Ivory": "Ivory",
+    "White": "White",
 }

generator/js/ui.js

@@ -176,6 +176,7 @@ function ui_update_selected_card() {
         $("#card-count").val(card.count);
         $("#card-icon").val(card.icon);
         $("#card-icon-back").val(card.icon_back);
+		$("#card-background").val(card.background_image);
         $("#card-contents").val(card.contents.join("\n"));
         $("#card-tags").val(card.tags.join(", "));
         $("#card-color").val(card.color).change();
@@ -185,6 +186,7 @@ function ui_update_selected_card() {
         $("#card-count").val(1);
         $("#card-icon").val("");
         $("#card-icon-back").val("");
+		$("#card-background").val("")
         $("#card-contents").val("");
         $("#card-tags").val("");
         $("#card-color").val("").change();
@@ -454,7 +456,8 @@ $(document).ready(function () {
     $("#card-icon").change(ui_change_card_property);
     $("#card-count").change(ui_change_card_property);
     $("#card-icon-back").change(ui_change_card_property);
-    $("#card-color").change(ui_change_card_color);
+	$("#card-background").change(ui_change_card_property);
+	$("#card-color").change(ui_change_card_color);
     $("#card-contents").change(ui_change_card_contents);
     $("#card-tags").change(ui_change_card_tags);
 

generator/lib/colorpicker/css/bootstrap-colorselector.css

@@ -12,8 +12,8 @@
   top: 80%;
   left: -7px;
   padding: 4px;
-  min-width: 130px;
-  max-width: 130px;
+/*  min-width: 130px;*/
+/*  max-width: 130px;*/
 }
 
 /*