Skip to content

Commit

Permalink
Merging fixes on signout and FB login
Browse files Browse the repository at this point in the history
  • Loading branch information
@c-brooks
c-brooks committed Nov 1, 2016
2 parents 7c254cd + a099a37 commit 6bfd6f9
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 46 deletions.
80 changes: 50 additions & 30 deletions app/assets/javascripts/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,14 @@ Vue.component('log-reg-btn', {
}
})

Vue.component('search-bar', {
template:
`<div class="input search-bar-container">
<input type="text" class="form-control search-bar" placeholder="What are you looking for?">
<span class="glyphicon glyphicon-search btn-search clickable" aria-hidden="true"></span>
</div>`
});

Vue.component('vue-panel', {
template:
`<div class="close-panel clickable" v-on:click="closePanel">
Expand All @@ -87,24 +95,26 @@ Vue.component('log-reg-btn', {
`<div class="vue-panel">
<vue-panel/>
<div class="app-container">
<div class="game-info">
<game-box
:datetime="game_info.datetime"
:sport="game_info.sport"
:team1="game_info.team1"
:team2="game_info.team2">
</game-box>
<div class="section-header">EVENTS</div>
<event-box
v-if="game_info.events"
v-for="event in game_info.events"
:id="event.id"
:name="event.name"
:venue="event.venue"
:attendees="event.attendees">
</event-box>
<div class="box" v-if="!game_info.events.length">
Unfortunately there are no events for this game. Are you hosting one?
<div class="content">
<div class="game-info">
<game-box
:datetime="game_info.datetime"
:sport="game_info.sport"
:team1="game_info.team1"
:team2="game_info.team2">
</game-box>
<div class="section-header">EVENTS</div>
<event-box
v-if="game_info.events"
v-for="event in game_info.events"
:id="event.id"
:name="event.name"
:venue="event.venue"
:attendees="event.attendees">
</event-box>
<div class="box" v-if="!game_info.events.length">
Unfortunately there are no events for this game. Are you hosting one?
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -132,7 +142,7 @@ Vue.component('log-reg-btn', {
<button class="btn btn-primary" v-on:click="cancel" v-if="isAttending">Cancel RSVP</button>
<button class="btn btn-primary" v-on:click="attending" v-else>I'm attending!</button>
<p class="alt-text" v-if="attendees === 1">{{attendeesCount}} person attending</p>
<p class="alt-text" v-if="attendeesCount === 1">{{attendeesCount}} person attending</p>
<p class="alt-text" v-else>{{attendeesCount}} people attending</p>
</div>
<div class="info-container col-sm-9">
Expand Down Expand Up @@ -411,13 +421,13 @@ Vue.component('log-reg-btn', {
`<div class="vue-panel">
<vue-panel/>
<div class="app-container">
<div class="login box">
<facebook-button/>
<div class="center special-text">OR</div>
<login-form/>
<div class="content">
<div class="login box">
<facebook-button/>
<div class="center special-text">OR</div>
<login-form/>
</div>
</div>
</div>
</div>`
};
Expand All @@ -427,10 +437,12 @@ Vue.component('log-reg-btn', {
`<div class="vue-panel">
<vue-panel/>
<div class="app-container">
<div class="login box">
<facebook-button/>
<div class="center special-text">OR</div>
<register-form/>
<div class="content">
<div class="login box">
<facebook-button/>
<div class="center special-text">OR</div>
<register-form/>
</div>
</div>
</div>
</div>`
Expand Down Expand Up @@ -473,7 +485,15 @@ Vue.component('log-reg-btn', {
scroll: function() {
var that = this;
window.addEventListener('scroll', function () {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
// Show scroll to top icon
if ($(window).scrollTop() > $(window).height()) {
$('.scroll-to-top').css('opacity', '100');
} else {
$('.scroll-to-top').css('opacity', '0');
}

// Load more games
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
that.getGames();
}
})
Expand Down
60 changes: 54 additions & 6 deletions app/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,20 +54,54 @@ body {
padding-top: 70px;
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

a {
color: $brand-dark-red;
a {
color: $brand-dark-red;

&:hover {
color: $brand-light-red;
}

a:hover {
&:visited {
color: $brand-light-red;
}
}


.app-container {
width: 50%;
margin: 0 auto;
border: 1.5px solid $ui-dark-border;

.content {
border: 1.5px solid $ui-dark-border;
}

.search-bar, .btn-search {
height: 62px;
}

.search-bar-container {
margin-bottom: 25px;
position: relative;
input {
padding-right: 35px;
}
}
}

.btn-search {
line-height: 62px;
font-size: 15px;
color: $ui-pale-gray;
position: absolute;
right: 12px;
top: 0px;
}

.form-control:focus {
border: 1px solid $brand-light-red;
box-shadow: 0px 0px 10px $brand-light-red;
}

.navbar {
Expand Down Expand Up @@ -164,7 +198,7 @@ label,
.vue-panel {
@include app-background-main;
border: 2px solid $ui-dark-border;
z-index: 2;
z-index: 5;
height: 100vh;
width: 100%;
position: fixed;
Expand Down Expand Up @@ -235,6 +269,10 @@ label,
border: 2px solid $brand-light-red;
box-shadow: 0px 0px 10px $brand-light-red;
}

&:active {
@include app-background-main;
}
}

.btn-social:hover {
Expand All @@ -245,12 +283,22 @@ label,
font-size: 12px;
position: relative;
top: 70px;
text-align: center;
}

.svg-logo {
position: fixed;
top: -210px;
left: 0;
width: 350px;
}

.scroll-to-top {
opacity: 0;
position: fixed;
bottom: 0;
right: 0;
font-size: 25px;
color: $brand-light-red;
padding: 0 15px;
transition: opacity 1s ease-out;
}
28 changes: 18 additions & 10 deletions app/views/home/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,21 +27,29 @@
</component>
</transition>

<div class="app-container">
<div class="games">
<game-box
v-for="game in games_list"
:id="game.id"
:datetime="game.datetime"
:sport="game.sport.name"
:team1="game.team1.name"
:team2="game.team2.name">
</game-box>
<div class="app-container" id="top">
<search-bar></search-bar>

<div class="content">
<div class="games">
<game-box
v-for="game in games_list"
:id="game.id"
:datetime="game.datetime"
:sport="game.sport.name"
:team1="game.team1.name"
:team2="game.team2.name">
</game-box>
</div>
</div>
</div>

<div class="bottom-loader">
<img src="/assets/loader.svg" alt="loading">
</div>

<div class="scroll-to-top">
<a href="#"><span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span></a>
</div>

</div>
9 changes: 9 additions & 0 deletions db/schema.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,15 @@
add_index "games", ["team1_id_id"], name: "index_games_on_team1_id_id", using: :btree
add_index "games", ["team2_id_id"], name: "index_games_on_team2_id_id", using: :btree

create_table "games_tables", force: :cascade do |t|
t.integer "sport_id"
t.integer "team1_id"
t.integer "team2_id"
t.datetime "event_datetime"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end

create_table "reviews", force: :cascade do |t|
t.integer "rating"
t.text "description"
Expand Down

0 comments on commit 6bfd6f9

Please sign in to comment.