Commit 42454461 authored by mdsecurity's avatar mdsecurity

changed size of the card

parent f2efc23d
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<div *ngFor="let location of locations" class="location-card card col-xs"> <div *ngFor="let location of locations" class="location-card card col-xs">
<img class="location-background-picture" src="{{location.picture}}" alt="Card image"> <img class="location-background-picture" src="{{location.picture}}" alt="Card image">
<img class="location-circle-picture" src="{{location.picture}}" alt="Card image"> <img class="location-circle-picture" src="{{secondPic}}" alt="Card image">
<div class="card-block"> <div class="card-block">
<h4 class="card-title mb-0">{{location._name}}</h4> <h4 class="card-title mb-0">{{location._name}}</h4>
......
//card //card
$card-spacing: .5rem; $card-spacing: .5rem;
$card-width: 20rem; $card-width: 15rem;
$card-height: 25rem; $card-height: 20rem;
$card-border-radius:0.25rem; $card-border-radius:0.25rem;
$card-border:1px solid rgba(0, 0, 0, 0.125); $card-border:1px solid rgba(0, 0, 0, 0.125);
//picture height //picture height
$card-background-height: 11rem; $card-background-height: 8.5rem;
//card circle pictuer //card circle pictuer
$card-circle-picture-diameter:10rem; $card-circle-picture-diameter:7rem;
@import '../../styles.scss'; @import '../../styles.scss';
.app-container { .app-container {
...@@ -51,7 +51,7 @@ $card-circle-picture-diameter:10rem; ...@@ -51,7 +51,7 @@ $card-circle-picture-diameter:10rem;
right:($card-width/2) - ($card-circle-picture-diameter/2); right:($card-width/2) - ($card-circle-picture-diameter/2);
top:$card-background-height - ($card-circle-picture-diameter/2); top:$card-background-height - ($card-circle-picture-diameter/2);
border-radius:50%; border-radius:50%;
border:3px solid rgba(255, 255, 255, 1); border:5px solid rgba(255, 255, 255, 1);
box-shadow: 0 0 1px white; box-shadow: 0 0 1px white;
height: $card-circle-picture-diameter; height: $card-circle-picture-diameter;
width: $card-circle-picture-diameter; width: $card-circle-picture-diameter;
...@@ -69,7 +69,7 @@ $card-circle-picture-diameter:10rem; ...@@ -69,7 +69,7 @@ $card-circle-picture-diameter:10rem;
width:75%; width:75%;
height:100%; height:100%;
display:flex; display:flex;
background: url(https://dl.dropboxusercontent.com/u/3400459/CodePen/Fullscreen-DIVs/dark-orange.png) center center no-repeat scroll #DC554F; background: center center no-repeat scroll #DC554F;
} }
@mixin transition($transition...) { @mixin transition($transition...) {
......
...@@ -8,6 +8,7 @@ import { Location } from '../location'; ...@@ -8,6 +8,7 @@ import { Location } from '../location';
export class LocationViewComponent implements OnInit { export class LocationViewComponent implements OnInit {
locations: Location[] = []; locations: Location[] = [];
dayOfTheWeek: number; dayOfTheWeek: number;
secondPic = '../assets/BKing.jpg';
constructor() { } constructor() { }
ngOnInit() { ngOnInit() {
...@@ -27,7 +28,8 @@ export class LocationViewComponent implements OnInit { ...@@ -27,7 +28,8 @@ export class LocationViewComponent implements OnInit {
date, date,
date, date,
date]; date];
let picture = '../assets/meTomeKermit.jpg'; let picture = '../assets/JC.jpg';
this.locations[0] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open'); this.locations[0] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
// this.locations[1] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open'); // this.locations[1] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
// this.locations[2] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open'); // this.locations[2] = new Location('Easy Eats', openTimes, closeTimes, picture, 'open');
......
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