404 page updates, synapse card 90%

app/assets/javascripts/src/Metamaps.JIT.js

@@ -99,6 +99,9 @@ Metamaps.JIT = {
 
         var synapse = adj.getData("synapses")[0]; // for now, just grab the first synapse
 
+        if (!synapse) return; // this means there are no corresponding synapses for
+        // this edge, don't render it
+
         var directionCat = synapse.get("category");
 
         //label placement on edges
@@ -1095,7 +1098,7 @@ Metamaps.JIT = {
 			
             //The test synapse was selected!
 
-            // make sure the edge hasn't been hidden temporarily
+            // make sure the edge hasn't been hidden from the page
             var node1id = synapse.get('edge').nodeFrom.id;
             var node2id = synapse.get('edge').nodeTo.id;
             var edge = Metamaps.Visualize.mGraph.graph.getAdjacence(node1id, node2id);
@@ -1244,17 +1247,7 @@ Metamaps.JIT = {
         // delete the selected things from the database
         $('.rc-delete').click(function () {
             $('.rightclickmenu').remove();
-            var n = Metamaps.Selected.Nodes.length;
+            Metamaps.Control.deleteSelected();
-            var e = Metamaps.Selected.Edges.length;
-            var ntext = n == 1 ? "1 topic" : n + " topics";
-            var etext = e == 1 ? "1 synapse" : e + " synapses";
-            var text = "You have " + ntext + " and " + etext + " selected. ";
-
-            var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
-            if (r == true) {
-                Metamaps.Control.deleteSelectedEdges();
-                Metamaps.Control.deleteSelectedNodes();
-            }
         });
 
         // remove the selected things from the map
@@ -1388,17 +1381,7 @@ Metamaps.JIT = {
         // delete the selected things from the database
         $('.rc-delete').click(function () {
             $('.rightclickmenu').remove();
-            var n = Metamaps.Selected.Nodes.length;
+            Metamaps.Control.deleteSelected();
-            var e = Metamaps.Selected.Edges.length;
-            var ntext = n == 1 ? "1 topic" : n + " topics";
-            var etext = e == 1 ? "1 synapse" : e + " synapses";
-            var text = "You have " + ntext + " and " + etext + " selected. ";
-
-            var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
-            if (r == true) {
-                Metamaps.Control.deleteSelectedEdges();
-                Metamaps.Control.deleteSelectedNodes();
-            }
         });
 
         // remove the selected things from the map

app/assets/javascripts/src/Metamaps.js

@@ -703,7 +703,7 @@ Metamaps.TopicCard = {
         var setMapperImage = function (mapper) {
             $('.contributorIcon').attr('src', mapper.get('image'));
         };
-        Metamaps.Mapper.get(topic.get('user_id'), setMapperImage)
+        Metamaps.Mapper.get(topic.get('user_id'), setMapperImage);
 
         // starting embed.ly
         var resetFunc = function () {
@@ -970,9 +970,11 @@ Metamaps.TopicCard = {
  */
 Metamaps.SynapseCard = {
     openSynapseCard: null,
-    showCard: function (edge, e) {
+    showCard: function (edge, e, synapseIndex) {
         var self = Metamaps.SynapseCard;
 
+        var index = synapseIndex ? synapseIndex : 0;
+
         //reset so we don't interfere with other edges, but first, save its x and y 
         var myX = $('#edit_synapse').css('left');
         var myY = $('#edit_synapse').css('top');
@@ -981,11 +983,12 @@ Metamaps.SynapseCard = {
         //so label is missing while editing
         Metamaps.Control.deselectEdge(edge);
 
-        var synapse = edge.getData('synapses')[0]; // for now, just get the first synapse
+        var synapse = edge.getData('synapses')[index]; // for now, just get the first synapse
 
         //create the wrapper around the form elements, including permissions
         //classes to make best_in_place happy
         var edit_div = document.createElement('div');
+        edit_div.innerHTML = '<div id="editSynUpperBar"></div><div id="editSynLowerBar"></div>';
         edit_div.setAttribute('id', 'edit_synapse');
         if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
             edit_div.className = 'permission canEdit';
@@ -993,9 +996,9 @@ Metamaps.SynapseCard = {
         } else {
             edit_div.className = 'permission cannotEdit';
         }
-        $('.main .wrapper').append(edit_div);
+        $('#wrapper').append(edit_div);
 
-        self.populateShowCard(synapse);
+        self.populateShowCard(edge, synapse);
 
         //drop it in the right spot, activate it
         $('#edit_synapse').css('position', 'absolute');
@@ -1018,39 +1021,42 @@ Metamaps.SynapseCard = {
         Metamaps.SynapseCard.openSynapseCard = null;
     },
 
-    populateShowCard: function (synapse) {
+    populateShowCard: function (edge, synapse) {
         var self = Metamaps.SynapseCard;
 
-        self.add_name_form(synapse);
+        self.add_synapse_count(edge);
+        self.add_desc_form(synapse);
         self.add_user_info(synapse);
         self.add_perms_form(synapse);
-        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
+        self.add_direction_form(synapse);
-            self.add_direction_form(synapse);
-        }
     },
+    add_synapse_count: function (edge) {
+        var count = edge.getData("synapses").length;
 
-    add_name_form: function (synapse) {
+        $('#editSynUpperBar').append('<div id="synapseCardCount">' + count + '</div>')
+    },
+    add_desc_form: function (synapse) {
         var data_nil = 'Click to add description.';
 
         // TODO make it so that this would work even in sandbox mode,
         // currently with Best_in_place it won't
 
-        //name editing form
+        //desc editing form
-        $('#edit_synapse').append('<div id="edit_synapse_name"></div>');
+        $('#editSynUpperBar').append('<div id="edit_synapse_desc"></div>');
-        $('#edit_synapse_name').attr('class', 'best_in_place best_in_place_desc');
+        $('#edit_synapse_desc').attr('class', 'best_in_place best_in_place_desc');
-        $('#edit_synapse_name').attr('data-object', 'synapse');
+        $('#edit_synapse_desc').attr('data-object', 'synapse');
-        $('#edit_synapse_name').attr('data-attribute', 'desc');
+        $('#edit_synapse_desc').attr('data-attribute', 'desc');
-        $('#edit_synapse_name').attr('data-type', 'textarea');
+        $('#edit_synapse_desc').attr('data-type', 'textarea');
-        $('#edit_synapse_name').attr('data-nil', data_nil);
+        $('#edit_synapse_desc').attr('data-nil', data_nil);
-        $('#edit_synapse_name').attr('data-url', '/synapses/' + synapse.id);
+        $('#edit_synapse_desc').attr('data-url', '/synapses/' + synapse.id);
-        $('#edit_synapse_name').html(synapse.get("desc"));
+        $('#edit_synapse_desc').html(synapse.get("desc"));
 
         //if edge data is blank or just whitespace, populate it with data_nil
-        if ($('#edit_synapse_name').html().trim() == '') {
+        if ($('#edit_synapse_desc').html().trim() == '') {
-            $('#edit_synapse_name').html(data_nil);
+            $('#edit_synapse_desc').html(data_nil);
         }
 
-        $('#edit_synapse_name').bind("ajax:success", function () {
+        $('#edit_synapse_desc').bind("ajax:success", function () {
             var desc = $(this).html();
             if (desc == data_nil) {
                 synapse.set("desc", '');
@@ -1064,13 +1070,20 @@ Metamaps.SynapseCard = {
 
     add_user_info: function (synapse) {
         var u = '<div id="edgeUser" class="hoverForTip">';
+        u += '<img src="" width="24" height="24" />'
         u += '<div class="tip">Created by ' + synapse.get("user_name") + '</div></div>';
-        $('#edit_synapse').append(u);
+        $('#editSynLowerBar').append(u);
+
+        // get mapper image
+        var setMapperImage = function (mapper) {
+            $('#edgeUser img').attr('src', mapper.get('image'));
+        };
+        Metamaps.Mapper.get(synapse.get('user_id'), setMapperImage);
     },
 
     add_perms_form: function (synapse) {
         //permissions - if owner, also allow permission editing
-        $('#edit_synapse').append('<div class="mapPerm ' + synapse.get("permission").substring(0, 2) + '"></div>');
+        $('#editSynLowerBar').append('<div class="mapPerm ' + synapse.get("permission").substring(0, 2) + '"></div>');
 
         // ability to change permission
         var selectingPermission = false;
@@ -1107,10 +1120,8 @@ Metamaps.SynapseCard = {
 
     add_direction_form: function (synapse) {
         //directionality checkboxes
-        $('#edit_synapse').append('<input type="checkbox" id="edit_synapse_left">');
+        $('#editSynLowerBar').append('<div id="edit_synapse_left"></div>');
-        $('#edit_synapse').append('<label class="left">&lt;</label>');
+        $('#editSynLowerBar').append('<div id="edit_synapse_right"></div>');
-        $('#edit_synapse').append('<input type="checkbox" id="edit_synapse_right">');
-        $('#edit_synapse').append('<label class="right">&gt;</label>');
 
         var edge = synapse.get('edge');
 
@@ -1119,11 +1130,11 @@ Metamaps.SynapseCard = {
         if (edge.nodeFrom.pos.x < edge.nodeTo.pos.x ||
             edge.nodeFrom.pos.x == edge.nodeTo.pos.x &&
             edge.nodeFrom.pos.y < edge.nodeTo.pos.y) {
-            var left = edge.nodeTo;
+            var left = edge.nodeTo.getData("topic");
-            var right = edge.nodeFrom;
+            var right = edge.nodeFrom.getData("topic");
         } else {
-            var left = edge.nodeFrom;
+            var left = edge.nodeFrom.getData("topic");
-            var right = edge.nodeTo;
+            var right = edge.nodeTo.getData("topic");
         }
 
         /*
@@ -1134,42 +1145,48 @@ Metamaps.SynapseCard = {
 
         var directionCat = synapse.get('category'); //both, none, from-to
         if (directionCat == 'from-to') {
-            var from_to = synapse.getDirection();
+            var from_to = [synapse.get("node1_id"), synapse.get("node2_id")];
             if (from_to[0] == left.id) {
                 //check left checkbox
-                $('#edit_synapse_left').prop('checked', true);
+                $('#edit_synapse_left').addClass('checked');
             } else {
                 //check right checkbox
-                $('#edit_synapse_right').prop('checked', true);
+                $('#edit_synapse_right').addClass('checked');
             }
         } else if (directionCat == 'both') {
             //check both checkboxes
-            $('#edit_synapse_left').prop('checked', true);
+            $('#edit_synapse_left').addClass('checked');
-            $('#edit_synapse_right').prop('checked', true);
+            $('#edit_synapse_right').addClass('checked');
         }
-        $('#edit_synapse_left, #edit_synapse_right').click(function () {
-            var leftChecked = $('#edit_synapse_left').is(':checked');
-            var rightChecked = $('#edit_synapse_right').is(':checked');
 
-            var dir = synapse.getDirection();
+        if (synapse.authorizeToEdit(Metamaps.Active.Mapper)) {
-            var dirCat = 'none';
+            $('#edit_synapse_left, #edit_synapse_right').click(function () {
-            if (leftChecked && rightChecked) {
+                
-                dirCat = 'both';
+                $(this).toggleClass('checked');
-            } else if (!leftChecked && rightChecked) {
-                dirCat = 'from-to';
-                dir = [right.id, left.id];
-            } else if (leftChecked && !rightChecked) {
-                dirCat = 'from-to';
-                dir = [left.id, right.id];
-            }
 
-            synapse.save({
+                var leftChecked = $('#edit_synapse_left').is('.checked');
-                category: dirCat,
+                var rightChecked = $('#edit_synapse_right').is('.checked');
-                node1_id: dir[0],
+
-                node2_id: dir[1]
+                var dir = synapse.getDirection();
+                var dirCat = 'none';
+                if (leftChecked && rightChecked) {
+                    dirCat = 'both';
+                } else if (!leftChecked && rightChecked) {
+                    dirCat = 'from-to';
+                    dir = [right.id, left.id];
+                } else if (leftChecked && !rightChecked) {
+                    dirCat = 'from-to';
+                    dir = [left.id, right.id];
+                }
+
+                synapse.save({
+                    category: dirCat,
+                    node1_id: dir[0],
+                    node2_id: dir[1]
+                });
+                Metamaps.Visualize.mGraph.plot();
             });
-            Metamaps.Visualize.mGraph.plot();
+        } // if
-        });
     } //add_direction_form
 }; // end Metamaps.SynapseCard
 
@@ -1501,7 +1518,7 @@ Metamaps.Realtime = {
         });
         $('body').click(self.close);
 
-        self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); 
+        self.socket = io.connect('http://gentle-savannah-1303.herokuapp.com'); // io.connect('http://localhost:5001');
         self.startActiveMap();
     },
     toggleBox: function (event) {
@@ -2135,6 +2152,19 @@ Metamaps.Control = {
         Metamaps.Selected.Nodes.splice(
             Metamaps.Selected.Nodes.indexOf(node), 1);
     },
+    deleteSelected: function () {
+        var n = Metamaps.Selected.Nodes.length;
+        var e = Metamaps.Selected.Edges.length;
+        var ntext = n == 1 ? "1 topic" : n + " topics";
+        var etext = e == 1 ? "1 synapse" : e + " synapses";
+        var text = "You have " + ntext + " and " + etext + " selected. ";
+
+        var r = confirm(text + "Are you sure you want to permanently delete them all? This will remove them from all maps they appear on.");
+        if (r == true) {
+            Metamaps.Control.deleteSelectedEdges();
+            Metamaps.Control.deleteSelectedNodes();
+        }
+    },
     deleteSelectedNodes: function () { // refers to deleting topics permanently
         var l = Metamaps.Selected.Nodes.length;
         for (var i = l - 1; i >= 0; i -= 1) {
@@ -2262,9 +2292,18 @@ Metamaps.Control = {
 
         // TODO make it so that you select which one, of multiple possible synapses you want to delete
 
-        //var id = edge.getData("id");
+        if (edge.getData("synapses").length - 1 === 0) {
-        //Metamaps.Synapses.get(id).destroy();
+            Metamaps.Control.hideEdge(edge);
-        //Metamaps.Control.hideEdge(edge);
+        }
+
+        var synapse = edge.getData("synapses")[0];
+        var mapping = edge.getData("mappings")[0];
+        synapse.destroy();
+
+        // the server will destroy the mapping, we just need to remove it here
+        Metamaps.Mappings.remove(mapping);
+        edge.getData("mappings").splice(0, 1);
+        edge.getData("synapses").splice(0, 1);
     },
     removeSelectedEdges: function () {
         var l = Metamaps.Selected.Edges.length,
@@ -2283,9 +2322,18 @@ Metamaps.Control = {
 
         // TODO make it so that you select which one, of multiple possible synapses you want
 
-        //var mappingid = edge.getData("mappingid");
+        if (edge.getData("mappings").length - 1 === 0) {
-        //Metamaps.Mappings.get(mappingid).destroy();
+            Metamaps.Control.hideEdge(edge);
-        //Metamaps.Control.hideEdge(edge);
+        }
+
+        var synapse = edge.getData("synapses")[0];
+        var mapping = edge.getData("mappings")[0];
+        mapping.destroy();
+
+        Metamaps.Synapses.remove(synapse);
+
+        edge.getData("mappings").splice(0, 1);
+        edge.getData("synapses").splice(0, 1);
     },
     hideSelectedEdges: function () {
         var edge,
@@ -2768,18 +2816,17 @@ Metamaps.Listeners = {
                 break;
             case 82: //if r or R is pressed
             case 114:
-                if (e.ctrlKey){
+                /*if (e.ctrlKey){
                     e.preventDefault();
                     Metamaps.Control.removeSelectedNodes();
-                    console.log('Once function works, selected nodes will be removed');
+                    Metamaps.Control.removeSelectedEdges();
-                }
+                }*/
                 break;
             case 68: //if d or D is pressed
             case 100:
                 if (e.ctrlKey){
                     e.preventDefault();
-                    Metamaps.Control.deleteSelectedNodes();
+                    Metamaps.Control.deleteSelected();
-                    console.log('Once function works, selected nodes will be deleted');
                 }
                 break;
             case 72: //if h or H is pressed
@@ -2787,7 +2834,7 @@ Metamaps.Listeners = {
                 if (e.ctrlKey){
                     e.preventDefault();
                     Metamaps.Control.hideSelectedNodes();
-                    console.log('Once function works, selected nodes will be hidden');
+                    Metamaps.Control.hideSelectedEdges();
                 }
                 break;
             default:
@@ -3329,7 +3376,7 @@ Metamaps.Synapse = {
 
         topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic1id);
         node1 = topic1.get('node');
-        topic1 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
+        topic2 = Metamaps.Topics.get(Metamaps.Create.newSynapse.topic2id);
         node2 = topic2.get('node');
         Metamaps.Create.newSynapse.hide();
 

app/assets/stylesheets/application.css

@@ -2351,15 +2351,6 @@ float: left;
     height: 100%;
 }
 
-
-#edit_synapse label,
-#edit_synapse_left,
-#edit_synapse_right {
-    display: inline-block;
-}
-#edit_synapse label.left {
-    margin-right: 0.5em;
-}
 .templates {
     display: none;
 }

app/assets/stylesheets/base.css

@@ -219,7 +219,7 @@ background: none;
 .linkItem.synapseCount:hover .synapseCountIcon {
   background-position: 0 -32px;
 }
-.linkItem.mapPerm {
+.mapPerm {
   width: 32px;
   height: 32px;
   padding: 0;
@@ -228,22 +228,22 @@ background: none;
   background-image: url(permissions32_sprite.png);
   background-position: 0 0;
 }
-.linkItem.mapPerm.co {
+.mapPerm.co {
   background-position: 0 0;
 }
-.linkItem.mapPerm.pu {
+.mapPerm.pu {
   background-position: -64px 0;
 }
-.linkItem.mapPerm.pr {
+.mapPerm.pr {
   background-position: -32px 0;
 }
 
-.showcard .yourTopic .mapPerm:hover {
+.yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
   background-image: url(arrowperms_sprite.png);
   background-position-x: -32px;
   cursor:pointer;
 }
-.showcard .yourTopic .mapPerm.minimize {
+.yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
  background-image: url(arrowperms_sprite.png) !important;
 background-position-x: 0px;
 cursor: pointer;
@@ -555,69 +555,66 @@ font-family: 'din-regular', helvetica, sans-serif;
   display: inline-block;
 }
 
-.permActivator {
-  width: 16px;
-  height: 16px;
-  background: url('settings.png') no-repeat 0 0;
-  overflow:hidden;
-  position: absolute;
-  left: 0px;
-  top: 30px;
-}
-
-#edit_synapse .mapPerm,
-#edit_synapse .permActivator {
-  position: static;
-  display: inline-block;
-  color: #000;
-}
-
-#edit_synapse .mapPerm {
-  width: 20px;
-  height:20px;
-  background-repeat: no-repeat;
-  background-size: 20px 20px;
-  margin: 10px 12px 0 12px;
-}
-#edit_synapse .mapPerm.co {
-  background-image: url("CO32.png");
-}
-#edit_synapse .mapPerm.pu {
-  background-image: url("PU32.png");
-}
-#edit_synapse .mapPerm.pr {
-  background-image: url("PR32.png");
-}
-
-#edit_synapse .permActivator {
-  position: absolute;
-  margin-top: -1.3em;
-}
-
 #edit_synapse {
-  background: url("synapse32.png") no-repeat scroll 0 center / 30px 30px #FFFFFF;
+  border-radius: 2px;
-  border-radius: 5px;
+  width: 270px;
-  padding: 5px 5px 5px 30px;
+  box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
-  color: #000;
 }
 
-#edit_synapse_name {
+#editSynUpperBar {
-  margin-left: 0.4em;
+  background: #FFFFFF url(synapse32.png) no-repeat 8px center;
-  border-bottom: 1px solid black;
+  min-height: 48px;
-  text-align:center;
+  border-bottom: 1px solid #222222;
-  max-width: 160px;
+  display: table;
+  width: 100%;
+}
+
+#editSynLowerBar {
+  background-color: #E0E0E0;
+  height: 48px;
+  position: relative;
+}
+
+#synapseCardCount {
+  font-size: 18px;
+  display: table-cell;
+  vertical-align: middle;
+  padding-left: 44px;
+  width: 20px;
+  line-height: 18px;
+}
+
+#edit_synapse_desc {
+  font-size: 14px;
+  font-family: 'din-regular', helvetica, sans-serif;
+  padding: 8px 32px 8px 4px;
+  display: table-cell;
+  vertical-align: middle;
+  line-height: 16px;
+}
+
+#edit_synapse .best_in_place_desc textarea {
+  font-family: 'din-regular', sans-serif;
+  color: #424242;
+  font-size: 14px;
+  line-height: 16px;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: none;
+  resize: none;
 }
 
 #edgeUser {
     display:inline-block;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: 20px 20px;
-    height: 20px;
-    min-width: 20px;
     position: relative;
-    background-image: url("MMCCicon_mapper_black.png");
+    margin: 12px 0 0 11px;
-    margin: 10px 0 0 10px;
+}
+#edgeUser img {
+  border-radius: 12px;
 }
 #edgeUser.hoverForTip:hover .tip {
   display:block;
@@ -637,39 +634,36 @@ font-family: 'din-regular', helvetica, sans-serif;
     z-index: 100;
 }
 
-#edit_synapse .click-to-edit {
+#edit_synapse .mapPerm {
-  margin-left: 0.3em;
+  position: absolute;
+  top: 0px;
+  left: 40px;
 }
 
-#edit_synapse.yourEdge .mapPerm:hover {
+#edit_synapse_left, #edit_synapse_right {
-  background-image: url(MMCCicon_maximize_arrow_black.png);
+  position: absolute;
-  background-size: 24px 17px;
+  height: 24px;
-  background-position: 0px 2px;
+  width: 24px;
-  cursor:pointer;
+  top: 12px;
-}
-#edit_synapse.yourEdge .mapPerm.minimize {
- background-image: url(MMCCicon_minimize_arrow_black.png) !important;
- background-size: 24px 17px;
- background-position: 0px 2px;
- cursor: pointer;
-}
-#edit_synapse .mapPerm .permissionSelect {
-  list-style: none;
-  width: 26px;
-  height: 52px;
-  position: relative;
-  top: 20px;
-  left:-3px;
-}
-#edit_synapse .mapPerm .permissionSelect li {
-  width: 26px;
-  height: 26px;
   background-repeat: no-repeat;
-  background-position: center center;
-  background-size: 20px 20px;
-  background-color:white;
 }
-
+#edit_synapse_right {
+  background-image: url(synapsedirectionright_sprite.png);
+  right: 16px; 
+}
+#edit_synapse_left {
+  background-image: url(synapsedirectionleft_sprite.png);
+  right: 56px; 
+}
+#edit_synapse_left.checked, #edit_synapse_right.checked {
+  background-position-y: -48px;
+}
+.canEdit #edit_synapse_left, .canEdit #edit_synapse_right {
+  cursor: pointer;
+}
+.canEdit #edit_synapse_left:not(.checked):hover, .canEdit #edit_synapse_right:not(.checked):hover {
+ background-position-y: -24px;
+}
 
 /* Map Cards */
 

app/controllers/synapses_controller.rb

@@ -54,10 +54,7 @@ class SynapsesController < ApplicationController
     @synapse.mappings.each do |m|
     
       m.map.touch(:updated_at)
-      
+          
-      #push notify to anyone viewing same map in realtime (see mapping.rb to understand the 'message' action)
-      m.message 'destroy',@current.id
-    
       m.delete
     end
 

public/404.html

@@ -45,13 +45,14 @@
       margin-bottom: 24px;
     }
     div.dialog {
-      width: 500px;
+      width: 380px;
       border: 0px;
       border-right-color: #999;
       border-bottom-color: #999;
       float: left;
-      margin-right: 100px;
+      margin-right: 50px;
-      padding-top: 150px;
+      padding-top: 70px;
+      padding-bottom: 70px;
     }
     .picture {
       width: 450px;
@@ -64,12 +65,12 @@
       float: left;
       background-position:50% 20%;
       background-size: 100%;
-      margin-top: 162px;
+      margin-top: 110px;
     }
 
     .wrapper {
       margin: 0 auto;
-      width: 1100px;
+      width: 900px;
     }
 
     .button {