styled

Gemfile

@@ -28,6 +28,7 @@ gem 'haml', '~> 4.0', '>= 4.0.7'
 gem 'paperclip', '~> 4.3', '>= 4.3.6'
 # Use Unicorn as the app server
 # gem 'unicorn'
+gem 'puma'
 
 # Use Capistrano for deployment
 # gem 'capistrano-rails', group: :development

Gemfile.lock

@@ -87,6 +87,7 @@ GEM
       cocaine (~> 0.5.5)
       mime-types
       mimemagic (= 0.3.0)
+    puma (3.2.0)
     rack (1.6.4)
     rack-test (0.6.3)
       rack (>= 1.0)
@@ -163,6 +164,7 @@ DEPENDENCIES
   jbuilder (~> 2.0)
   jquery-rails
   paperclip (~> 4.3, >= 4.3.6)
+  puma
   rails (= 4.2.6)
   sass-rails (~> 5.0)
   sdoc (~> 0.4.0)

Procfile

@@ -0,0 +1 @@
+web: bundle exec puma -C config/puma.rb

app/assets/javascripts/posts.coffee.erb

@@ -0,0 +1,59 @@
+$(document).on 'change', '#post_category_id', ->
+	$.ajax '/update_form',
+			type: 'POST',
+			data: {
+				category_id: $('#post_category_id option:selected').val()
+			}
+
+
+
+
+refresh_pin = ->
+  $('#location_pin').remove()
+  $('#map_photo').off 'click'
+  set_pin()
+
+
+set_pin = ->
+  map = $('#map_photo')
+  map.css 'cursor', 'url(<%= asset_path "flag.png" %>), auto'
+  map.on 'click', (e) ->
+			offset = $(this).offset()
+			left_offset = (e.pageX - (offset.left)) / $(this).width() * 100
+			top_offset = (e.pageY - (offset.top)) / $(this).height() * 100
+			add_pin left_offset, top_offset
+			map.off 'click'
+			map.css 'cursor', 'auto'
+
+
+add_pin = (x, y) ->
+  map = $('#map_photo')
+  $('<div>').addClass('map_pin').attr('id', 'location_pin').css(
+    'left': x + '%'
+    'top': y + '%').appendTo '#map_photo'
+  $('#post_locX').val x
+  $('#post_locY').val y
+
+
+
+$ ->
+	$('#map_form').hide()
+	if( $('#post_category_id option:selected').val() == '1' )
+		$('#map_form').fadeIn()
+		if( $('#post_locX').val() && $('#post_locY').val() )
+			$('<div>').addClass('map_pin').attr('id', 'location_pin').css(
+	    'left': $('#post_locX').val() + '%'
+	    'top': $('#post_locY').val() + '%').appendTo '#map_photo'
+		else
+			set_pin()
+
+		$('#refresh_pin_button').on 'click', ->
+	   	refresh_pin()
+	else
+		$('#map_form').fadeOut()
+
+$(document).on 'page:load', ->
+	$('#map_form').hide()
+
+
+

app/assets/javascripts/public.coffee.erb

@@ -1,34 +0,0 @@
-$(document).ready ->
-  set_pin()
-  $('#refresh_pin_button').click( (e) ->
-    refresh_pin()
-  )
-
-
-refresh_pin = -> 
-  $('#location_pin').remove()
-  $('#map_photo').off('click')
-  set_pin()
-
-
-set_pin = ->
-  map = $('#map_photo')
-  map.css( 'cursor', 'url(<%= asset_path "flag.png" %>), auto' )
-
-  map.on('click', (e)->
-    offset = $(this).offset()
-
-    left_offset = ( (e.pageX - offset.left) / $(this).width() ) * 100
-    top_offset = ( (e.pageY - offset.top) / $(this).height() ) * 100
-
-    add_pin(left_offset, top_offset)
-    map.off('click')
-    map.css( 'cursor', 'auto' )
-  )
-
-add_pin = (x,y) ->
-	map = $('#map_photo')
-	$('<div>').addClass('map_pin').attr('id', 'location_pin')
-    .css({'left': x + '%', 'top': y+'%'})
-	.appendTo('#map_photo')
-

app/assets/stylesheets/posts.sass

@@ -0,0 +1,117 @@
+@import 'mixins'
+
+
+//--------- form styles
+#new_post
+	max-width: 600px
+	margin: 50px auto
+	.submit
+		text-align: center
+		input
+			&[type="submit"]
+				margin: 0 auto
+				padding: 10px 20px
+				background: rgba(200,50,200,0.35)
+				outline: none
+				font-size: 1.3rem
+				font-family: 'Roboto'
+				border: none
+				color: white
+				cursor: pointer
+				font-weight: bold
+				+transition(0.2s ease all)
+				&:hover
+					background: rgba(200,50,200,0.5)
+	.input 
+		margin: 20px 0px
+		display: flex
+		flex-direction: column
+		.upload
+			text-align: center
+			width: 90px
+			line-height: 35px
+			border-radius: 8px
+			box-shadow: 0px 0px 0px 1px rgba(100,0,150,0.5)
+			color: black
+			font-size: 1.2rem
+			position: relative
+			+transition(0.2s ease all)
+
+			&:hover
+				font-weight: bold
+				background: rgba(200,50,200,0.4)
+				box-shadow: none
+				color: white
+				cursor: pointer
+		select
+			padding: 10px
+			background: transparent
+			&:hover
+				cursor: pointer
+
+		input
+			flex-grow: 1
+			padding: 10px
+			&[type="submit"]
+				padding: 20px
+				color: red
+			&[type="file"]
+				display: block
+				width: 90px
+				height: 35px
+				opacity: 0
+				top: 0px
+				left: 0px
+				position: absolute
+				background-color: red
+				cursor: pointer
+
+		label
+			margin: 10px 0px
+		textarea
+			height: 400px
+			resize: vertical
+			padding: 20px
+		input, textarea, select
+			font-family: 'Roboto'
+			font-size: 1rem
+			&:focus
+				outline: 2px solid rgba(250,0,250,0.1)
+
+
+
+
+
+//--------- map styles
+#map_form
+	margin: 50px auto
+	max-width: 1100px
+#refresh_pin_button
+	border-radius: 8px
+	box-shadow: 0px 0px 0px 1px rgba(100,0,150,0.5)
+	color: black
+	padding: 10px
+	margin: 0 auto
+	width: 90px
+	margin-bottom: 3px
+	+transition(0.2s ease all)
+	&:hover
+		background: rgba(200,50,200,0.5)
+		box-shadow: none
+		color: white
+		cursor: pointer
+#map_photo
+	position: relative
+	z-index: 1
+	img
+		width: 100%
+.map_pin 
+	position: absolute
+	width: 20px
+	height: 20px
+	background-image: url(image_path('flag.png'))
+	z-index: 10
+	transition: 0.3s ease all
+	&:hover
+		cursor: pointer
+		+transform(translateY(-2px))