Using
"vue": "^2.6.8"
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^2.9.7",
"webpack-merge": "^4.2.1"
I have tried several options to get the correct path for an image in a vue project to work in gh-pages.
.div-bg
{
background-image: url("../assets/previewImages/SAD-1.jpg");
height: 570px;
width: 1020px;
}
.div-bg1
{
background-image: url("/src/assets/previewImages/SAD-1.jpg");
height: 570px;
width: 1020px;
}
.div-bg2
{
background-image: url("~/src/assets/previewImages/SAD-1.jpg");
height: 570px;
width: 1020px;
}
.div-bg3
{
background-image: url("/assets/previewImages/SAD-1.jpg");
height: 570px;
width: 1020px;
}
.div-bg4
{
background-image: url("~/assets/previewImages/SAD-1.jpg");
height: 570px;
width: 1020px;
}
/* .div-bg5
{*/
/* background-image: url("../assets/previewImages/test.jpg");*/
/* background-image: url("#/assets/previewImages/SAD-1.jpg");
height: 570px;
width: 1020px;
} */
But none of them are working.
I tried #/assets/previewImages/SAD-1.jpg but this gives errors when compiling.
Also I have looked at various posts but to no avail.
This project is pushed to gh-pages using
$ npm run build
$ sudo vcg
Thanks
Related
I am using the following script to enable scroll snapping:
<style>
.scroll-snap-wrapper {
overflow: scroll;
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
.section-waitlist-lp {
height: 100vh;
scroll-snap-align: start;
}
.section-waitlist-lp-last {
scroll-snap-align: end;
}
.scroll-snap-wrapper {
-ms-overflow-style: none;
scrollbar-width: none;
}
.scroll-snap-wrapper::-webkit-scrollbar {
display: none;
}
</style>
Now an anchor link that I set on one of the buttons …
<a id="lp-button-2" href="#buttontarget" class="button-waitlist-lp-secondary w-button" style="display: block;">Find out more</a>
… doesn't work anymore, targeting the second section on the page
<div id="buttontarget" class="section-waitlist-lp wf-section">
I had a look at this question + answer on here based on this solution, but it didn't work for me. The staging site can be found here.
Any ideas? Thank you!
I have installed wkhtmltopdf 0.12.3 (with patched qt) on my desktop machine and the exact same version on my Centos virtual machine.
I am using WickedPDF and Rails to convert HTML to PDF.
When the PDF is generated it has slight differences in the font. Some weird letter spacing. I have attached images showing this.
You can see the gap between the e and n this however is not present on my local machine. Image below:
Does anyone know why this would happen?
Any advice would be appreciated.
Thanks
This is the Ruby code which I am using to generate the PDF with WickedPDF
def generate_pdf
pdf = WickedPdf.new
pdf_file = pdf.pdf_from_string(ActionController::Base.new().render_to_string('card_requests/show.pdf.haml', layout: 'pdf', locals: {card_request: self}),
dpi: '300',
margin: {top: 0, bottom: 0, left: 0, right: 0},
page_height: '2.25in',
page_width: '3.75in',
disable_smart_shrinking: false
)
tempfile = Tempfile.new(["#{self.name.gsub(' ', '_').downcase}_biz_card", '.pdf'], Rails.root.join('pdfs'))
tempfile.binmode
tempfile.write pdf_file
tempfile.close
self.pdf = File.open(tempfile.path)
tempfile.unlink
self.save
end
Here is also the show.pdf.haml file with the CSS at the top:
!!! 5
%html
%head
:css
html * {
margin: 0 !important;
padding: 0 !important;
page-break-inside: avoid !important;
}
body {
margin: 0 !important;
padding: 0 !important;
page-break-inside: avoid !important;
text-rendering: optimize-speed;
}
.card-preview {
font-family: 'TradeGothic';
background-size: contain;
width: 369px;
height: 220px;
page-break-after: avoid !important;
position: relative;
}
#card-name {
color: #ED1D27;
font-weight: bold;
font-size: 12pt;
position: absolute;
top: 37px;
left: 39px;
width: 328px;
}
#card-title {
color: #2E2D2D;
font-weight: bold;
position: absolute;
top: 54px;
left: 39px;
font-size: 9pt;
}
#card-office-phone {
color: #4e4e48;
position: absolute;
top: 148px;
left: 39px;
font-size: 8.5pt;
}
#card-cell-phone {
color: #4e4e48;
position: absolute;
top: 135px;
left: 39px;
font-size: 8pt;
width: 200px;
}
#card-email {
color: #4e4e48;
position: absolute;
top: 161px;
left: 39px;
font-size: 8.5pt;
}
#card-website {
color: #4e4e48;
position: absolute;
top: 174px;
left: 39px;
font-size: 8pt;
}
.hide {
display: none;
}
%meta{:charset => "utf-8"}
%body
.card-preview{style: "background-image: url('#{Rails.root.join('app', 'assets', 'images', 'card_template_2.svg')}')"}
#card-name
= card_request.name
#card-title
= card_request.title
#card-office-phone{class: (card_request.office? ? "" : 'hide')}
== office 555 555 5555 #{card_request.ext? ? "ext #{card_request.ext_phone}" : ''}
#card-cell-phone{class: ((card_request.cell? && !card_request.cell_phone.blank?) ? "" : 'hide'), style: (card_request.office? ? "" : 'top: 148px; left: 39px;')}
= (card_request.cell? ? "cell 555 555 5555" : '')
#card-email
= card_request.email
#card-website
www.website.com
I have since fixed this issue by following this:
https://taskman.eionet.europa.eu/issues/20890
It fixes kerning issue on CentOS for me.
I was facing a similar issue of spaces after certain specific letters like
Reg istration ---> space after letter 'g'
O pen ---> space after Capital letter 'O'
The above issue could be due to system specific fonts configs. I referred an issue reported over github for the same https://github.com/wkhtmltopdf/wkhtmltopdf/issues/45
This issue occurs on a production instance (AWS AMI linux) with CentOS 6.x but was working perfectly with ubuntu 14.04. I looked into the system fonts configs 51-local.conf over CentOS at path /etc/fonts/conf.d .If there is no file with name wkhtmltopdf at the same path then use the default fonts file 51-local.conf to have the below configuration as custom fonts.
<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
<match target="font">
<edit mode="assign" name="rgba">
<const>rgb</const>
</edit>
</match>
<match target="font">
<edit mode="assign" name="hinting">
<bool>true</bool>
</edit>
</match>
<match target="font">
<edit mode="assign" name="hintstyle">
<const>hintslight</const>
</edit>
</match>
<match target="font">
<edit mode="assign" name="antialias">
<bool>true</bool>
</edit>
</match>
<match target="font">
<edit mode="assign" name="lcdfilter">
<const>lcddefault</const>
</edit>
</match>
</fontconfig>
Also, If you are using wicked_pdf.rb initializer configuration exec path as /usr/local/bin/wkhtmltopdf for development environment. try to replace the path with /bin/wkhtmltopdf for production bundle
I've been looking through a lot of answers here on stackoverflow that semi-cover what I'm wondering about, but haven't found anything that worked for me.
I understand that the printing page is about 550 px for A4 and therefor bootstrap will use the styles and layout usually used for mobile devices.
When I use Ctrl+P for my web page, the printable page looks just like the mobile version of my page. But how do I make it look like the desktop version? (media > 1024 px) Is there a way to do this?
I know I can change the css specifically for print. But how to solve this thing with the bootstrap 3 grid system? The width on my divs gets based on what I have added for col-xs, but I want print to use the layout (width) for col-md
Edit: After I have been struggeling with this for some more hours I realize that it might be more complex than I first expected. Just changing the width doesn't solve it for me. Many of my divs has the syntax of
<div class="md-right sm-right xs-down col-md-1 col-sm-2 box"></div>
or
<div class="col-md-4 col-sm-6 col-xs-12"></div>
The page looks good in XS for small devices, but printing in XS makes many elements look gigantic. So the question remains. Is there a way to make the printing page look the same as the layout for medium or large devices? Or do I have to make the printing css without using bootstrap grid system and add static widths in pt for all elements to accomplish this?
Thanks in advance
It would be helpful to provide a JSBin. Anyway, since I had this layout in JSBin with col-sm-(asterisk), you can just change all the -sm- to -xs- in between the print media query. All percentages are the same at every breakpoint, so changing sm to xs will print that and ignore the other col-(asterisk) classes. Ahh, I read the post now, you'll need to change all the col-sm to col-md in this and then use !important, that should do it. The xs col are outside media queries, so that's why this is happening.
http://jsbin.com/AzICaQes/5
#media print {
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
float: left;
}
.col-sm-12 {
width: 100%;
}
.col-sm-11 {
width: 91.66666666666666%;
}
.col-sm-10 {
width: 83.33333333333334%;
}
.col-sm-9 {
width: 75%;
}
.col-sm-8 {
width: 66.66666666666666%;
}
.col-sm-7 {
width: 58.333333333333336%;
}
.col-sm-6 {
width: 50%;
}
.col-sm-5 {
width: 41.66666666666667%;
}
.col-sm-4 {
width: 33.33333333333333%;
}
.col-sm-3 {
width: 25%;
}
.col-sm-2 {
width: 16.666666666666664%;
}
.col-sm-1 {
width: 8.333333333333332%;
}
}
Actually, all you need to add (to user.css) is this:
#media print {
#page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
}
}
While you're at it, consider using all these settings for bootstrap 3
#media print {
#page {
size: A4;
margin: 0mm;
}
html, body {
width: 1024px;
}
body {
margin: 0 auto;
line-height: 1em;
word-spacing:1px;
letter-spacing:0.2px;
font: 14px "Times New Roman", Times, serif;
background:white;
color:black;
width: 100%;
float: none;
}
/* avoid page-breaks inside a listingContainer*/
.listingContainer{
page-break-inside: avoid;
}
h1 {
font: 28px "Times New Roman", Times, serif;
}
h2 {
font: 24px "Times New Roman", Times, serif;
}
h3 {
font: 20px "Times New Roman", Times, serif;
}
/* Improve colour contrast of links */
a:link, a:visited {
color: #781351
}
/* URL */
a:link, a:visited {
background: transparent;
color:#333;
text-decoration:none;
}
a[href]:after {
content: "" !important;
}
a[href^="http://"] {
color:#000;
}
#header {
height:75px;
font-size: 24pt;
color:black
}
}
I ended up solving the problem using an own print.css file without all the responsive bootstrap stuff included. Only included some of the necessary bootstrap things with show and hide.
For those who use bootstrap mixins to create columns like this (sass version):
#include make-sm-column(3, 0);
it won't be enough to overwrite the styles for columns classes like Christina suggests. The only simple solution I've found was to change $screen-sm in _variables.scss to 595px and recompile bootstrap.css
So, find this code in _variables.scss:
$screen-sm: 768px !default;
$screen-sm-min: $screen-sm !default;
and change it to this:
// decrease min-width to fix print layout issue
$screen-sm: 595px !default;
$screen-sm-min: $screen-sm !default;
then in your _print.scss
#page {
size: A4;
margin: 0;
}
#media print {
html, body {
width: 768px;
}
body {
margin: 0 auto;
}
// .. your custom styles for print layout
}
Add This css style in your print.css file
#page {
size: A4;
margin: 40px;
}
#media print {
html,
body {
width: 210mm;
height: 297mm;
}
#-moz-document url-prefix() {}
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-smdm-12 {
float: left;
}
.col-sm-12,
.col-md-12 {
width: 100%;
}
.col-sm-11,
.col-md-11 {
width: 91.66666667%;
}
.col-sm-10,
.col-md-10 {
width: 83.33333333%;
}
.col-sm-9,
.col-md-9 {
width: 75%;
}
.col-sm-8,
.col-md-8 {
width: 66.66666667%;
}
.col-sm-7,
.col-md-7 {
width: 58.33333333%;
}
.col-sm-6,
.col-md-6 {
width: 50%;
}
.col-sm-5,
.col-md-5 {
width: 41.66666667%;
}
.col-sm-4,
.col-md-4 {
width: 33.33333333%;
}
.col-sm-3,
.col-md-3 {
width: 25%;
}
.col-sm-2,
.col-md-2 {
width: 16.66666667%;
}
.col-sm-1,
.col-md-1 {
width: 8.33333333%;
}
.col-sm-pull-12 {
right: 100%;
}
.col-sm-pull-11 {
right: 91.66666667%;
}
.col-sm-pull-10 {
right: 83.33333333%;
}
.col-sm-pull-9 {
right: 75%;
}
.col-sm-pull-8 {
right: 66.66666667%;
}
.col-sm-pull-7 {
right: 58.33333333%;
}
.col-sm-pull-6 {
right: 50%;
}
.col-sm-pull-5 {
right: 41.66666667%;
}
.col-sm-pull-4 {
right: 33.33333333%;
}
.col-sm-pull-3 {
right: 25%;
}
.col-sm-pull-2 {
right: 16.66666667%;
}
.col-sm-pull-1 {
right: 8.33333333%;
}
.col-sm-pull-0 {
right: auto;
}
.col-sm-push-12 {
left: 100%;
}
.col-sm-push-11 {
left: 91.66666667%;
}
.col-sm-push-10 {
left: 83.33333333%;
}
.col-sm-push-9 {
left: 75%;
}
.col-sm-push-8 {
left: 66.66666667%;
}
.col-sm-push-7 {
left: 58.33333333%;
}
.col-sm-push-6 {
left: 50%;
}
.col-sm-push-5 {
left: 41.66666667%;
}
.col-sm-push-4 {
left: 33.33333333%;
}
.col-sm-push-3 {
left: 25%;
}
.col-sm-push-2 {
left: 16.66666667%;
}
.col-sm-push-1 {
left: 8.33333333%;
}
.col-sm-push-0 {
left: auto;
}
.col-sm-offset-12 {
margin-left: 100%;
}
.col-sm-offset-11 {
margin-left: 91.66666667%;
}
.col-sm-offset-10 {
margin-left: 83.33333333%;
}
.col-sm-offset-9 {
margin-left: 75%;
}
.col-sm-offset-8 {
margin-left: 66.66666667%;
}
.col-sm-offset-7 {
margin-left: 58.33333333%;
}
.col-sm-offset-6 {
margin-left: 50%;
}
.col-sm-offset-5 {
margin-left: 41.66666667%;
}
.col-sm-offset-4 {
margin-left: 33.33333333%;
}
.col-sm-offset-3 {
margin-left: 25%;
}
.col-sm-offset-2 {
margin-left: 16.66666667%;
}
.col-sm-offset-1 {
margin-left: 8.33333333%;
}
.col-sm-offset-0 {
margin-left: 0%;
}
.visible-xs {
display: none !important;
}
.hidden-xs {
display: block !important;
}
table.hidden-xs {
display: table;
}
tr.hidden-xs {
display: table-row !important;
}
th.hidden-xs,
td.hidden-xs {
display: table-cell !important;
}
.hidden-xs.hidden-print {
display: none !important;
}
.hidden-sm {
display: none !important;
}
.visible-sm {
display: block !important;
}
table.visible-sm {
display: table;
}
tr.visible-sm {
display: table-row !important;
}
th.visible-sm,
td.visible-sm {
display: table-cell !important;
}
}
I had the similar problem. I ended up replacing all col-md-* with col-xs-* and it worked like a charm. Here is the exmaple code
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-md-9 text-center main-title col-md-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-md-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
converted to
<div class="container make-border" id="obaidrehman07">
<div class="row make-border">
<div class="col-xs-9 text-center main-title col-xs-offset-1">
<h4 class="heading-white"><strong>CONTRACT ACTION REPORT</strong></h4>
</div>
<div class="col-xs-0 pull-right"> <img class="img-responsive" src="<?=$base_url;?>assets/office_home/target/dd46a999e4f329f98e5b8df60e21e9ab.png" alt="" style="max-width: 110px;" /> </div>
</div>
</div>
I am having trouble using the Jquery removeClass functionality to disable a certain class. The class definition is given below
.btn-purple
{
background-color: #F1B2E1;
background-image: -moz-linear-gradient(top, #F1B2E1, #E986D0);
background-image: -ms-linear-gradient(top, #F1B2E1, #E986D0);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F1B2E1), to(#E986D0));
background-image: -webkit-linear-gradient(top, #F1B2E1, #E986D0);
background-image: -o-linear-gradient(top, #F1B2E1, #E986D0);
background-image: linear-gradient(top, #F1B2E1, #E986D0);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F1B2E1', endColorstr='#E986D0', GradientType=0);
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
}
.btn-purple:hover,
.btn-purple:active,
.btn-purple.active,
.btn-purple.disabled,
.btn-purple[disabled] {
background-color: #E986D0;
}
In the javascript file I have the following
$(function(){
$("#1").click(function(){
$("#1").removeClass("btn-purple", 1000);
return false
});
});
And here is the HTML markup for the section I wish to remove the class definition from
<div id="1" class="span3 well homeBox opaque btn-purple">
<span class="siteBoxContent">What do we do?</span>
</div>
And here is the error I'm getting while debugging in the Webkit Error Console
TypeError: 'undefined' is not an object (evaluating 'fx.end[0]') jquery.effects.core.js:32
If I try to remove a class like 'homeBox', the removeClass works fine. Here is the definition for the homeBox class definition
.homeBox
{
position:relative;
width:26.666666666667%;
height:200px;
}
So I'm guessing jQuery may have a problem with removing classes which have background-image, colour or even the filter attributes. If you require any more information, please let me know. Thanks in advance for your help.
Use:
$("#1").removeClass("btn-purple");
Instead of:
$("#1").removeClass("btn-purple", 1000);
since there is not second argument available for it and 1000 doesn't make any sense there.
Two possible signatures of it are:
.removeClass( [className] )
.removeClass( function(index, class) )
More Info:
http://api.jquery.com/removeClass/
You use a function signature that doesn't exist:
removeClass("classname", integer) // WRONG
There's no such possibility in JQuery AFAIK, you can do:
.removeClass( [className] )
.removeClass( function(index, class) ) // from version 1.4
I don't understand what 1000 stands for, but I bet that removing it should fix the issue.
I'm trying ckeditor, but I can't set the toolbar location to the bottom (by default it is set to the top).
I read the documentation, and I wrote this snipet in config.js file:
CKEDITOR.editorConfig = function( config )
{
config.toolbarLocation = 'bottom';
}
In config.js I have defined a toolbar and config.toolbarLocation = 'bottom' then I call ckeditor in this mode:
CKEDITOR.replace('editor', { toolbar : 'Full' });
Did I foget something else? It doesn't work. I see only textarea without toolbar (the toolbar at the top disappears).
Can you help me, please?
I guess it is priority to be covered. Try this:
CKEDITOR.replace('editor', { toolbar : 'Full', toolbarLocation : 'bottom' });
In Ckeditor 4 they have option to move toolbar to bottom but not in Ckeditor 5.
Check configuration table here
So, I did the CSS tweak.
Add a parent class to parent div of Ckeditor element and then add these:
1. Using flex-direction to flip order of toolbar and editing area:
.ck.ck-reset.ck-editor {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column-reverse;
-moz-flex-direction: column-reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse
}
2. Assign less height to Toolbar and more to edit area:
.ck.ck-editor__main>.ck-editor__editable {
height: 200px;
}
.ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar,
.ck-sticky-panel__content {
height: 54px;
}
2. Remove shadow and outline when focusing on edit area (optional, only if you want):
.ck-focused, .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
border: none;
border: none;
outline: none !important;
-moz-outline: none !important;
-webkit-outline: none !important;
-ms-outline: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none
}
try this code :
CKEDITOR.replace('editor1', {
/*
* Ensure that htmlwriter plugin, which is required for this sample, is loaded.
*/
// extraPlugins: 'htmlwriter',
toolbarLocation: 'bottom',
height: 200,
width: '100%',
toolbar: [
['Bold', 'Italic', 'Underline', '-', 'BulletedList', '-', 'Link', 'Unlink'],
['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['TextColor']
]});
use this :
.ck.ck-editor {
display: flex;
flex-direction: column-reverse;
}