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 @@
color: $primary;
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
import { SearchBarComponent } from './search-bar/search-bar.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component';
import { RemoveBracketsPipe } from './remove-brackets.pipe';
@NgModule({
declarations: [
......@@ -35,7 +36,8 @@ import { SrctLogoComponent } from './nav-bar/srct-logo/srct-logo.component';
ShowHideArrowComponent,
FeedbackDialogComponent,
SearchBarComponent,
SrctLogoComponent
SrctLogoComponent,
RemoveBracketsPipe
],
imports: [
BrowserModule,
......
......@@ -105,7 +105,7 @@ export class DataProviderService {
const schedule = new SpecialSchedule(jsonSchedule.valid_start, jsonSchedule.valid_end, open_times);
special_schedules.push(Object.freeze(schedule));
}
console.log(special_schedules);
// console.log(special_schedules);
places.push(new Place(
main_schedule_times,
special_schedules,
......
......@@ -11,13 +11,16 @@
<div class="place-location">{{place.location}}</div>
</div>-->
<div (click)="openInContext()" class="place-card">
<div class="closed-shader"></div>
<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-status">OPEN</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 class="place-location">The Johnson Center</div>
<div class="place-location">{{place.location }}</div>
<div class="place-error-feedback">See an error?</div>
</div>
@import '../../../../global-styles';
.place-card {
position: relative;
width: 210px;
height: 240px;
background-color: white;
......@@ -19,18 +20,20 @@
// background-color: grey;
// image-rendering: crisp-edges;
}
.place-title {
font-family: Nunito-Medium;
font-size: 25px;
color: #354052;
margin: 18px auto 0px auto;
.title-container{
margin:8px 0px 8px 0px;
height:32px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.place-open-badge {
min-height: 20px;
width: 88px;
height: 20px;
margin: 3px auto 0px auto;
margin: 0px auto 0px auto;
background-color: #3ac550;
border-radius: 100px;
display: flex;
......@@ -72,10 +75,20 @@
.place-error-feedback {
/* error: */
position:absolute;
bottom:0px;
right:5px;
z-index: 1000;
font-family: NunitoSans-Regular;
font-size: 9px;
color: #7F8FA4;
letter-spacing: -0.22px;
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
......@@ -15,7 +15,7 @@ export class PlaceCardComponent implements OnInit {
@Input() private place: Place;
private status: string;
private week: string[] = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
private url;
private url;
constructor(private dataProvider: DataProviderService, public dialog: MdDialog,private sanitizer: DomSanitizer) { }
ngOnInit() {
this.url = this.sanitizer.bypassSecurityTrustUrl('https://unsplash.it/200/300?image='+Math.floor((Math.random()*999+1)));
......
......@@ -34,7 +34,7 @@ export class Place {
schedule = this.special_schedules[useSpecialSchedule].openTimes;
}
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
if (day.start_day !== day.end_day) {
if (day.end_day === dayOfWeek) {
......@@ -60,12 +60,21 @@ export class Place {
const today = currTime.getDay() - 1;
const inSeconds = currTime.getHours() * 60 * 60 + currTime.getMinutes() * 60 + currTime.getSeconds();
const dayOfWeek = currTime.getDay() - 1;
const useSpecialSchedule = this.useSpecial();
let timeTilClose = new Time();
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
if (this.isOpen()) {
for (let i = 0; i < this.main_schedule_times.length; i++) {
const day = this.main_schedule_times[i];
for (let i = 0; i < schedule.length; i++) {
const day = schedule[i];
if (day.end_day !== day.start_day) {
if (dayOfWeek === day.end_day) {
sumSeconds = day.end_time.inSeconds() - inSeconds - 86400;
......@@ -82,6 +91,7 @@ export class Place {
return timeTilClose;
}
}
useSpecial(): number {
const todaysDate = new Date();
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