Open Bolandish opened 7 years ago
Hey, can you provide some example of what you are trying to do?
Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" href="mails.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<title>@{{subject}}</title>
<!-- <style> -->
</head>
<body>
<table class="body">
<tr>
<td class="center" align="center" valign="top">
<center>
<spacer size="40"></spacer>
<wrapper class="header">
<container>
<row class="collapse">
<columns>
<center>
<img width="40" height="40" src="assets/img/logo.png">
</center>
</columns>
</row>
</container>
</wrapper>
@yield("content")
<wrapper>
<container class="footer">
<row class=" text-center">
<columns>
<span class="text-center">
<strong>talenthub.io</strong>
<br/>
Nyhavnsgade 14, 4.th, 9000 Aalborg, Denmark </span>
</columns>
</row>
<spacer size="20"></spacer>
<row class=" text-center">
<columns large="4">
<a href="https://talenthub.io">Unsubribe</a>
</columns>
<columns large="4">
<a href="https://talenthub.io">GO TO WEBSITE</a>
</columns>
<columns large="4">
<a href="https://talenthub.io">View in browser</a>
</columns>
</row>
</container>
</wrapper>
<spacer size="40"></spacer>
</center>
</td>
</tr>
</table>
<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none; white-space:nowrap; font:15px courier; line-height:0;">
</div>
</body>
</html>
@extends('mails.new_layout')
@section('content')
<container>
<spacer size="30"></spacer>
<row>
<columns small="12">
<h1>{{ trans("mails.candidate.hello") }}</h1>
<p>
{{ trans("mails.candidate.description") }}
</p>
</columns>
</row>
<spacer size="30"></spacer>
@php($i=1)
@foreach($candidates as $candidate)
<row class="list-item">
<columns class="place" large="2">
<div class="small-text-center">{{$i}}</div>
</columns>
<columns class="" large="8">
<div class="small-text-center"><strong>{{$candidate->user->name}}</strong>
<br/>Udvikler
</div>
</columns>
@if($candidate->skills_score >= 70)
<columns class="percent green" large="2">
<div class="small-text-center"> {{$candidate->skills_score_floor}}%</div>
</columns>
@elseif($candidate->skills_score >= 40)
<columns class="percent yellow" large="2">
<div class="small-text-center"> {{$candidate->skills_score_floor}}%</div>
</columns>
@else
<columns class="percent red" large="2">
<div class="small-text-center"> {{$candidate->skills_score_floor}}%</div>
</columns>
@endif
</row>
@php($i++)
@endforeach
<spacer size="30"></spacer>
<row>
<columns large="7">
<div class="small-text-center">{{ trans("mails.candidate.see_more_text") }}</div>
<spacer size="10"></spacer>
</columns>
<columns large="5">
<button class="expand" href="https://link.com">{{ trans("mails.candidate.see_all_candidates") }}</button>
</columns>
</row>
</container>
@stop
mails.scss
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import 'settings';
@import "node_modules/foundation-emails/scss/foundation-emails";
@import 'styles';
The result is here
As you can see, the result isn't responsive. If i compiles the view with foundation-cli, its responsive.
@petecoop Do you have any idea ? :)
Hey, haven't had much of a chance to look into this... by foundation-cli is this the inky-cli that you're using to compile it?
Yup
Hi @Bolandish and @petecoop!
Unfortunately, I'm experiencing the same problem.
Foundation CLI: 2.2.5 petecoop/laravel-inky: 0.5.1
HTML generated via foundation
(into my project's dist
directory) works fine.
Media queries for HTML generated via this package don't appear to work at all.
Hrm…
Update?
Hi @Bolandish @petecoop @Sylk @furey
I've just been using this and found the issue to be that Foundation keeps media queries in a <style>
tag after inlining, this PHP version just inlines everything and strips out the <style>
block completely.
Our workaround was to take all the @media
blocks out off the app.css
created in the dist
directory and paste them into a new
HI!
For me, it doesn't work with the CSS from foundation. Its not responsive at all.. What am i doing wrong? :)
Btw. nice code!