Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Service info style with tachyons! #149

Merged
merged 8 commits into from
Jun 8, 2017
Merged

Service info style with tachyons! #149

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b4597c9
add some css classes
MohamedOmarii Jun 7, 2017
85c42e9
add back button link variable
MohamedOmarii Jun 7, 2017
8aa4176
style information page
MohamedOmarii Jun 7, 2017
732e0df
Merge branch 'master' into serviceInfoStyle
MohamedOmarii Jun 7, 2017
2324fee
add img
MohamedOmarii Jun 8, 2017
c455bb8
Merge branch 'master' into serviceInfoStyle
m4v15 Jun 8, 2017
3373a5e
fix merge conflict
m4v15 Jun 8, 2017
7572eb2
make background image function work for the serviceInfo page
m4v15 Jun 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions public/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,17 @@
.h3-5 {
height: 6rem;
}

.amiri {
font-family: 'Amiri', serif;
}

.bg-color-80{
background: #6570D1;
opacity: 0.8;
}

.bg-liwan {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove this after results page is merged !

background: url("../assets/img/liwan_list_item.png") 0 0 no-repeat;
background-size: cover;
}
3 changes: 2 additions & 1 deletion routes/serviceInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ module.exports = (req, res) => {
else {
res.render('serviceInfo', {
service: service,
latlng: coordinates
latlng: coordinates,
back: req.headers.referer
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can explain what this line do ?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

req.headers.referer is the URL of the page before the page that the client is currently on. We send this to handlebars, and use the URL as the href in the anchor link of the back button.

})
}
})
Expand Down
6 changes: 4 additions & 2 deletions views/layouts/main.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@
<html dir={{{dir}}} lang={{{lang}}}>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<title>{{{title}}}</title>
<!-- Stylesheets: ours, icons (3x) and tachyons -->
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./assets/my-icons-collection /font/flaticon.css">
<link rel="stylesheet" href="./assets/foundation_icons_accessibility/stylesheets/accessibility_foundicons.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css"/>
<!-- Google Font Link -->
<link href="https://fonts.googleapis.com/css?family=Amiri" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
</head>
<body class="vh-100 bg-color pt4">
<body class="vh-100 bg-color pt4 pb6 amiri">
{{>header}}
{{{body}}}
{{>navbar}}
Expand Down
65 changes: 45 additions & 20 deletions views/serviceInfo.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,49 @@
<section class="">
<section class="tc w-100 white">
<div class="mt4 pt2 f3 mh2 fixed top-0">
<a href="{{{back}}}" class="near-white dim" aria-label={{text.back}}><i aria-hidden="true" class="{{{chooseBack dir}}}"></i></a>
</div>
<div class=" ">
<h1 class="ma0">{{service.name}}</h1>
<h2>{{text.address}} - {{service.address}}</h2>
<h3 class="">{{text.accessTitle}}</h3>
<ul class="pa0 f2">
{{#each service.accessOptions}}
<i {{{convertToIcons this}}} aria-hidden="true" title="{{{this}}}"></i>
<span class="sr-only">{{this}}</span>
{{/each}}
</ul>
<p>{{text.desc}}</p><p>{{service.desc}}</p>
<p>{{text.opens}}</p><p>{{service.open}}</p>
<h2>{{text.contact}}</h2>
<p>{{text.phone}}</p><p>{{service.phoneNumber}}</p>
<p>{{text.email}}</p><p>{{service.email}}</p>
<div id="googleMap" style="width:100%;height:400px;" data-lat={{latlng.lat}} data-lng={{latlng.lng}} data-name={{service.name}}></div>
<section class="">
<a href="https://www.facebook.com"><i class="fa fa-facebook link dim black " title='Link to Facebook Page'></i></a>
<a href="https://www.instagram.com"><i class="fa fa-instagram link dim black " title='Link to Instagram Page'></i></a>
</section>
<div class="vh-33 pt6 bg-liwan">
<div class="bg-black-50 white ba br2 b--transparent ma0 pa0">
<div class="dib w-40 ma0 pa0">
<h2 class="ma1 f4">{{service.name}}</h1>
<h2 class="ma0 f6">{{service.address}}</h2>
</div>
<div class="dib w-40">
<h3 class="sr-only">{{text.accessTitle}}</h3>
<ul class="pa0 f4 black w-100 tc">
{{#each service.accessOptions}}
<div class="dib pt1 h2 w2 br-100 bg-white ">
<i {{{convertToIcons this}}} aria-hidden="true" title="{{{this}}}"></i>
<span class="sr-only">{{this}}</span>
</div>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="bg-near-white black">
<div class="">
<p class="sr-only">{{text.desc}}</p><p class="dib">{{service.desc}}</p>
</div>
<div class="">
<p class="b dib mh2">{{text.opens}}</p><p class="dib">{{service.open}}</p>
</div>
<h2 class="sr-only">{{text.contact}}</h2>
<div class="">
<p class="b dib mh2">{{text.phone}}</p><p class="dib">{{service.phoneNumber}}</p>
</div>
<div class="">
<p class="b dib mh2">{{text.email}}</p><p class="dib">{{service.email}}</p>
</div>
<section class="f3">
<a href="https://www.facebook.com" aria-label="{{{text.facebook}}}"><i class="fa fa-facebook link dim black" aria-hidden="true"></i></a>
<a href="https://www.instagram.com" aria-label="{{{text.instagram}}}"><i class="fa fa-instagram link dim black" aria-hidden="true"></i></a>
</section>
<div id="googleMap" style="width:100%;height:400px;" data-lat={{latlng.lat}} data-lng={{latlng.lng}} data-name={{service.name}}></div>
<div class="h4">

</div>
</div>
</section>

Expand Down