app/views/layouts/board.html.erb
<head>
<title>BHGH</title>
<script src = 'https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.js'></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel = 'stylesheet' href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<!-- <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/roboto.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/material-fullpalette.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/css/ripples.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.3.0/js/ripples.min.js"></script> -->
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<link rel="icon"
type="image/png"
href="/logo.png">
<link href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.css' rel = 'stylesheet'>
</head>
<script src = '/lib/underscore-min.js'></script>
<script type = 'text/javascript'>
var events = <%= raw(@events) %>;
var brags = <%= raw(@brags) %>;
var posts = <%= raw(@posts) %>;
var has_errors = <%= !@error_type.nil? %>;
var errors = <%= raw(@errors) %>;
var params = <%= raw(@params) %>;
var error_type = '<%= @error_type %>';
var searching = <%= raw(@searching) %>;
</script>
<script src = '/lib/angular.min.js'></script>
<script src = '/lib/angular-route.min.js'></script>
<script src = '/app.js'></script>
<script src = '/controllers/boardCtrl.js'></script>
<script src = '/landing-page.js'></script>
<div ng-app = 'boardApp' id = 'main-row'>
<div ng-controller = 'BoardCtrl'>
<!-- <div class = 'jumbotron row' id = 'top-jumbotron'>
<div class = 'col-md-4'></div>
<div class = 'col-md-4'>BULLETIN BOARD</div>
<div class = 'col-md-4'>
<div class = 'centered'>
<input id = 'search-input' class = 'form-control' placeholder = 'SEARCH' ng-model = 'searchTerm'>
</div></div>
</div> -->
<!-- header bar -->
<div class='container-header'>
<div class='container-logo'>
<a href="http://bhghsf.org">
<img src='/logo.png' height='25' class='center'>
</a>
</div>
<div class='header'>BULLETIN BOARD</div>
<div class='icon-container'>
<!-- CLICKABLE ICONS -->
<div class='icon' id="addpost" ng-click = 'showAddPost()'>
<img id='post_img' src='/add_post_white.png' height='25' class='center'>
+ Forum
</div>
<div class='icon' id="addbrag" ng-click = 'showAddBrag()'>
<img id='brag_img' src='/add_brag_white.png' height='25' class='center'>
+ Brag
</div>
<div class='icon' id="addevent" ng-click = 'showAddEvent()'>
<img id='event_img' src='/add_event_white.png' height='25' class='center'>
+ Event
</div>
<div class='icon' id='searchicon'>
<img id='search_img' src='/search_white.png' height='25' class='center'>
Search
</div>
<div class='more-info-dropdown'>
<div class='icon' id='moreinfoicon'>
<img id='more_info_img' src='/more_info_white.png' height='25' class='center'>
More
</div>
<div class='dropdown-content'>
<div class='dropdown-icon-container'>
<a target = '_blank' href='http://bhghsf.org'>
<div class='dropdown-icon' id = 'homepage-icon'>
<img id='homepage_img' src='/home_page.png' height='25' class='center'>
Homepage
</div>
</a>
<a target = '_blank' href='https://www.facebook.com/BoysHopeGirlsHopeSanFranciscoBayArea'>
<div class='dropdown-icon' id = 'facebook-icon'>
<img id='facebook_img' src='/facebook.png' height='25' class='center'>
Facebook
</div>
</a>
</div>
</div>
</div>
<!-- DROPDOWNS FROM CLICKING ABOVE ICONS -->
<!-- search bar is hidden until you click search icon -->
<div>
<input id = 'search-input' class = 'form-control' placeholder = 'SEARCH' ng-model = 'searchTerm'>
</div>
<!-- <div class='more-info-icon-container'>
<div class='more-info-icon' id = 'facebook-icon'>
<img id='facebook_img' src='/facebook.png' height='40' class='center'>
Facebook
</div>
<div class='more-info-icon' id = 'homepage-icon'>
<img id='homepage_img' src='/home_page.png' height='40' class='center'>
Homepage
</div>
</div> -->
</div>
</div>
<div class='landing'>
<div id='welcome-message'>Welcome to the BHGH Bulletin Board!</div>
<div class='proceed-btn' id='proceed-btn'> Proceed to Board
<img id='arrow' src='/arrow.png' class='center' height='25'>
</div>
</div>
<!-- header bar for columns-->
<!-- <div class='column-header'>
<div class='col-md-4'>EVENTS</div>
<div class='col-md-4'>BRAGS</div>
<div class='col-md-4'>FORUM</div>
</div> -->
<div class='board'>
<div class='column-header' id='column-header'>
<div>
<div class='col-md-4'>EVENTS</div>
<div class='col-md-4'>BRAGS</div>
<div class='col-md-4'>FORUM</div>
</div>
</div>
<div class = 'col-md-4'>
<!-- <h1 class='column-header'>Events</h1> -->
<div ng-repeat = 'event in events | filter:searchTerm' class = 'board-card event-card' ng-click = 'showEventModal(event)'>
<div class = 'pull-right'>
<img src = '{{event.gravatar}}' class = 'gravatar'>
</div>
<h3>{{event.title}}</h3>
<p>{{event.description}}</p>
<div>{{event.time_string}}</div>
<div>Organizer: {{event.organizer}}</div>
<div>Location:
<a target = '_blank' href = 'https://www.google.com/maps/place/{{event.location}}'>{{event.location}}
</a>
</div>
<div ng-show = 'event.response'>You are {{event.response}}</div>
<div ng-show = 'event.photo_url'>
<img src = '{{event.photo_url}}' class = 'event-photo'>
</div>
</div>
</div>
<div class = 'col-md-4'>
<!-- <h1 class='column-header'>Brags</h1> -->
<div ng-repeat = 'brag in brags | filter:searchTerm' class = 'board-card brag-card' ng-click = 'showBragModal(brag)'>
<div class = 'row brag-img-div' ng-show = 'brag.photo_url != ""'>
<img src = '{{brag.photo_url}}' style = 'width:100%'>
</div>
<div class = 'pull-right'>
<img src = '{{brag.gravatar}}' class = 'gravatar'>
</div>
<h3>{{brag.title}}</h3>
<div class = 'brag-body'>{{brag.body}}</div>
<div>Subject: {{brag.subject}}</div>
<div>Author: {{brag.author}}</div>
<div ng-show = 'brag.liked' class = 'pull-right'>
Liked
</div>
</div>
</div>
<div class = 'col-md-4'>
<!-- <h1 class='column-header'>Forum</h1> -->
<div ng-repeat = 'post in posts | filter:searchTerm' class = 'board-card post-card' ng-click = 'showPostModal(post)'>
<h3>{{post.title}}</h3>
<p>{{post.body}}</p>
<p>Posted By: {{post.author}}</p>
{{post.comments.length}} responses
</div>
</div>
</div>
<%= render 'forum/add_post_modal' %>
<%= render 'events/add_event_modal' %>
<%= render 'brags/add_brag_modal' %>
<%= render 'events/event_modal' %>
<%= render 'brags/brag_modal' %>
<%= render 'forum/post_modal' %>
<!-- <div class = 'affix' id = 'btns-container'>
<button class = 'btn btn-danger round-btn' ng-click = 'showAddEvent()'>+ Event</button>
<button class = 'btn btn-danger round-btn' ng-click = 'showAddBrag()'>+ Brag</button>
<button class = 'btn btn-danger round-btn' ng-click = 'showAddPost()'>+ Post</button>
</div> -->
</div><!--end of board ctrl-->
</div>