Commit 741a2b5e authored by mdsecurity's avatar mdsecurity
Browse files

fixed text issue with place card

when the title was too long it would offset everything else
parent 3346e09a
...@@ -135,3 +135,11 @@ ...@@ -135,3 +135,11 @@
color: $primary; color: $primary;
margin-left: 50.5px; margin-left: 50.5px;
} }
.place-title {
font-family: Nunito-Medium;
font-size: 21px;
color: #354052;
line-height: 22px;
// margin: 15px auto 5px auto;
text-align: center;
}
\ No newline at end of file
...@@ -19,6 +19,7 @@ import { FeedbackDialogComponent } from './place-window/area/place-card/feedback ...@@ -19,6 +19,7 @@ import { FeedbackDialogComponent } from './place-window/area/place-card/feedback
import { SearchBarComponent } from './search-bar/search-bar.component'; import { SearchBarComponent } from './search-bar/search-bar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component'; import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component';
import { RemoveBracketsPipe } from './remove-brackets.pipe';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -35,7 +36,8 @@ import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component'; ...@@ -35,7 +36,8 @@ import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component';
ShowHideArrowComponent, ShowHideArrowComponent,
FeedbackDialogComponent, FeedbackDialogComponent,
SearchBarComponent, SearchBarComponent,
SrctLogoComponent SrctLogoComponent,
RemoveBracketsPipe
], ],
imports: [ imports: [
BrowserModule, BrowserModule,
......
...@@ -105,7 +105,7 @@ export class DataProviderService { ...@@ -105,7 +105,7 @@ export class DataProviderService {
const schedule = new SpecialSchedule(jsonSchedule.valid_start, jsonSchedule.valid_end, open_times); const schedule = new SpecialSchedule(jsonSchedule.valid_start, jsonSchedule.valid_end, open_times);
special_schedules.push(Object.freeze(schedule)); special_schedules.push(Object.freeze(schedule));
} }
console.log(special_schedules); // console.log(special_schedules);
places.push(new Place( places.push(new Place(
main_schedule_times, main_schedule_times,
special_schedules, special_schedules,
......
...@@ -11,13 +11,16 @@ ...@@ -11,13 +11,16 @@
<div class="place-location">{{place.location}}</div> <div class="place-location">{{place.location}}</div>
</div>--> </div>-->
<div (click)="openInContext()" class="place-card"> <div (click)="openInContext()" class="place-card">
<div class="closed-shader"></div>
<img [src]="url" class="place-picture"> <img [src]="url" class="place-picture">
<div class="place-title">IndAroma</div> <div class="title-container">
<div class="place-title">{{place.name | removeBrackets}}</div>
</div>
<div class="place-open-badge"> <div class="place-open-badge">
<div class="place-status">OPEN</div> <div class="place-status">OPEN</div>
<div class="place-divider"></div> <div class="place-divider"></div>
<div class="place-time-remaining">~13Hrs</div> <div class="place-time-remaining">~{{place.openFor().hour}}Hrs</div>
</div> </div>
<div class="place-location">The Johnson Center</div> <div class="place-location">{{place.location }}</div>
<div class="place-error-feedback">See an error?</div> <div class="place-error-feedback">See an error?</div>
</div> </div>
@import '../../../../global-styles'; @import '../../../../global-styles';
.place-card { .place-card {
position: relative;
width: 210px; width: 210px;
height: 240px; height: 240px;
background-color: white; background-color: white;
...@@ -19,18 +20,20 @@ ...@@ -19,18 +20,20 @@
// background-color: grey; // background-color: grey;
// image-rendering: crisp-edges; // image-rendering: crisp-edges;
} }
.title-container{
.place-title { margin:8px 0px 8px 0px;
font-family: Nunito-Medium; height:32px;
font-size: 25px; width: 100%;
color: #354052; display: flex;
margin: 18px auto 0px auto; justify-content: center;
align-items: center;
} }
.place-open-badge { .place-open-badge {
min-height: 20px;
width: 88px; width: 88px;
height: 20px; height: 20px;
margin: 3px auto 0px auto; margin: 0px auto 0px auto;
background-color: #3ac550; background-color: #3ac550;
border-radius: 100px; border-radius: 100px;
display: flex; display: flex;
...@@ -72,10 +75,20 @@ ...@@ -72,10 +75,20 @@
.place-error-feedback { .place-error-feedback {
/* error: */ /* error: */
position:absolute;
bottom:0px;
right:5px;
z-index: 1000;
font-family: NunitoSans-Regular; font-family: NunitoSans-Regular;
font-size: 9px; font-size: 9px;
color: #7F8FA4; color: #7F8FA4;
letter-spacing: -0.22px; letter-spacing: -0.22px;
line-height: 13px; line-height: 13px;
margin: 18px 4px 0px auto; }
.closed-shader{
position: absolute;
width:100%;
height: 100%;
opacity: .3;
background-color: black;
} }
\ No newline at end of file
...@@ -34,7 +34,7 @@ export class Place { ...@@ -34,7 +34,7 @@ export class Place {
schedule = this.special_schedules[useSpecialSchedule].openTimes; schedule = this.special_schedules[useSpecialSchedule].openTimes;
} }
for (let i = 0; i < schedule.length; i++) { for (let i = 0; i < schedule.length; i++) {
const day = this.main_schedule_times[i]; const day = schedule[i];
// change the order of if statements at some point // change the order of if statements at some point
if (day.start_day !== day.end_day) { if (day.start_day !== day.end_day) {
if (day.end_day === dayOfWeek) { if (day.end_day === dayOfWeek) {
...@@ -60,12 +60,21 @@ export class Place { ...@@ -60,12 +60,21 @@ export class Place {
const today = currTime.getDay() - 1; const today = currTime.getDay() - 1;
const inSeconds = currTime.getHours() * 60 * 60 + currTime.getMinutes() * 60 + currTime.getSeconds(); const inSeconds = currTime.getHours() * 60 * 60 + currTime.getMinutes() * 60 + currTime.getSeconds();
const dayOfWeek = currTime.getDay() - 1; const dayOfWeek = currTime.getDay() - 1;
const useSpecialSchedule = this.useSpecial();
let timeTilClose = new Time(); let timeTilClose = new Time();
let sumSeconds = 0; let sumSeconds = 0;
let schedule;
if(useSpecialSchedule === -1){
schedule = this.main_schedule_times;
}else{
schedule = this.special_schedules[useSpecialSchedule].openTimes;
}
// clean up if statements later // clean up if statements later
if (this.isOpen()) { if (this.isOpen()) {
for (let i = 0; i < this.main_schedule_times.length; i++) { for (let i = 0; i < schedule.length; i++) {
const day = this.main_schedule_times[i]; const day = schedule[i];
if (day.end_day !== day.start_day) { if (day.end_day !== day.start_day) {
if (dayOfWeek === day.end_day) { if (dayOfWeek === day.end_day) {
sumSeconds = day.end_time.inSeconds() - inSeconds - 86400; sumSeconds = day.end_time.inSeconds() - inSeconds - 86400;
...@@ -82,6 +91,7 @@ export class Place { ...@@ -82,6 +91,7 @@ export class Place {
return timeTilClose; return timeTilClose;
} }
} }
useSpecial(): number { useSpecial(): number {
const todaysDate = new Date(); const todaysDate = new Date();
for (let i = 0; i < this.special_schedules.length; i++) { for (let i = 0; i < this.special_schedules.length; i++) {
......
import { RemoveBracketsPipe } from './remove-brackets.pipe';
describe('RemoveBracketsPipe', () => {
it('create an instance', () => {
const pipe = new RemoveBracketsPipe();
expect(pipe).toBeTruthy();
});
});
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'removeBrackets'
})
export class RemoveBracketsPipe implements PipeTransform {
transform(value: string): string {
console.log(value.substr(0, value.indexOf('[')));
const index = value.indexOf('[');
if (index === -1) {
return value;
}
return value.substr(0, value.indexOf('['));
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment